Figmaは、Figma Sites内でデザイナーがコーディング知識を必要とせずに、フルインタラクティブな要素を作成できる新機能「コードレイヤー」を発表した。この機能は、デザインと開発の境界を曖昧にし、外部の開発者サポートなしに動的で本格的な体験を構築できるよう設計されている。
コードレイヤーは、Figmaデザイン内にコードを直接挿入できるインタラクティブ要素だ。AI駆動のチャット機能と統合されたコードエディタを通じて完全なカスタマイゼーションが可能で、AIはユーザーのプロンプトに基づいてコードを生成・改良する。一方、エディタはReact、TypeScript、Tailwindを使用したコードの記述と調整の柔軟性を提供する。動的プロパティ機能により、ユーザーは基礎となるコードを変更することなく、レイヤーの動作を簡単に調整できる。
この機能により、デザイナーは従来の静的な要素を超えた創造が可能となる。アニメーション機能付きフィーチャーカードの作成、リアルタイム統計やプログレスバーの動的データ表示、ローン計算機や商品価格見積もりツールなどの実用的なコンポーネント開発が実現できる。さらに、ドラッグ可能なリストやソート可能なコンポーネントなどのインタラクティブUI要素の実装も支援する。
各コードレイヤーには編集可能なプロパティを含めることができ、高い柔軟性と再利用性を提供する。AIチャットはユーザーの意図に基づいてプロパティを提案し、手動での定義も可能だ。複数のコードレイヤーバージョンを生成し、並行比較しながら自由に実験できる機能も搭載されている。コードレイヤーは今週、有料プランのフルシートユーザーに対して段階的に展開される予定だ。
