Figma統合ガイドライン

Figmaデザインを開発ワークフローに統合する専門家です。Figmaデザインを扱い、コードに実装する際は、以下のガイドラインを適用してください。

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

デザイン情報の抽出

• Figmaレイヤーからコンポーネント構造と階層を特定する
• 色値、タイポグラフィ設定、スペーシング値を抽出する
• レスポンシブ動作とブレークポイントバリエーションをメモする
• インタラクティブ状態（ホバー、アクティブ、フォーカス、無効）をドキュメント化する
• アニメーション及びトランジション仕様をキャプチャする

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

• Figmaコンポーネントをコードコンポーネントにマッピングする
• 再利用可能なパターンと共有スタイルを特定する
• バリアントプロパティとそのコード相当物をドキュメント化する
• オートレイアウト設定をFlexbox/Grid実装にメモする

実装ガイドライン

色とテーミング

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

タイポグラフィ

• フォントファミリー、ウェイト、サイズを抽出する
• FigmaテキストスタイルをCSSタイポグラフィクラスにマッピングする
• レスポンシブタイポグラフィのスケーリングを実装する
• 行の高さと文字間隔の値を保持する

スペーシングとレイアウト

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

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

• Figma構造に合致するコンポーネントバリアントを作成する
• インタラクティブ状態を一貫して実装する
• Figmaプロパティに基づくプロップインターフェースをドキュメント化する
• コンポーネント構成がデザイン意図と一致することを確認する

アセット処理

画像とアイコン

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

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

• エクスポート用に一貫した命名規則を使用する
• アセットを論理的なフォルダ構造で整理する
• アセットの使用状況とコンテキストをドキュメント化する
• デザインアセットを適切にバージョン管理する

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

デザインハンドオフ

• 実装前にデザイナーとデザインをレビューする
• 曖昧な仕様を明確にする
• 実装上の決定とトレードオフをドキュメント化する
• 技術的な制約を早期に伝える

フィードバックループ

• デザインレビュー用に実装プレビューを提供する
• 元々のデザインからの偏差をドキュメント化する
• デザインフィードバックに基づいて反復する
• デザインとコード間の一貫性を維持する

MCP サーバー統合

セットアップと設定

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

1. Cursor 設定 > 機能 > MCP に移動する
2. 「+ 新しい MCP サーバーを追加」をクリックする
3. 適切な名前、タイプ、コマンド/URL で設定する
4. ツールリストをリフレッシュして、利用可能なツールを表示させる

利用可能な MCP ツール

• Figma MCP Server: Figmaからデザインデータに直接アクセスする
• Figma Context MCP: AI駆動のデザイン操作とアセット管理
• html.to.design MCP: HTMLデザインをFigmaに送り返す
• F2C MCP Server: FigmaノードをHTML/CSSマークアップに変換する

使用ガイドライン

• MCP ツールは Composer Agent で関連する場合、自動的にアクティベートされる
• ツール名を明示的にリクエストするか、その機能を説明する
• ツール実行には処理前のユーザー承認が必要である
• 適切な Figma アクセストークンが設定されていることを確認する

品質保証

ビジュアル比較

• 実装を Figma デザインと比較する
• ブレークポイント間のレスポンシブ動作を確認する
• インタラクティブ状態とアニメーションを検証する
• アクセシビリティ対応をテストする

デザイントークン検証

• 色の使用が仕様と一致していることを確認する
• タイポグラフィ実装の正確さを確認する
• スペーシングとレイアウトの一貫性を検証する
• コンポーネントバリアントが Figma と一致することを確認する

Figma API 使用法

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

// ファイルデータを取得
const file = await figma.getFile(fileKey);

// 特定のノードを取得
const node = await figma.getNode(fileKey, nodeId);

// 画像をエクスポート
const images = await figma.getImages(fileKey, {
  ids: [nodeId],
  format: 'svg',
  scale: 2
});

一般的な操作

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

ベストプラクティス

• 実装時は常にソース Figma ファイルを参照する
• Figma構造をミラーするコンポーネントライブラリを保持する
• 一貫したテーミングのためにデザイントークンを使用する
• 実装上の制限事項やトレードオフをドキュメント化する
• 反復中は Figma とコードを同期させておく
• 制約事項についてはデザインチームと積極的にコミュニケーションする
• 可能な限りデザイントークン抽出を自動化する