figma-design-to-code Skill
Use this skill when implementing a Figma design as code (design → code) — the read-FROM-Figma direction. Triggers: 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'code this up from Figma', 'design to code', or a figma.com design URL provided alongside a codebase. Encodes the Published by openai in plugins.
What is figma-design-to-code Skill?
Use this skill when implementing a Figma design as code (design → code) — the read-FROM-Figma direction. Triggers: 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'code this up from Figma', 'design to code', or a figma.com design URL provided alongside a codebase. Encodes the Published by openai in plugins. This profile combines repository metadata with install, compatibility, and usage signals so developers can quickly decide whether it fits their agent workflow before opening the source repository.
Automated repository signals based on public metadata such as recency, license, installation evidence, and adoption. These are not a security audit or endorsement.
Key capabilities
- Includes SKILL.md support
- Reusable instructions support
- Design and media
- Writing
- Design and media use cases
- Writing use cases
Technical details
- Install or run with Copy skill directory
When to use figma-design-to-code Skill
- Use it for design and media.
- Use it for writing.
Built with
Editorial notes
Source
- Creator: openai
- Repository: openai/plugins
- Skill file: plugins/figma/skills/figma-design-to-code/SKILL.md
What it does
Use this skill when implementing a Figma design as code (design → code) — the read-FROM-Figma direction. Triggers: 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'code this up from Figma', 'design to code', or a figma.com design URL provided alongside a codebase. Encodes the
Skill instructions
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 getdesigncontext, 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 getdesigncontext tool description itself — follow them there. 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 getdesigncontext first - You MUST call getdesigncontext on the target node before writing any code. It is your primary tool — a single call returns reference code, a screenshot, and contextual hints
Explore related resources
Frequently asked questions
What is figma-design-to-code?
figma-design-to-code is a open-source AI agent skill with Copy skill directory. Use this skill when implementing a Figma design as code (design → code) — the read-FROM-Figma direction.
Who is figma-design-to-code best for?
figma-design-to-code is best for reusing agent instructions, scripts, and references, design and media workflows, writing workflows.
How do I install figma-design-to-code?
Install or run figma-design-to-code using Copy skill directory. Check figma-design-to-code for the latest setup command.
Is figma-design-to-code actively maintained?
figma-design-to-code may need a closer maintenance check before production use.
Auto-fetched from GitHub.
