Figma、AIモーションとコード機能を追加

キャンバスの新機能

キャンバス上で直接コード編集
リポジトリのクローンと同期
AI生成のアニメーション
WebGPU活用のシェーダー効果

エージェント強化

反復作業をスキルとして再利用
生成型プラグインの自作
Weaveワークフローの統合予定
詳細を読む

デザインプラットフォームのFigmaは6月24日、年次イベントConfig 2026で、キャンバスに新たなコードレイヤーとAIによるモーション機能、シェーダーを追加するアップデートを発表しました。デザイナーエンジニア、PMがアイデアを素早く反復できるよう、フルスタック開発に最適化したキャンバを目指す内容です。

目玉となるのが、キャンバスを離れずにコードを扱えるコードレイヤーです。リポジトリをクローンし、コードからフローをデザインレイヤーに抽出してテストしたり、変更をコードへ同期し直したりできます。最高プロダクト責任者の山下雄樹氏は、本番投入用の完璧なコードよりも、空間的に素早く方向性を探ることに価値があると説明しました。

モーション機能では、アニメーションやトランジション、3D変換をFigma内で直接設計できるようになりました。これまでは別ソフトで作成しコードに変換する必要がありましたが、今後はチャットに指示するだけでAIがアニメーションを生成します。シェーダーもプロンプトで作成でき、ディザやピクセル化、各種ぼかしなどWebGPUを活かした効果を扱えます。

チーム向けのAIエージェントも強化されました。反復作業をスキルとして登録しチーム全体で再利用できるほか、NotionやExcel、GitHubといった外部ツールの接続やファイル添付でAIに文脈を与えられます。レイアウト生成器などの独自プラグインをプロンプトで自作する機能も加わりました。

Figmaは昨年買収したノードベースのツールWeavyの統合も進めています。年内のアップデートでは、複数モデルで出力を比較するWeaveのワークフローFigma内で直接生成できるようになる見込みです。一連の機能は、デザインコーディングの間の受け渡しを滑らかにする取り組みの延長線上にあります。