こんにちは！UIデザイナーの岡村です。

デザイナーとして日々の制作に励むなかで、UIデザイナーの多くが一度は以下のような経験をしたことがあるのではないでしょうか。

・デザイナーからエンジニアにUIのアニメーションについて資料や口頭で伝えたが、実装されたものが想定と違った
・実装後にお客様から「アニメーションの動きがイメージと違う」と修正依頼を受けた
・静止画だけでは、複雑な画面遷移や条件による変化が検証しきれない

いくら言葉で説明しても、動きの細部を完璧に共有するのは難しいものです。しかし、2026年現在の進化したFigmaなら、実際の動きをほぼ完全に再現でき、こうしたトラブルを未然に防ぐことができます。

今回は、最新のFigmaUIに対応したプロトタイプ作成術を徹底解説します。

岡村 彩子（おかむら あやこ）：1999年生まれ。2022年GIGに入社。現在はフリーランス・副業人材採用支援プラットフォームサービス『Workship』のカスタマーサクセスとして、日々奮闘中。趣味は新しいモノやコトに触れること。日本に飽きたため海外に行きたい気持ちで満たされ中。

1.Figmaのプロトタイプ機能とは？

Figmaでアニメーションを作成するために欠かせないのが「プロトタイプ機能」です。 画面遷移や要素のインタラクション（クリック、ホバー、ドラッグなど）を実際のアプリやサイトのように再現できたり、スクロール時のイメージにも利用できます。

2023年から現在にかけて、Figmaのプロトタイプ機能は劇的に進化しました。単に画面を繋ぐだけでなく、「変数（Variables）」や「条件ロジック（Conditional Logic）」を使うことで、「ログインしていないときだけこのボタンを表示する」といった高度な挙動まで再現可能になっています。

まずは、基本の「画面遷移」をマスターしましょう。現在のFigmaでは、以下のステップで進めます。

ステップ1：「変化前」と「変化後」のデザインを用意する

遷移の起点となる「ログイン画面（変化前）」と、遷移先となる「HOME画面（変化後）」のフレームを用意します。

ステップ2：デザイン同士を「Connection（コネクション）」で繋ぐ

右側のサイドパネル上部にある「Prototype」タブを選択します（ショートカット：Shift + E）。

1.ログインボタンを選択します。
2.表示された青い丸（ノード）を、遷移先のHOME画面フレームへドラッグ＆ドロップします。
3.これで2つの画面が「青い矢印（Connection）」で繋がりました。

ステップ3：アニメーションの詳細設定を行う

矢印をつなぐと表示される「Interaction details」パネルで、Trigger、Action、Animationを設定します。

・Trigger： On click（タップした時）
・Action： Navigate to（画面移動）
・Animation： Smart animate のほか、Push や Slide などのトランジションが追加されました

これらを使い分けることで、モバイルアプリ特有の滑らかな動きを再現できます。またモーダルなどの使い分けも可能です。

3.実践1：スマートアニメートで作る「ボタンのホバー演出」

手順：バリアントとスマートアニメート

1.コンポーネント化： ボタン内にテキストと「フレーム外に隠した背景用シェイプ」を配置し、コンポーネント化します。
2.バリアント作成： 「ホバー後」の状態を作成し、背景シェイプをボタン中央へ移動させます。
3.インタラクション設定： Triggerを While hovering、Animationを Smart animate に設定します。

【2026年の進化点：Advanced Interactions】 
現在は、ただ動かすだけでなく、変数（Variables）を組み合わせて「ボタンを押した回数をカウントする」といった高度な表現も、このスマートアニメートと併用できるようになっています。

4. 実践2：After delayで作る「無限ループアニメーション」

ローディングアイコンなど、自動で回転し続けるUIを作ります。

1.4つの状態を用意： 0度、90度、180度、270度のバリアントを作成。
2.ループ設定： 順番に矢印を繋ぎ、最後を最初に戻します。
3.Trigger設定： After delay（1ms）に設定。（何秒後に画面を遷移させるか）
4.Easing設定： Linear（線形）を選ぶことで、一定速度の滑らかな回転になります。

5. 最新アップデート：プロトタイプを「実機」に近づける

プロトタイプの体験をよりモバイル実機に近づけるための強力な機能が追加されました。

①デバイスフレーム表示（Device Frames）

プロトタイプ再生時、iPhoneやAndroid、Apple Watchなどの最新デバイスフレームを適用できるようになりました。これにより、ノッチや画面の角丸を考慮した正確なプレビューが可能です。

②固定オブジェクト（Fixed Objects）

スクロールしても常に表示される「ヘッダー」や「フッター」、あるいは「追従するチャットボタン」が簡単に設定できるようになりました。

③スクロール領域の強化（Scroll Containers）

これまでは画面全体しかスクロールできませんでしたが、現在は「特定の枠内だけ横にスクロールする（カルーセル）」や「地図のように上下左右自由にスクロールする」といった設定が直感的に行えます。

④進化したトランジション

Dissolve（フェード）だけでなく、Push や Slide in といった画面遷移が強化されました。スワイプで画面を戻すような、スマホ特有の操作感も忠実に再現できます。

おわりに

Figmaは「単なるデザインツール」から「高機能なプロトタイピングツール」へと変貌を遂げました。

最新のデバイスフレームや変数・ロジック、高度なスクロール設定を使いこなすことで、エンジニアへの指示出しは劇的にスムーズになり、お客さまへのプレゼン資料としての価値も格段に向上します。

まずは、小さなボタンのアニメーションから試してみてください。動きを作る楽しさが、あなたのデザインの幅をさらに広げてくれるはずです！

■株式会社GIG
お仕事のお問い合わせはこちら
採用応募はこちら（GIG採用サイト）
採用応募はこちら（Wantedly）

岡村 彩子

1999年生まれ。2022年GIGに入社。現在はフリーランス・副業人材採用支援プラットフォームサービス『Workship』のカスタマーサクセスとして、日々奮闘中。趣味は新しいモノやコトに触れること。日本に飽きたため海外に行きたい気持ちで満たされ中。