figma

Name: figma
Availability: InStock
Author: justinwangjp

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

Ready to run

npx skills add https://github.com/JustinWangJP/cc-agent-teams-action-monitor --skill figma-justinwangjp

💬 Prompt for ChatGPT / Claude Chat▼

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.