こんにちは、ハヤマです。
今回は、2026年6月23日〜25日にサンフランシスコで開催されたFigmaの年次カンファレンス「Config 2026」で紹介された機能「Code Layers（コードレイヤー）」が興味深かったので、Code Layersの概要やできること、提供開始時期などについて書いていきたいと思います。
Code Layersとは
「Code Layers」は、Figmaで作成したコンポーネントを、キャンバス上で直接編集可能なコードベースのレイヤーに変換できる機能です。
制作のプロセスにおいて「デザイン」「コード」の二択で語られてきた業界の議論に対し、Figmaは“デザインはプロセスであり、コードは画像やベクターと同じ素材のひとつである”という考え方を打ち出し、両者を同じキャンバス上で扱えるようにしました。
任意のデザインレイヤーをワンクリック、またはプロンプトを使用しインタラクティブなCode Layersに変換することで、従来デザインツールとコードエディタを行き来していた作業がひとつのファイルの中で完結。
これにより、追加の技術的知識や外部の助けなしにインタラクションや動きの実験ができるようになります。
この機能のポイントは、「コード品質を気にせず試せる」という点にあります。 FigmaのCPOである山下祐樹氏は、マルチプレイヤーのキャンバス上であれば、本番環境へのコード品質を意識する前段階として、チームで気軽にアイデアを試行できる点が強みであると説明しています（ただし、Code Layersはあくまで探索・仕様検討のための「デザイン素材」という位置づけであり、Code Layersで生成したものがそのまま本番コードになるわけではないことを理解しておく必要があります）。
できること
Code Layersでできることは以下の通り。
デザインレイヤーをCode Layersに変換
前述した通り、既存のデザインフレームを選択し、ワンクリックまたはテキストプロンプトでインタラクティブなCode Layersに変換できます。Figmaのエージェントに生成を依頼することも◎。
複数案を並べて比較できる
Code Layersは通常のデザインフレームと同じように複製できるので、複数の実装パターンを並べて見比べながら検討することができます。
デザインとコードを相互に変換
Code Layersからデザインフレームへ抽出して編集し直したり、逆にデザインの変更をワンクリックでCode Layersに同期させたりと、双方向の変換が可能。
GitHubリポジトリをキャンバスに直接取り込む
GitHubと連携したリポジトリをそのままFigmaのキャンバス上にクローンし、既存のビジュアルコンポーネントと並べて作業できます。ローカルフォルダもキャンバスに読み込めます。
npmパッケージのサポート
React系のコードに対応しており、モーションライブラリや3Dフレームワークを含むnpmパッケージも利用できます。これにより、ドロップダウンメニューのようなインタラクティブな部品からシェーダー表現まで、キャンバスを離れずに実装することができます。
提供開始について
2026年7月から数週間にわたってクローズドベータ版として展開されるとのこと。
早く試してみたい方は、以下のページからウェイトリスト登録が可能です。
さいごに
記事を書きながら、「GitHubリポジトリを、デザインのキャンバスに直接クローン...できるの......？」と唖然としました。すごい時代になりましたね。
Code Layersの目的は、従来デザイナーからエンジニアにデータを引き渡すハンドオフのプロセスが解消されることで、作業の境界をなくし、実装のズレや調整といった手間を軽減させることにあります。
ただ、冒頭で「追加の技術的知識なしに」と書きましたが、この機能を使いこなすためにはデザイナー側もGitHubやコードの理解を深める必要があるなと感じました。
現状だと、Figma上でデザイン↔︎コードの行き来を何度もやるとコードが乱雑になるという話を聞いたことがあるのですが、どうなんでしょう。そもそも「デザイン素材のためのコード」を前提とした機能ですし、構築の精度に関しては今後少しずつ改善されていくといいですね。
Figma Config 2026発表内容については、以下の記事でも紹介されています。
Code Layers以外にも新機能が紹介されているので、気になる方はぜひご覧ください。
www.figma.com
