mcpField
F
figma-prototyping

figma-prototyping

github.com/dylantarreデザイン・UI132554 回インストール43 週間前に更新
リポジトリ

figma-prototyping について

Figmaでプロトタイプを作る人向けのアニメーションガイドです。Smart Animateでディズニーの12原則を実装し、インタラクションやイージング、コンポーネントの状態も設定します。

主な機能

  1. 01アニメーション12原則の適用
  2. 02Smart Animateによるフレーム遷移
  3. 03トリガーとタイミングの設定
  4. 04コンポーネントのバリアント状態
  5. 05レイヤー名と階層の指針

活用シーン

  1. 01ボタンのマイクロインタラクション制作
  2. 02連続するアニメーションフレームの構築
  3. 03ホバー・無効状態の設計

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/dylantarre/animation-principles --skill figma-prototyping

インストール後、Claude Code で/figma-prototypingを入力して読み込まれたか確認します。

詳細

Figmaのプロトタイピングにおけるアニメーションの原則

Figmaのプロトタイピング機能とSmart Animate機能を使って、ディズニーのアニメーション12原則すべてを実装します。

1. つぶしと伸ばし

  1. 通常状態とつぶした状態の2つのフレームを作成します
  2. 要素を拡大縮小します：width: 120%、height: 80%
  3. Smart Animateで接続します
  4. 「Ease In and Out」のタイミングを使用します
Frame 1: Circle 100x100
Frame 2: Circle 120x80 (squashed)
Interaction: Smart Animate, 150ms

2. 予備動作

3つのフレームを作成します：

  1. 待機 - 開始位置
  2. 予備動作 - 動作の準備（動作と反対方向に移動）
  3. 動作 - メインの動き

次のように接続します：待機 → 予備動作（100ms）→ 動作（After Delay）

3. 演出

テクニック：

  • 背景要素の不透明度を下げます（60～80%）
  • 焦点以外の領域にぼかし効果を適用します
  • 主役の要素を拡大します
  • ドロップシャドウを使って奥行きの階層を表現します

4. ストレート・アヘッドとポーズ・トゥ・ポーズ

Figmaでのポーズ・トゥ・ポーズ：

  1. キーフレームを個別の画面としてデザインします
  2. Smart Animateで接続します
  3. Figmaが状態間を補間します

ポーズA → ポーズB → ポーズCのフレームを作成します

5. フォロースルーとオーバーラッピング・アクション

  1. 各要素にコンポーネントのバリアントを作成します
  2. フレーム間で状態の変化に時間差をつけます
  3. 髪や布は、胴体から1～2フレーム遅れて変化します
Frame 1: Body at A, Hair at A
Frame 2: Body at B, Hair at A (delayed)
Frame 3: Body at B, Hair at B

6. スロー・インとスロー・アウト

Figmaのイージングオプション：

  • Ease In - ゆっくり始まり、速く終わります
  • Ease Out - 速く始まり、ゆっくり終わります
  • Ease In and Out - 始まりと終わりがゆっくりです（最も自然です）
  • Custom Bezier - カーブを細かく調整します

デフォルトの推奨設定：ほとんどのUIインタラクションではEase Outを使用します。

7. アーク

  1. アーク状の軌道に沿って複数のフレームを作成します
  2. カーブ上のキーポイントに要素を配置します
  3. 滑らかなアークにするには3つ以上のフレームを使用します
  4. Smart Animateが軌道を補間します

または、変形の原点をオフセットしてコンポーネントを回転させます。

8. 副次動作

レイヤーのインタラクション：

  1. 主動作：タップするとボタンが拡大します
  2. 副次動作：アイコンが回転し、影が広がります
On Click:
  - Button → Scale 1.1, Smart Animate, 150ms
  - Icon → Rotate 15°, Smart Animate, 100ms (starts simultaneously)

9. タイミング

期間用途
100msマイクロインタラクション、ボタンのフィードバック
200ms標準的なトランジション
300msページ遷移、モーダル
400～500ms複雑な表示
800ms以上印象的で目を引く演出

10. 誇張

控えめな表現を超えて強調します：

  • ホバー時の拡大：1.02xではなく1.1x
  • 回転：5°ではなく15°
  • 移動：8pxではなく20px
  • オーバーシュート効果には「Spring」イージングを使用します

11. 立体感のある描画

次の方法で奥行きを作ります：

  • フレーム間で一貫した遠近感を保ちます
  • 影の方向を統一します
  • 適切なz順で要素を重ねます
  • 3D変形を使います（遠近感を付けた回転）

12. 魅力

デザインの原則：

  • 角を丸くします（親しみやすさ）
  • 間隔を統一します
  • 色を滑らかに変化させます
  • 満足感のあるインタラクションのフィードバックを提供します
  • 視覚的な階層を明確にします

Smart Animateの設定

  1. フレーム間でレイヤー名を同じにします
  2. 一貫した命名のためにコンポーネントを使用します
  3. 最良の結果を得るには、レイヤー階層を一致させます
  4. アニメーションの前に変形の原点を設定します

インタラクション設定

Trigger: On Click / While Hovering / After Delay
Action: Navigate To / Smart Animate
Animation: Smart Animate
Easing: Ease Out
Duration: 200ms

状態用のコンポーネントバリアント

次のバリアントを作成します：

  • State=Default
  • State=Hover
  • State=Active
  • State=Disabled

バリアント間でSmart Animateを使った「Change To」インタラクションを使用します。

プロのヒント

  1. **「While Hovering」**を使って、元に戻せるアニメーションを作成します
  2. After Delayを連続して設定すると、シーケンスを作成できます
  3. フレームでOverflow: Hiddenを設定すると、アニメーションが切り抜かれます
  4. 再利用可能なマイクロインタラクションにはインタラクティブコンポーネントを使用します
  5. Presentモード（再生ボタン）でプレビューします

コメント

Markdown 対応