figma

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

24|6|Updated Dec 19, 2025

Search Tags:#components #figma #code #export #design-tokens

Ready to run

npx skills add https://github.com/johnlindquist/claude --skill figma-johnlindquist

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Extract design data from Figma files to generate code, tokens, and style definitions.

Core Features & Use Cases

Get design tokens (colors, typography, spacing)
Generate code from Figma nodes
Export components and styles via figma-export

Quick Start

Fetch file tokens from a Figma file and generate Typescript components, run figma-export use-config

Frequently Asked Questions about figma

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

FAQPage Schema

How do I extract design tokens from Figma files?▼

Extract design tokens by connecting to your Figma file via API token, then use the Skill to retrieve colors, typography, and spacing data. The Skill converts these design attributes into token formats you can use directly in code and stylesheets.

Can I generate code directly from Figma designs?▼

Yes, generate code from Figma nodes using the Skill with TypeScript and Tailwind CSS support. It converts selected components and styles into exportable code artifacts without manual translation.

What do I need to get started with Figma export?▼

You need a Figma API token and access to your Figma file. Optionally install the figma-export CLI to unlock advanced component and style export workflows through configuration.

How do I export components and styles from Figma?▼

Use figma-export or the Skill's API retrieval to pull component specs and style definitions from your Figma file. The exported data structures design decisions for reuse across your codebase.

Can I automate design-to-code workflows with Figma and Tailwind?▼

Yes, automate token and component export from Figma into Tailwind CSS configurations. The Skill bridges design and development by converting Figma styles into code your build pipeline can consume.

What's the difference between exporting tokens versus component specs?▼

Token export captures design primitives like colors and spacing for consistent styling; component specs extract structure and properties for code generation. Both serve different phases of the design-to-code workflow.