Figma基礎　Figmaをインタラクティブに！プロトタイプ設定

Figmaのプロトタイピングとは？

Figmaのプロトタイピング機能を使うと、作成したデザインにーザーが画面上で行う操作＝インタラクティブ設定（タップ、クリック、ホバー、ドラッグなど）に応じて、デザインがどのように反応するかを再現することが可能です。これにより、実際のアプリやウェブサイトの操作感をシミュレーションできます。またアニメーションを追加して、実際のアプリやウェブサイトの動作（スライドやホバー）をシミュレーションできます。開発前に操作感を確認できるので、デザインやUXの改善に役立ちます。

主な機能と特徴

メリット

1. リアルタイムな共同作業
   　Figmaはクラウドベースなので、チームメンバーが同時にプロトタイプを確認・編集できます。
2. コード不要で簡単
   　デザイナーがプログラミング知識なしで、インタラクションを設定可能。
3. デバイス対応
   　モバイル・タブレット・PC用のプロトタイプを簡単に切り替えられる。デバイスごとのプレビューも可能。

TOPページのMoreボタンから商品一覧へ

即時変わる動作からアニメーションはディゾルブを選択しました。

「ディゾルブ」は、画面や要素がフェードイン・フェードアウトするアニメーションです。新しい画面や要素が徐々に表示されるので、シンプルで直感的な演出に向いています。即時だとパ！と変わった印象になるので、ページが切り替わる際に滑らかな遷移を作るのがディゾルブです。

商品一覧の商品写真から、商品詳細ページへ

商品一覧の写真を選択するためには、何度も同じ場所でダブルクリックをし、フレームの中に入っていきます。商品の写真だけが選択された状態で、商品詳細に紐付けします。
ここまでの状態でプレビュー確認を行います。

トップページがフローの開始点になるように設定をしておきましょう。