Figma Designer

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

Overview

This skill analyzes Figma designs through the Figma MCP server and generates detailed PRDs with precise visual specifications. It extracts design tokens, component specifications, and layout information that developers can implement directly.

Prerequisites

Figma MCP Server

Ensure the Figma MCP server is connected and accessible:

# Check if Figma MCP is available
mcp-list

If not available, install from: https://github.com/modelcontextprotocol/servers

Required Figma MCP tools:

• figma_get_file - Get file metadata
• figma_get_nodes - Get node details
• figma_get_components - Get component information

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 figma_get_file to get metadata
  ↓
Call figma_get_nodes to get design tree
  ↓
Parse frame, component, and text nodes

Phase 2: Extract Design Tokens

Create a comprehensive design token inventory:

// 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[];
  }>;
}

Phase 3: Analyze Component Hierarchy

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

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:

## Screen: [Screen Name]

### Layout Structure

┌─────────────────────────────────────────┐ │ [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: '#F5F5F

...