コードレイヤーでサイトをインタラクティブにする
「コードレイヤー」が新登場—Figma Sitesでカスタムインタラクションを構築する新しい方法
コードレイヤーでサイトをインタラクティブにするを共有
ウェブ上で構築できるものに限界はありませんが、そのアイデアを実現するには技術的な知識が必要なことが多くあります。カスタムウェブサイトをデザインから実稼働（またはプロトタイプ）まで手掛けることは、静的なデザインを動的でレスポンシブな体験に変えることを意味します。このプロセスでは、組み込みインタラクションの制約の中で作業をすること、コードを直接編集すること、あるいは開発者に作業を引き渡すことが必要になります。
私たちはFigma Sitesでコードレイヤーを構築しました。これはカスタムReactコードを基にしたインタラクティブな要素で、これにより、追加の技術的知識や外部の助けなしでインタラクションや動きの実験ができます。ゼロから要素を作成する場合でも、既存のデザインを基にする場合でも、コードレイヤーを使うことで、フライアウトやドロップダウン、シェーダーや地図といった動的な機能をウェブサイトに追加できます。コンポーネントをコードレイヤーに変換したり、AIとチャットしてそれらを構築・調整したり、Figmaのコードコンポーザーで直接編集することができます。そして、複数のコードレイヤーのバリエーションを生成して、アイデアを横並びで比較したり、自由に実験したりできます。それもすべてFigmaキャンバス上で可能になるのです。
当社では最近Figma Sitesを発表しました。これは、Figmaのワークフローの中でウェブサイトをデザイン、構築、公開することができるツールです。コードレイヤーは、Figma Sitesが提供する既製の要素やインタラクションを基に構築されます。
コードレイヤーでカスタマイズと実験を行う
コードレイヤーは、Figma Makeの性能をFigma Sitesに取り込むことができます。ツールは次の基準で選んでください。
Figma Makeを使用する場合：
- 機能的なアプリをまさにプロンプトから構築したい。
- キャンバスは必要ない、または精密なデザイン作業をあまりしたくない。
Figma Sitesでコードレイヤーを使用する場合：
- 既存のWebサイトデザインにインタラクションを追加したい。
- キャンバス上でデザインを始め、カスタムインタラクティビティやモーションを追加したい。
Figma Sitesには構築済みのレスポンシブWeb要素や既製のインタラクション（オブジェクトのドラッグやテキストのシャッフルなど）が多数組み込まれているため、表現豊かなデザインを簡単に作ることができます。これらの機能は出発点となり、コードレイヤーによりさらにカスタマイズできます。コンポーネントにコードレイヤーを作成すると、Figma Makeを活用した組み込みAIチャットによってプロンプトするだけで動的な動作を追加できます。
例えば、花屋を経営していて、顧客がWebサイトからカスタムアレンジメントをデザインできるようにしたいと考えているものとします。Draggableのようなプリセットインタラクションを使用すると、ページ全体を自由に移動できる方法をデザインすることができます。しかし、この機能だけでは、作ろうとしているもののすべてをサポートすることはできません。無限にドラッグできる花のコピーを作成するためのカスタム開発作業が必要であり、各花がどのように配置されるかを正確にする必要があります。
コードレイヤーを使用すると、コンポーネントをコピーして花瓶にドラッグできるようにするようAIに指示し、さらに回転やレイヤリングエフェクトを試して実験することができます。このインタラクションのための開始プロンプトは、例えば次のようなものになります。「DIY花束アレンジメントを作成したい。各花のコピーをキャンバス上の任意の場所に好きな回数ドラッグアンドドロップできるようにしたい。花のコピーは元の花の画像とまったく同じサイズにする必要がある。」
既存のデザインでコードレイヤーを使用する方法
コードレイヤーを使用してWIPデザインをより動的にする方法は数多くあります。ここではその一部を紹介します。
- カスタムアニメーションを追加して、機能カードに回転やバウンスのような動きを持たせる。
- ポートフォリオの重要な統計をハイライトするカウンターなどの、完璧なテキストエフェクトを作成する。
- 製品ページでローン計算ツールや価格見積りツールなどの便利なコンポーネントを作成する。
- リップルや色の変化を伴うホバーアニメーションを追加して、静止画像にインタラクションを追加する。
既存のデザインでコードレイヤーを使って実験を行う準備ができたら、以下の手順に従います。
- Figma Sitesでデザインを開きます。
- 編集する要素を選択し、プロパティパネルのデザインタブにあるFigma Makeアイコンをクリックします。これにより、その要素がコードレイヤーに変換されます。
- AIチャットに必要なアニメーションやエフェクトの説明を入力します。
- キャンバス上で
Command Dを使ってコードレイヤーを複製して同時に複数のアイデアをテストし、AIチャットで探しているバリエーションの説明を入力します。
ゼロからコードレイヤーを始める方法
既存のデザインがない場合は、空白のキャンバスからスタンドアロンのコードレイヤーを作成することで、インタラクティブな要素の新しいアイデアをすぐにテストできます。
完全なコードレイヤーのデモは、Config London基調講演でご覧いただけます。
始めるには: Makeツール（またはショートカットE）を使用してキャンバスにコードレイヤーのショートカットを描画します。フレームを描画するのと同様です。これにより、AIチャットやコーディングしてフレームを生成するためのモーダルが自動的に開きます。「花の絵文字を使用してレイヤーの幅全体に広がる花の紙吹雪を作成する」というサンプルプロンプトをプラグインすることもできます。
さらに開始点が必要な場合、提案されるAIプロンプトが、構築するインタラクションの定義に役立ちます。また、Makeタブからのスターターコンポーネント（ボタン、イメージギャラリー、ナビゲーションメニューなど）を活用することもできます。これらにはあらかじめコードが書かれており、サイトにそのまま追加することも、デザインに合わせてカスタマイズすることも可能です。
将来の作業のためのステージ設定
コードレイヤーは、インタラクティブな要素で実験と反復を行う場合に便利なだけでなく、ロジックとパターンを再利用できるようにすることで、将来の作業を容易にします。
コードレイヤーのプロパティを編集
コードレイヤーには、文字列、数字、他のコンポーネントへの参照など、カスタマイズ可能なプロパティが含まれており、基礎となるコードを編集せずにレイヤーの動作と外観を変更することができます。これらのプロパティを使用すれば、コードレイヤーを異なるコンテキストに適応させることも簡単です。AIチャットはプロンプトに基づいて自動的にプロパティを生成し、必要に応じて特定のプロパティをリクエストすることもできます。
コードレイヤーを再利用可能なコンポーネントに変える
Figmaではフレームをコンポーネントに変えられますが、同様に、コードレイヤーを再利用可能なコンポーネントに変えることもできます。これらのコンポーネントを複数のページで使用したり、チームとパターンを共有したり、将来のデザインに実装したりできます。
充実したインタラクションを実現するためにコードのパッケージをインポートする
ノードパッケージマネージャー（npm）は、開発者が再利用可能なコードの塊を見つけて共有するためのレジストリです。これらのコードパッケージを使用すると、アニメーションや3Dレンダリングのような機能をインポートすることができます。すべてを最初から作成する必要はありません。
コードレイヤーを使用すると、motionや@react-three/fiberなどのノードパッケージマネージャー（npm）パッケージをインポートし、アニメーションや3D要素などの事前構築された機能を利用できます。
Figma Sitesのすべてのユーザーがコードレイヤーをすぐに使用できます。自分でインタラクティブなコンポーネントの実験や実装が簡単になれば、デザインをさらにプッシュし、アイデアを想像から現実に変えることができるようになるでしょう。