BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. ウェブサービス
  5. XDべんり機能メモ(基本編)
by たなか たなか

XDべんり機能メモ(基本編)

いつも大変お世話になっております。たなかです。このくらいの季節が一番ぼんやりしますね。

いままでカンプやサイト構成を考えるときもPhotoshopを使っていたんですが、XDを使い始めました。フォトショだとアートボードを複数置くともっさり動いたり、固まったり、レイヤーの整理を失敗すると非常に面倒なことが起こったりしていたのですが、XDだとシンプルかつサクサクで大変助かっております。

しばらく使ってみて『おぉぉ・・!』となった機能をピックアップして紹介してみたいと思います。

もくじ

  • コンポーネント機能が便利!
  • 画像を複数セットするのが一瞬でできる!
  • プロトタイプで説明しやすい!

コンポーネント機能が便利!

ボタンを例にご紹介します。今までは、ボタンをつくってグループ化しておいたものをコピペして増やしていましたが、これだとボタンの中に入れる文字が変わったとき全部書き直す必要がありました・・。

しかし!マスターコンポーネントとしてセットしておけば、マスターを変更するだけで全部のアートボードに反映されてくれます。

アートボードの中につくったボタンを右クリック(またはctrl+k)でコンポーネント化するとコンポーネントとしてボタンが追加されました!

コンポーネント化したあとは、ホバー時のデザインを設定しておくと、プロトタイプで見たときに動きがよりわかりやすくなります。

再びこのボタンを使いたいときはアセットパネルのコンポーネントから、ドラック&ドロップで置くことができます。WFやデザインが進んでいって、たくさんボタン使いまくったころに、「ああぁ~カタカナじゃなくて英語で書いとけばよかった~~!」みたいなことになるじゃないですか。

この「マスターコンポーネントを編集」がとってもありがたいのです。クリックすると、マスターになっているボタンにスッと移動します。右パネルで「◆初期設定のステート」になっていることを確認して、文字の部分を書き換えると・・・

あとはなにもしなくても、どのアートボードに置いていようとも、勝手に書き換えてくださるのです!ありがとう!ありがとう!!

画像を複数セットするのが一瞬でできる!

よくあるメニュー表や手順表を作る時に画像を同じ枠でマスクして並べたいとき、これがとても素早くできます!

まず想定するサイズを用意して、右パネルの「リピートグリッド」をクリックして…

下でも横でも、写真が入る場所の方向にドラッグしてあげると枠が増えていきます。
この枠に入れたい写真を選択して、先頭の枠に近づけると

コピーとでますので、ドロップします。すると!

フォルダの格納順にのっとって、写真がいいかんじにマスクされました!

タイトルやキャプションもリピートグリッドを使えばさくっとできます。事前にメモ帳に書き出しておいて、リピートグリッドで「タイトル枠」とかいたテキストを下へ伸ばして、必要な数つくります。

写真の時と同じように、メモ帳を「タイトル枠」へドラッグ&ドロップしてあげると、下記のようになります!

これだと文字が読めないので、右パネルから「グリッドをグループ解除」してあげると緑色の点線から青の実線に変わり動かせるようになります。

あとは写真の位置に合わせて調整してください。長いキャプションも、メモ帳に書き出す際に1キャプションごとに改行を入れることで一気にテキスト情報を反映させることができます。まあメモ帳に書き出す方がめんどくさい時もあるけれど・・・

プロトタイプで説明しやすい!

「このボタンを押したらこのページに移って、このボタンを押したらこのページに戻って・・」とかデザイナーさんにもお客様にも口頭で説明させてもらっていたのですが、この機能があれば途中で混乱することもなくなります!

ワークスペースを「プロトタイプ」に切り替え、事前に作っていたアートボード上の写真、イラスト、図形、テキストをクリックすると青い枠で囲われたこんな表示になります。

この青いまるをドラッグすると矢印が伸びるので、遷移先の画面を選択し、配線しておきます。今回はキノコをひなまつりに、buttonを雪だるまに、テキストをねこちゃんに配線してみました。

配線が出来上がったら、ワークスペースを「共有」に変えてリンクを作成します。右メニューから「リンクを更新」をクリックして、リンクを作成。できあがったリンクがこちらです!

つくったあと、「ひなまつり終わっちゃってるし何かに変えたいな・・」と思ったとしたら、XDファイル上で変更をして、「共有」ワークスペースの「リンクを更新」すると、新しいURLをつくることもなくこっそりと変更もできるのです!

他にもたくさん便利な機能を小耳にはさんでおります、XD!!!
もっと使いこなしてまたご紹介したいです。以上です!!

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング
ページの先頭に戻る