昨年までは、ディレクターとしてワイヤーフレーム（構成案）を書く時は「Powerpoint」、デザイナーとしてWEBデザインを制作する時はPhotoshopでデザインをしていましたが、会社で「Sketch」もしくは「XD」に移行しようという話がでたため、どちらも使用してみました。
「Windowsユーザー」である私は、SketchはMacで使用する必要があるため、少し触ってはみたものの途中で断念…。それからというもの、XDを導入しています。
とはいうものの、案件対応に追われており、あれから1年も経つというのに、全くXDでの成長がなく…
時短＆効率化を図るための下準備ができていないので、ここにストックしていくことで、瞬殺で仕事ができるXDレベルへと成長すべく、現場で役立つ情報を書き溜めていこうと思います。
XD時短テク１｜同じデザインはリピートすべし
デザインを作っていると、1個のデザイン（レイアウト・要素）を、そのまんま繰り返して使いたい場面が往々にしてあります。何個もコピペするのは面倒だけど、やるしかないから何度もコピペして、余白調整して…
そんな手間が不要になる時短テク「リピートグリッド」。
同デザインを繰り返せる「リピートグリッド」の手順
リピートグリッドは、同じデザインをコピペすることなく繰り返すことができる便利な機能です。
- まずは、デザイン（レイアウト・要素）を作成
- 次に、画面右側の「プロパティインスペクター」の「リピートグリッド」ボタンをクリック
ポイントデザイン要素を選択した時点ではラインが水色ですが、リピートグリッド機能がきちんと使えている場合は、線が黄緑の点線に変わるので、その点を参考にしてください。 - 後は、枠を増やしたい大きさまで伸ばせばOK！
なので、こまめに保存（［Ctrl］+［S］）することをオススメします。
XD時短テク２｜テキストの差替えは一括変換で瞬殺対応
ページが多くなった時に大変な、テキストの流し込み作業。
クライアントからもらったテキストを、何も考えずにただ流し込めたらいいのに…
そんな時に効率的にテキストを流し込める時短テク。
ダミーテキストを一括で変更できる「一括テキスト変換機能」
前述したリピートグリッド（時短テク１）を使い、同要素のデザインレイアウトを反映した後、以下の手順で対応を行えば、テキストを一括で変換することが可能です。
- リピートグリッド（時短テク１）でデザインを行う
- txtファイルに必要なテキストを入力しておく
ポイントtxtファイルを作る際は、表示させたいテキストの要素ごとで改行しておきましょう。 - １で作ったデザインのテキスト部分へ、２で作った「txtファイル」をドラッグ&ドロップするだけでOK！
XD時短テク３｜画像の差替えも一括変換が可能
時短テク３のように、画像も沢山かえるのが多くなった時に大変な、テキストの流し込み作業。
クライアントからもらったテキストを、何も考えずにただ流し込めたらいいのに…
そんな時に効率的にテキストを流し込める時短テク。
ダミーテキストを一括で変更できる「一括テキスト変換機能」
前述した一括テキスト変換機能（時短テク３）を使い、画像も一括で変換することが可能です。手順は、3番目をのテキストをドラッグ&ドロップする部分で、画像をドラッグ&ドロップに変えるだけです。
念の為、以下へ記載しておきます。
- リピートグリッド（時短テク１）でデザインを行う
- 必要な画像を用意しておく
- １で作ったデザインの画像部分へ、２で用意した「画像たち」をまとめてドラッグ&ドロップするだけでOK！