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

WEB

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

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

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

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

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

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

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


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

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

WEB
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました