skills.rest
pchemguy
pchemguyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-implement-design

Translate Figma nodes into production-ready code with 1:1 visual fidelity via the Figma MCP server.

Updated Feb 4, 2026
Search Tags:#frontend#figma#mcp#design tokens#design-to-code#visual parity#ui implementation
One-click install
npx skills add https://github.com/pchemguy/AISandbox --skill figma-implement-design-pchemguy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-implement-design
Source: https://github.com/pchemguy/AISandbox/tree/main/docs/AgentSkills/openai/skills/skills/.curated/figma-implement-design
Command: npx skills add https://github.com/pchemguy/AISandbox --skill figma-implement-design-pchemguy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve? Manually converting Figma designs into code often leads to visual drift, hardcoded values, and mismatched spacing or typography. This Skill provides a structured workflow that fetches design context, screenshots, and assets directly from Figma so implementations match the original design pixel-for-pixel. ## Core Features & Use Cases - Design Context Extraction: Parses Figma URLs or desktop selections to fetch layout, typography, colors, and design tokens via the Figma MCP server. - Asset Handling: Downloads images, icons, and SVGs served by the Figma MCP assets endpoint without adding external icon packages. - Project Convention Translation: Maps Figma output (typically React + Tailwind) to the project's own design system, components, and tokens. - Visual Validation: Compares the implemented UI against the Figma screenshot using a checklist covering layout, colors, states, and responsiveness. - Use Case: A developer receives a Figma link for a new dashboard, runs the workflow to fetch each section's design context, reuses existing components, and validates the result against the reference screenshot. ## Quick Start Implement this Figma design in this codebase, matching layout, states, and responsive behavior: 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 convert a Figma design to code with the Figma MCP server?▼

Extract the file key and node ID from the Figma URL, then call get_design_context and get_screenshot through the Figma MCP server. Translate the returned layout, typography, and color data into your project's components and validate against the screenshot.

How do I set up the Figma MCP server connection?▼

Add the server with codex mcp add figma --url https://mcp.figma.com/mcp, enable the remote MCP client via rmcp_client in config.toml, then run codex mcp login figma for OAuth. Restart codex after login before continuing.

Can I implement a Figma design without providing a URL?▼

Yes, but only with the figma-desktop MCP server. Select the node directly in the Figma desktop app and the tools use the current selection automatically; the remote server always requires a link to a frame or layer.

What should I do when the Figma design context response is truncated?▼

Call get_metadata to retrieve the high-level node map, identify the child nodes you need, then fetch each one individually with get_design_context using the child node IDs.

Why are Figma assets not loading in my implementation?▼

Assets are served through the Figma MCP server's localhost assets endpoint and must be used directly without modification. Do not replace them with placeholders or external icon packages, and verify the endpoint is accessible.

Should I use Figma values or my project's design tokens when they conflict?▼

Prefer the 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 Software Engineering Skills→
LPdsgnLPdsgn

figma-reader

Extract Figma design data via MCP Remote Server.

Community
Advanced
T-ravT-rav
5

hf.validate-tests-before-commit

Block Git commits when staged changes lack tests or fail the test suite.

Community
Intermediate
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
CJ-1981CJ-1981

moai-design-tools

Fetch Figma design context and export Pencil designs to React and Tailwind CSS code.

Community
Advanced