Figma でデザインされたファイルの情報を自動的に解析し、デザイン要素を実行可能なコードに変換できます。個々のコンポーネント（ボタン、フォーム、カードなど）を選択して生成することはもちろん、フレーム全体を完全なページコードとして生成することも可能です。選択中のフレームまたは要素をダイアログに追加して送信すると、コードスニペットの生成が開始されます。
ビルトインの Figma ツールパネルを使用すると、画面を変えることなくデザインファイルの表示やレイヤーの並び順調整、基本的なスタイル変更などができます。ブラウザー切り替えや Figma への移動などの手間を省くことが可能です。
- 会話の入力ボックスの右下にある Figmaからインポート をクリックします。
右側の領域に Figma ツールパネルが表示されます。
2. Figma にログインします。
3. コードに変換したいフレームまたは要素を選択し、右上にある 会話に追加 をクリックします。
選択したフレームまたは要素がダイアログボックスに追加され、デフォルトのプロンプトが表示されます。
4. （必要に応じて）プロンプトを編集します。
5. 送信 をクリックするか、Enterキーを押します。
Figma のデザインとプロンプトに基づいて、AI がコードの生成を始めます。