skills.rest
gaspanik
gaspanikCOMMUNITY
Explore all skills by this author →
Website𝕏@cipherGitHub

tailwind-to-figma

Extracts Tailwind v4 @theme tokens and writes them as organized Figma Variables.

Updated May 18, 2026
Search Tags:#css#figma#theme#tailwind#design-tokens#token-export
One-click install
npx skills add https://github.com/gaspanik/vanilla-tailwind4-starter --skill tailwind-to-figma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-to-figma
Source: https://github.com/gaspanik/vanilla-tailwind4-starter/tree/main/.claude/skills/tailwind-to-figma
Command: npx skills add https://github.com/gaspanik/vanilla-tailwind4-starter --skill tailwind-to-figma

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tailwind CSS theme tokens live in CSS and are hard to reuse in design tools; this Skill automates exporting those tokens into Figma as design Variables.

Core Features & Use Cases

  • Find the Tailwind entry CSS file and extract the @theme block.
  • Create or update a Figma file with organized Collections (Colors, Typography, Spacing, Radius, Border, Other) and populate variables.
  • Support end-to-end flows: single-file projects or multi-file setups with prompting to create a new file or append to existing.

Quick Start

Locate the Tailwind entry CSS, extract the @theme tokens, and push them into a new or existing Figma file as organized Variables.

Frequently Asked Questions about tailwind-to-figma

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

FAQPage Schema
How do I export Tailwind tokens to Figma variables?▼

Export Tailwind tokens to Figma variables by locating the Tailwind v4 entry CSS file, reading the @theme block, and writing the extracted tokens into Figma file collections for Colors, Typography, Spacing, Radius, Border, and Other.

How do I sync my Tailwind CSS theme with Figma design variables?▼

Sync a Tailwind CSS theme with Figma by extracting design tokens from the CSS @theme block and automatically creating or updating organized Figma variable collections.

Can I append Tailwind theme tokens to an existing Figma file?▼

Yes, you can append Tailwind theme tokens to an existing Figma file. The process supports both single-file and multi-file setups, prompting you to either create a new file or append to your current one.

Does this token export method work with Tailwind v4 projects?▼

Yes, the token export method works with Tailwind v4 projects by specifically locating the entry CSS file and reading the @theme block to surface all available design tokens for Figma.

What Tailwind design tokens can I push into Figma?▼

You can push Tailwind design tokens into Figma across six organized collections: Colors, Typography, Spacing, Radius, Border, and Other, ensuring full design system coverage.

How are missing CSS files handled when exporting to Figma?▼

Missing CSS files are handled with appropriate error handling during the Bash file location process, preventing the Figma variable creation from failing silently.

Related Skills

Explore More Design & Creative Skills→
gaspanikgaspanik

figma-to-tailwind

Fetch Figma file variables and write them as Tailwind CSS v4 @theme tokens.

Community
Advanced
fabioeloifabioeloi
5

Figma Generator

Convert validated Mermaid diagrams into Figma frames and components.

Community
Intermediate
markky21markky21

tailwind-design-system

Build scalable design systems with Tailwind CSS v4 and design tokens.

Community
Advanced
mrgreenishmrgreenish

figma-to-code-design-system

Sync Figma design tokens into DTCG tokens.json and regenerate CSS, Tailwind, or SCSS outputs.

Community
Advanced