Figma Integration Skill

Transform Figma designs into implementation-ready specifications with CCPM's design-to-code workflow.

When This Skill Activates

This skill auto-activates when:

• User mentions "Figma" or "design" in implementation context
• User asks about "component", "design system", or "design tokens"
• Running /ccpm:plan (starts design process)
• Running /ccpm:plan (refine designs)
• Running /ccpm:plan (generate specs)
• Running /ccpm:figma-refresh (refresh cached designs)
• User mentions "design-to-code", "design file", or "Figma component"

The Figma Workflow

Phase 1: Design Phase

Command: /ccpm:plan ISSUE-ID

Start the design process by attaching Figma links to your Linear issue:

1. Create/update Linear issue with task description
2. Attach Figma design link in issue description
3. Run /ccpm:plan TASK-123
4. CCPM extracts design metadata and creates options

What happens:

• Detects Figma links from issue and related documents
• Analyzes design file metadata (frames, components, assets)
• Extracts design tokens (colors, typography, spacing)
• Creates visual options or wireframes
• Caches design data for instant access

Example:

/ccpm:plan PSN-123

✅ Detected Figma link: https://figma.com/file/ABC123/UserDashboard
📦 Design Analysis:
   - 12 frames found
   - 15 components detected
   - Color palette: 8 colors
   - Typography: 4 font families
   - Spacing pattern: 4px, 8px, 16px grid

Ready for design review. Run: /ccpm:plan PSN-123

Phase 2: Refinement Phase

Command: /ccpm:plan ISSUE-ID [OPTION] [FEEDBACK]

Iterate on designs based on feedback:

1. Review design options from Phase 1
2. Provide feedback or request changes
3. Run /ccpm:plan TASK-123 "feedback"
4. CCPM creates refined design options

What happens:

• Analyzes your feedback
• Generates refined design variations
• Adjusts colors, layout, or components
• Updates design cache with new versions
• Shows side-by-side comparisons

Example:

/ccpm:plan PSN-123 1 "Make the buttons larger, use primary color"

🎨 Refining Design Option 1...

Changes applied:
- Button height: 36px → 44px
- Button color: #6366F1 → primary color
- Button spacing: 12px → 16px

Preview: [design-option-1-v2]

Ready for approval? Run: /ccpm:plan PSN-123 1

Phase 3: Approval & Spec Generation

Command: /ccpm:plan ISSUE-ID OPTION-NUMBER

Approve final design and generate implementation specifications:

1. Review refined design options
2. Choose best option
3. Run /ccpm:plan TASK-123 1
4. CCPM generates comprehensive specs

What happens:

• Locks design as final reference
• Extracts component specifications
• Generates implementation specs with:
  • Component breakdown
  • Props and state recommendations
  • Styling specifications
  • Accessibility guidelines
  • Responsive design rules
• Creates Linear Document with specs
• Updates issue description with spec link

Example:

/ccpm:plan PSN-123 1

✅ Design Approved!

Generated Implementation Specs:
📄 Component Specifications
📄 Styling Guidelines
📄 Responsive Rules
📄 Accessibility Checklist

Specs saved to: https://linear.app/doc/ABC123
Ready for implementation!

Phase 4: Cache Management

Command: /ccpm:figma-refresh ISSUE-ID

Refresh cached design data when designs change:

1. Update Figma designs
2. Run /ccpm:figma-refresh TASK-123
3. CCPM re-extracts design data
4. Cache is updated with latest designs

When to refresh:

• Design significantly changed
• New components added to Figma
• Colors or typography updated
• Design tokens modified
• Last refresh was >1 hour ago (cache TTL)

Design Analysis Deep Dive

What CCPM Extracts From Figma

Component Structure:

Dashboard
├── Header
│   ├── Logo
│   ├── Navigation
│   └── UserMenu
├── Sidebar
│   ├── NavItems
│   └── UserProfile
└── MainContent
    ├── Cards
    └── Charts

Design Tokens:

• Color palette with hex/RGB values
• Typography: font families, sizes, weights
• Spacing: margin, padding, gap values
• Shadows and effects
• Border radius patterns

Component Metadata:

• Frame dimensions (width, height)
• Layout type (flex, grid, auto)
• Constraints and responsive behavior
• Text content and styles
• Image assets and sizing

Component Detection

CCPM automatically identifies:

1. UI Components: Buttons, inputs, cards, modals, etc.
2. Layout Components: Headers, sidebars, grids, etc.
3. Screens/Pages: Full page layouts with multiple components
4. Variants: Different states (hover, active, disabled)
5. Assets: Icons, images, and design patterns

Example detection:

Frame: "Button / Primary / Large"
├── Detection: UI Component (Button)
├── Style: Primary (blue)
├── Size: Large (44px height)
├── State: Default
└── Variations: [Hover, Active, Disabled]

Implementation Specification Generation

What Gets Generated

...