XDをもっと使いこなすためのTips
- 公開日：
先日のCC道場で紹介されていたTipsをまとめました。
放送のアーカイブはこちらから見られます ▼
#252 Adobe XDやろうぜ！もっと使いこなすヒント
Adobe Blogで連載されている「Adobe XDをもっと使いこなすヒント！」はこちら ▼
https://blogs.adobe.com/japan/serialization/web-xd-protips/
レイアウトグリッドの見た目を調整
レイアウトグリッドの不透明度を0にすることでグリッドのアウトライン表示になります。
色がついた状態だとデザインのときに邪魔になったり、スポイトで色を取るときにグリッドの色を取ってしまったりと少々使いづらい面もありますが、アウトライン表示にしておくとガイドのように使えるので便利ですね。
また、レイアウトグリッドを表示しているとオブジェクトを動かすときにグリッドに吸着しますが、微調整したいときにはCmdキーを押しながら動かすことで吸着せずに自由な位置に配置することができます。
Adobe XDをもっと使いこなすヒント！ 第1回 レイアウトグリッドの見た目を調整 – Adobe Blog
シェイプの回転とスタイルのコピー
オブジェクトをコピーして、別のオブジェクトに「アピアランスをペースト（Cmd + option + V / Ctrl + Alt + V）」するとコピー元のオブジェクトのアピアランスがペーストされます。
テキストの場合は塗りの色だけがペーストされますが、テキストをアウトライン化している場合は塗りと線がペーストされます。
パス化されたオブジェクトに対してペーストすると、塗りと線のみがペーストされます。
配置したオブジェクトに画像をはめ込むことがあると思いますが、画像をはめ込む前の状態に戻したいときは、「塗り」を変更することで元のオブジェクトに戻すことができます。
レイヤーの不透明度を変更する場合、数字を入力すれば不透明度を変更することができます。
「5」と打てば50％に、「3」と打てば30％になります。
75％などにしたい場合は「75」と打つことで変更できます。
100％にしたい場合は「0」、0％にしたい場合は「00」と打てばOK!
これはPhotoshopでも同じですね。
Adobe XDをもっと使いこなすヒント！ 第10回 シェイプの回転とスタイル（とインタラクション）のコピー – Adobe Blog
レスポンシブリサイズの特徴をつかむ
レスポンシブリサイズを利用してサイズを変更する際、中のオブジェクトまでレスポンシブにしたくない（中のオブジェクト間の幅は変えたくない、など）場合は、中のオブジェクトをグループ化しておくことで、中のオブジェクトには影響せずにリサイズすることができます。
また、オブジェクトの大きさは変更したいけどレスポンシブリサイズの機能はいらないというときは、Shiftキーを押しながら変更することでレスポンシブリサイズの機能が無効になります。
Adobe XDをもっと使いこなすヒント！ 第15回 レスポンシブリサイズの特徴を掴む – Adobe Blog
リピートグリッドを使って簡単レイアウト
リピートグリッドで作ったデザインに後から要素を追加したい場合は、リピートグリッド内をダブルクリックして編集モードにしてから追加したい要素を配置すれば追加することができます。
リピートグリッド内の要素をレスポンシブリサイズで変更する場合、ダブルクリックで要素を選択した後にCmd + A / Ctrl + Aを押すと基準のグループ内のみの全選択になるので、その状態でサイズを変更することでレスポンシブリサイズを使ってリサイズすることができます。
Adobe XDをもっと使いこなすヒント！ 第15回 レスポンシブリサイズの特徴を掴む – Adobe Blog
固定要素の重なり順
ヘッダーなど、固定したい要素がある場合はプロパティインスペクタの「要素を固定」にチェックを入れるとプレビューやプロトタイプで固定表示ができます。
このとき、レイヤーが他の要素の下にあるとスクロールしたときに他の要素で隠れてしまうので、固定した要素のレイヤーやグループは上に移動させておきましょう。
また、スマホのナビゲーションなどオーバーレイを設定した場合、オーバーレイはすべての要素の上に表示されるため、固定要素をオーバーレイの上に表示させることはできません。
Adobe XDをもっと使いこなすヒント！ 第5回 固定要素の重なり順 – Adobe Blog
プロトタイプモードでのワイヤーのコピーと削除
デザインモードとプロトタイプモードでコピー＆ペーストの挙動が異なります。
画面遷移のワイヤーごとコピーしたい場合は、コピー元をプロトタイプモードにした状態でコピーしてからペーストすることでワイヤーもそのままコピーすることができます。
コピー元がデザインモードの状態でコピーするとワイヤーがすべて外れた状態でコピーされます。
ワイヤーを一度すべて削除したい、という場合にはその性質を利用して、デザインモードの状態でカットしてからペーストすることで、ワイヤーをまとめて外すことができます。
Adobe XDをもっと使いこなすヒント！ 第7回 プロトタイプモードでのワイヤーのコピーと削除 – Adobe Blog
タイマートランジションとパネルの設定項目
タイマートランジションの設定ができるのはアートボードに対してのみです。
なので今のところは要素を選択した場合にはトリガーの設定にタイマートランジションが出てきません。
今後、シンボルが進化すれば要素に対してもタイマートランジションの設定ができるようになるようなので、対応を待ちましょう。
Adobe XDをもっと使いこなすヒント！ 第13回 タイマートランジションとパネルの設定項目 – Adobe Blog
自動アニメーションの基本技
アニメーションを設定する場合には、レイヤー名を同じにしておく必要があります。
番組では簡単なカルーセルの作り方やかっこいいアニメーションも紹介されていたので番組のアーカイブでチェックしてみてください。
Adobe XDをもっと使いこなすヒント！ 第19回 自動アニメーションの基本技 – Adobe Blog
まとめ
Adobe XDにもたくさんのTipsがあります。
これらを覚えておけばさらにXDでの制作が捗りますね。
Adobe BlogやTwitterで情報が発信されていますので、ぜひチェックしてみてください！