skills.rest
figma
figmaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

implement-design

Translate Figma designs into UI code using design tokens and existing components.

1.9k|171|Updated Aug 5, 2025
Search Tags:#UI#MCP#design-system#Figma#implement#design-to-code
One-click install
npx skills add https://github.com/figma/mcp-server-guide --skill implement-design-figma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: implement-design
Source: https://github.com/figma/mcp-server-guide/tree/main/skills/implement-design
Command: npx skills add https://github.com/figma/mcp-server-guide --skill implement-design-figma

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill translates Figma designs into production-ready UI code with pixel-perfect fidelity, enabling teams to implement designs quickly while maintaining design-system alignment.

Core Features & Use Cases

  • Figma MCP integration: Connects to the MCP server to fetch design context, assets, and node data for accurate codegen.
  • 1:1 visual parity: Maps Figma tokens to the project design tokens and reuses existing components to ensure UI consistency.
  • Structured workflow: Guides users from URL/node identification through design-context retrieval, asset handling, and final integration into the codebase.
  • Use Case: Implement a new UI component from a Figma file by supplying a URL and node-id and generating code that matches your design system.

Quick Start

Provide a Figma URL with node-id (for example, https://figma.com/design/:fileKey/:fileName?node-id=1-2) or choose a node in the figma-desktop MCP, then run get_design_context, get_screenshot, and translate_to_project_conventions, followed by code integration and validation.

Frequently Asked Questions about implement-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I translate Figma designs into production-ready UI code?▼

To translate Figma designs into production-ready UI code, provide a Figma URL with a node-id to fetch design context and generate code that maps Figma tokens to your project design tokens. This ensures pixel-perfect fidelity while reusing existing design-system components for accessibility.

Do I need a Figma MCP server to implement design-to-code workflows?▼

Yes, a connected Figma MCP server is required to implement design-to-code workflows. The MCP server fetches essential design context, assets, and node data needed to accurately translate Figma files into UI code that matches your project conventions.

How do I ensure accessibility and WCAG compliance when generating UI code from Figma?▼

To ensure accessibility and WCAG compliance when generating UI code from Figma, the Skill reuses existing design-system components and maps Figma tokens to project design tokens. This maintains UI consistency and leverages components already built to accessibility standards.

What is the best way to generate UI from a specific Figma component?▼

The best way to generate UI from a specific Figma component is to supply a Figma URL containing the file key and node-id. The workflow then retrieves the design context and screenshot, translates the design to project conventions, and integrates the validated code into your codebase.

Can I map Figma design tokens to my existing project design tokens?▼

Yes, you can map Figma design tokens to your existing project design tokens during the code generation process. This token mapping ensures that the generated UI code maintains visual parity with the Figma file while adhering to your project's design system conventions.

Why is my Figma design to code implementation missing visual fidelity?▼

Figma design to code implementations lose visual fidelity when Figma tokens are not properly mapped to project design tokens or when existing design-system components are bypassed. Following the structured workflow of context retrieval and token mapping ensures pixel-perfect output.

Related Skills

Explore More Design & Creative Skills→
tech-leads-clubtech-leads-club
5.0k

figma-implement-design

Translate Figma designs into production-ready UI code via Figma MCP.

Official
Advanced
CoRLab-TechCoRLab-Tech

pix

Implement UI components from Figma designs with pixel-perfect accuracy.

Official
Advanced
ZiadNagarZiadNagar

figma-implement-design

Translate Figma designs into production-ready code using the Figma MCP workflow.

Community
Advanced
lushly-devlushly-dev
4

implement-designs

Extract Figma design tokens and convert them to CSS custom properties.

Official
Advanced