プロトタイプ

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

figma-overlay-dialog-prototype

figma-overlay-dialog-prototype

Figmaでダイアログをオーバーレイで表示させる（プロトタイプ）

figma-how-to-setting-prototype-with-mockup

figma-how-to-setting-prototype-with-mockup

Figmaでモックアップ付きのプロトタイプを作成する方法

figma-how-to-setting-scroll

figma-how-to-setting-scroll

Figmaのプロトタイプのスクロール制御に関する設定

figma-pull-down-button-prototype

figma-pull-down-button-prototype

Figmaでクリックするとメニューが開くプルダウンボタン

figma-header-sticky-animation-prototype

figma-header-sticky-animation-prototype

Figmaでヘッダーを画面上部に固定して追従させる（プロトタイプ）

figma-interactive-components

figma-interactive-components

Figmaで作れるインタラクション付きコンポーネント集

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で塗りが円形に広がるアニメーションのボタン（プロトタイプ）