FigmaがCode Layersを公開：インタラクティブなアイデアがデザインキャンバス上に集まります

二つの予約ページは、どちらも整って見えます。どちらにも日付フィールドと保存ボタンがあります。一つ目ではダイアログで予約を変更し、二つ目では別のページが開きます。どちらのバージョンが優れているのでしょうか。スクリーンショットは色や余白を確認するには役立ちます。しかし、人が流れを理解できるかどうかは、限られた範囲でしかわかりません。

2026年十月15日、FigmaはCode Layersをベータ版として公開しました。対応するプロトタイプはコードでさらに開発でき、共有のデザインキャンバス上で比較できます。既存のコードも、ドキュメントに記載された条件のもとで取り込めます。編集部の視点から興味深いのは、動作について共同で作業できる点です。これによりプロトタイプは、見栄えのよい結果を示すだけのものではなく、判断の対象になります。

まず同じタスクを設定し、それから異なるインターフェースを比べます

私たち独自の例として、クラブのイベントを取り上げます。利用者は日付を変更し、参加条件を読んだうえで、保存するかキャンセルするかを選びます。どちらのバージョンにも、同じタイトル、同じ日付、同じ長めの注記を入れます。片方のバージョンに短い仮のタイトルしか表示されていなければ、その時点で比較は偏ってしまいます。

ダイアログでは、予約一覧が背後に表示されたままです。別の編集ページでは、より広いスペースが使えます。これらは異なるデザイン上の判断であり、品質の優劣ではありません。興味深いのは画面の切り替わりの部分です。保存後、利用者はどこにいるのでしょうか。キャンセルしたとき、入力しかけた内容はどうなるのでしょうか。変更中、どの情報が表示されたままになるのでしょうか。

状態モデルがあれば、動作について議論できるようになります

まず、プログラミングの構文を使わずに流れを記述します。予約が表示されています。編集を押すと入力欄が開きます。無効な入力をすると説明が表示され、有効な入力内容は保持されます。保存すると確定した状態が表示されます。キャンセルすると変更前の状態に戻ります。これらは私たちの例における要件であり、Figmaの組み込み機能についての約束ではありません。

View → Edit → Input
Input → valid → Save → Confirmation
Input → invalid → Hint + input kept
Input → Cancel → original view

この小さなモデルを使えば、各バージョンを的を絞って検証できます。ダイアログは見た目こそ素晴らしいものの、エラーが起きるとヒントのテキストが消えてしまうかもしれません。別ページのほうは洗練さでは劣っても、戻り方がわかりやすいかもしれません。こうして評価の対象は、ダイアログに対する漠然とした好みではなく、観察可能な動作になります。

フィードバックには共通の参照点が必要です

役に立つコメントは、たとえば次のようなものです。「キャンセルした後、新しい日付が保存されたのかどうかわかりませんでした。」このコメントは、場所、操作、そして不確かさを示しています。一方、「あまりモダンな感じがしない」というコメントでは、まだ誰も取り組める問いになりません。下書きとコメントが同じキャンバス上にあれば、検討中のバージョンとの結びつきを保つことができます。

変更を加えるたびに、それがどの不確かさを解消するためのものかを記録してください。たとえば、書体、色、ナビゲーションを同時に変えるのではなく、まず確認表示を変更します。そうすれば、二つ目のバージョンの印象がなぜ違うのかを理解しやすくなります。これは統制されたユーザビリティ調査ではありませんが、デザイン段階での作業の進め方として理にかなっています。

判断は引き継げますが、コードは自動的には引き継げません

最後に、短い引き継ぎメモを用意しておくべきです。推奨するバージョン、それが支えるタスク、関連する状態、そして残っている疑問点です。サンプルデータを使ったインタラクティブな下書きは、まだ本物の予約プラットフォームではありません。サインイン、保存されたデータ、実際の権限は、アプリケーションの中で別途機能させる必要があります。

KENJTECページに小さなクライアントサイドの機能を追加する場合なら、その判断を独自のHTML、CSS、JavaScriptとして実装できます。そのために KENJTEC WebSiteBuilder ai は、分離されたプレビューと独自のコード公開ステップを備えた開発者モードを提供しています。関連するコンポーネントはご自身で移植します。これはFigmaからのインポートや、任意のアプリケーションのホスティングを意味するものではありません。

ドキュメントに記載された時点では、Code Layersはまだベータ版です。具体的な手順ガイドを作成する前に、提供状況、対応する開始プロジェクト、条件を改めて確認してください。とはいえ、この方法はツールに関係なく有効です。見栄えのよい二つの画面を比べるだけで終わらせないでください。どのように使われるかという同じ問いに対する、追跡可能な二つの答えを比べてください。

出典と情報の時点

2026年十月25日時点の調査とドキュメントに基づきます。キャンバス上でcode layersを使って共同でデザインする。