本記事はFigma Config 2026参加レポート③です。
2026参加レポート①
▶▶
2026参加レポート②
▶▶ 本記事
こんにちは！フロントエンドエンジニアの鈴木です！
前回の記事に続き、Figma Config 2026で発表された新機能（主にCode Layers）について、エンジニア目線で感じたことをまとめます。
これまでのデザイナーやエンジニアの業務フローを覆すような機能がありましたので要注目です！
今回発表があった主な新機能は以下の通りです。
- Code Layers
→ Figmaのキャンバス上でコードを扱える機能 - Figma Motion
→ タイムラインやキーフレームによる高度なアニメーション機能 - Shader fills and effects
→ 複雑なビジュアルエフェクトを作成・適用できる機能 - Generative plugins
→ AIを活用して独自のプラグインを生成する機能 - Figma Weave tools
→ ノードベースで画像・動画を生成／加工できる機能 - Figma agent
→ 既存のAgent機能の拡張。直接ファイル添付やMCPによる外部ツール連携が可能に。
新機能発表の動画はYouTubeでアーカイブ視聴ができます。
また、Figma公式ブログにも新機能の紹介があります。
https://www.figma.com/blog/config-2026-recap/
Code Layersでできること
エンジニア目線で特に興味を持ったのが「Code Layers」です。
Code Layersの登場によって、これまでのデザイナーやエンジニアの役割やあり方は大きく変わる可能性があります。
Code Layersの主な機能は以下の通りです。
キャンバス上でのコード編集とプレビュー
「コードツール」からコードレイヤーを作成し、キャンバス上で直接コードの編集・生成が可能です。
コードは手作業で記述することも、Figma AIエージェントを使って生成することもできます。
コードレイヤーで作成された動きはリアルタイムでプレビューできます。
今までFigma上での表現が難しかった動きが、Figma上で確認できるようになるとデザイナーとエンジニアで認識合わせもしやすくなりますね。
コードレイヤーを作成する様子
Figma公式YouTubeより外部リポジトリからのインポート
GitHubリポジトリやローカルフォルダをキャンバスに読み込むことでコードレイヤーを作成することも可能です。
これにより、既存プロジェクトのコードもFigmaのコードレイヤー上で扱うことができます。サイドバイサイドでの比較・検討
複数のコードレイヤーを並べて表示し、操作感や見た目を比較できます。
UIの意思決定にかかっていた時間を大幅に短縮できそうです。
複数のコードレイヤーを同時に確認している様子
Figma公式YouTubeよりブランチの作成
Optionキー＋ドラッグで簡単にブランチを作成できます。
試行錯誤を非破壊で進められる点は、Git的な発想に近いです。コードとデザインの相互変換
コードレイヤーで生成したUIは、フロー単位でデザインレイヤーへ書き出すことができます。
また、デザインレイヤーでの変更をコードレイヤーに反映することも可能で、そのままGitへpushすることもできます。
ちょっとしたデザイン変更ならコーダーの作業は不要になるのかもしれません。
単一のコードレイヤーから、フロー単位のデザインレイヤーを作成する様子
Figma公式YouTubeより
これまで分断されていた「デザイン工程」と「実装工程」ですが、Code Layersの登場によってFigma上で両者が共存する形になります。
デザイナーがコードを書く、エンジニアがデザインを調整する、といったことが増え、役割の境界は徐々に曖昧になっていくのではないかと感じました。
Code Layersをうまく使うには？
スピードよりも検証サイクルが重要
ただ単にスピードアップするだけではあまり意味はないと思います。
重要なのは「どれだけ早く試行・検証を回せるか」です。
今回のconfigで参加した他のセッションでも、
・開発スピードを上げること自体がゴールではない
・検証サイクルを高速化することに価値がある
といった話が多くありました。 ユーザーテストのタイミングを早めたり回数を増やすような目的で使うのが良いのかもしれません。他機能と組み合わせる
Figma Make、Figma Agent、MCPなどと組み合わせることで、Code Layersはより実用的になると感じました。
これらを連携することで、新しい領域の作業に対するハードルを下げつつ、品質を高めることができると思います。
（発表の中でも、それぞれの機能を組み合わせながら使用していました。）
とはいえ、デザイナーがエージェントを使って生成したコードレイヤーは完全ではないこともあると思います。
コードレイヤーのたたき台をデザイナーが作成し、細かい部分をエンジニアが調整するような動きがよさそうです。デザイナーとエンジニアのクロスオーバー
Code Layersは、デザイナーとエンジニアの両方が使うと良いと思います。
デザイナーとエンジニアそれぞれの作業範囲が広がり、同じ視点・目的意識で会話ができるようになります。
その結果、
・より質の高い議論が可能になる
・ワークフロー自体が変化する
といった影響が出そうです。 ただし、完全に同じ役割になるというわけではなく、それぞれの専門性や責任範囲はあまり変わらないのかなとも思います。
最終的なコードの品質については、引き続きエンジニアが責任を持って確認する必要があると感じています。
気になる点
コード⇔デザイン変換の精度
本番コードベースでの運用も可能とのことですが、実用レベルの精度かどうかは実際に触ってみないと判断できないところです。
個人的にはアクセシビリティ対応などが気になります。対応言語・フレームワーク
HTML / CSS / JavaScriptは当然対応していると思われますが、その他の言語やフレームワーク対応は気になるところです。デザイナーが使いこなせるか
自然言語からコード生成は可能ですが、Gitの概念やブランチ運用など、エンジニア的な知識が必要になる場面もありそうです。
提供予定時期
まずはクローズドベータとして提供され、2026年7月から順次オンボーディング予定とのことです。
下記リンクから早期アクセスの申し込みが可能です。
気になる方はぜひチェックしてみてください！
https://www.figma.com/config-betas/
まとめ
Code Layersにより、デザインとコードがFigma上で同期・共存できるようになります。
それに伴い、開発フロー自体も大きく変わる可能性が出てきました。
デザイナー／エンジニア双方の守備範囲が広がることで、今後は「どちらも理解している人材」がより重要になってくると感じました。
デザイナーがコードを、エンジニアがデザインを理解する必要が高まり、両者の境界はさらに曖昧になっていくのでしょう。
私もデザイン領域の知識を積極的にインプットしていくようにしたいと思います！
Figmaはデザインツールとして始まりましたが、今や開発工程にも影響を与える存在へと進化しています。
デザイナー以外の方も、機会があればぜひFigma Configに参加してみてください。
