今までAdobe XDで様々な物を再現してきましたが、タブを作っていませんでしたね。作り方はとてもシンプルになります。今回はこのような物を作っていきます。タブをクリックするとそれぞれの文が表示される要素を作っていきます。数分あればできるので一緒に作っていきましょう!
タブの作り方
本体作成
先ずは長方形を使ってタブの付いた本体を作っていきます。パスファインダーを使って2つの長方形をこのようにくっつけましょう。2つの図形を選択すると右側のタブで選択できるようになります。
わかりやすく枠線を引いています。
あとはこのように本文とアクセントを足して見やすくしましょう。説明のために本体の色を少し濃い目にしています。みなさんは好きな色にしてください。
初めの動画内の本体には影が少しだけ付いていたと思います。下のように軽い影をつけて上げましょう。
不透明度を少し下げました。なぜかというと、これから3つの本体を重ねるので影が濃くなってしまうので薄い影にしました。
3つのステートを作成
右側のコンポーネントでステートを追加しましょう。あとはガイドを活用して、タブをズラします。
タブを合計3つ作りましょう。
ガイドの出し方はこちらでご紹介しています。
選択されていないタブのステートを作成
次は選択されていないタブのステートをもう3つ作ります。タブの文字の色を薄くして、アクセントの不透明度を0%にしました。
下のように一つのコンポーネントにまとめてしまえば編集が簡単になります。
あとはこれらの要素を3重ねて並べていきます。
複製して3つとも並べる
このように2つ更に複製して、さらにステートをそれぞれ変えて重ねます。これらの要素が並んでると思ってもらえれば良いです。
アートボードを複製して3つのバージョンを作る
本来は1つのコンポーネントでコンパクトにまとめようと考えていたのですが、うまく行かなかったのでアートボードを複製して作るアニメーションにしていきます。もしわかる方がいたら、教えてください。
このようにアートボードごと複製します。それぞれは下のようにレイヤーの位置やステートを変更しています。レイヤーの順番がわかりやすいように、上に番号を振っています。
あとはプロトタイプでそれぞれつなげるだけです。
プロトタイプ作成
タブの文字をクリックしたら別のタブに移動するように設定します。 アニメーションはタップとトランジションです。
これで完成です。確認してみましょう。
他にもAdobe XDのチュートリアルをご紹介しているので、チェックしていってください!
ではまた!
未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
▼Adobe XDおすすめの本