Figma Designの「Code layers」は、実際のコードで動く試作画面を、デザインと同じキャンバスに置く機能です。複数の案を並べて操作し、メニューの開き方や入力後の反応を見比べられます。Web制作では、見た目の確認に加えて「触るとどうなるか」を関係者で確かめる使い方ができます。

2026年10月15日にオープンベータの展開が発表され、Xでも紹介されています。気になるのは、新しいツールが増えたことより、制作会社との打ち合わせで何を決められるようになるかではないでしょうか。

この記事では、公式発表とヘルプを照合して機能と利用条件を整理し、企業サイト向けの操作確認表を独自に作成しました。自社案件での導入実績や、工数削減の実測を示す記事ではありません。情報の確認日は2026年10月18日です。

10月15日の発表で変わったこと

Figmaの公式発表は、Code layersがオープンベータへ移行し、順次使えるようになると案内しています。2026年6月に発表されたFigma Designのコードをキャンバスへ持ち込む構想が、より広く試せる段階になったという位置づけです。

XではFigma公式の発表投稿に加え、Figma関係者による日本語の紹介も確認できます。一方で、利用者側からは機能や価格への意見も出ています。確認した範囲では公式告知の反応が中心で、一般利用者による大規模な普及を示すものではありません。

検索すると、2025年のFigma Sitesのコードレイヤー解説も見つかります。本稿の対象は、2026年10月にオープンベータが発表されたFigma Design上のCode layersです。記事の発表日と、どの製品の機能かを合わせて読むと、古い操作説明との混同を避けられます。

Code layersで何を確認できる？

Code layerは、画像や動画として再生を眺めるだけのものではなく、コードが動くインタラクティブな試作です。公式ヘルプでは、レイヤーを複製して別案を試すこと、Playで操作すること、表示中の状態や操作の流れを「Extract designs」で編集可能なデザインへ取り出すことが説明されています。

たとえば、見た目が似た二つのナビゲーションでも、押した後に何が開くか、どこから戻れるかは違います。同じ操作を各案で試せば、静止画だけでは曖昧になっていた部分を話題にできます。これは本稿で提案する確認方法であり、特定の案の成果を保証するものではありません。

確かめたいこと Code layersを使う場面 別に確かめること
ボタンを押した後の流れ 複数案を操作し、次の画面を見比べる リンク先や実際の公開ページとの整合
読み込み中・空・エラーの表示 必要な状態を試作して関係者で確認する 本番の通信・データでその状態が再現されるか
スマートフォンでの操作感 対応する表示幅やモバイルのプレビューで触る 本番ブラウザ・実機での最終確認
変更する理由 案を並べ、採用理由や残る疑問を記録する 実際の利用者の行動や公開後の結果

画面を並べることと、利用者を二つの群に分けて成果を測るA/Bテストは別です。試作の比較で問い合わせ率の改善を実証したとは扱わず、どの操作や説明を確かめたかを記録します。

始め方は、今ある素材から選ぶ

Code layersの公式ヘルプには、空のレイヤー、既存のデザインフレーム、GitHub、ローカルフォルダ、Chrome拡張で取り込んだWebページから始める方法が示されています。打ち合わせで検討する対象に合わせて入口を選びます。

今ある素材 向いている検討 用意するもの
まだ画面がない 一つの操作のたたき台を作る 利用者・操作・完了状態の説明
Figmaのデザインがある メニューやフォームの動きを確かめる 対象フレームと、動かしたい範囲
取り込み可能なフロントエンドのコードがある 既存の画面を基に変更案を試す GitHubまたはローカルの対象コード
現在のWebページがある 現在の画面を出発点に案を検討する Figma Chrome拡張と、取り込む対象の確認

GitHubや既存サイトから始められても、あらゆるシステムを同じ条件で動かせるという意味ではありません。公式発表も、対応する軽量なプロトタイプ用コードベースを取り込む使い方を説明しています。接続先のAPIや認証、データベースを含む場合は、試作で再現する範囲を開発担当と決めてください。

取り込んだWebページを編集する際には、原稿・画像・コードを使用してよい範囲も確かめます。見本として閲覧できることと、第三者の制作物を自社の成果物へ利用できることは分けて判断します。

企業サイトでは「操作と状態」の確認表を作る

動く試作を比較する流れ。確かめる操作を決め、A案とB案を同じ操作で試し、操作後の状態を見て、採用理由と未確認事項を残す。実装と本番では改めて検証する。
公式機能をもとに組み立てた独自の検討例です。画面が動くことと、本番での品質確認を分けて記録します。

最初からサイト全体を試作するより、確認したい操作を一つ選ぶと、案の差を説明しやすくなります。以下は、サービスサイトのメニューと問い合わせ画面を想定した独自の記入例です。実案件の観察結果ではありません。

対象・状態 試す操作 その場で決めること
メニュー／閉じている メニューを開き、必要な項目を選ぶ 項目名と移動先を理解できるか
メニュー／開いている 閉じて元の画面へ戻る 戻り方と、操作中の位置をどう示すか
フォーム／入力前 何を入力するか読み取る 必須項目と入力例が伝わるか
フォーム／入力エラー 不足した項目を直す 理由と直し方をどこに表示するか
フォーム／送信中 送信後の表示を確認する 処理中と完了をどう区別するか
フォーム／完了 次に何をするか確かめる 受付内容や次の案内をどう伝えるか

フォームの試作では、画面遷移を再現しているだけなのか、検証用の送信処理につないでいるのかを先に共有します。完了表示を見たことだけで、担当者への通知やデータ保存まで確認済みにはしません。実際の問い合わせ情報を使う必要がない検討は、架空の検証用データで進めます。

比較するときは、画面幅、原稿量、開始状態をそろえ、違いを確かめたい箇所を明示します。文言と配置と操作方法を一度に変えると、どの差を採用したいのか説明しづらくなります。検討範囲はWebサイトのUI改善チェックリストも使って整理できます。

共有する相手と、コードを戻す手順も決める

Git連携の公式ヘルプは、Figmaに取り込んだコードの見え方にも説明を設けています。GitHubからクローンしたコードはFigmaファイルの共有範囲に関わるため、「GitHubの権限がない人にはFigmaでも見えない」と考えず、共有する前に確認してください。

同ヘルプでは、Code layerを含むDesignファイルの閲覧者はプレビューとそのソースコードを、編集者はGitレベルのソースコードも見られると説明されています。顧客固有の実装や未公開の情報を扱う場合は、どのコードを取り込み、誰へ見せるかをそろえます。

採用案を元の開発へ戻す場合も、試作の編集だけで作業を終えません。公式のGit連携手順に沿ってブランチやプルリクエストを使い、差分を確認する担当を決めます。どの操作で既存のコードへ変更が戻るかは、チームの連携設定や公開の仕組みに合わせて確認します。

利用できる時期とAIクレジットの条件

2026年10月18日確認時点の公式ヘルプでは、Code layersはオープンベータとして順次展開中です。対象プランに含まれていても、アカウントに機能が届く時期は異なり、Designファイルの編集権限も必要です。MCP経由でプロジェクトを取り込む手順にはFull seatの条件が記載されているため、利用する経路ごとに確認します。

有料プランでは、2026年11月4日までCode layer内のコード生成・編集にAIクレジットを使わないと案内されています。ただし、同じ依頼に含まれるエージェントの別の作業まで一律無料になるわけではありません。無料期間だけを見て、継続利用の費用を決めないようにします。

AIクレジットの公式説明では、利用できる機能や枠がプラン・seatで異なり、エージェントの消費量は依頼の内容等で変わるとされています。導入を相談するときは、確認日、プラン、利用する操作、無料期間後の扱いを一緒に控えます。本稿では未確認の円換算や制作費削減額を示しません。

打ち合わせ後は、決まったことと残る確認を引き継ぐ

動く試作を見た後に残したいのは、採用案だけではありません。「何を見て判断したか」「何はまだ動かしていないか」を一緒に残すと、実装担当へ渡す内容が具体的になります。同時に発表されたFigma Specsは、文章の意図や画面の参照をキャンバス上にまとめる仕組みです。既存の仕様書を使う場合でも、同じ項目を記録できます。

公開前には、実装したサイトでキーボード操作、スマートフォン表示、フォームの実際の送受信などを改めて確認します。アクセシビリティの確認方法や、Webサイト更新の承認フローも合わせて、誰が何を確認するかを明確にします。

Code layersは、動く案を早い段階で共有するための選択肢です。まずは「サービスのメニューを開いて戻る」など一つの操作を選び、静止画では決めにくかった点を確かめるところから検討できます。AIを含む制作全体の進め方は、AI時代のWebサイト制作で発注前に決めることも参考にしてください。

出典・確認した資料

2026年10月18日に以下を確認しました。提供状況、利用条件、操作方法は変更されるため、利用時には現行の公式案内を確認してください。