figma

Name: figma
Availability: InStock
Author: OpenAI

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

Ready to run

npx skills add https://github.com/openai/skills --skill figma-openai

💬 Prompt for ChatGPT / Claude Chat▼

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.