Figma MCPサーバー
AIエージェントに構造化されたデザインコンテキストを提供することで、デザインの意図を反映した正確なコードを生成できます。
キャンバスからコードへ、そしてコードからキャンバスへ。
制作プロセスのさまざまな工程をシームレスに行き来し、デザインの意図とコードの間にあるギャップを埋めます。
キャンバスに書き込む
AIエージェントから直接、実際に動作するFigmaデザインを作成できます。編集可能なので、チームはキャンバス上で自由に調整できます。
コードとデザインをつなぐ
デザインコンポーネントを実際の本番環境のコンポーネントに対応付けます。これにより、新しく生成されるコードも、実際のデザインシステムに沿ったものになります。
バリアブルにコード構文を設定
バリアブルをコードとして表現することで、実装をより簡単にします。インスペクト時には、その変数に対応するコードスニペットが表示されます。
あなたが愛用するプロダクトは、Figmaでデザインされています
Dev Modeによって、私たちの考え方も大きく変わりました。デザイナーと開発者が共通言語でコミュニケーションできるようになり、プロダクトをどのように作り上げるか、そのプロセス自体を見直すきっかけにもなっています。
Andrei Garcia
ディレクター、デザインシステム、HP
- 90%
開発者の90%が、業務品質の向上を実感
- 1.5時間
週あたり1.5時間の作業時間を削減
ミーティングなしでも、常に同期を保つ。
コードをレビュー可能なビジュアルに変換し、デザインの開発準備状況を追跡し、すべての更新を開発者向けのフィードで確認できます。
Dev statusesと通知
デザインがready for devになったタイミングを追跡できます。ステータスの変更やデザインの更新があった際に通知を受け取れます。
変更を比較
並べて比較することで、時間の経過とともに何が変更されたのかを正確に確認できます。
コードからキャンバスへ
ライブUIを編集可能なFigmaファイルに変換し、デザイナーが文脈の中でレビューできるようにします。
Devリソース
GitHubのファイル、Jiraのチケット、Storybookのストーリーをレイヤーに直接リンクできます。
必要な詳細を、すばやく見つけて構築する。
すべてのデザインの背後にある構造を理解できます。デザインファイルに影響を与えることなく、実験・テスト・コーディングが可能です。
フォーカスビュー
ビルド対象となるフレームだけを分離して表示し、キャンバス上の他の要素は非表示にします。
高度なインスペクション
コードスニペット、コンポーネントのプロパティ、構造化されたレイヤーデータに、キャンバスから直接アクセスできます。
コンポーネントプレイグラウンド
コンポーネントのプロパティやバリエーションをインタラクティブに確認できます。どのコンポーネントを使うべきか、そしてどのように使うべきかを把握できます。
アノテーション
開発者は、特定のレイヤーに対する変数、プロパティ、計測情報を取得できます。
