Creative & DesignIntermediate
figma-implement-design
Translate Figma designs into production-ready application code with...
Developer Setup
Setup & Installation
bash
npx skills add https://github.com/figma/mcp-server-guide --skill figma-implement-designnpx skills add https://github.com/figma/mcp-server-guide --skill figma-implement-designOr paste this URL into your assistant to install:
Overview
What This Skill Does
Translate Figma designs into production-ready application code with 1:1 fidelity
Application
When to use this Skill
- Integrating figma implement design into your development workflow.
- Following best practices for translate figma designs into production-ready application code with 1:1 fidelity.
- Automating repetitive tasks with AI-assisted tooling.
- Building production-grade applications with proper standards.
- Debugging and troubleshooting common implementation issues.
Documentation
Show Skills.md file
Implement Design
Overview
This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.
Skill Boundaries
- Use this skill when the deliverable is code in the user's repository.
- If the user asks to create/edit/delete nodes inside Figma itself, switch to figma-use.
- If the user asks to build or update a full-page screen in Figma from code or a description, switch to figma-generate-design.
- If the user asks only for Code Connect mappings, switch to figma-code-connect.
- If the user asks to author reusable agent rules (
CLAUDE.md/AGENTS.md), switch to figma-create-design-system-rules.
Prerequisites
- Figma MCP server must be connected and accessible
- User must provide a Figma URL in the format:
https://figma.com/design/:fileKey/:fileName?node-id=1-2:fileKeyis the file key1-2is the node ID (the specific component or frame to implement)
- OR when using
figma-desktopMCP: User can select a node directly in the Figma desktop app (no URL required) - Project should have an established design system or component library (preferred)
Required Workflow
Lines 1 - 25 of 253
Recommendations