Adobe XDのアセット・コンポーネントを使って楽&簡単Webデザイン!

Pocket

こんにちは、藻です。

今回のテーマは「Adobe XDのアセット・コンポーネントを使って楽&簡単Webデザイン!」です。

プロトタイプを作成する中でこのボタンや色何度も使うな…毎度コピペめんどくさいな…これ色だけまとめて変えたりできないかな…一括して変えたいよ…といった悩みに直面することはUIデザインに関わる方やXDユーザーにとって少なくはないはずです。
デザインをする上で統一感は重要です。なるべく同じものは同じように使いまわしたりしたいところ。

そこでかなりこれは使える…と思ったXDの機能、アセット機能をご紹介します!案外アセット機能の使い方がうまくわからないという方もいるのではないでしょうか。(私が最初はそうだったため笑)
初心者向けで簡単かつ、これさえできれば活用しまくれるかと思いますので是非お試しを。


アセット機能とは?

まず、簡単に言えば「使う色やボタンの設定を保存しておける機能」です!こんな感じにフォントやグループ化したオブジェクトに対して【右クリック】→ぽちぽち【追加】していくだけでアセットパネルにまとまってくれます。

開くにはワークスペース左下にある、一番上のアイコンを選択してください。

使う文字スタイルやカラー、ボタンを予め作成して登録しておくとかなり楽に、美しいデザインができるようになります。ばらけさせずに統一感のあるデザインに役立ちますよ。デザインガイドとして登録するのもいいですね。
毎度フォントサイズを確認したりする手間も省けます。なんと文字は色設定も込みで登録できます。
ちなみにボタンやヘッダーといったかたまりを登録する場合はコンポーネントを選びましょう。もちろんメイン以外のコンポーネントは文字やカラーを変更するのも個別に変更したり打ち換えるのみなので簡単です。


コンポーネントを整理しよう

中でも少しややこしいアセットの設定はコンポーネント。おすすめは都度登録するのではなく、一枚コンポーネント用のアートボードを用意することです。これで開発側にも親切に作れる上になんといってもまとめて管理ができるようになります。このおおもとの素材ってどれだ…?という手間を省けます。
サンプルはこんな感じですね!今回実際に作成したアセット用アートボードです。


コンポーネントの登録のコツ!

まず直面するかもしれないミスはこちら。よし!コンポーネントを登録したぞ~とウキウキで使おうと文字を打つとうまくいかない悲しい事態。

そんなこんなで作成したアセットパネルからドラッグアンドドロップ、あるいは適応させたいものをクリックしていくだけであっという間にルールを守った画面を作っていけます!やはり統一感があると美しく見えますね。

今回は花をイメージから贈ることのできる架空のサービスを作っています笑


アセット機能を使った簡単一括修正!

やっぱりフォントを変えたい…メインカラーを変えたい…ボタンの形が気に食わない…とデザイン中に修正が入ったり苦しむことはデザイナーにありがちです。
しかしXDでアセット機能を活用していればそれも一瞬で対応できます!
まず、コンポーネントを編集したい場合はメインコンポーネントを選択しましょう。ここでアセット一覧に並べておくとかなり探す手間が省けますが、もし見失ったら該当するコンポーネントをクリックしたのち、右のプロパティから鉛筆マークを押しましょう。メインのパーツに飛んでくれますよ。
今回は例えばボタンの角をとる修正をしました。すると該当するコンポーネントもまとめて一緒に変更されていきます。色やフォントまで合わせて変えることができます。

また、カラーの変更とフォントの変更も簡単です。ここではメインに使っているカラーであるピンクをグリーンに変更してみます。
左のアセットツールから変更したいアセットを選択して【右クリック】→【編集】を選択しお好きなカラーをピックするだけです。

これでまとめて変わっている様子を見ながら調整できます。一括でできてしまうのはかなり強みですね!


おわりに

ここまでアセット機能がどのようなもので、簡単かつうまく活用する方法をご紹介しました。
慣れてくるとこれなしで作れないくらいには便利なものです。人への共有や修正をする案件であればなおさら活用していきたいですね(*^_^*)XDを使う人はぜひぜひ試していただけたらと思います!
以上、最近暑さに負けつつある藻でした。

Pocket