figma-integration
This skill provides a structured approach to translating Figma designs into production code, covering component extraction, design token mapping, and asset handling. It includes MCP server setup for direct Figma access and quality assurance practices to keep designs and code synchronized throughout development.
Figma Integration guides you through converting Figma designs into production-ready code using MCP servers and design-to-code workflows.
AI-generated summary based on this skill's SKILL.md
Install
Mindrally/skills/figma-integration
git clone https://github.com/Mindrally/skills
cp -r skills/figma-integration ~/.claude/skills/figma-integrationFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to implement figma designs in development?
figma-integration provides a structured approach to translating Figma designs into production code. The skill covers component extraction, design token mapping, and asset handling to ensure designs and code stay synchronized. It includes MCP server setup for direct Figma access, quality assurance practices, and guidance on converting Figma components into functional code that maintains design fidelity throughout development.
What is the figma to code workflow with this skill?
figma-integration establishes a complete design-to-code workflow by enabling direct extraction of components, colors, typography, and spacing from Figma. The skill guides you through setting up MCP servers for seamless Figma access, mapping design tokens to CSS and code variables, and automating asset export. This workflow ensures consistent implementation of designs while maintaining collaboration between designers and developers.
How does figma-integration handle design tokens and theming?
figma-integration helps extract design tokens—colors, typography, spacing, and other design variables—directly from Figma and implement them as consistent theming across your codebase. The skill provides guidance on mapping Figma design tokens to CSS custom properties and code variables, enabling you to maintain a single source of truth for design decisions and apply them consistently across all components.
How do I set up figma-integration MCP servers for development?
figma-integration includes configuration guidance for setting up Figma MCP servers that enable direct programmatic access to your Figma files during development. This setup allows developers to query design data, extract components, and automate asset export without manual handoff processes. The skill covers server initialization, authentication, and integration with your development environment.
What design-to-development collaboration workflows does figma-integration support?
figma-integration establishes workflows that bridge designers and developers by automating component handoff, design review processes, and asset synchronization. The skill enables designers to prepare Figma files with proper naming conventions and structure, while developers use MCP servers and code extraction tools to implement designs consistently. This reduces miscommunication and keeps designs and code aligned throughout the project lifecycle.
Can figma-integration automate asset export and component management?
figma-integration provides guidance on automating asset export and component library management through MCP server integration and API access. The skill helps you set up processes for exporting SVG icons, responsive layouts, and component definitions directly from Figma into your codebase. This automation reduces manual work and ensures your component library stays synchronized with Figma designs.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
figma-integration/SKILL.md