Figma、AI モーション生成とシェーダーツールを公開──Config 2026 でコードレイヤー統合を発表
デザインキャンバス上で直接コード編集や WebGPU ベースのシェーダー操作が可能になり、AI によるアニメーション生成と実装のシームレス化を実現した。
リリース: 2026-06-24 · 読了 3 分記事の要約
1. 核心（What）
- Figma Design キャンバス上でコードを直接編集・同期する「Code layers」を実装。
- プロンプトによるアニメーション生成と 3D トランスフォームを可能にする「Motion」を追加。
- WebGPU を基盤としたシェーダー作成ツールにより、カスタムエフェクトを即座に適用可能。
- 20 種類以上の「Figma Weave」ツールを統合し、AI ワークフローの自動化を支援。
2. 影響（Why）
- 開発プロセスの統合: デザインと実装の分断を解消し、デザイナーが直接コードレイヤーを操作することで、エンジニアの実装負担を軽減する。
- 国内開発現場への影響: [国内の UI/UX 制作会社・中規模 SaaS] において、デザイナーが WebGPU シェーダーを直接制御できるため、フロントエンドエンジニアとのハンドオフ工数を削減し、プロトタイピングの質を向上させる。
3. 根拠・詳細（How）
- WebGPU による描画: シェーダーエフェクトは WebGPU API を活用してキャンバス上で直接処理され、ディザリングやピクセル化などの複雑な描画をブラウザ環境でリアルタイムに実行する。
- コード同期の仕組み: Code layers は外部リポジトリのクローンと同期に対応しており、デザインレイヤーへの抽出とコードへの変更反映を双方向でサポートする。
4. 展望・課題（Next）
- Figma Weave の統合: 2026 年後半にかけて、Figma と Figma Weave の完全な統合を進め、より複雑な AI ワークフローのキャンバス上での実行を予定している。