Figma→Code変換
コーディング上級
Figma MCPサーバーを活用してデザインフレームのレイアウト、カラー、タイポグラフィ、スペーシングを抽出し、デザインシステムに準拠したReact/Tailwindコンポーネントコードを生成します。
トリガー
/figma使用頻度週2-3回
フロントエンド開発者なら？ /figmaでデザインカンプをコンポーネントに素早く変換
デザイナー兼開発者なら？ Figmaから直接コードに移行する時間を90%短縮
Figmaデザインコンポーネントフロントエンド
動作フロー
/figma [フレームリンク] 実行 → デザインデータ抽出
↓
フェーズ1: 3つの抽出を並列実行
layout-extract
レイアウト/スペーシング抽出
token-read
デザイントークン読込
asset-list
画像/アイコンリスト
↓
Reactコンポーネントコード生成 + レスポンシブ対応
↓
✓ プロダクションレディなコンポーネントコード
スキルコード
# Figma to Code Skill
## Trigger: /figma [Figma frame link or description]
Prerequisites: Figma MCP server configured
When invoked:
1. Extract design data:
- Layout: flex/grid, gap, padding, margin
- Colors: fill, stroke → CSS variables
- Typography: font, size, weight, line-height
- Components: identify reusable patterns
2. Map to code:
- Auto Layout → Flexbox/Grid
- Figma components → React components
- Design tokens → Tailwind config
- Variants → component props
3. Generate code:
- React + Tailwind CSS (or project's stack)
- Responsive breakpoints (mobile-first)
- Semantic HTML + ARIA labels
- Component props for variants
4. Output:
- Component file(s)
- Required Tailwind config additions
- Usage example with props
コピーしてCLAUDE.mdに貼り付ければ、すぐに使えます。
Figma→Code変換 の仕組み
Figma-to-CodeはFigmaのデザインデータ（JSONまたはURL）を読み取り、コンポーネント階層、スペーシング、カラー、タイポグラフィを抽出した上で、適切なTailwind CSSクラスとレスポンシブブレークポイントを含むプロダクションレディなReactコンポーネントを生成します。
Figma→Code変換 が力を発揮する場面
デザイナーが複雑なレイアウトをハンドオフする際にフロントエンド開発を劇的に加速します。特にデザインシステムで一貫したコンポーネント構造とスタイリングトークンをページ間で維持する必要がある場面で威力を発揮します。
主な強み
- デザイン階層をコンポーネント構造に直接変換
- 適切なブレークポイントでレスポンシブレイアウトを生成
- コンポーネント間でデザイントークンの一貫性を維持
- ラフな近似ではなくプロダクションレディなコードを出力