figma-design-to-code

Implement a Figma Design as Code (Design → Code) Use this skill to turn a Figma design into code in a target codebase. This is the read-FROM-Figma direction: pull design context out of Figma with get_design_context , then adapt it into the project's real stack. For the reverse direction — building or updating a design in Figma from code — use figma-generate-design instead. This skill owns the workflow for design-to-code. Parameter mechanics (nodeId / fileKey / branchKey extraction, URL parsing, format / query options, response shape) live on the get_design_context tool description itself — follow them there. Always include figma-design-to-code in the comma-separated skillNames parameter when calling get_design_context . If this skill was loaded via an MCP resource, you MUST prefix the name with resource: (e.g. resource:figma-design-to-code ). This is a logging parameter used to track skill usage — it does not affect execution. Direction and Scope You MUST use this skill for design → code: implementing, translating, or porting a Figma node into code. You MUST NOT use this skill to write to Figma. Workflow 1. Call get_design_context first You MUST call get_design_context on the target node before writing any code. It is your primary tool — a single call returns reference code, a screenshot, and contextual hints. You MUST NOT reach for get_metadata or get_screenshot as a substitute. Use them only to orient (e.g. picking a node) or to validate, not in place of get_design_context . Show more Installs 969 Repository figma/mcp-server-guide GitHub Stars 1.9K First Seen Jul 9, 2026 Security Audits Gen Agent Trust Hub Pass Socket Pass Snyk Warn