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

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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.