【超簡単】XDのコンポーネントでタブ切り替えを表現

Creative

今回はAdobeXDでWEBサイトに良くあるあるタブで切り替える要素を表現する方法を分かりやすく紹介します。
WEBサイトでは結構ある要素なので、XDで表現できると便利な場面もあるので基本的な部分は頭に入れておきましょう。

XDでタブ切り替えを表現する方法

①まずは下記の様にボタンを押した後のデザインを各所用意します。各ボードのデザインは全てグループ化しておきます。
(今回は分かりやすくするために下記の様な非常にシンプルなデザインをもとに説明します。)

次に「タブ1」「タブ2」「タブ3」のボタンになる部分3箇所のグループをコンポーネントにします。

プロトタイプに移って、各ボタンに対応したクリップボードに繋げます。
これを全てのボード、全てのボタンで繋げ合います。
これで完成です。

実際にプレビューで見てみるとクリックでタブ切り替えが出来る様に見えます。
これにデザインを加えて、応用すれば以下の様にWEB上にあるタブ切り替えの要素を表現する事が出来ます。

ちなみに、上記のタブ切り替えのデータは以下からダウンロードする事が出来ます。
コンポーネントの入れ方や、デザインの作り方が理解出来ます。


以上が「今回はAdobeXDでWEBサイトに良くあるあるタブで切り替える要素を表現する方法を分かりやすく紹介します。」でした。

2020年8月19日Creativedesign,Reference,XD

Posted by KT