XDの機能をどれくらい知っていますか?実際のサイトのように動きを付けることや、より作業を早くできる機能も多くあります。「実は」これもできる!そんな便利機能をご紹介します!1.リピートグリットリピートグリットとは、『繰り返したい要素を簡単に作成』できる機能です。同じ要素を複数並べたいときはありませんか?例えば上のような画像が並んでいる画面を作成する際、何回も同じサイズの図形を作成したり、一番最初に作成した図形を何度もコピペしたり……そのやり方よりも、もっと簡単な方法が「リピートグリット」です。作成方法①繰り返したい要素を選択し、右側のプロパティからリピートグリッドを選択します。②すると緑のハンドルが出てくるので、緑のハンドルを伸ばすと選択した要素が繰り返されます。このやり方で楽に作業を進めることができます!2.コンポーネントコンポーネントとは、作成した物を『見た目が同じで繰り返し使用できる要素に』する機能です。XDでデザインを作成しているときに、ボタンなどの何か所にもわたって同じものを使用することがあると思います。ボタンの背景の色や、日本語から英語表示に変更したいときに一つ一つ変更していませんか?そんな時に便利なのがコンポーネントです。ファイル内にデータを保存してコピペしなくても何度も使用でき、「マスターオブジェクト」と呼ばれる大元のオブジェクトに編集を行えば複数のオブジェクトを一括で編集することができます。作成方法①作成したオブジェクトを選択。②選択したオブジェクト上で右クリックし、「コンポーネントにする」を選択。③選択したオブジェクトをコンポーネントにすると、上記の画像のように選択した際の枠の色が変わります。④アセットパネルからコンポーネントをドラック&ドロップするとインスタンスオブジェクト(複製されたもの)が作成されます。この際、マスターのオブジェクトを編集すると、インスタンスオブジェクトも編集されます。※アセットパネルからではなく、マスターオブジェクト自体をコピー&ペーストしてもインスタンスオブジェクトを作成することができます。3.プロトタイプの作成プロトタイプはサイトを実際にHTMLで作成したときのような『画面遷移を再現』することができる機能です。ページの作成を行った際に実際の動作を付けたら、どんな動きをするサイトなのか説明しやすいのではないかと思ったことはありませんか?実はXD上で本当のサイトのような動きを付けることができます。例えば、特定のボタンをクリックしたときに別のページに遷移するなどです。作成方法画像右上にある「プロトタイプ」を選択し、アートボード上にあるボタンやリンク等をクリックし選択してください。どのアートボードに遷移するかをドラック&ドロップで選択します。これで実際にボタンやリンクを操作したときの動きを再現できます。4.スタックスタックは『要素の順番を入れ替え、余白などを自動で調節』することができる機能です。XDはオブジェクトごとの余白を表示して、調節しやすくしてくれていますが、ひとつずつ調節するのではなく一括で全部を調節したいと思ったことはありませんか?そんな時に便利な機能が「スタック」です。要素の順番を入れ替えるときも余白を調節された状態で入れ替えることができます。作成方法調節したいオブジェクトをまとめてグループ化し、選択。グループを選択した状態で、右側のプロパティから「スタック」にチェックを入れる。スタックにチェックを入れたグループのフォルダの順番を入れ替えるか、グループ内にあるオブジェクトをそのままドロップして移動させる。オブジェクト同士の余白を保ったまま移動させることができる。まとめ他にも、マウスホバーの動きを作成することができます。XDは色々なことのできるソフトなので、ぜひ調べてみてください!