tomevault-io 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
Converted and distributed by TomeVault — claim your Tome and manage your conversions.