Figma、デザインに直接コードを統合する「コードレイヤー」機能やAIカスタムプラグイン生成を公開
デザイナーとエンジニアの協働を円滑にするため、キャンバス上でのリポジトリ複製や、プロンプトによるカスタムプラグイン・Weavyワークフロー生成などのAI機能を大幅に拡充した。
リリース: 2026-06-24 · 読了 3 分記事の要約
1. 核心（What）
- Figmaは協働キャンバス上に直接コードを統合し、リポジトリの複製やコードからデザインレイヤーへの抽出を可能にする「コードレイヤー」機能を追加した。
- アニメーション、トランジション、3DトランスフォームをFigma内で直接サポートし、外部ソフトウェアでの作成とコード変換の手間を不要にした。
- テキストプロンプトからレイアウトジェネレーターやベクターパスチェイサーなどのカスタムプラグインを自動生成する機能を導入した。
- Notion、Granola、Excel、GitHubなどの外部ツールやファイルを接続し、AIエージェントにコンテキストを与える繰り返し可能な「スキル」作成に対応した。
2. 影響（Why）
- デザインと実装の乖離を埋めるため、エンジニアはFigmaキャンバス上で直接プロトタイプコードを動かし、本番コード構築前の意図確認を数分で完了できる。
- プロンプトからカスタムプラグインやWeavyワークフローを生成できるため、プロジェクト固有のモックアップ作成やアセット書き出し自動化のツール内製コストがほぼゼロになる。
- 開発者への影響: フロントエンドエンジニアやPMは、Figma上で直接コードを動かしてプロトタイピングのイテレーションを回せるようになり、デザインからコードへのハンドオフに伴う手戻り作業を大幅に削減する。
- 日本への影響: Figmaを標準採用している国内のWebサービス開発企業（特にUI/UXの変更頻度が高いSaaSやEC開発チーム）は、デザインとフロントエンド実装の境界をシームレスにし、開発サイクルを短縮する体制へ移行する契機となる。
3. 根拠・詳細（How）
- TechCrunch (2026-06-24 公開)