skills.rest
johnlindquist
johnlindquistCOMMUNITY
Explore all skills by this author →
Website𝕏@johnlindquistGitHub

figma

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

24|6|Updated Dec 19, 2025
Search Tags:#components#figma#code#export#design-tokens
One-click install
npx skills add https://github.com/johnlindquist/claude --skill figma-johnlindquist
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
toqoztoqoz

figma-export

Export Figma design nodes to PNG, JPG, SVG, or PDF assets.

Community
Intermediate
Higashi-KotaHigashi-Kota

ui-theme

Generate CSS variables and Tailwind theme from JSON design tokens.

Community
Intermediate
xrehpicxxrehpicx
2

tailwind-design-system

Build and maintain Tailwind CSS v4 design systems with design tokens and responsive patterns.

Community
Advanced
vneseyoungstervneseyoungster
27

figma-analyzer

Extract design assets, metadata, and tokens from Figma files.

Community
Advanced