figma-integration

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:

1. Navigate to Cursor Settings > Features > MCP
2. Click "+ Add New MCP Server"
3. Configure with appropriate name, type, and command/URL
4. 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