- ゲームディレクター
- マイクロサービス推進エンジニア
- 事務/サポート/アシスタント
- 他47件の職種
- 開発
-
ビジネス
- ゲームディレクター
- Webディレクター
- 運用ディレクター
- アプリ開発ディレクター
- Webディレクター
- 営業事務
- データ登録
- FP&A 経営企画 メンバー募
- 同人営業
- コンテンツ営業|版元営業
- コンテンツ営業|電子書店営業
- コンテンツ獲得営業、企画営業
- 自社ECサイトの運営責任者候補
- ゲームソフト販売の企画運営
- セールス・事業開発
- オープンポジション
- Webマーケティング(新卒)
- Webマーケティング
- データアナリスト
- メールマーケティング
- メールマーケティング担当
- CRMマーケティング
- グロースハッカー
- 広告 グロースハッカー
- デジタルマーケティング
- 漫画編集アシスタント
- 漫画編集アシスタント 制作進行
- WEBTOON編集
- 漫画編集
- その他
Adobe XD コンポーネントを使った時短テクニック
みなさん、Adobe XDを使っていますか?
エイシスのデザインチームではWebデザインのプロトタイプを作る際によくAdobe XDを使用しています。
「プロトタイプ」モードで、作ったデザインにアクションやインタラクションを設定すれば、画面遷移などのシミュレーションが簡単にできます。便利ですよね。
例えばこういうメニューを作成して
それぞれにインタラクションを設定して…
別のぺージのメニューも設定して…
さらに別のページの…
……めんどくさい!!
ということにならないための機能「コンポーネント」のご紹介をしたいと思います。
コンポーネントとは
ボタンなど、UIのデザインのひな形のことです。1タッチで呼び出せて使いまわすことができます。
オブジェクトを選択して右クリック、「コンポーネントにする」を選択すると
選択したオブジェクトがコンポーネント化されます。コンポーネント欄に追加されたコンポーネントはボード上にドラッグ&ドロップで呼び出すことができます。
メインコンポーネントとインスタンスとオーバーライド
登録した大元のコンポーネントをメインコンポーネント、それを使いまわしたりコピーしたりしたものをインスタンスと呼びます。そしてインスタンスのプロパティを個別に編集したものをオーバーライド(上書き)といいます。ややこしいですね。
メインコンポーネントのプロパティを編集した場合、すべてのインスタンスに反映されます。個別にプロパティを編集しているオーバーライドには反映されません。
メインコンポーネントのインタラクションもインスタンスに反映される
ここがポイントです。
さきほどメインコンポーネントに編集を加えるとすべてのインスタンスに反映されると書きましたが、色やレイアウトの見た目だけでなく、インタラクションも反映されます。
冒頭で、めんどくさくなって投げ出したメニューのインタラクション設定も、コンポーネントを使えば楽に行うことができます。
メインコンポーネントのメニューにそれぞれインタラクションを設定し、
コピーして設置すると…
あら不思議
すべてのメニューにインタラクションが適切に設定されています!
最初の苦労はなんだったんだ…。
まとめ
今回はAdobe XDのコンポーネント(メインコンポーネント、インスタンス、オーバーライド)についてご紹介させていただきました。
コンポーネントをうまく使うことで大きな時短に繋がるのでぜひ活用していみてください。
次回はこのコンポーネントの便利な機能の1つ「ステート」についてご紹介したいと思います。
エイシスでは新サービスを立ち上げています!
株式会社エイシスでは、秋葉原から世界へ二次元コンテンツを共に盛り上げていく仲間を募集しています。
「新サービスを立ち上げていきたい!」
「新しいサービスのデザインに携わりたい!」
などなど、デザインチームの仕事やエイシスの社風に興味をお持ちいただけた方がいましたら是非お気軽にご応募くださいませ。