skills.rest
UlaYuga
UlaYugaCOMMUNITY
Explore all skills by this author →
GitHub

figma-implement-design

Translates Figma designs into application code with 1:1 visual fidelity via the Figma MCP server.

Updated May 5, 2026
Search Tags:#frontend#figma#design tokens#mcp server#design-to-code#visual parity#ui implementation
One-click install
npx skills add https://github.com/UlaYuga/promo-preflight --skill figma-implement-design-ulayuga
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-implement-design
Source: https://github.com/UlaYuga/promo-preflight/tree/main/.agents/skills/figma-implement-design
Command: npx skills add https://github.com/UlaYuga/promo-preflight --skill figma-implement-design-ulayuga

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning Figma designs into code by hand often leads to visual drift, missed spacing values, and inconsistent use of design tokens. This Skill provides a structured workflow that fetches design context, screenshots, and assets from the Figma MCP server so the generated code matches the design exactly. ## Core Features & Use Cases - Structured Figma-to-Code Workflow: Parses Figma URLs or desktop selections, fetches design context and screenshots, downloads assets, and validates the result against the original design. - Design System Integration: Maps Figma design tokens to the project's existing component library and conventions instead of generating isolated code. - Handling Large Designs: Falls back to metadata-based node traversal when design context responses are too large or truncated. - Use Case: A developer receives a Figma URL for a new dashboard page. The Skill extracts the node ID, fetches layout, typography, and color data per section, downloads icons from the MCP assets endpoint, builds the page with existing project components, and validates the result against the Figma screenshot. ## Quick Start Implement this Figma component in my project: https://figma.com/design/:fileKey/:fileName?node-id=1-2

Frequently Asked Questions about figma-implement-design

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

FAQPage Schema
How do I implement a Figma design in code with the Figma MCP server?▼

Provide a Figma URL containing the file key and node ID. The workflow calls get_design_context for layout and style data, get_screenshot for visual reference, downloads assets from the MCP server, then translates everything into your project's framework and design system conventions.

How to convert Figma components to React or other frameworks?▼

The Figma MCP output is typically React with Tailwind, but it should be treated as a design representation, not final code. Replace utility classes with your project's design tokens and reuse existing components rather than duplicating functionality.

Can I use Figma desktop selection instead of a URL?▼

Yes, with the figma-desktop MCP server you can select a node directly in the Figma desktop app without providing a URL. The remote MCP server requires a link to a frame or layer, and only nodeId is passed for desktop since the open file is used automatically.

Why is the Figma design context response truncated?▼

Truncation happens when a design is too complex or deeply nested for a single response. Call get_metadata to get the high-level node map, then fetch individual child nodes with get_design_context using their specific node IDs.

What should I do when Figma values conflict with my design system tokens?▼

Prefer your project's design system tokens for consistency, but adjust spacing or sizing minimally to preserve visual fidelity with the Figma design. Document any intentional deviations in code comments.

Related Skills

Explore More Design & Creative Skills→
artosetrovartosetrov

figma-implement-design

Translate Figma frames into reusable frontend components aligned with design tokens.

Community
Advanced
yuridefrancayuridefranca

post-fix-reviewer

Verify bug fixes by reproducing steps and running full test suites.

Community
Advanced
Himanshu040604Himanshu040604

create-design-system-rules

Generate custom design system rules for AI coding agents.

Community
Advanced
LutimiLutimi

figma-generate-design

Assemble full-page Figma screens by reusing published design system components.

Community
Advanced