Pro Figma Implement Design

A Claude Code skill providing a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. Covers the complete design-to-code pipeline from file inspection through component implementation, responsive adaptation, and visual QA.

When to Use This Skill

Choose Pro Figma Implement Design when:

• You have a Figma design and need to implement it as production code
• You want a systematic approach to design-to-code translation
• You need pixel-perfect implementation of complex layouts
• You're building a component library from Figma design system files
• You want to ensure your implementation matches the design spec exactly

Consider alternatives when:

• You need basic Figma file inspection (use a Figma toolkit skill)
• You want general frontend design principles (use a frontend design skill)
• You need to set up a design system from scratch (use a UI design system skill)

Quick Start

Copy
# Install the skill
claude install pro-figma-implement-design

# Implement a page from Figma
claude "Implement this Figma page as a React component: [Figma URL]. Use Tailwind CSS."

# Build a component from design
claude "Build a Card component matching this Figma design: [URL]. Include all 4 variants shown."

# Full page implementation
claude "Implement the dashboard page from this Figma file. Start with the header and sidebar layout."

Core Concepts

Design-to-Code Workflow

Phase	Activities	Output
1. Inspect	Read Figma file, identify components and layout	Component inventory
2. Tokenize	Extract colors, fonts, spacing into tokens	Design token file
3. Structure	Map Figma frames to HTML/component hierarchy	Component tree
4. Implement	Build components with styling	Working components
5. Responsive	Adapt layouts for all breakpoints	Responsive implementation
6. QA	Compare implementation to design	Visual diff report

Layout Translation Rules

Figma Auto Layout → CSS Flexbox
  Direction: Vertical → flex-direction: column
  Direction: Horizontal → flex-direction: row
  Gap: 16 → gap: 1rem
  Padding: 24 → padding: 1.5rem
  Alignment: Center → align-items: center

Figma Constraints → CSS Positioning
  Left & Right → width: 100% (or specific margins)
  Center → margin: 0 auto
  Scale → percentage widths
  Fixed → position: fixed/sticky

Figma Grid → CSS Grid
  Columns: 12, Gutter: 24 → grid-template-columns: repeat(12, 1fr), gap: 1.5rem

Component Mapping

Figma Pattern	Code Pattern	Notes
Component with Variants	Props-based component	Map variant names to prop values
Instance with Overrides	Component with props	Override values become prop values
Nested Components	Component composition	Child components receive props
Auto Layout Frame	Flex/Grid container	Direct CSS mapping
Absolute Positioned Layer	position: absolute	Preserve exact coordinates

Configuration

Parameter	Type	Default	Description
framework	string	"react"	Target: react, vue, svelte, html
styling	string	"tailwind"	Styling: tailwind, css_modules, styled_components, emotion
responsive	boolean	true	Include responsive breakpoints
component_library	string	"custom"	Base: custom, shadcn, radix, mui
pixel_perfect	boolean	true	Enforce exact pixel matching

Best Practices

1. Work top-down: layout first, details last — Start with the page-level layout (header, sidebar, main content area), then implement sections within each area, then individual components. This prevents rework when the layout needs adjustment.

2. Build reusable components for repeated patterns — If a design uses the same card in a grid, build the card component once with props for the variable content. Don't copy-paste styled divs for each card instance.

3. Use Figma's auto-layout as your CSS guide — Figma's auto-layout maps directly to flexbox. Direction, gap, padding, and alignment all have 1:1 CSS equivalents. If the designer used auto-layout, your job is straightforward.

4. Handle responsive design proactively — Figma designs are usually at desktop width. Implement the desktop version first, then add responsive breakpoints. Ask the designer about mobile layouts if they're not in the file.

5. Visual QA with side-by-side comparison — Open your implementation next to the Figma design and compare section by section. Check spacing, colors, font sizes, and alignment. Use browser DevTools to measure values precisely.

Common Issues

Spacing doesn't match Figma exactly — Figma uses absolute pixels; your CSS might use rem. Ensure your base font size matches your conversion (16px = 1rem). Also check for auto-layout padding vs. gap, which map to different CSS properties.

Fonts render differently in browser — Font rendering varies between Figma and browsers. Use the same font family and weight, but accept minor rendering differences. Focus on matching size and line-height rather than pixel-identical rendering.

Complex layouts break on smaller screens — If the Figma design only shows desktop, implement with responsive design in mind. Use max-width containers, flexible grids, and test at 768px and 375px breakpoints even if the designs don't specify mobile layouts.