skills.rest
cris-achiardi
cris-achiardiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-component-generator

Generate Figma component sets from TSX/CSS source files and metadata.

62|8|Updated Nov 2, 2025
Search Tags:#automation#typescript#css#figma#component#generator#design-system
One-click install
npx skills add https://github.com/cris-achiardi/claude-skills --skill figma-component-generator-cris-achiardi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-component-generator
Source: https://github.com/cris-achiardi/claude-skills/tree/main/skills/figma-component-generator
Command: npx skills add https://github.com/cris-achiardi/claude-skills --skill figma-component-generator-cris-achiardi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables automatic creation and updating of Figma component sets by analyzing component source files (TSX, CSS, and metadata) and generating structured variants, bindings, and layout configurations.

Core Features & Use Cases

  • Generate component sets from React/CSS source files and metadata to accelerate design-system work.
  • Bind tokens to Figma variables, automate color and typographic mappings, and produce scalable variants for design systems.
  • Use cases include creating new components from codebases, updating existing libraries, and aligning Figma assets with source-driven metadata.

Quick Start

Invoke the slash command to generate or update components by pointing at a Figma page URL, e.g., /figma-component-generator <figma-page-url> [component-path].

Frequently Asked Questions about figma-component-generator

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

FAQPage Schema
How do I generate Figma components from source code?▼

To generate Figma components from source code, this skill analyzes TSX, CSS, and metadata files to map styles and tokens, then orchestrates component set creation via the figma-cli eval workflow.

Can I update existing Figma design system libraries from a React codebase?▼

Yes, you can update existing Figma design system libraries by reading React and CSS source files, mapping CSS variables to Figma variables, and applying structured variants and bindings to the components.

How do I bind CSS variables to Figma variables automatically?▼

Binding CSS variables to Figma variables happens automatically during generation by analyzing component styles and tokens, querying available variables, and mapping them to produce scalable design system variants.

What's the best way to create Figma component variants from TSX and CSS files?▼

The best way to create Figma component variants from TSX and CSS files is using a source-driven generator that analyzes component logic and metadata to produce structured variants and layout configurations.

Does the figma-component-generator require specific dependencies to run?▼

No specific dependencies are required to run the figma-component-generator, as it operates by analyzing your existing source files and orchestrating creation directly through the figma-cli eval workflow.

Why does generating Figma components from code require metadata files?▼

Generating Figma components from code requires metadata files because they provide the source-driven structural information needed to align Figma assets, bindings, and variants with the underlying component logic and styles.

Related Skills

Explore More Design & Creative Skills→
voidrotvoidrot

extract-design-md

Extracts visual design systems from frontend source code using regex analysis.

Community
Advanced
ImL1sImL1s
6

figma-use

Automates Figma plugin workflows with structured API patterns and atomic frontmatter-driven templates.

Community
Advanced
johnlindquistjohnlindquist
24

figma

Extract design tokens, components, and styles from Figma files.

Community
Intermediate
coinbasecoinbase
493

figma.create-connect

Generate Figma Code Connect mapping files for React components.

Official
Intermediate