「コードレイヤーはエンジニアが触るもの」は間違いだった——デザイナーが使わないと損する3つの場面

Figmaのコードレイヤー、エンジニアに任せておけばいい機能だと思っていないだろうか。2026年6月24日に開催されたFigma Config 2026でコードレイヤーが大きく進化し、デザイナーとエンジニアの協業スタイルが根本から変わりつつある。この記事では、デザイナーと開発者それぞれがFigmaのコードレイヤーで具体的に何ができるかを整理し、「デザイナーが知らないと損する3つの場面」を具体的に示す。

---

図解

flowchart TD
    subgraph Before["従来のワークフロー（コードレイヤーなし）"]
        D1["デザイナー\nFigmaで設計"] -->|"ハンドオフ"| E1["エンジニア\n実装"]
        E1 -->|"修正・確認依頼"| D1
    end
    subgraph After["コードレイヤー導入後"]
        D2["デザイナー\nAIと調整・確認"] <-->|"同じキャンバス上"| CL["コードレイヤー\n実際のコード"]
        CL <-->|"直接確認・拡張"| E2["エンジニア\n実装・レビュー"]
    end
    Before --> After

---

「コードレイヤー」と「Dev Mode」って何が違う？

Figmaを使っていると「Dev Mode」と「コードレイヤー」が混同されがちだ。まずここを整理する。

Dev Modeとは：エンジニアがデザインの寸法・色・スタイル・CSSなどを読み取るための表示モード。読み取り専用で、デザインを変更する機能ではない。ハンドオフの「見る側」に当たる。

コードレイヤーとは：デザインキャンバスの上に実際に動くコード（React/npmコンポーネントなど）をレイヤーとして置く機能。ただの見た目の表現ではなく、本物のコードがFigmaのキャンバス内に存在する状態を作れる。

この違いを押さえておかないと、「Dev Modeがあれば十分」という誤解のままコードレイヤーをスルーしてしまう。

---

デザイナーがコードレイヤーでできること

Figma公式ブログの発表内容（2026年6月時点）によると、コードレイヤーを使うとデザイナーは以下の操作が可能になる。

AIとチャットしながらUIを構築・調整する

コードレイヤーにはAIチャット機能が組み込まれている。「このボタンのホバーアニメーションをフェードにして」「このフォームを横並びにして」のように自然な言葉でAIに指示するだけで、コードが自動的に調整される。コードを書けなくても、AIが補完してくれるため、デザイナーの入口ハードルは低い。

コンポーネントをコードレイヤーに変換する

既存のFigmaコンポーネントをコードレイヤー形式に変換できる。これにより、今まで「見た目だけ」だったコンポーネントが、実際のReactコンポーネントとして機能する形に変わる。

コードコンポーザーで直接編集する

FigmaのCode Composer（コードコンポーザー）を使うと、コードをFigmaの画面内で直接編集できる。「エンジニアにSlackで連絡して修正してもらう」のではなく、デザイナー自身が軽微な調整を完結できる場面が増える。

注意点：コードレイヤーは公式発表によると2026年7月よりウェイトリストベータとして提供開始の予定。現時点では全ユーザーが即利用できるわけではない。最新の提供状況はFigma公式サイト（figma.com）で確認を推奨する。

---

開発者がコードレイヤーでできること

開発者側からもコードレイヤーは利点が多い。Figmaの公式ヘルプドキュメントの記載をもとに整理する。

デザインスペックをコードと紐づけて確認する

従来のDev Modeでは「これがどのコンポーネントに対応するか」をエンジニアが推測する場面が多かった。コードレイヤーでは、デザイン上のコンポーネントと実際のコードが直接紐づいているため、「このデザインはどのコードで実装するか」が明確になる。

GitHub・Jira・StorybookへのリンクをFigmaに追加する

外部リソース（GitHubのPR、JiraチケットのURL、Storybookのコンポーネントページなど）のリンクを該当のデザイン要素に直接紐づけられる。Figmaを開けば実装状況のトレースができるため、「あのコンポーネントってどこに実装したっけ？」という往復コミュニケーションが減る。

コンポーネントの実装をFigmaから直接始める

コードレイヤー上のコードをそのままリポジトリに持ち出せるため、「デザインを見ながら別でコードを書き直す」という二度手間が減る。デザインと実装の乖離を起点から防ぎやすくなる。

---

「エンジニアに任せればいい」と思っていると損する3つの場面

ここが今回の記事の核心だ。デザイナーがコードレイヤーを「自分には関係ない」と放置したとき、実際に何が起きるかを3つの場面に絞って見ていく。

場面① インタラクションの確認でエンジニア待ちが発生する

「このホバーアニメーション、実際に動かしたらどう見えるか確認したい」——従来はこの一言のためにエンジニアがプロトタイプを組んで共有するまで待つ必要があった。コードレイヤーのAIチャット機能を使えば、デザイナーがキャンバス上でAIに指示するだけで、実際に動くUIを確認できる。待ち時間ゼロで「やっぱり違う」「これでいい」を判断できる場面が増える。

場面② ハンドオフで毎回「ここはどういう意味？」が起きる

デザインと実装の間には必ず解釈のズレが生じる。「影はどのくらいの強さ？」「このテキストは何行まで折り返す？」——こうした疑問をSlackで毎回やり取りする時間は、コードレイヤーで実際のコードを共有することで大幅に減らせる。デザイナーがコードの意図を理解して設定してあれば、エンジニアは迷わずに済む。逆に言えば、デザイナーが無関係を貫くほど、齟齬の解消コストはデザイナー自身に跳ね返ってくる。

場面③ 小さな修正のたびにPRを依頼することになる

「ボタンのパディングを4px増やしたい」「このラベルのフォントサイズを12pxにしたい」——このレベルの修正でもエンジニアにコード変更を依頼するのは、双方にとって非効率だ。コードコンポーザーを使えば、デザイナーがAIと一緒に軽微な調整を完結できる場面が増える。エンジニアの稼働時間を本来の難しい実装に集中させるためにも、デザイナーの操作範囲を広げておく価値は大きい。

---

Config 2026でコードレイヤーはここが変わった

2026年6月24日のFigma Config 2026（TechCrunchほか複数メディアが報道）で発表されたアップデートの中で、コードレイヤーに関連する主な変更点をまとめる。

Generative Plugins（プラグインをプロンプトで生成）

これまでFigmaのカスタムプラグインを作るにはJavaScriptの知識が必要だった。Config 2026で発表されたGenerative Plugins（公式発表名）では、テキストプロンプトを入力するだけでFigmaプラグインを自動生成できるようになった。コードレイヤーと組み合わせることで、デザイナーが「自分のワークフロー専用のプラグイン」を作る障壁が大幅に下がると見られる。

ネイティブアニメーション対応

Figmaキャンバス内でのアニメーション表現が強化された。コードレイヤーと連携することで、デザインの段階からアニメーションの挙動をコードとして定義しておける（詳細な仕様は公式ドキュメントで要確認）。

AIシェーダーの追加

ビジュアルエフェクト向けのAIシェーダー機能が加わった。デザイン表現の幅が広がると同時に、コードベースの実装との整合性が取りやすくなることが期待される（2026年6月時点の発表内容より）。

出典：TechCrunch「Figma adds code layers, support for animations, more AI features in new update」（2026-06-24）、CMSWire、The Next Webほか複数メディア確認済み。Weaveワークフローとの統合については公式ブログで継続的に情報が更新されているため、最新状況は figma.com の公式アナウンスを参照のこと。

---

まとめ：デザイナーと開発者が今日から知っておくべき使い方

コードレイヤーは「エンジニアが使う高度な機能」ではない。デザイナーとエンジニアが同じキャンバスで対話するための橋であり、ハンドオフという概念そのものを変えようとしている。「自分には関係ない」と思っている間に、コードレイヤーを使いこなすチームとの差が広がる。

まずはFigma公式サイト（figma.com）でウェイトリストへの登録と、Config 2026のセッション動画で全体像を把握するところから始めるのが現実的な第一歩だ。