デザインライブラリを接続
エージェントをデザインシステムに接続すると、生成されるコードは汎用的なプレースホルダーではなく実際のトークン、バリアブル、コンポーネント構造を参照します。
デザインをキャンバス上でコードに変換
Figmaのデザインを、ファイルを離れることなくAIで本番環境向けのコードに変換できます。書き出しも、別ツールでの作り直しも、デザインと開発の間で発生する連携の行き違いもありません。
デザインから開発まで、すべてを1つの場所で
Figmaエージェントは、実際のレイヤー、コンポーネント、スタイルを開発者が使えるコードに変換し、全員が同じファイルで作業できる状態を保ちます。
デザインに一致したコードを生成
Figmaエージェントは、実際のレイヤー、間隔、コンポーネントを読み取り、作り直しが必要な大まかな近似ではなく、実際に作ったものを反映したコードを生成します。
ハンドオフの手間を削減し、より速く出荷
仕様の書き出し、赤線注釈の作成、パディングに関する質問への対応といったやり取りは不要です。エージェントがデザイン上の判断を、開発者がそのまま使えるコードに変換します。
デザイナーと開発者の連携を維持
コード生成はチームがデザインを行っているのと同じファイル内で行われるため、全員が唯一の情報源を確認できます。古い書き出しファイルが出回ることも、どのバージョンが最新か迷うこともありません。
変換を支える機能
デザインチームの実際の働き方に合わせて作られた、Figmaエージェントならではの特長を詳しく見ていきましょう。
並行プロンプト
複数のコード出力を一度に検討できます。たとえばReact版とHTML版を同時に試して、自分のスタックに合うものを選べます。
共有可能なスレッド
スレッドを共有すると、チームはプロンプト全体、デザインのコンテキスト、コード出力を確認できます。開発者は「何を」だけでなく「なぜ」も理解できます。
追加プロンプトで調整
最初の出力がしっくりこない場合は、同じスレッドで調整しましょう。レスポンシブなブレークポイント、異なる構文、より整理された命名規則をリクエストできます。
Figmaは、まるで自分の手の延長のように感じられます。キャンバス上でデザインのアイデアを練り、あとはエージェントが最後まで仕上げてくれます。デザインライブラリを接続すれば、これまでにない速さでデザインからコードへ進めます。
Andy Madrick
プロダクトデザイナー、Notion
Figmaエージェントを使ってみる
デザインを選択
Figma Designでファイルを開き、コードに変換したいフレーム、コンポーネント、セクションを選択します。
出力内容を説明する
HTMLとCSS、Reactコンポーネント、特定のフレームワークなど、必要なものをエージェントに伝えます。チームで採用している規約があれば併せて伝えましょう。
コードを確認
キャンバス上で生成された出力を確認します。しっくりこない場合は、同じスレッドで調整するか、別のアプローチを並行プロンプトで試せます。
開発チームへ引き渡す
スレッドを開発者と共有します。デザイン、プロンプト、生成されたコードを1か所で確認でき、すぐに実装や反復に取りかかれます。
FAQ
Figmaコード変換ツールは、ビジュアルなデザインをHTML、CSS、Reactなどの本番環境向けコードに変換するツールです。Figmaエージェントはこれをキャンバス上で直接行い、実際のレイヤー、コンポーネント、デザイントークンを読み取って、作ったものに一致するコードを生成します。別のツールや書き出し作業は不要です。
Figma Designで変換したいフレームやコンポーネントを選択し、左サイドバーからエージェントを開くか、CMD + Enterを押します。React、HTML、レスポンシブCSSなど必要な出力を説明すると、エージェントが実際のデザインレイヤーをもとにコードを生成します。開発に使える状態になるまで、追加のプロンプトで調整しましょう。
Figmaエージェントは、プロンプトを入力するとデザインからコードを生成できます。フレームを選択し、必要な出力形式を説明すると、エージェントがレイヤーをコードに変換します。完全に自動というわけではなく、プロンプトでプロセスを導く形になりますが、変換作業自体は任せられるため手動で作り直す必要はありません。
精度は、デザインがどれだけ整理されているかによって変わります。Figmaエージェントは実際のレイヤー、間隔、コンポーネントの階層を読み取るため、整理されたファイルほどきれいなコードが生成されます。命名規則、レスポンシブの挙動、構文などは、追加のプロンプトで基準に合うように調整できます。
Figmaエージェントは、すべての有料Figmaプランでご利用いただけます。Figma Designの左サイドバーからアクセスできます。現在のオープンベータ期間中はAIクレジットを消費しないため、今のうちにぜひ試してフィードバックをお寄せください。
Figmaエージェントでもっと速く作る