【XD】「タブ切り替え」の作成方法
①ボタン（TAB_01） 角丸：10、0、0、0 ドロップシャドウ：X2、Y5、B10 ②ボタン（TAB_01）上部の線（ピンク色） 角丸：10、0、0、0 ③ボタン（TAB_02） 角丸：0、0、0、0 ドロップシャドウ：X2、Y5、B5 ④ボタン（TAB_03） 角丸：0、10、0、0 ドロップシャドウ：X2、Y5、B10 ⑤コンテンツ 角丸：0、0、10、10 ドロップシャドウ：X2、Y5、B5
■TAB_02表示画面①ボタン（TAB_01） 角丸：10、0、0、0 ドロップシャドウ：X2、Y5、B5 ②ボタン（TAB_02） 角丸：0、0、0、0 ドロップシャドウ：X0、Y5、B15 ③ボタン（TAB_02）上部の線（ピンク色） 角丸：0、0、0、0 ④ボタン（TAB_03） 角丸：0、10、0、0 ドロップシャドウ：X2、Y5、B5 ⑤コンテンツ 角丸：0、0、10、10 ドロップシャドウ：X2、Y5、B5
■TAB_03表示画面①ボタン（TAB_01） 角丸：10、0、0、0 ドロップシャドウ：X2、Y5、B10 ②ボタン（TAB_02） 角丸：0、0、0、0 ドロップシャドウ：X0、Y5、B5 ③ボタン（TAB_03） 角丸：0、10、0、0 ドロップシャドウ：X-2、Y5、B10 ④ボタン（TAB_03）上部の線（ピンク色） 角丸：0、10、0、0 ⑤コンテンツ 角丸：0、0、10、10 ドロップシャドウ：X2、Y5、B5
2-3.プロトタイプ設定①「プロトタイプ」をクリック。
②「アートボード（TAB_01）」の「ボタン（TAB_02）」ダブルクリックして、「トリガー」を「アートボード（TAB_02）」へもっていく。
③「アートボード（TAB_01）」の「ボタン（TAB_03）」ダブルクリックして、「トリガー」を「アートボード（TAB_03）」へもっていく。
④「アートボード（TAB_02）」の「ボタン（TAB_01）」ダブルクリックして、「トリガー」を「アートボード（TAB_01）」へもっていく。
⑤「アートボード（TAB_02）」の「ボタン（TAB_03）」ダブルクリックして、「トリガー」を「アートボード（TAB_03）」へもっていく。
⑥「アートボード（TAB_03）」の「ボタン（TAB_01）」ダブルクリックして、「トリガー」を「アートボード（TAB_01）」へもっていく。
⑦「アートボード（TAB_03）」の「ボタン（TAB_02）」ダブルクリックして、「トリガー」を「アートボード（TAB_02）」へもっていく。
⑧「プレビュー」ボタンをクリック。
⑨「タブ切り替え」の動きを確認。
さいごに
「タブ切り替え」をつくることができました〜
プロフィール
- Hiroki
- 20代/現webディレクター（旧webデザイナー）月間3万PV達成。未経験・初心者をメインにwebデザイン全般の情報を『わかりやすく』お届けするブログとなっております。
- プロフィール詳細 >
- お問い合わせ >
人気記事
- 【Canva】「吹き出し」の作り方・使い方
- 【Canva】図形や写真を「半透明」にする方法・使い方
- 【Canva】文字の「行間」調整方法
- 【Canva】複数ページのデザインから「1枚だけダウンロード」する方法
- 【Canva】「矢印」の追加方法・作り方
無料体験レッスン【キャンペーン実施中！】
スポンサーリンク
HOME > XD > 【XD】「タブ切り替え」の作成方法- 20代/現webディレクター（旧webデザイナー）月間3万PV達成。未経験・初心者をメインにwebデザイン全般の情報を『わかりやすく』お届けするブログとなっております。
- プロフィール詳細 >
- お問い合わせ >