figma-integration

SKILL.md

Figma Integration Guidelines

You are an expert in integrating Figma designs with development workflows. Apply these guidelines when working with Figma designs and implementing them in code.

Design-to-Code Workflow

Extracting Design Information

Identify component structure and hierarchy from Figma layers

Extract color values, typography settings, and spacing values

Note responsive behavior and breakpoint variations

Document interactive states (hover, active, focus, disabled)

Capture animation and transition specifications

Component Mapping

Map Figma components to code components

Identify reusable patterns and shared styles

Document variant properties and their code equivalents

Note auto-layout settings for flexbox/grid implementation

Implementation Guidelines

Colors and Theming

Extract color values in appropriate formats (hex, rgb, hsl)

Map Figma color styles to CSS custom properties or theme tokens

Ensure color contrast meets accessibility standards

Implement dark mode variants when specified

Typography

Extract font families, weights, and sizes

Map Figma text styles to CSS typography classes

Implement responsive typography scaling

Preserve line-height and letter-spacing values

Spacing and Layout

Convert Figma auto-layout to CSS Flexbox or Grid

Extract padding and margin values

Implement consistent spacing scale

Handle responsive layout changes at breakpoints

Components and Variants

Create component variants matching Figma structure

Implement interactive states consistently

Document prop interfaces based on Figma properties

Ensure component composition matches design intent

Asset Handling

Images and Icons

Export images at appropriate resolutions (1x, 2x, 3x)

Use SVG format for icons and simple graphics

Implement lazy loading for large images

Optimize file sizes for web performance

Exporting Best Practices

Use consistent naming conventions for exports

Organize assets in logical folder structures

Document asset usage and context

Version control design assets appropriately

Collaboration Workflow

Design Handoff

Review designs with designers before implementation

Clarify ambiguous specifications

Document implementation decisions and trade-offs

Communicate technical constraints early

Feedback Loop

Provide implementation previews for design review

Document deviations from original designs

Iterate based on design feedback

Maintain design-code consistency

MCP Server Integration

Setup and Configuration

When using Figma MCP servers with Cursor:

Navigate to Cursor Settings > Features > MCP

Click "+ Add New MCP Server"

Configure with appropriate name, type, and command/URL

Refresh tool list to populate available tools

Available MCP Tools

Figma MCP Server: Access design data directly from Figma

Figma Context MCP: AI-driven design operations and asset management

html.to.design MCP: Send HTML designs back to Figma

F2C MCP Server: Convert Figma nodes to HTML/CSS markup

Usage Guidelines

MCP tools activate automatically when relevant in Composer Agent

Explicitly request tools by name or describe their function

Tool execution requires user approval before processing

Ensure appropriate Figma access tokens are configured

Quality Assurance

Visual Comparison

Compare implementation against Figma designs

Check responsive behavior across breakpoints

Verify interactive states and animations

Test accessibility compliance

Design Token Validation

Verify color usage matches design specifications

Check typography implementation accuracy

Validate spacing and layout consistency

Ensure component variants match Figma

Figma API Usage

Reading Design Data

// Fetch file data
const file = await figma.getFile(fileKey);

// Get specific node
const node = await figma.getNode(fileKey, nodeId);

// Export images
const images = await figma.getImages(fileKey, {
  ids: [nodeId],
  format: 'svg',
  scale: 2
});

Common Operations

Fetch component libraries

Export assets programmatically

Read style definitions

Access component variants

Best Practices

Always reference the source Figma file when implementing

Maintain a component library that mirrors Figma structure

Use design tokens for consistent theming

Document any implementation limitations or trade-offs

Keep Figma and code in sync during iterations

Communicate proactively with design team about constraints

Automate design token extraction when possible