skills.rest
openai
openaiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

figma

Translate Figma designs into project-specific code via the Figma MCP server.

24.7k|1.7k|Updated Nov 25, 2025
Search Tags:#code generation#figma#design-to-code#ui implementation#figma mcp#asset handling
One-click install
npx skills add https://github.com/openai/skills --skill figma-openai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/openai/skills/tree/main/skills/.curated/figma
Command: npx skills add https://github.com/openai/skills --skill figma-openai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the design-to-code process by enabling direct translation of Figma designs into production-ready code, ensuring visual fidelity and efficient implementation.

Core Features & Use Cases

  • Design Context Fetching: Retrieve structured design data and default code representations from Figma.
  • Asset Handling: Directly use image and SVG assets provided by the Figma MCP server.
  • Code Translation: Convert Figma nodes into project-specific code, adhering to established conventions, styles, and frameworks.
  • Use Case: Implement a new UI component by providing a Figma link, allowing the agent to fetch the design, generate initial code, and adapt it to the project's existing design system.

Quick Start

Use the figma skill to get the design context for the Figma link provided.

Frequently Asked Questions about figma

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I translate Figma designs into production code?▼

To translate Figma designs into production code, you provide a Figma link to fetch design context, screenshots, and assets, then generate project-specific code adhering to your conventions and frameworks.

What is Figma MCP used for in design-to-code implementation?▼

Figma MCP is used to fetch structured design data and default code representations, streamlining UI implementation by directly providing image and SVG assets for code translation.

Do I need to configure authentication to use the Figma MCP server?▼

Yes, you need to configure the Figma MCP server and appropriate authentication to fetch design context and assets for translating Figma nodes into code.

Can I generate code that matches my project's existing design system from Figma?▼

Yes, you can generate code matching your design system by converting Figma nodes into project-specific code that adheres to your established styles and conventions.

How does asset handling work when converting Figma designs to code?▼

Asset handling works by directly using image and SVG assets provided by the Figma MCP server during the code translation process, ensuring visual fidelity and efficient implementation.

What are the limitations of using Figma MCP for UI implementation?▼

A limitation of using Figma MCP for UI implementation is that it requires explicit server configuration and authentication, meaning it cannot fetch design context or assets without proper setup.

Related Skills

Explore More Design & Creative Skills→
HellKaiser45HellKaiser45

figma

Translate Figma design frames into production-ready UI code via MCP.

Community
Advanced
david-nossebrodavid-nossebro

shadcn

Inspect components.json and generate shadcn/ui components matching Tailwind and app structure.

Community
Intermediate
jiitojiito
1

figma

Fetch Figma design context and generate React and Tailwind code.

Community
Intermediate
gitdukgitduk

implement-design

Convert Figma design data into production-ready UI components.

Community
Advanced