Figmaの「コードレイヤー」とは──デザインとコードを同じキャンバス上で行き来する新機能

デザインツールと開発環境の間には、これまで明確な壁があった。Figmaでデザインを作り、それを見ながら別のエディタでコードを書く、という往復作業だ。Figmaが2026年6月24日のConfig 2026で発表した「コードレイヤー（Code layers）」は、この壁そのものをなくすことを狙った機能だ。公式ブログとヘルプセンターの記述を確認する。

• コードレイヤーは、動くコードをFigmaのキャンバス上の1レイヤーとして扱える機能。GitHubリポジトリのインポート、デザイン→コード変換、コード→デザインの逆変換（Extract Designs）までを1つのキャンバスで往復できる
• 2026年8月27日時点でクローズドベータ段階。一般提供の具体的な日付は公式ブログ・ヘルプセンターのいずれにも明記がなく「近日中」という表現のみ
• AIクレジットは全プラン・全シートに毎月付与される。Full seatの月間クレジット数はStarter 500・Professional 3,000・Organization 3,500・Enterprise 4,250。ただしコードレイヤー機能自体が何クレジット消費するかは、この記事で確認した範囲の公式ドキュメントには明記されていない

なぜ作ったのか：「コードもデザイン素材の1つ」という主張

コードレイヤーの位置づけは、機能単体の紹介記事だけでなく、Figma共同創業者兼CEOのDylan Field氏によるConfig 2026全体のリキャップ記事でも語られている。同記事を直接確認すると、Field氏はこう述べている。

"For years, the design industry has talked about 'design versus code,' and tools (including Figma!) have forced a choice. But this is a false debate. Design is a process. Code is material, just like images, vectors and design layers... We believe code should be treated like any other design material."

長年「デザインかコードか」という二者択一が語られてきたが、これは誤った対立軸であり、デザインとは「プロセス」であって、コードは画像やベクター、デザインレイヤーと同じ「素材（material）」の1つにすぎない、とField氏は主張する。同記事は「AIは(参入の)床は下げたが、天井を上げてはいない。それを上げるのはデザイナー・クリエイター・作り手自身だ」とも述べており、コードレイヤーはAIによる自動生成そのものより、人間が素材としてのコードを直接操作できるようにすることに重心を置いた機能だと位置づけられている。

「レイヤー」としてのコード

Figma Design担当プロダクトマネージャーのNikolas Klein氏が執筆した公式ブログは、この機能の核心をこう表現している。

"With code layers in Figma Design, interactive code becomes part of the canvas itself, making it easier for teams to explore, iterate, and shape ideas together in the same place."

コードレイヤーによって、インタラクティブなコードそのものがキャンバスの一部になる。デザインレイヤーと同じように、チームが同じ場所で探索・反復・アイデアを形にできるようになる、という考え方だ。

始め方は複数用意されている

ブログによれば、コードレイヤーの始め方には柔軟性がある。

• Figma Designのツールバーからコードレイヤーを追加する
• 既存のフレームから作成する
• Figma agentに生成させる

そこからテンプレートを起点にするか、作りたいものを説明する形で進められる。既存のコードベースを持ち込むこともでき、GitHubリポジトリのインポートやローカルフォルダの直接アップロードにも対応する。Figma Make（Figmaのコード生成ツール）でコードを生成・編集し、それをコードレイヤーとしてキャンバスに持ち込んで、チームで探索・比較・改良することもできるという。

デザインフレームのように「複製して試す」

ブログが強調するのは、デザイナーが従来からフレームを複製して代替案を試してきたのと同じ感覚で、コードレイヤーも複製して試せるという点だ。

"Designers have always duplicated frames to try alternatives—code layers work the same way. Working experiences can live on the canvas so you can compare how options actually feel, not just how they look."

要素を動かしたり調整したりリサイズしたりすると、即座にコードへの反映（レスポンス）が返ってくる。プロンプトで反復を続けると、エージェントは元のバージョンを保持したまま新バージョンを生成する。コードレイヤーは共有ファイル内に存在するため、チームメンバーが飛び込んで参加し、コメントを残したり、同じレイヤーに対してプロンプトを出したりできる。

コードとデザインを行き来する：Extract Designs

ブログが紹介するもう一つの機能が「デザインの抽出（extract designs）」だ。コードの現在の状態を、編集可能なFigmaレイヤーに変換し直すことで、ソフトウェアを視覚的に理解できるものにする。1つの画面だけを取り出すか、特定の状態を取り出すか、フロー全体を取り出すかはユーザーが決められる。そこから編集を加えれば、ワンクリックでコードレイヤー側が更新される。

コードエディタ内でより具体的な指示（アノテーション）を加え、エージェントに望む変更をさせることも、直接クリックして編集することもできる。満足したらコードレイヤーに変換し戻し、リポジトリにプッシュすれば、チーム全体がその更新を確認できる、という一連の往復フローが説明されている。

提供開始時期

ブログ本文には「コードレイヤーは今後数週間にわたってクローズドベータで展開される」とあり、早期アクセスの申し込みページへの案内がある。Figma公式ヘルプセンターの記載では、次のように明記されている。

"Note: This feature is currently in closed beta, but will be available more broadly soon. Stay tuned!"

現時点ではクローズドベータ段階で、より広く提供されるのは「近日中」とされている。ヘルプセンターは主要な使い方を「Move between mediums: Convert code layers into design layers for editing, and design layers into code layers for building（媒体間を行き来する：コードレイヤーを編集用のデザインレイヤーに変換し、デザインレイヤーを構築用のコードレイヤーに変換する）」と要約している。

併せて発表されたジェネレーティブプラグインの課金情報

同じヘルプセンターページには、コードレイヤーと似た文脈で発表された「ジェネレーティブプラグイン」に関するFAQも掲載されている。特に実務上気になるAIクレジットの消費については、次のように明記されている。

"Do generative consume AI credits? As of now, generative do not consume AI credits. Once the Figma agent becomes generally available, standard AI credit usage will apply to build plugins with the agent. It does not consume AI credits to run a generative plugin."

現時点ではジェネレーティブプラグインの作成・実行にAIクレジットは消費されないが、Figma agentが一般提供された後は、エージェントを使ったプラグイン構築に標準のAIクレジット利用が適用される（プラグインの実行自体は引き続きクレジットを消費しない）という。ジェネレーティブプラグインはFigma社によってホストされ、Figmaファイル内で直接書かれ実行される点が、ローカル開発環境で作られ、Figma Communityで公開される従来型のクラシックプラグインとの違いとして説明されている。

AIクレジットの仕組み（プラン別の月間付与量）

コードレイヤーやFigma agent、ジェネレーティブプラグインといった機能は、いずれも「AIクレジット」という共通の消費単位に紐づいている。Figma公式ヘルプセンター「How AI credits work」を確認すると、クレジットはシート単位で毎月付与され、繰り越しはできず、他ユーザーへの譲渡もできない。金銭的な価値を持つものではなく、Figmaの AI機能専用の利用枠だと明記されている。

Full seat（フル権限のシート）ほどクレジット付与量が多く、Dev・Collab・Viewといった閲覧・限定編集シートはプランを問わず月500クレジットで統一されている。Starterプラン・Viewシートには1日150クレジットという追加の上限もある。コードレイヤーが具体的に何クレジット消費するかはクローズドベータ機能のため公式ドキュメントにまだ明記されていないが、少なくとも「クレジットという共通の財布から使われる」という枠組み自体は、他のFigma AI機能と同じであることがこの表から分かる。

AIコーディングという文脈での位置づけ

コードレイヤーは、デザインツールとコーディングエージェントの境界を薄くする動きの一例だ。同じConfig 2026で発表されたFigma Motionがアニメーションの領域でDev Modeとの連携を強めたのと同様に、コードレイヤーはUI実装そのものの領域でこの統合を進めている。AIにコードを書かせる際の設計・レビューの基礎知識、デザイントークンをAIコーディングにどう渡すかについては「AIっぽい見た目」を卒業する──デザイントークンをAIに渡す方法、コーディングアシスタント全般の比較はAIコーディングアシスタント比較も参照してほしい。

一般提供の具体的な日付はどこにも書かれていなかった

• 本記事執筆時点（2026年8月27日）で、コードレイヤーはクローズドベータ段階にあり、一般提供時期の具体的な日付は公式ヘルプセンター・ブログのいずれにも明記されていなかった。「近日中に、より広く提供される」という表現のみが確認できた情報だ。
• 実際にコードレイヤーを使った際のパフォーマンス、対応言語・フレームワークの範囲、料金プランごとの利用制限についての詳細は、本記事のソースには含まれておらず確認できていない。
• GitHubリポジトリのインポート機能について、認証・権限の仕組み、対象リポジトリのサイズ制限などの技術的な詳細は、本記事のソースからは確認できなかった。
• 「AIクレジットを消費しない」という記述はジェネレーティブプラグインに関するものであり、コードレイヤー機能自体のAIクレジット消費有無について、ヘルプセンターに明記された記述は本記事では見つけられなかった。「How AI credits work」ページのプラン別クレジット表は確認できたが、これは全般的な枠組みであって、コードレイヤーの個別消費量を示すものではない。
• Choose a Figma Planページ（プラン別の月額料金の一次情報）にもアクセスを試みたが、静的に取得できたHTML本文はナビゲーション中心で、実際の料金比較表の中身（おそらくJavaScriptで動的に描画される部分）は確認できなかった。そのためこの記事では具体的な月額料金には触れていない。