skills.rest
gooftroop
gooftroopCOMMUNITY
Explore all skills by this author →
GitHub

figma

Convert Figma designs into React and Tailwind CSS code.

Updated Mar 6, 2026
Search Tags:#react#figma#component generation#tailwind#ui development#design-to-code
One-click install
npx skills add https://github.com/gooftroop/Armoury --skill figma-gooftroop
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/gooftroop/Armoury/tree/main/.opencode/skills/figma
Command: npx skills add https://github.com/gooftroop/Armoury --skill figma-gooftroop

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the process of translating Figma designs into production-ready code, ensuring visual fidelity and adherence to project conventions.

Core Features & Use Cases

  • Design-to-Code Translation: Converts Figma nodes into React and Tailwind CSS code.
  • Asset Management: Fetches necessary assets (images, SVGs) directly from Figma.
  • Component Reuse: Integrates with existing design systems and components.
  • Use Case: Implement a new UI component by providing a Figma link, and the Skill will generate the corresponding React code, styled with your project's design tokens.

Quick Start

Use the figma skill to generate React and Tailwind code 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 convert a Figma design to React code?▼

You can convert Figma designs to React code by providing a Figma URL or node ID. The skill fetches design context, screenshots, and assets via the Figma MCP server, then generates React components styled with Tailwind CSS.

Can I generate Tailwind CSS from Figma designs automatically?▼

Yes, you can generate Tailwind CSS from Figma designs automatically. The skill translates Figma nodes into React and Tailwind CSS, adhering to your project-specific conventions and design tokens for accurate visual fidelity.

Does design-to-code translation work with existing component libraries?▼

Yes, design-to-code translation works with existing component libraries. The skill facilitates component reuse by fetching Figma design context and integrating it directly with your established design systems and components.

What do I need to provide to start implementing UI from Figma?▼

To start implementing UI from Figma, you need to provide a Figma URL or node ID. The skill uses these triggers to fetch necessary design variables, screenshots, and assets directly from the Figma file.

How are design tokens handled when converting Figma to code?▼

Design tokens are handled by adhering to your project-specific conventions during conversion. The skill extracts Figma variables and assets, ensuring the generated React and Tailwind CSS code matches your established design system.

Why are my Figma assets not fetching correctly during code generation?▼

Figma assets might not fetch correctly if the Figma MCP server cannot access the provided Figma URL or node ID. Ensure your Figma link is valid and the MCP server is properly configured to extract design context.

Related Skills

Explore More Design & Creative Skills→
Envy-7zEnvy-7z

figma

Converts Figma designs to code and generates missing assets and markup.

Community
Intermediate
gharam1234gharam1234

figma-to-component

Convert Figma design URLs into React components with CSS, tests, and Storybook.

Community
Advanced
nickstradnickstrad

tailwind-design-system

Build scalable design systems with Tailwind CSS and design tokens.

Community
Intermediate
thanhquan3010thanhquan3010

figma

Convert Figma designs into React and Tailwind CSS code.

Community
Intermediate