figma

Translate Figma designs into React and Tailwind code with asset fetching.

1|Updated Feb 15, 2026

Search Tags:#react #figma #assets #tailwind #design-to-code #ui implementation

Ready to run

npx skills add https://github.com/rustykuntz/rocie-tools --skill figma-rustykuntz

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/rustykuntz/rocie-tools/tree/main/skills/figma
Command: npx skills add https://github.com/rustykuntz/rocie-tools --skill figma-rustykuntz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill bridges the gap between design and development by translating Figma designs directly into code, streamlining the implementation process and ensuring visual fidelity.

Core Features & Use Cases

Design-to-Code Translation: Converts Figma designs into functional code (React + Tailwind).
Asset Fetching: Downloads 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 and Tailwind code, adhering to your project's design tokens and conventions.

Quick Start

Use the figma skill to implement the design from the provided Figma link.

Frequently Asked Questions about figma

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

FAQPage Schema

How do I convert Figma designs to React code?▼

To convert Figma designs to React code, this Skill translates Figma links directly into functional React components with Tailwind styling. It fetches necessary assets and adheres to your project-specific design tokens and conventions.

Do I need a Figma OAuth token for design-to-code implementation?▼

Yes, you need a Figma OAuth token for design-to-code implementation. The Skill requires this token and specific configurations to connect with the Figma MCP server for seamless asset fetching and component integration.

Can I fetch images and SVG assets directly from Figma for UI implementation?▼

You can fetch images and SVG assets directly from Figma for UI implementation. The Skill downloads necessary assets automatically during the design-to-code translation process to ensure visual fidelity.

How do I integrate existing design system components when translating Figma to code?▼

To integrate existing design system components when translating Figma to code, the Skill maps Figma designs to your current components. It ensures component reuse by adhering to project-specific conventions and design tokens.

What is the best way to implement a new UI component from a Figma link?▼

The best way to implement a new UI component from a Figma link is to provide the URL to this Skill. It instantly generates corresponding React and Tailwind code while fetching required assets and matching your project conventions.

Does this Figma design-to-code workflow support Tailwind CSS?▼

Yes, this Figma design-to-code workflow supports Tailwind CSS. It converts Figma designs directly into functional code using React and Tailwind, streamlining the UI implementation process while maintaining visual fidelity.