プロトタイプ

FigmaのPrototype機能を利用して画面やUIコンポーネントに対するインタラクションを設定し、画面遷移や表示を変化させるアニメーションを設定する方法を紹介します。

figma-table-cell-animation-prototype

figma-table-cell-animation-prototype

マウスオーバー・クリックすると罫線スタイルが変わるテーブル（プロトタイプ）

figma-toggle-switch-with-slide-animation-prototype

figma-toggle-switch-with-slide-animation-prototype

スライドするアニメーション付きのスイッチ（プロトタイプ）

figma-button-with-fill-animation-prototype

figma-button-with-fill-animation-prototype

Figmaで塗りが円形に広がるアニメーションのボタン（プロトタイプ）