FigmaにFlashの再来！？ 新機能「Figma Motion」とAIアニメーション機能がWeb制作を変える

Figma Motionとは？ Webデザイナー・開発者注目の新機能

米Figmaが新たに発表した「Figma Motion」は、デザインツールFigma Designにアニメーション制作機能を追加するものです。これは「Design」「Draw」「Dev」と並ぶ新モードとして実装され、Webサイトやアプリの動的な表現をFigma内で完結できるようになります。

この機能は、タイムライン上でキーフレームを打つことができるため、かつてWebの動的な演出に広く使われたAdobe Flashを彷彿とさせるとSNSで話題になっています。しかし、実際に触れたユーザーからは「似て非なるもの」という声も上がっており、その実態に注目が集まっています。

Figma Motionで何ができる？ Web制作における具体的な活用法

Figma Motionの主な機能は以下の通りです。

• タイムラインとキーフレーム: 任意のフレームを「Motion」モードに切り替えることで、デザインの横にアニメーション用のタイムラインが現れます。レイヤーをドラッグしてタイミングを調整し、位置・スケール・回転・不透明度を個別にキーフレーム化できます。
• プリセット: fade（フェード）やmove（移動）などのプリセットが用意されており、手軽にアニメーションを適用できます。
• コンポーネント連携: コンポーネントに一度モーションを設定すれば、それを使う全ての画面に同じ動きを反映できます。これにより、デザインの一貫性を保ちつつ、効率的にアニメーションを適用することが可能です。
• コード書き出し: 「Dev」モードに切り替えることで、タイミングの値やイージングカーブを確認でき、CSS・JSON・React形式でコードをコピーできます。これは、デザイナーと開発者間の連携をスムーズにし、アニメーションの実装を効率化する上で非常に役立つ機能です。
• 多様な書き出し形式: MP4・WebM・アニメーションSVG・GIFに対応しており、様々な媒体での利用が可能です。

これらの機能により、Webサイトのヒーローセクションのアニメーション、UIコンポーネントのインタラクション、マイクロアニメーションなどをFigma内で作成し、そのまま開発に連携できるようになります。デザインと実装の間のギャップを埋め、よりリッチなユーザー体験を効率的に提供できる可能性を秘めています。

AIアシスタント「Figmaエージェント」がアニメーション生成をサポート

Figma Motionには、AIアシスタント「Figmaエージェント」によるアニメーション生成機能も搭載されています。プロンプト（指示文）を出すだけでアニメーションのたたき台を生成できるため、アニメーション制作のアイデア出しや初期段階での効率化に貢献します。これにより、アニメーション制作のハードルが下がり、より多くのデザイナーが動的な表現を取り入れやすくなるでしょう。

Figma Motionを試すには？ プランと機能の注意点

Figma Motionは、無料プランでも基本的なアニメーション作成が可能です。しかし、アニメーション付きコンポーネントの公開やFigmaエージェントによる生成、高解像度の動画書き出しは有料プランの「フルシート」が必要となります。

まずは無料プランで基本的な機能に触れてみて、その可能性を実感することをおすすめします。特に、Figmaを普段使いしているWebデザイナーやフロントエンド開発者にとっては、既存のワークフローにスムーズに組み込めるため、試す価値は大いにあります。Flash時代を知るベテランデザイナーにとっては懐かしさを感じつつも、現代のWeb制作に最適化された新しいツールとして、その進化を体験できるでしょう。

Figmaが提供する発表ブログやヘルプページ、料金表を確認し、ご自身のプロジェクトにFigma Motionがどのように貢献できるか、ぜひ検討してみてください。