Description
figma is an agent skill from OpenAI's curated skills collection that connects an assistant to the Figma MCP server, so it can fetch design context, screenshots, variables and assets from Figma nodes. It translates Figma designs into production code that follows the project's existing conventions and component library. Instead of inspecting values in Figma and copying them by hand, the skill pulls structured design data and visual references directly, which reduces measurement errors and the back-and-forth between design and implementation. Typical uses include fetching the exact layout and spacing of a Figma frame before writing component code, converting a Figma variant into React with Tailwind without measuring values by hand, pulling SVG and image assets straight from Figma, validating a finished UI against the original Figma screenshot, and troubleshooting the MCP setup and node ID resolution. It is for front-end developers who work from Figma files and want the translation to be accurate and consistent with their codebase. It needs the Figma MCP server to be set up and authorized, so check that connection before you start. The skill is listed on officialskills.sh and installs from the openai/skills repository. Install it with npx skills add https://github.com/openai/skills --skill figma.…
Highlights
- Connects to the Figma MCP server
- Fetches design context, screenshots, variables and assets
- Translates Figma nodes into code that follows the project's conventions
- Validates implementations against the Figma screenshot
Ratings & Reviews
No ratings yet
Be the first to rate openai/figma.
People also visit
coreyhaines31/copywriting
Write and rewrite marketing copy for landing pages, homepages, and ads
coreyhaines31/ab-testing
Plan and implement A/B tests or experiments for any digital experience
coreyhaines31/ad-creative
Generate and iterate ad creative including headlines, descriptions
coreyhaines31/ads
Create and optimize paid campaigns on Google, Meta, LinkedIn, and more
coreyhaines31/ai-seo
Optimize content to appear in AI-generated answers and LLM search results
openai/figma FAQ
What does it connect to?
The Figma MCP server, which provides design context, screenshots, variables and assets from Figma nodes.
Does it write code?
Yes. It translates Figma nodes into code that follows your project's existing conventions and component library.
What if it cannot find a node?
The skill includes troubleshooting for the MCP setup and node ID resolution.
How do I install it?
Run npx skills add https://github.com/openai/skills --skill figma.
What are the best openai/figma alternatives?
Popular alternatives to openai/figma include coreyhaines31/seo-audit, coreyhaines31/copywriting and coreyhaines31/ab-testing. See all openai/figma alternatives