skills.rest
northseadl
northseadlCOMMUNITY
Explore all skills by this author →
GitHub

figma

Fetch Figma design context and translate nodes into React and Tailwind code.

Updated Feb 3, 2026
Search Tags:#react#figma#assets#tailwind#design-to-code#ui generation
One-click install
npx skills add https://github.com/northseadl/skillwisp --skill figma-northseadl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/northseadl/skillwisp/tree/main/skills/%40openai/figma
Command: npx skills add https://github.com/northseadl/skillwisp --skill figma-northseadl

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill bridges the gap between design and development by enabling AI assistants to directly interact with Figma designs, translating them into production-ready code and fetching necessary assets.

Core Features & Use Cases

  • Design Context Fetching: Retrieve structured design data, including layout, styles, and component information, for specific Figma nodes.
  • Code Translation: Convert Figma designs into code (React + Tailwind) while adhering to project-specific conventions and design systems.
  • Asset Management: Download images and SVGs directly from Figma.
  • Use Case: Implement a new UI component by providing a Figma link, allowing the AI to fetch the design, generate the initial code structure, and ensure visual parity with the design system.

Quick Start

Use the figma skill to generate React and Tailwind code for the Figma design at the provided URL.

Frequently Asked Questions about figma

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

FAQPage Schema
How do I convert a Figma design to React and Tailwind code?▼

To convert Figma designs to React and Tailwind code, you provide a Figma URL or node ID. The skill fetches the design context, layout, and variables via the Figma MCP server, then generates production-ready code matching your project conventions.

What is Figma MCP and how does it help with design-to-code implementation?▼

Figma MCP is a server protocol allowing AI assistants to interact directly with Figma designs. It facilitates design-to-code implementation by fetching structured design data, screenshots, variables, and assets for specific Figma nodes to translate into code.

Do I need a token to fetch Figma design context and assets?▼

Yes, you need a valid FIGMA_OAUTH_TOKEN environment variable to fetch Figma design context and assets. You also need RMCP client enablement to connect to the Figma MCP server and retrieve the necessary design data.

Can I download images and SVGs directly from Figma nodes?▼

Yes, you can download images and SVGs directly from Figma nodes. The skill integrates with the Figma MCP server to manage assets, allowing you to retrieve and export images and SVGs alongside generating the code structure.

How do I ensure visual parity when generating a UI component from a Figma link?▼

To ensure visual parity when generating a UI component from a Figma link, the skill fetches structured design data including styles and component information. It translates this into React and Tailwind code while adhering to your specific design system.

What are the limitations of using Figma MCP for design-to-code translation?▼

Limitations include the requirement of a valid FIGMA_OAUTH_TOKEN and RMCP client enablement. Without these, the design-to-code translation cannot fetch the necessary Figma design context, variables, or assets to generate the code structure.

Related Skills

Explore More Design & Creative Skills→
mongodbmongodb
166

mongodb-mcp-setup

Guide MongoDB MCP server authentication through connection methods and environment variables.

Official
Intermediate
PrasadTelasulaPrasadTelasula

component-testing

Test React components with React Testing Library and Playwright for frontend correctness.

Community
Intermediate
EdgeHuntEdgeHunt

ck:ui-styling

Streamline React UI styling with shadcn/ui and Tailwind CSS design systems.

Official
Advanced
opzero1opzero1
3

figma-design

Extract design tokens, component details, and assets from Figma files.

Official
Intermediate