キャンバス上でコードレイヤーを使用してデザインする

コードでデザインすると、マイクロインタラクションから完全なフローまで、エクスペリエンスがどのように感じられ、動作するかを確認できます。しかし、全員が自分のコーディングツールで個別に作業していると、孤立してデザインしているようなもので、作品の共有や代替案の比較が難しくなります。

そのため、今年の初めにコードレイヤーを導入しました。これにより、共有のFigmaキャンバスにコードを取り込むことが可能になりました。以前は、コードの作業はIDEでの作業を意味していましたが、多くのFigmaユーザーが希望する方法ではありませんでした。コードレイヤーでは、Figmaキャンバスが提供するすべてのコラボーレーションツールを用いて、チームが視覚的にコーディングすることが可能になります。チームメイトは並んでプロトタイプを試したり、その横にフィードバックを残したり、コードレイヤーを複製して自分のアイデアを追求したりすることが、一か所で可能です。既存のデザインを作業用コードに変換する場合でも、サードパーティツール、ローカルフォルダ、またはGitHubからコーディングされたプロトタイプを取り込む場合でも、Chrome拡張機能を使ってウェブサイトに表示されているものをキャプチャする場合でも、コードレイヤーを利用すればキャンバス上で構築し続けることができます。

今週リリースされるすべての情報をご覧ください。

既存の作業から構築する

新しい製品アイデアを探求する際には、ゼロから始めることが役立つことがあります。それ以外の場合、例えば新しい機能やフローを考えている時には、既存のコードベースから始める方が効率的です。コードレイヤーでは、既存の作業を基に構築するためのさまざまな方法を利用できます。GitHubまたはローカルフォルダから、サポートされている軽量プロトタイプ作成コードベースをインポートすると、既にある画面とインタラクションを基に構築することができます。GitHubからインポートした場合、コードレイヤーはそのリポジトリに接続されたままになります。

例えば、自動車ディーラー向けのソフトウェアとサービスを提供するCox Automotiveでは、上級プロダクトマネージャーのLindsay Brechlerが既存のHTMLプロトタイプをコードレイヤーに取り入れ、新機能に関してステークホルダーを調整しました。すべてのバージョンがキャンバス上に残っているので、リンジーはどのバージョンからでも続けて作業を進めることができ、新たにやり直す必要はありませんでした。「反復するごとに、コードレイヤーはすべての画面やインタラクションを非常にうまくまとめてくれます」とリンジーは言います。

Figma Designをインタラクティブなコードレイヤーに変えることもできます。Rocket Moneyでは、デザインシステムのリードプロダクトデザイナーであるDerek Onayが、この方法を使用して初期のアイデアをチームと共有しています。チームが基盤のスクリーンコンポーネントを構築する際、製品の利用者が影響を受ける前に、インタラクションとアクセシビリティを早期に決定することが重要です。Derekは、その会話を促進するためにコードレイヤーにコンセプトを構築しました。「コードレイヤーを使うことで得られる真の価値は、アイデアのコミュニケーションの向上と、ステークホルダーの調整を実現できるようになることです」と彼は言います。「私は作業用プロトタイプを共有でき、チームとFigmaで合流することができます。」

既存のコードやデザインに加えて、自分のコーディングツールからプロトタイプをFigmaのMCPサーバーに取り込んだり、FigmaのChrome拡張機能を使ってウェブページのライブキャプチャをコードレイヤーとして取り込むことができます。

一緒に探究し、構築する

IDEでコーディングエージェントと作業している場合、代替案を考慮する前に、最初のアイデアに固執しがちです。コードレイヤーを使用することで、複数のバージョンのプロトタイプがキャンバス上に同時に存在できるようになります。チームと共にプロトタイプを複製し、異なるアプローチを試し、両方のバージョンを切り替えることなく比較することができるのです。

Miguel Wermuthは、Dell Technologiesのプロダクトデザイナーで、モバイル、タブレット、デスクトップにまたがりエンタープライズ顧客とdell.comの購入者向けのカスタマーアカウント体験に携わっています。彼はコードレイヤーを使用して会話型AI体験をキャンバスに取り入れており、ステークホルダーが質問を入力するとプロトタイプが適切な画面で応答します。フローが他のデザイナーによって承認されると、Miguelはコードレイヤーでそのフローを構築し、ビジネスのステークホルダーからの承認を得ます。これらのステークホルダーにとっては、作業プロトタイプは一連の静的画面よりも理解しやすいものになっています。バージョンを比較するために、彼はキャンバス上でコードレイヤーを並べて複製します。「コードレイヤーを使えば、キャンバス上でデザインしながらコーディングすることも可能です。デザインとコードの間の行き来を簡単にできるのは非常に強力な機能です。」

しかし、これは単に一つの方向性を評価するだけではありません。コードレイヤーがあれ、全体的に製品体験を俯瞰して見ることが可能になります。1Passwordの最高体験責任者であるマット・デイヴィーは、次のように述べています。「Figmaの本当の力は、以前も今もキャンバスにあります。これはウェブサイトのページを全部印刷してホワイトボードに貼るのに似ています。これらのUIエレメントをあわせて見ることができるのは非常に価値のあることです。」

コードを忘れることなく洗練させる

アイデアをブラッシュアップする際に、コードレイヤーを使ってデザイン調整を行い、稼働中のプロトタイプに適用することができます。直接視覚的な変更を加えたい場合、Extract designsを使えば、スクリーンやフローを、コードレイヤーから、編集可能なFigmaレイヤーに変換できます。

Checkout.comのシニアプロダクトデザイナーのKris Murphyは、企業が自社の顧客体験に統合する製品の開発に携わっています。見込みクライアントが技術を実際に見たいと希望したとき、Krisはコードレイヤーでデモを作成しました。「コードレイヤーを使うことで、慣れていないツールでもデモの完成が約50%早くなりました」とKrisは言います。クライアントとデモを共有する前に、Krisはすべてのスクリーンが洗練されていることを確認しようとしました。スクリーンごとにプロトタイプをクリックする代わりに、彼はコードレイヤーからすべての画面を引き出してFigmaキャンバスに置きました。それを隣り合わせに並べてレビューすることで、修正が必要な部分を見つけて修正するのが簡単になりました。Krisがその編集内容を再びコードレイヤーに戻すと、Checkout.comのチームもキャンバス上でのリビジョンのフロー全体をレビューできるようになりました。「コードレイヤーはデザインと開発を正しくつないでくれます」とKrisは言います。「アイデアを考え、実現するのを手助けしてくれます。」

他の編集オプションには、プロトタイプに直接コメントする、プロトタイプのフレームに注釈を付けてエージェントに変更が必要な部分を示す、コードを直接検査して編集するなどがあります。新たに更新されたフルスクリーン体験により、作業のさまざまな部分に対して、エージェントを活用して複数のスレッドで作業することができます。

変更を共有する準備ができたら、更新されたコードをブランチにプッシュして、チームメイトがプロトタイプから引き続き構築できるようにします。プルリクエストを作成することで、チームはそれらの変更を共用プロジェクトに統合する前に確認することができます。

コードレイヤーは、本日からオープンベータで展開されます。この機能はAIクレジットを使用します。有料プランでは、2026年11月4日までコードレイヤー内での作成と編集が無料です。