Figma、実行コードをキャンバスで扱う「コードレイヤー」のオープンベータを開始

公開日:2026年10月16日

Webデザインツール

Figmaは2026年10月15日、コードで動くプロトタイプをデザインキャンバス上で扱う「コードレイヤー」のオープンベータを全プランで順次開始すると発表しました。AIへの指示やGitHub、MCPからコードを取り込み、チームで操作や比較を行えます。仕様を共有するFigma Specsも、有料プランで同日からオープンベータを順次開始します。PayloadのFigma連携などは今後数週間かけて展開し、機能によって提供状況が異なります。

この記事をシェア

ポイント

1
Figmaがコードレイヤーのオープンベータを全プランで10月15日から順次開始
2
AIへの指示やGitHub・MCPでコードを取り込み、キャンバスで操作・比較
3
Specsも有料プランでオープンベータを開始し、仕様とデザインを共有

コードレイヤーでデザインとコーディングを統合

コードレイヤーは、Figma Designのキャンバスにコードで動くプロトタイプを置き、チームで操作・編集・比較できる機能です。Figma AIエージェントへの指示、GitHubリポジトリからの読み込み、MCPを介したコーディングエージェントからの取り込みなどで作成します。既存デザインを動くコードへ変換し、操作性などを確かめる使い方にも対応します。

Figma MCPも更新し、外部のAIツールからコードレイヤーの生成やSpecsの操作を行えるようにします。OpenCode、Dia、Meta Muse、Sarvamなどを含む20の新たなMCPパートナーとの連携も発表しました。

出典: Figma公式ブログ。コードレイヤーの画面例で、左にアプリの表示、右に対応するコードが並んでいます。

Figma Specsで仕様をチームでまとめる

Figma Specsは、デザインの意図や実装の詳細をまとめるMarkdownエディターです。単独ファイルとしても、Figmaのキャンバス上でデザインと並べても作成できます。

FigJamの図、コードレイヤー、デザインなどを埋め込み、チームの判断と参照資料を仕様にまとめます。MCPを介してコーディングエージェントへ仕様を渡す使い方にも対応します。

機能ごとの提供状況

公式ブログが示す提供状況は次のとおりです。全機能が一斉に一般提供されるわけではありません。

機能	対象プラン	発表時点の提供状況
コードレイヤー	全プラン	10月15日からオープンベータを順次開始
Figma Specs	有料プラン	10月15日からWeb・デスクトップ・モバイルでオープンベータを順次開始
ガイドライン	有料プラン	オープンベータ
コードソース	有料プラン	クローズドベータ
デザインシステム管理の集約	発表に記載なし	プレビュー
PayloadのFigma連携	全プラン	今後数週間かけて全アカウントへ展開

ガイドラインとコードソースは、AIが参照するデザインルールやコードの情報を補います。デザインライブラリなどを一か所で管理し、依存関係や不足を確認する専用の管理画面は、プレビュー段階として紹介されています。

PayloadでFigmaから直接リリース

Payloadは、コンテンツ・データ・APIなどを扱うオープンソースのバックエンド兼CMSです。Figma Makeで作ったアプリに接続し、コンテンツの作成・公開・管理を行います。マーケティング担当者は管理画面で内容を更新し、開発者はPayloadのフレームワークでアプリをカスタマイズできます。今回のFigma連携は全プランを対象とし、今後数週間かけて利用対象アカウントを広げる予定です。