Generated banner for Figma Design To Code
Generated logo for Figma Design To Code

Figma Design To Code

OpenAIOfficialCreated by FigmaDistributed by OpenAI

  • Skill
  • Guidelines
  • Software development
  • Link-only
  • No issues found

From the author

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must NOT be skipped.
— the description by Figma

Install

Documentation by Figma

The licence of this skill does not allow us to copy its documentation. Read it at the source

Files

Requirements and compatibility

Written for: OpenAI Codex, Claude Code

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Claude Code frontmatter, Needs Node.js

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Figma
Publisher
OpenAI (Official)
Distributed by
OpenAI
Source
openai/plugins · plugins/figma/skills/figma-design-to-code · commit d420d13
Licence
Figma Developer Terms (link-only: we do not redistribute its files)
Synced

AutoGineer is not affiliated with or endorsed by Figma or OpenAI.

Get it from the source

This skill’s licence does not allow redistribution, so we link to it instead: openai/plugins