Figmaでプロトタイプ作成手順：コンポーネント化からSmart Animateまで

デザインシステムの土台を作る

1‑1　カラー・テキストスタイルを定義する

公式ドキュメント: Create and manage color styles

1‑2　コンポーネント化とバリアント作成

1. 選択 → コンテキストメニュー > Create component（ショートカット ⌃⌥B）
2. 右サイドバーの Variants ボタンでバリアントパネルを開く
3. バリアントは「状態」だけでなく「サイズ」「テーマ」など、管理したい属性ごとにプロパティを追加

ベストプラクティス：バリアント名は State=Default のように Property=Value 形式で統一すると、開発者へのハンドオフが楽になる（Figma Help: Add variants to a component）。

Prototype タブの表示とフレーム配置

2‑1　Prototype タブを開く

右上メニューの Design / Prototype アイコン列から Prototype をクリック。

公式ヘルプ: Switch between design and prototype modes

2‑2　フレームの作成とデバイス設定

Figma が提供するデバイスプリセットは「Design」タブでも確認可能です。

リンクとインタラクションの設定手順

3‑1　画面間リンクの作成

1. 起点となるオブジェクト（ボタンやカード）を選択
2. Prototype パネルで ＋ をクリックし、矢印が出たら遷移先フレームへドラッグ
3. ポップアップで「Interaction」>「Navigate to」を選び、対象フレームを指定

3‑2　トリガー・遷移タイプ・イージングの設定

根拠：Figma の公式アニメーション設定画面でデフォルトが「Ease In Out / 0.2 s」と表示される（Prototype interaction basics）。

主なトリガーと利用シーン

Smart Animate とバリアントで作るマイクロインタラクション

4‑1　Smart Animate の有効化手順

1. 同一コンポーネント内で Default と Hover バリアントを作成
2. 各バリアントでレイヤー構造（名前・階層）を一致させる
3. プロトタイプモードで Default → Hover のリンクを設定し、Animation を Smart Animate に変更

公式ヘルプ: Use Smart Animate to create fluid transitions

4‑2　バリアントで状態管理する例

設定フロー

1. Default → Hover：トリガー While Hover、アニメーション Instant（状態切替のみ）
2. Hover → Pressed：トリガー On Click、アニメーション Smart Animate（0.15 s, Ease In）

バリアントのプロパティは Properties Panel > Variants で「+」ボタンから追加できます。命名規則は State=… とすると検索が容易です。

プレビュー・共有・開発者ハンドオフ

5‑1　デバイスフレームでのプレビュー

公式ガイド: Preview prototypes in Presentation mode

5‑2　共有リンクの作成とコメント機能

1. 右上 Share ボタン → 「Anyone with the link can view」または「Can comment」を選択
2. 「Copy link」で URL を取得し、Slack・メール等で配布
3. コメントモードは画面左下の Comment アイコンから起動し、対象レイヤーに直接ピン留めできる

開発者向けハンドオフ

• 同じリンク上部の Inspect タブで CSS、Swift、Android のコードスニペットが自動生成される
• 画面サイズ・間隔は Measure ツール（⌘+Shift+R）で取得可能

詳細は公式ヘルプ: Hand off designs to developers

まとめとチェックリスト

この手順をすべて実行すれば、デザインシステムの整合性が保たれたまま、Figma のみで完成度の高いインタラクティブプロトタイプを短時間で作成できます。

参考情報は全て Figma ヘルプセンター（英語版）から引用していますが、日本語ページも同様の内容が掲載されていますので、必要に応じて言語切替をご利用ください。