掲載済み (2026-09-05号)
012 140文字 • 1分

Figma Motionで作ったアニメーションを、Figma MCPで取得する

日本語
mitsue.co.jp

掲載情報

2026年9月5日土曜日号 未掲載

概要

Figma Motionで作成したアニメーション詳細を、Figma MCP Serverのget_motion_contextを利用して開発用コードとして抽出・活用する方法を紹介。

詳細内容

Figma Motion（2026年発表のタイムライン形式アニメーション設計機能）で作成されたアニメーション情報を、Figma MCP Serverを通じて取得する手法を解説しています。従来の`get_design_context`では静的なレイアウトやスタイル情報の取得に限定されていましたが、新たに提供された`get_motion_context`を使用することで、キーフレーム、イージング、タイミングといった動的なデータを取得できます。出力にはFramer Motion用のコード断片やCSS @keyframesが含まれており、AIがアニメーションの意図を推測することなく、数値に基づいた正確なフロントエンド実装を実現できる点が大きなメリットです。アノテーション（注釈）による曖昧な伝達を廃し、より「AIフレンドリー」な開発フローを提案しています。
元記事を読む 他のサマリーを見る