figma-implement-design
Translate Figma designs into production-ready code with pixel-perfect visual fidelity.
- Structured seven-step workflow: extract node IDs from Figma URLs, fetch design context and screenshots, download assets, translate to project conventions, and validate against Figma specs
- Integrates with Figma MCP server (remote or desktop) to access layout properties, typography, colors, design tokens, and component structure
- Emphasizes design system reuse, design token mapping, and 1:1 visual parity; includes troubleshooting for truncated responses, asset loading, and token mismatches
- Requires Figma MCP connection and project design system; supports both URL-based and desktop app selection workflows
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-components.
- If the user asks to author reusable agent rules (
CLAUDE.md/AGENTS.md), switch to figma-create-design-system-rules.
Prerequisites
More from openai/skills
screenshot
Use when the user explicitly asks for a desktop or system screenshot (full screen, specific app or window, or a pixel region), or when tool-specific capture capabilities are unavailable and an OS-level capture is needed.
2.8Kpdf
Use when tasks involve reading, creating, or reviewing PDF files where rendering and layout matter; prefer visual checks by rendering pages (Poppler) and use Python tools such as `reportlab`, `pdfplumber`, and `pypdf` for generation and extraction.
2.6Ksecurity-best-practices
Perform language and framework specific security best-practice reviews and suggest improvements. Trigger only when the user explicitly requests security best practices guidance, a security review/report, or secure-by-default coding help. Trigger only for supported languages (python, javascript/typescript, go). Do not trigger for general code review, debugging, or non-security tasks.
2.6Kfigma
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
2.5Kplaywright
Use when the task requires automating a real browser from the terminal (navigation, form filling, snapshots, screenshots, data extraction, UI-flow debugging) via `playwright-cli` or the bundled wrapper script.
2.4Klinear
Manage issues, projects & team workflows in Linear. Use when the user wants to read, create or updates tickets in Linear.
2.2K