figma-designer

Figma デザイナー

「Figma のデザインを、ピクセル単位で正確な実装仕様に変換します」

概要

このスキルは、利用可能な Figma 連携を通じて Figma のデザインを分析し、 デザインに関する根拠を提示します。prd-planner はプロダクト要件と技術的な PRD の手法を担当し、このスキルは視覚的な事実と未解決のデザイン上の課題を提示します。

前提条件

Figma MCP サーバー

このスキルを使用する前に、ホストが Figma MCP サーバーまたはプラグインを 公開していることを確認してください。ツール名はホストやプラグインのバージョンに よって異なるため、決まった名前を前提とせず、現在のセッションで利用可能な Figma ツールを 確認してください。必要な機能は次のとおりです。

• ファイルまたはページのメタデータを読み取る
• 選択したノードまたはノードの詳細を読み取る
• 利用可能な場合は、コンポーネントとスタイルの情報を読み取る

このスキルが起動する条件

次の場合に起動します。

• Figma のリンク（https://www.figma.com/file/...）を提示する
• デザインのスクリーンショットをアップロードし、「Figma」と言及する
• 「このデザインを分析して」または「デザイン仕様を抽出して」と言う
• 「Figma から PRD を作成して」と依頼する

デザイン分析ワークフロー

フェーズ 1：デザインデータを取得する

Input: Figma URL or File Key
  ↓
Extract File Key from URL
  ↓
Call the available Figma metadata tool
  ↓
Call the available Figma node/detail tool
  ↓
Parse frame, component, and text nodes

フェーズ 2：デザイントークンを抽出する

包括的なデザイントークンの一覧を作成します。

// Design Token Structure
interface DesignTokens {
  colors: {
    primary: string[];
    secondary: string[];
    neutral: string[];
    semantic: {
      success: string;
      warning: string;
      error: string;
      info: string;
    };
  };
  typography: {
    fontFamilies: Record<string, string>;
    fontSizes: Record<string, number>;
    fontWeights: Record<string, number>;
    lineHeights: Record<string, number>;
    letterSpacing: Record<string, number>;
  };
  spacing: {
    scale: number;  // 4, 8, 12, 16, etc.
    values: Record<string, number>;
  };
  borders: {
    radii: Record<string, number>;
    widths: Record<string, number>;
  };
  shadows: Array<{
    name: string;
    values: string[];
  }>;
}

フェーズ 3：コンポーネント階層を分析する

File
├── Frames (Pages/Screens)
│   ├── Component Instances
│   │   ├── Primary Button
│   │   ├── Input Field
│   │   └── Card
│   └── Text Layers
│       ├── Headings
│       ├── Body
│       └── Labels

各コンポーネントについて、次の項目を抽出します。

• プロパティ：サイズ、バリアント、状態
• レイアウト：Flex の方向、配置、間隔、パディング
• スタイル：塗り、線、エフェクト
• コンテンツ：テキスト、アイコン、画像
• 制約：レスポンシブ時の動作

フェーズ 4：ビジュアル仕様を生成する

各画面に次のテンプレートを使用します。

## Screen: [Screen Name]

### Layout Structure

┌─────────────────────────────────────────┐ │ [ヘッダー／ナビゲーション] │ ├─────────────────────────────────────────┤ │ │ │ [メインコンテンツ] │ │ ┌───────────┐ ┌───────────┐ │ │ │ カード 1 │ │ カード 2 │ │ │ └───────────┘ └───────────┘ │ │ │ ├─────────────────────────────────────────┤ │ [フッター] │ └─────────────────────────────────────────┘

### Design Specifications

#### Colors

| Token | Value | Usage |
|-------|-------|-------|
| Primary | `#007AFF` | Primary buttons, links |
| Background | `#FFFFFF` | Screen background |
| Surface | `#F5F5F7` | Cards, sections |
| Text Primary | `#1C1C1E` | Headings, body |
| Text Secondary | `#8E8E93` | Captions, labels |

#### Typography

| Style | Font | Size | Weight | Line Height | Letter Spacing |
|-------|------|------|--------|------------|---------------|
| Display Large | SF Pro Display | 28px | Bold (700) | 34px | -0.5px |
| Heading 1 | SF Pro Display | 24px | Bold (700) | 32px | -0.3px |
| Heading 2 | SF Pro Display | 20px | Semibold (600) | 28px | -0.2px |
| Body Large | SF Pro Text | 17px | Regular (400) | 24px | -0.4px |
| Body | SF Pro Text | 15px | Regular (400) | 22px | -0.3px |
| Caption | SF Pro Text | 13px | Regular (400) | 18px | -0.1px |

#### Spacing

| Token | Value | Usage |
|-------|-------|-------|
| xs | 4px | Icon padding |
| sm | 8px | Tight spacing |
| md | 12px | Card padding |
| lg | 16px | Section spacing |
| xl | 24px | Large gaps |
| 2xl | 32px | Page margins |

#### Component: Primary Button

```typescript
interface PrimaryButtonProps {
  size?: 'small' | 'medium' | 'large';
  variant?: 'primary' | 'secondary' | 'tertiary';
  disabled?: boolean;
}

// Sizes
size.small = {
  height: 32px,
  paddingHorizontal: 12px,
  fontSize: 15,
  iconSize: 16,
}

size.medium = {
  height: 40px,
  paddingHorizontal: 16px,
  fontSize: 15,
  iconSize: 20,
}

size.large = {
  height: 48px,
  paddingHorizontal: 24px,
  fontSize: 17,
  iconSize: 24,
}

// Variants
variant.primary = {
  backgroundColor: '#007AFF',
  color: '#FFFFFF',
}

variant.secondary = {
  backgroundColor: '#F5F5F7',
  color: '#007AFF',
}

variant.tertiary = {
  backgroundColor: 'transparent',
  color: '#007AFF',
}

制約とレスポンシブ時の動作

要素	制約	レスポンシブ時の動作
ヘッダー	左、右、上	スクロール時に固定
サイドバー	左、上、下	モバイルではドロワーに折りたたむ
コンテンツ	左、右（16px）	モバイルでは全幅

インタラクション状態

要素	デフォルト	ホバー	押下	無効
プライマリボタン	opacity: 1	opacity: 0.8	opacity: 0.6	opacity: 0.4
アイコンボタン	opacity: 1	background: rgba(0,0,0,0.05)	background: rgba(0,0,0,0.1)	opacity: 0.3
カード	shadow: sm	shadow: md	-	opacity: 0.6

## Output Formats

### Option 1: Visual Spec Document (Default)

Generates a design specification document:

docs/{feature}-design-spec.md

### Option 2: PRD Evidence Pack

Provide screen intent, design tokens, component states, responsive rules,
accessibility observations, and open product questions as inputs to
`prd-planner`. Do not invent business requirements from visual design alone.

## Quick Reference: Design Token Categories

### Always Extract These

| Category | What to Extract | Why |
|----------|----------------|-----|
| **Colors** | Hex/RGBA values | Theme consistency |
| **Typography** | Font family, size, weight, spacing | Text hierarchy |
| **Spacing** | Padding, margin, gap values | Layout alignment |
| **Borders** | Radius, width values | Shape consistency |
| **Shadows** | Offset, blur, spread, color | Depth perception |
| **Icons** | Name, size, color | Visual consistency |
| **Images** | URL, dimensions, fit mode | Asset management |

## Design Review Checklist

Before generating design evidence, verify:

- [ ] All screens are accounted for
- [ ] Design tokens are extracted
- [ ] Component variants are documented
- [ ] Responsive behavior is specified
- [ ] Interaction states are defined
- [ ] Accessibility (WCAG) is considered
  - [ ] Color contrast ratio ≥ 4.5:1
  - [ ] Touch targets ≥ 44x44px
  - [ ] Focus indicators visible

## Frame Analysis Template

For each frame/screen in the Figma file:

```markdown
## Frame: {Frame Name}

### Purpose
{What this screen does}

### Elements

| Element | Type | Styles | Props |
|---------|------|--------|-------|
| {Name} | {Component/Text/Vector} | {css} | {props} |
| {Name} | {Component/Text/Vector} | {css} | {props} |

### Layout
- Container: {width, height, fill}
- Position: {absolute/relative}
- Constraints: {left, right, top, bottom}
- Auto Layout: {direction, spacing, padding, alignment}

### Content Hierarchy
1. {Primary element}
2. {Secondary element}
3. {Tertiary element}

### Notes
{Any special considerations}

他のスキルとの連携

一般的なワークフロー

Figma URL → figma-designer → Visual Specs
                                ↓
                           prd-planner → PRD
                                ↓
                           implementation → Code
                                ↓
                           code-reviewer → Quality Check

開発への引き継ぎ

仕様を生成した後：

## Developer Handoff

### Design Files
- Figma: {url}
- Design Spec: {link}

### Design Tokens
- Generated: `tokens.ts`
- Color palette: `colors.ts`
- Typography: `typography.ts`

### Component Library
- Storybook: {url}
- Component docs: {link}

### Assets
- Icons: {folder}
- Images: {folder}
- Exports: {format}

ベストプラクティス

実施すること

✅ 重要な寸法は正確なピクセル値を抽出する ✅ コンポーネントのバリアントと状態を記録する ✅ レスポンシブのブレークポイントを含める ✅ プラットフォーム間の違い（iOS と Android）に注意する ✅ アクセシビリティへの配慮を含める ✅ デザイントークンを定数としてエクスポートする

実施しないこと

❌ 余白の値を丸める（正確な 4px／8px／12px を使用する） ❌ ホバー／フォーカス状態を無視する ❌ 制約時の動作を省略する ❌ 空の状態を忘れる ❌ ローディング状態を省略する ❌ 検証せずにプラットフォームのデフォルト値を前提とする

例とプラットフォームに関する注意事項

完全な出力例とプラットフォーム固有の考慮事項については、references/example-output.md を参照してください。