skills.rest
JustinWangJP
JustinWangJPCOMMUNITY
Explore all skills by this author →
GitHub

figma

Generate React components and design tokens from Figma API data.

6|1|Updated Feb 16, 2026
Search Tags:#automation#react#figma#codegen#tokens#design-to-code#design-systems
One-click install
npx skills add https://github.com/JustinWangJP/cc-agent-teams-action-monitor --skill figma-justinwangjp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/JustinWangJP/cc-agent-teams-action-monitor/tree/main/.agents/skills/figma
Command: npx skills add https://github.com/JustinWangJP/cc-agent-teams-action-monitor --skill figma-justinwangjp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates design-to-code workflows by connecting to the Figma API to extract design data and generate React components and design tokens.

Core Features & Use Cases

  • Component code generation: generate React components from Figma nodes.
  • Design token extraction: extract colors and typography into token sets.
  • End-to-end pipeline: generate components, tokens, and assets, with optional Dev Mode and webhook support.

Quick Start

Authenticate with your Figma API token and provide a file key to begin generating code and tokens.

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 components automatically?▼

You can convert Figma designs to React components by authenticating with a Figma API token and file key, which allows the Skill to extract design data and generate code from specific nodes.

What is the best way to extract design tokens for colors and typography from Figma?▼

Extracting design tokens from Figma is done by connecting to the Figma API to pull color and typography data, generating structured token sets for your design system.

Do I need a Figma API token to generate code from Figma files?▼

Yes, a Figma API token is required to authenticate access, extract design data, and generate React components and design tokens from your Figma files.

Can I build an end-to-end design-to-code pipeline with Figma Dev Mode?▼

Yes, you can build an end-to-end design-to-code pipeline that utilizes optional Figma Dev Mode and webhook support to automate component generation, token extraction, and asset exports.

Does Figma design-to-code automation work for design-system teams?▼

Yes, Figma design-to-code automation is built for design-system teams and developers, providing structured token extraction and React component generation to maintain system consistency.

Related Skills

Explore More Design & Creative Skills→
aydendenaydenden

figma

Retrieve Figma file structure, node details, and style metadata via REST API.

Community
Advanced
nidhalboumaiza-0nidhalboumaiza-0

frontend-design

Convert UI style requirements into frontend code with a tokens-first design system.

Community
Advanced
LAF-USLAF-US

figma-generate-library

Analyze codebases to generate Figma design-system tokens, components, and documentation.

Official
Advanced
FutureAtomsFutureAtoms
1

react-native-2026-figma-to-code

Convert Figma designs into React Native code using Locofy.ai and Builder.io.

Community
Intermediate