FigmaがGitHubをデザインキャンバスに統合――Code Layersがコードと設計の境界を変える

FigmaのCode Layers機能は、2年前なら絵空事と思われたことを実現する。GitHubリポジトリをデザインキャンバスに直接クローンできるのだ。リポジトリが置かれると、既存のコードから編集可能なデザインフレームを抽出し、ビジュアルで変更を加え、その変更をリポジトリへ同期させることができる。すべて単一のFigmaファイル内で、リアルタイム共同編集もそのまま機能する。デザインと開発が同じウィンドウに収まる。

ハンドオフノートを書き続け、JiraチケットにスペックをコピーするかZeplinリンクをエンジニアに送ることに費やしてきたデザイナーにとって、Code Layersはデザインとコードの対話が起きる場所を変える。Figmaでの変更は根底のコードを更新し、コードの変更はデザインレイヤーを更新する。2つの分野をつなぐ橋はつねにコンテキストの切り替えを必要とした。そのコストが、今小さくなった。

Figma Motionはアニメーションを出荷可能なコードに変える

Figmaはキャンバスに直接組み込まれたキーフレームベースのアニメーションタイムラインMotionも発表した。デザイナーはタイムラインとプリセットライブラリでトランジション、ホバー状態、スクロールアニメーションを作成し、7つのフォーマットでエクスポートできる。CSS、JSON、React、MP4、WebM、アニメーションSVG、GIFだ。Figmaで作ったローディングアニメーションは、もはやデベロッパーが解釈すべき参照ドキュメントではない。それ自体がアニメーションである。

3つ目の主要発表はShader Effectsだ。ブラウザの最新グラフィックス標準であるWebGPUを利用したGPU高速レンダリングのフィルで、数学的に生成された複雑な視覚テクスチャをFigmaのレイヤーに直接適用できる。FigmaのAIエージェントは、テキスト説明やアップロードした画像からこれらのカスタムシェーダーフィルを生成できる。「淡い青の干渉パターンを持つすりガラス」と入力すると、キャンバスはリアルタイムにレンダリングされ、インタラクティブに調整できるものを出力する。

AIエージェントがスキル・ツール・外部接続を追加

AIエージェント自体も大幅に拡張された。自然言語プロンプトから再利用可能な「スキル」を作成できるようになった。API知識なしで反復的なデザインタスクを自動化するカスタムツールだ。Notion、GitHub、Microsoft Excelを含む外部サービスへの直接接続も備わる。2026年の後期アップデートでは、Figmaが昨年買収したワークフロービルダーのWeavyが追加される予定で、デザインファイル内のノードベース自動化が可能になる。

すべてが今すぐ使えるわけではない。Code Layersはアーリーアクセス中で、申し込みは2026年7月から受け付ける。有料FigmaプランのFullシートが必要だ。Shader Effectsと強化されたAIエージェントは有料プランですでに利用可能。Figma MotionはFullシートホルダー向けにいまから利用できる。Code Layersの一般提供は2026年中に予定されている。

コードエディタのワークフローを取り込もうというFigmaの野心は、現実的な問いに行き当たる。コードを書くこととインターフェースをデザインすることは異なる認知活動であり、先週SpaceXが600億ドルで買収したAIコードエディタCursorは、デザイナーではなくエンジニアの間に支持者を築いてきた。2つのコミュニティが共有のキャンバスに収束するかどうか、答えはまだ出ていない。

タグ: GitHub, Code Layers, Config 2026, Cursor, Figma, デザインツール