figma-designer skill by zhaono1

Figma Designer

"Transform Figma designs into implementation-ready specifications with pixel-perfect accuracy"

Overview

This skill analyzes Figma designs through the available Figma integration and produces design evidence. prd-planner owns product requirements and technical PRD methodology; this skill supplies visual facts and unresolved design gaps.

Prerequisites

Figma MCP Server

Ensure the host exposes a Figma MCP server or plugin before using this skill. Tool names vary by host and plugin version, so inspect the available Figma tools in the current session instead of assuming fixed names. The required capability set is:

Read file or page metadata
Read selected nodes or node details
Read component and style information when available

When This Skill Activates

Activates when you:

Provide a Figma link (https://www.figma.com/file/...)
Upload a design screenshot and mention "Figma"
Say "analyze this design" or "extract design specs"
Ask to "create PRD from Figma"

Design Analysis Workflow

Phase 1: Fetch Design Data

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

Phase 2: Extract Design Tokens

Create a comprehensive design token inventory:

Phase 3: Analyze Component Hierarchy

For each component, extract:

Props: Size, variant, state
Layout: Flex direction, alignment, gap, padding
Styles: Fill, stroke, effects
Content: Text content, icons, images
Constraints: Responsive behavior

Phase 4: Generate Visual Specifications

Use this template for each screen:

┌─────────────────────────────────────────┐ │ [Header/Nav] │ ├─────────────────────────────────────────┤ │ │ │ [Main Content] │ │ ┌───────────┐ ┌───────────┐ │ │ │ Card 1 │ │ Card 2 │ │ │ └───────────┘ └───────────┘ │ │ │ ├─────────────────────────────────────────┤ │ [Footer] │ └─────────────────────────────────────────┘

 
### 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',
}

Constraints & Responsive Behavior

Element	Constraints	Responsive Behavior
Header	Left, Right, Top	Sticky on scroll
Sidebar	Left, Top, Bottom	Collapses to drawer on mobile
Content	Left, Right (16px)	Full width on mobile

Interaction States

Element	Default	Hover	Pressed	Disabled
Primary Button	opacity: 1	opacity: 0.8	opacity: 0.6	opacity: 0.4
Icon Button	opacity: 1	background: rgba(0,0,0,0.05)	background: rgba(0,0,0,0.1)	opacity: 0.3
Card	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}

Integration with Other Skills

Typical Workflow

Handoff to Development

After generating specifications:

Best Practices

DO

✅ Extract exact pixel values for critical dimensions ✅ Document component variants and states ✅ Include responsive breakpoints ✅ Note any platform differences (iOS vs Android) ✅ Include accessibility considerations ✅ Export design tokens as constants

DON'T

❌ Round spacing values (use exact 4px/8px/12px) ❌ Ignore hover/focus states ❌ Skip constraint behavior ❌ Forget about empty states ❌ Omit loading states ❌ Assume platform defaults without verification

Examples and Platform Notes

See references/example-output.md for a full sample output and platform-specific considerations.

Figma Designer

"Transform Figma designs into implementation-ready specifications with pixel-perfect accuracy"

Overview

Prerequisites

Figma MCP Server

Read file or page metadata
Read selected nodes or node details
Read component and style information when available

When This Skill Activates

Activates when you:

Provide a Figma link (https://www.figma.com/file/...)
Upload a design screenshot and mention "Figma"
Say "analyze this design" or "extract design specs"
Ask to "create PRD from Figma"

Design Analysis Workflow

Phase 1: Fetch Design Data

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

Phase 2: Extract Design Tokens

Create a comprehensive design token inventory:

Phase 3: Analyze Component Hierarchy

For each component, extract:

Props: Size, variant, state
Layout: Flex direction, alignment, gap, padding
Styles: Fill, stroke, effects
Content: Text content, icons, images
Constraints: Responsive behavior

Phase 4: Generate Visual Specifications

Use this template for each screen:

 
### 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',
}

Constraints & Responsive Behavior

Element	Constraints	Responsive Behavior
Header	Left, Right, Top	Sticky on scroll
Sidebar	Left, Top, Bottom	Collapses to drawer on mobile
Content	Left, Right (16px)	Full width on mobile

Interaction States

Element	Default	Hover	Pressed	Disabled
Primary Button	opacity: 1	opacity: 0.8	opacity: 0.6	opacity: 0.4
Icon Button	opacity: 1	background: rgba(0,0,0,0.05)	background: rgba(0,0,0,0.1)	opacity: 0.3
Card	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}

Integration with Other Skills

Typical Workflow

Handoff to Development

After generating specifications:

Best Practices

DO

DON'T

Examples and Platform Notes

See references/example-output.md for a full sample output and platform-specific considerations.

figma-designer

Documentation

Documentation

Figma Designer

Overview

Prerequisites

Figma MCP Server

When This Skill Activates

Design Analysis Workflow

Phase 1: Fetch Design Data

Phase 2: Extract Design Tokens

Phase 3: Analyze Component Hierarchy

Phase 4: Generate Visual Specifications

Constraints & Responsive Behavior

Interaction States

Integration with Other Skills

Typical Workflow

Handoff to Development

Best Practices

DO

DON'T

Examples and Platform Notes

Documentation

figma-designer

Documentation

Figma Designer

Overview

Prerequisites

Figma MCP Server

When This Skill Activates

Design Analysis Workflow

Phase 1: Fetch Design Data

Phase 2: Extract Design Tokens

Phase 3: Analyze Component Hierarchy

Phase 4: Generate Visual Specifications

Constraints & Responsive Behavior

Interaction States

Integration with Other Skills

Typical Workflow

Handoff to Development

Best Practices

DO

DON'T

Examples and Platform Notes