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.
Decision snapshot
Is this a fit?
Design and media, Writing, Includes SKILL.md, Reusable instructions
Compatibility not yet detected.
Permission behavior not yet detected.
Copy skill directory
18 days ago
No specific cautions were detected. Review the source and requested permissions before installing.
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. See how SkillIndex evaluates profiles.
Key capabilities
- Includes SKILL.md support
- Reusable instructions support
- Design and media
- Writing
- Design and media use cases
- Writing use cases
Declared skill metadata
- Source file: plugins/figma/skills/figma-design-to-code/SKILL.md
These fields retain source and confidence evidence from the indexed SKILL.md.
Compatibility and setup
- 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
Verified compatibility and discovery
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.
Project health auto-fetched from the source repository.
Maintain this resource?
Review this source-backed profile, send a correction with evidence, or link to it from your documentation. Claims verify your relationship to the project; profile facts still require source evidence and editorial review.
