こんにちは。デザイナーのちかです。
今まで何度かAdobe Xdについてご紹介しており、徐々にXdを社内の制作環境に導入されていらっしゃるWeb制作会社の方も増えてきたかと思います。
私も本格的にXdを業務に導入していくにあたり、細々と「Xdでこれはどのように実装できるんだ…？」ということが意外に増えてきました。
その度に検索してやり方を調べていましたが、折角ですので今回はその調べた機能についてをまとめさせていただきました。
制作される際に参考になれば嬉しいです。
■ハートマークを作る
ワイヤー・デザインを作成する上で意外と必要になる、多角形ツール。
その中で、Xdには表には正式に出ていないイースターエッグ的な機能で、簡単にハートのカタチを作ることが出来るのでご紹介します。
手順１
三角形ツールで適当に図形に作成
手順２
画面右の設定の「コーナーカウント」の箇所に「<3」と入力。
上記だけで、簡単にハートを作ることが出来ます。
簡単だけど地味に助かる機能だと思いますので、覚えておいて損はないと思います。
■アートボードを簡単移動
これは私も勉強不足で知らなかったのですが、とても便利です。
手順１
移動したいアートボード内のなにも配置していない部分を、Ctrlを押しながらクリック
手順２
そのままドラッグ（移動）させる
■ページ内リンクを設定する（ヘッダー固定の位置ズレ解消）
これを知るまではアートボードの名前をクリックしないと動かせないのかな？と思っていたのですが、これは便利です。
これも基本機能ではあるのですが、調べないと方法が分からなかったので記載させていただきます。（ヘッダーを固定していると位置ズレが発生してしまうため、それの解消法も記載いたします）
手順１
プロトタイプ画面にて、リンクさせたいボタンからリンクさせたいページ内の箇所に配置している、オブジェクトまでドラッグ
手順１-２（ヘッダー固定の場合）
ヘッダー固定の場合、上記のままだと固定しているヘッダーの高さ分位置ズレが発生してしまう。その場合以下の設定を追加する必要がある。
リンクを設定するボタンを選択した状態で、画面右に表示される設定画面の中の「Y-オフセット」の箇所に、ヘッダーの高さをマイナス数値で入力。
（【例】ヘッダーの高さが130pxの場合、「-130」と入力）
以上となります。
今回はAdobe Xdを使い始めたばかりの人には意外と知られていない、便利な機能をご紹介いたしました。
まだAdobe Xdについて、意外と知らない機能はまだまだあると思いますし、便利なプラグインも豊富にありますので、そちらについてもいつかご紹介したいと思います。
ご参考になれば幸いです！