figma-integration

Figma 統合ガイドライン

Figma のデザインを開発ワークフローに統合するエキスパートとして、Figma のデザインを扱い、コードに実装する際は以下のガイドラインに従ってください。

デザインからコードへのワークフロー

デザイン情報の抽出

• Figma のレイヤーからコンポーネントの構造と階層を特定します
• 色の値、タイポグラフィの設定、間隔の値を抽出します
• レスポンシブ時の動作とブレークポイントごとの差異を記録します
• インタラクティブな状態（ホバー、アクティブ、フォーカス、無効）を記録します
• アニメーションとトランジションの仕様を把握します

コンポーネントのマッピング

• Figma のコンポーネントをコードのコンポーネントに対応付けます
• 再利用可能なパターンと共有スタイルを特定します
• バリアントのプロパティと、コードでの対応方法を記録します
• Flexbox／Grid での実装に向けて、オートレイアウトの設定を記録します

実装ガイドライン

色とテーマ設定

• 適切な形式（hex、rgb、hsl）で色の値を抽出します
• Figma のカラースタイルを CSS カスタムプロパティまたはテーマトークンに対応付けます
• 色のコントラストがアクセシビリティ基準を満たしていることを確認します
• 指定されている場合は、ダークモードのバリアントを実装します

タイポグラフィ

• フォントファミリー、ウェイト、サイズを抽出します
• Figma のテキストスタイルを CSS タイポグラフィクラスに対応付けます
• レスポンシブなタイポグラフィのスケーリングを実装します
• 行の高さと文字間隔の値を維持します

間隔とレイアウト

• Figma のオートレイアウトを CSS Flexbox または Grid に変換します
• パディングとマージンの値を抽出します
• 一貫したスペーシングスケールを実装します
• ブレークポイントでのレスポンシブなレイアウト変更に対応します

コンポーネントとバリアント

• Figma の構造に合ったコンポーネントのバリアントを作成します
• インタラクティブな状態を一貫して実装します
• Figma のプロパティに基づいて prop のインターフェースを記録します
• コンポーネントの構成がデザインの意図に合っていることを確認します

アセットの取り扱い

画像とアイコン

• 画像を適切な解像度（1x、2x、3x）でエクスポートします
• アイコンやシンプルなグラフィックには SVG 形式を使用します
• 大きな画像には遅延読み込みを実装します
• Web パフォーマンスを高めるためにファイルサイズを最適化します

エクスポートのベストプラクティス

• エクスポートには一貫した命名規則を使用します
• アセットを論理的なフォルダー構造に整理します
• アセットの用途とコンテキストを記録します
• デザインアセットを適切にバージョン管理します

コラボレーションのワークフロー

デザインの引き継ぎ

• 実装前にデザイナーとデザインを確認します
• 曖昧な仕様を明確にします
• 実装上の判断とトレードオフを記録します
• 技術的な制約は早めに伝えます

フィードバックのループ

• デザインレビュー用に実装のプレビューを提供します
• 元のデザインからの変更点を記録します
• デザインのフィードバックに基づいて反復します
• デザインとコードの一貫性を維持します

MCP サーバーの統合

セットアップと設定

Cursor で Figma MCP サーバーを使用する場合：

1. Cursor Settings > Features > MCP に移動します
2. 「+ Add New MCP Server」をクリックします
3. 適切な名前、タイプ、コマンド／URL を設定します
4. ツールリストを更新して、利用可能なツールを表示します

利用可能な MCP ツール

• Figma MCP Server：Figma からデザインデータに直接アクセスします
• Figma Context MCP：AI を活用したデザイン操作とアセット管理を行います
• html.to.design MCP：HTML デザインを Figma に送信します
• F2C MCP Server：Figma ノードを HTML／CSS マークアップに変換します

使用ガイドライン

• Composer Agent で関連する操作を行うと、MCP ツールが自動的に有効になります
• ツール名を指定するか、その機能を説明して明示的にツールの使用を依頼します
• ツールを実行するには、処理前にユーザーの承認が必要です
• 適切な Figma アクセストークンが設定されていることを確認します

品質保証

視覚的な比較

• 実装を Figma のデザインと比較します
• ブレークポイントごとのレスポンシブな動作を確認します
• インタラクティブな状態とアニメーションを検証します
• アクセシビリティへの準拠をテストします

デザイントークンの検証

• 色の使用がデザイン仕様と一致していることを確認します
• タイポグラフィの実装精度を確認します
• 間隔とレイアウトの一貫性を検証します
• コンポーネントのバリアントが Figma と一致していることを確認します

Figma API の使用

デザインデータの読み取り

// Fetch file data
const file = await figma.getFile(fileKey);

// Get specific node
const node = await figma.getNode(fileKey, nodeId);

// Export images
const images = await figma.getImages(fileKey, {
  ids: [nodeId],
  format: 'svg',
  scale: 2
});

一般的な操作

• コンポーネントライブラリを取得します
• アセットをプログラムでエクスポートします
• スタイル定義を読み取ります
• コンポーネントのバリアントにアクセスします

ベストプラクティス

• 実装時は常に元の Figma ファイルを参照してください
• Figma の構造を反映したコンポーネントライブラリを維持してください
• 一貫性のあるテーマ設定にはデザイントークンを使用してください
• 実装上の制限やトレードオフを文書化してください
• 反復作業中は Figma とコードを同期させてください
• 制約についてデザインチームに積極的に伝えてください
• 可能な場合はデザイントークンの抽出を自動化してください