Figma基礎 Figmaをインタラクティブに！プロトタイプ設定
目次
Figmaのプロトタイピングとは？
Figmaのプロトタイピング機能を使うと、作成したデザインにーザーが画面上で行う操作＝インタラクティブ設定（タップ、クリック、ホバー、ドラッグなど）に応じて、デザインがどのように反応するかを再現することが可能です。これにより、実際のアプリやウェブサイトの操作感をシミュレーションできます。またアニメーションを追加して、実際のアプリやウェブサイトの動作（スライドやホバー）をシミュレーションできます。開発前に操作感を確認できるので、デザインやUXの改善に役立ちます。
主な機能と特徴
リンクの設定
- ボタンや画像などのデザイン要素をドラッグ＆ドロップでつないで画面遷移を設定。
- リンク先を指定することで、ボタンを押した後の動きを再現します。
トランジション効果
- 「スライド」「フェード」などのアニメーション効果を簡単に適用可能。
- トランジションの速度や方向も自由に調整できる。
インタラクション
- タップ、ドラッグ、ホバーなど、実際の動きに応じたインタラクションを設定可能。
- 例: ボタンをタップするとメニューが展開される動作をシミュレーション。
フローデザイン
- プロトタイプを作成する際に、全体のユーザーフローがビジュアルで確認可能。
- 矢印でつながるフローチャート形式なので、複雑なデザインでも全体を把握しやすい。
メリット
- リアルタイムな共同作業
Figmaはクラウドベースなので、チームメンバーが同時にプロトタイプを確認・編集できます。 - コード不要で簡単
デザイナーがプログラミング知識なしで、インタラクションを設定可能。 - デバイス対応
モバイル・タブレット・PC用のプロトタイプを簡単に切り替えられる。デバイスごとのプレビューも可能。
基本的な手順
- デザインを作成
- FigmaでUIをデザインします。ページやコンポーネントを準備。
- プロトタイプモードに切り替え
- 右上のプロトタイプ（Prototype）をクリック。
- リンクを設定
- 各デザイン要素をドラッグして次の画面や動作をリンク。
- インタラクションを設定
- クリックやドラッグ、スクロールなどの動きを設定。
- プレビュー
TOPページのMoreボタンから商品一覧へ
即時変わる動作からアニメーションはディゾルブを選択しました。
「ディゾルブ」は、画面や要素がフェードイン・フェードアウトするアニメーションです。新しい画面や要素が徐々に表示されるので、シンプルで直感的な演出に向いています。即時だとパ！と変わった印象になるので、ページが切り替わる際に滑らかな遷移を作るのがディゾルブです。
商品一覧の商品写真から、商品詳細ページへ
商品一覧の写真を選択するためには、何度も同じ場所でダブルクリックをし、フレームの中に入っていきます。商品の写真だけが選択された状態で、商品詳細に紐付けします。
ここまでの状態でプレビュー確認を行います。
トップページがフローの開始点になるように設定をしておきましょう。
トップページに戻れるように
次は、ヘッダーにあるロゴ、もしくはフッターにあるロゴをクリックしてトップページに戻れるように設定します。その場合、各ページのヘッダーもフッターもセクション内にあるコンポーネントからインスタンスですので、コンポーネントからの設定となります。
ヘッダーのロゴをクリックしてトップページに戻りますが、ボタンの位置に来てしまうので、インタラクションから、スクロール位置をリセットにチェックを入れておきましょう。
アニメーション
ディゾルブ（Dissolve）
- 概要: 要素や画面がフェードイン・フェードアウトするシンプルなアニメーション。
- 使用例: ページ遷移やモーダル表示。
- 特徴: 自然な切り替えが簡単にできる。
スマートアニメーション（Smart Animate）
- 概要: 要素の位置・サイズ・透明度などをスムーズに変化させるアニメーション。
- 使用例: ボタンのサイズ変更、カードの並び替え。
- 特徴: 同じ名前の要素を異なる画面で自動的にアニメーション化。
移動（Move In / Move Out）
- 概要: 要素が画面外からスライドして出入りする。
- 使用例: ナビゲーションメニューのスライドイン。
- 特徴: 左右・上下の方向を指定可能。
スライド（Slide In / Slide Out）
- 概要: ページ全体が滑らかにスライドして切り替わる。
- 使用例: スワイプでのページ遷移。
- 特徴: 簡単にスムーズなページ切り替えを実現。
プッシュ（Push）
- 概要: 1つの画面がもう1つを押し出すように切り替わる。
- 使用例: アプリのページ切り替え。
- 特徴: 動きにインパクトを与えたいときに有効。
カスタマイズ可能な要素
- イージング: 「Ease In」「Ease Out」など、動きの速さの変化を調整。
- 継続時間: アニメーションのスピードを設定（例: 200ms～600ms）。
プロトタイプの流れ
作成中////
