見出しやボタンに「ふわっとフェードイン」「下からスライド」といったちょっとした動きをつけたい時、CSSをイチから書く必要があり、地味に手間がかかる作業でした。Figma Motionでその手間が必要なくなりました。

Figma Motionとは

Figma Motionは、Design・Draw・Devに続く4つ目のモードとしてFigmaに追加されたアニメーション機能で、2026年6月のConfig 2026で発表されました。

https://www.figma.com/ja-jp/motion

キャンバスの下部にタイムラインが現れ、位置・スケール・回転・不透明度といったプロパティをキーフレームで直接コントロールできます。これまでAfter Effectsで作った動きをLottie経由でのWeb実装やプラグインに頼っていた「動きをつける」という作業が、デザインファイルを離れずに完結するようになったのが最大の変化です。

テキストアニメーションが「簡単」な理由

テキストレイヤーを選んでMotionモードに切り替えれば、それだけでアニメーションの対象にできます。代表的なプリセットとして、フェード(透明度を変化させる)・移動(位置をスライドさせる)・スケール(拡大縮小)・回転が用意されており、これらをワンクリックで適用するだけでも見栄えのする動きになります。

さらに楽ちんなのが、Figmaエージェントへの指示。「フェードインしながら下からスライドする動きを作って」のように文章で伝えるだけで、AIがタイムライン上に実際のキーフレームを組んでくれます。生成後に気に入らない部分があれば、タイムラインを直接ドラッグして微調整すればよいだけ。キーフレームをゼロから打つ必要がないので、アニメーション初心者の方でも操作は簡単です。

Dev ModeでCSSが自動生成される

ここがこの機能の核心部分です。アニメーションが完成したらDev Modeに切り替えると、タイムライン全体が読み取り専用で表示され、タイミング値やイージングカーブがそのまま数値として確認できます。さらにコードパネルでは、CSS・JSON・React・motion.devの中からフォーマットを選んでコピーするだけ！

例えば「フェードインしながら下からスライドする」テキストなら、Dev Modeから次のようなコードがそのまま得られます。

@keyframes textFadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.text-fade-slide-in {
  animation: textFadeSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

数値を目測で再現したり、動画を見ながら推測したりする必要がなくなり、とても便利です。

メリットと注意点

最大のメリットは、コーディングの手間がぐんと減ること。さらにFigma MCPサーバーを介して、コーディングエージェントにアニメーションの文脈(キーフレームやイージング値)をそのまま渡せる仕組みもあり、実装スピードが爆上げします。

一方で、現時点ではオープンベータ段階の機能であり、複雑な映像表現や凝ったキャラクターアニメーションには向いていないかも。UIの細かい動きやマイクロインタラクションのような、比較的シンプルな用途で力を発揮するツールと捉えるのが現実的かもしれません。

まとめ

テキストアニメーションのような小さな動きは、これまで専門知識やツール間の往復が必要な「ちょっとした贅沢」でした。Figma Motionは、プリセットやAIエージェントによる生成、そしてDev ModeでのCSS自動出力によって、その作業をデザインフローの中に自然に組み込んでしまいました。まずはボタンや見出しのフェードインなど、小さなところから試してみるとよさそうです。

2026年6月30日