ブログ
デザイン

意外と知らない?!Xdの便利基本機能

2020-05-20

こんにちは。デザイナーのちかです。
今まで何度かAdobe Xdについてご紹介しており、徐々にXdを社内の制作環境に導入されていらっしゃるWeb制作会社の方も増えてきたかと思います。

私も本格的にXdを業務に導入していくにあたり、細々と「Xdでこれはどのように実装できるんだ…?」ということが意外に増えてきました。

その度に検索してやり方を調べていましたが、折角ですので今回はその調べた機能についてをまとめさせていただきました。
制作される際に参考になれば嬉しいです。

■ハートマークを作る

ワイヤー・デザインを作成する上で意外と必要になる、多角形ツール。
その中で、Xdには表には正式に出ていないイースターエッグ的な機能で、簡単にハートのカタチを作ることが出来るのでご紹介します。

手順1
三角形ツールで適当に図形に作成

手順2
画面右の設定の「コーナーカウント」の箇所に「<3」と入力。




上記だけで、簡単にハートを作ることが出来ます。
簡単だけど地味に助かる機能だと思いますので、覚えておいて損はないと思います。

 

■アートボードを簡単移動

これは私も勉強不足で知らなかったのですが、とても便利です。

手順1
移動したいアートボード内のなにも配置していない部分を、Ctrlを押しながらクリック

手順2
そのままドラッグ(移動)させる

 

■ページ内リンクを設定する(ヘッダー固定の位置ズレ解消)

これを知るまではアートボードの名前をクリックしないと動かせないのかな?と思っていたのですが、これは便利です。

これも基本機能ではあるのですが、調べないと方法が分からなかったので記載させていただきます。(ヘッダーを固定していると位置ズレが発生してしまうため、それの解消法も記載いたします)

手順1
プロトタイプ画面にて、リンクさせたいボタンからリンクさせたいページ内の箇所に配置している、オブジェクトまでドラッグ

手順1-2(ヘッダー固定の場合)
ヘッダー固定の場合、上記のままだと固定しているヘッダーの高さ分位置ズレが発生してしまう。その場合以下の設定を追加する必要がある。

リンクを設定するボタンを選択した状態で、画面右に表示される設定画面の中の「Y-オフセット」の箇所に、ヘッダーの高さをマイナス数値で入力。
(【例】ヘッダーの高さが130pxの場合、「-130」と入力)

 

以上となります。
今回はAdobe Xdを使い始めたばかりの人には意外と知られていない、便利な機能をご紹介いたしました。

まだAdobe Xdについて、意外と知らない機能はまだまだあると思いますし、便利なプラグインも豊富にありますので、そちらについてもいつかご紹介したいと思います。

ご参考になれば幸いです!

一覧へ戻る

Contactお問い合せ

その悩み、プラソルに
相談してみませんか?

制作に関するご質問、お見積もりに関することなど、
お気軽にお問い合わせください。

お問い合せ・お見積もり

お電話でのお問い合せも受け付けております。
お気軽にお問い合せください。

06-6441-3341受付時間:平日9:00~18:00