Figmaのツール · Figma Code Layers

Figmaでデザインを直すと、実際のコードもボタン一つで変わる

Figmaが10月15日に公開ベータとして発表し、デモを披露した機能です。FigmaのフレームやGitHubリポジトリ、ウェブページをキャンバスに載せると、操作できる画面になります。その画面をデザインレイヤーとして取り出し、いつもどおり編集したら、ボタン一つでコードに変更を反映できます。修正したコードはGitHubのブランチにプッシュし、プルリクエストを作ってチームにレビューしてもらえます。公式デモと、いち早く試した人たちの画面を集めました。

2026年10月26日·事例 2件

Figmaブログ — Design Together With Code Layers on the Canvas, 2026-10-15

Figmaヘルプ — Code layers in Figma Design（プラン・シート・11月4日まで無料・順次提供）

Figma X — Code Layers公開ベータのリリース動画, 2026-10-15（10月26日時点で6,706,822回再生）

Figmaが10月15日のConfig IndiaでCode Layersの公開ベータを発表した35秒の動画は、Figma公式Xで670万回以上再生されました（10月26日確認）。その1週間後、FigmaはCode Layersの4つの使い方を紹介する10分の動画も公開しました。デザイン歴20年以上のMurat Bayral（YouTubeの02ui）は、自社ブログで試した後、「this thing is basically changing Figma entirely（これは事実上、Figmaをまるごと変えようとしています）」と話しました。

キャンバスに載せられるのは、Figmaフレーム、GitHubリポジトリ、自分のパソコン上のフォルダー、Chrome拡張機能で取り込んだウェブページ、そしてFigma MCPを通じてFigmaに接続したコーディングエージェントが送ったコードです。載せた画面は直接操作したり、複製して複数案を並べて比較したり、コメントを付けたりできます。修正したコードはGitHubのブランチにプッシュし、プルリクエストを作ってチームにレビューしてもらえます。

現在はFullシートとDesignファイルの編集権限を持つ人が利用できます。Figmaヘルプによると、有料プランでは11月4日までコードレイヤーの作成と編集にAIクレジットは消費されません。数週間かけて順次提供されるため、同じチーム内でもメニューの表示が遅い人がいます。GitHubから取り込むにはFigmaをGitHubアカウントまたは組織に接続する必要があり、対応するのは軽量なプロトタイプ用コードのみです。読み込みに10分以上かかることもあります。コードの作成と編集は、キャンバス内のFigmaエージェントが担当します。

Reference 01チュートリアル · デザイン歴20年以上の2人が運営するYouTubeチャンネル02ui

Figmaで直したブログのサイズと配置を、ボタン一つでコードレイヤーに反映

02uiのMurat Bayralは、FigmaをGitHubに接続し、自社ブログのリポジトリ（zero to UI blog main）をキャンバスに読み込みました。キャンバス内では実際のサイトのようにスクロールでき、ダークテーマもそのまま表示されました。Muratは「it is as same as my website（自分のサイトと同じです）」と話しています。

続いて「new hero section」という新しいブランチを作り、Extract designsで画面をFigmaのデザインレイヤーとして取り出しました。取り出した画面を見て、「This is exactly the auto layout structure that I initially built on Figma（最初にFigmaで組んだオートレイアウトの構造そのものです）」と話しています。その後、要素のサイズや配置をコンテンツに合わせる（hug）・固定（fixed）・塗りつぶし（fill）に変更し、Update code layerを押して修正をコードレイヤーに反映しました。

この作業は新しいブランチで行われました。実際のサイトに公開する場面は動画にはありません。

Reference 02提供元の公式事例 · Figma公式ブログが10月23日に紹介したCox Automotiveの活用例

デザイナーではないプロダクトマネージャーが、約1時間の手作業で19版のプロトタイプを作成

Cox AutomotiveでVinSolutions CRMを担当するプロダクトマネージャーのLindsay Brechlerは、ディーラー向けの新機能について4つのグレード案を関係者とすり合わせるため、大きなHTMLプロトタイプをコードレイヤーに取り込み、Figmaエージェントで調整しました。最終版は一つのHTMLファイルとして書き出し、社内サイトに載せました。

Figmaのブログに掲載された本人の推定では、約1時間の手作業で19バージョンを作成し、「at least 10 times more efficient, or about 90% time saved（少なくとも10倍効率的で、時間を約90％節約できました）」とのことです。デザイナーではない本人がFigmaで直接作る場合との比較で、以前はどれくらい時間がかかったのかはブログに書かれていません。Brechlerは「I'm not a designer, I'm a product manager.（私はデザイナーではなく、プロダクトマネージャーです）」と付け加えています。

Figmaのブログにはキャンバスの画面が掲載されていますが、成果物へのリンクはありません。

みんなの反応

よかったという声

“if you extract the design and do lots of iterations for hours, you don't spend any credits. That's the most powerful part of this code layers.”
デザインを取り出して何時間も何度も修正しても、クレジットは消費されません。そこがCode Layersの最も強力なところです。
Murat Bayral · YouTube 02uiyoutube.com
“molto molto utile”
とても、とても便利です。
実際のウェブサイトをコードレイヤーに取り込んだ際、ボタンのホバー時や押下時の状態も一緒に取り込まれたことについての発言です。
Matteo Salvati · YouTubeyoutube.com
“This is insane”
これはすごい。
@LPesthectics · Figma公式YouTubeコメントyoutube.com

物足りなかったという声

“si è inchiodato … ho notato che tende spesso a bloccarsi”
固まってしまいました……頻繁に止まる傾向があると気づきました。
Chrome拡張機能でウェブサイトを取り込んで貼り付けた後、試しているときの発言です。
Matteo Salvati · YouTubeyoutube.com
“Non sembrava funzionare bene”
うまく動いていないようでした。
画面上の要素を一つだけ選び、デザインとして取り出す機能を試したときの発言です。
Matteo Salvati · YouTubeyoutube.com
“right now it is in beta mode, so I spent 20 AI credits. I said maybe it would be free, but it was not anyhow.”
今はベータ版ですが、AIクレジットを20使いました。無料かもしれないと言いましたが、とにかく無料ではありませんでした。
公開ベータの翌日、10月16日に投稿した動画で、取り出したデザインの修正をUpdate code layerで一度コードレイヤーに反映した後の発言です。Figmaヘルプは有料プランでは11月4日まで作成と編集にクレジットを消費しないとしていますが、このとき消費された理由は動画では説明されていません。
Murat Bayral · YouTube 02uiyoutube.com
“it is clear that Figma AI credits are very expensive and runs out fast”
FigmaのAIクレジットがとても高く、すぐになくなるのは明らかです。
Figma MakeとFigmaエージェントを使ってきたと明かした視聴者のコメントです。
@basantrajmohan8716 · 02uiのYouTubeコメントyoutube.com
“The main problem with this feature is that I can only use Figma LLM”
この機能の一番の問題は、Figmaの言語モデルしか使えないことです。
@TheKarsonE · Figma公式YouTubeコメントyoutube.com
“Ehm 99.9% of real design systems need compilation at build-time.”
ええと、実際のデザインシステムの99.9％はビルド時にコンパイルが必要です。
キャンバス上でReactコードが動くと紹介したFlorian GampertのLinkedIn投稿へのコメントです。企業が実際に使うデザインシステムをそのままコードレイヤーで動かすのは難しいという指摘です。Figmaヘルプも、すべてのリポジトリに対応するわけではなく、一部のプロジェクトは修正しないと動かないと記しています。
Mattia Astorino · LinkedInlinkedin.com
“I dont think this is reliable for high scale applications, can be for demo purposes tho”
大規模なアプリケーションで安心して使えるとは思えません。デモ用なら使えるかもしれませんが。
@yashanand2308 · Figma公式YouTubeコメントyoutube.com

始め方

Figma Designファイルでフレームを一つ選び、Code LayersのFigmaエージェントに以下の依頼を貼り付けます。Fullシートと編集権限が必要です。編集権限を持つ人は誰でもコードを読めるため、APIキーは入れないでください。

はじめの依頼
この記事にFigma Code Layersの活用事例があります：https://www.working-ref.com/ja/reference/figma-code-layers-2026-10 今選択しているフレームを見て、私の仕事に合わせてCode Layersで試せることを3つ提案してください。ウェブページから始める案は、私のサイトか、私が権利を持つページに限ってください。一つ選んだら、すぐに始めてください。選ぶものがなければ、このフレームを操作できるコードレイヤーに変え、ボタンのホバー時と押下時の状態を追加してください。

このリファレンスを共有

毎週1回・無料

このリファレンスは役に立ちましたか？

毎週あふれるAIニュースから
BEST 3つだけ、受信箱へ

Work Smarter with AI

購読完了次号から受信箱でお会いしましょう。