skills.rest
kylebrodeur
kylebrodeurCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

code-to-figma

Generate per-file .figma.json from React/TSX components for Figma.

Updated Aug 23, 2026
Search Tags:#react#figma#plugin#tailwind#design-system#code-to-figma
One-click install
npx skills add https://github.com/kylebrodeur/ux-collab --skill code-to-figma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: code-to-figma
Source: https://github.com/kylebrodeur/ux-collab/tree/main/skills/code-to-figma
Command: npx skills add https://github.com/kylebrodeur/ux-collab --skill code-to-figma

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converges code and design by exporting React components to Figma-friendly JSON so designers and developers stay aligned.

Core Features & Use Cases

  • Code-to-Figma scan: parse React/TSX to generate per-file .figma.json.
  • Plugin-ready output: bundle data for loading into the Figma Desktop plugin.
  • Design-system alignment: supports token/variant mapping to streamline design handoffs.

Quick Start

Install the upstream code-to-figma skill and run a scan to generate per-file .figma.json for the Figma Desktop plugin.

Frequently Asked Questions about code-to-figma

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

FAQPage Schema
How do I sync React components to Figma designs?▼

You can sync React components to Figma designs by scanning your TSX files to generate per-file .figma.json data. This plugin-ready output is then loaded into the Figma Desktop plugin to keep your design assets aligned with your codebase.

What is the best way to convert React code to Figma design assets?▼

Converting React code to Figma design assets involves scanning your TSX project to generate .figma.json files. This method supports token and variant mapping to streamline your design-system handoffs and output plugin-ready data.

Do I need Node.js to generate Figma JSON from React components?▼

Yes, you need Node.js 18 or higher to run the code-to-figma CLI and generate Figma JSON from React components. You can install the CLI globally via npm or execute it on demand using npx without a permanent installation.

Can I use Tailwind CSS when exporting React components to Figma?▼

Yes, the code-to-figma process supports Tailwind CSS when exporting React components to Figma. It parses your React and TSX files to generate plugin-ready data that maps your design tokens and variants for the Figma plugin.

How does the code-to-figma plugin handle design-system token mapping?▼

The code-to-figma plugin handles design-system token mapping by parsing React components and generating per-file .figma.json data. This output includes token and variant mapping to streamline the design handoff process for designers.

Does converting React to Figma require the Figma Desktop app?▼

Converting React to Figma requires the Figma Desktop app only if you want to use the local plugin to load the generated .figma.json data. The CLI scan itself just requires Node.js 18+ to parse your TSX files and output plugin-ready data.

Related Skills

Explore More Design & Creative Skills→
SugamdeolSugamdeol

clawdhub

Manage ClawdHub skills via CLI: search, install, update, publish.

Community
Intermediate
hoodinihoodini
262

figma

Convert Figma design data into React components, CSS, and Tailwind tokens.

Community
Intermediate
silaslopes100silaslopes100

reversa-design-system

Extract design tokens from CSS, Tailwind, and UI library configurations.

Community
Intermediate
gihwan-devgihwan-dev
1

figma-to-code

Convert Figma design data into React component code.

Community
Advanced