figma-to-tailwind

To import Figma variables into Tailwind CSS v4, provide a Figma file URL to fetch all design tokens and automatically write them as @theme tokens into your project's detected Tailwind entry file.

Figma to Tailwind mapping supports color, spacing, typography, and radius tokens. It handles multiple Figma collections and modes, writing them as CSS variables for consistent theming across multi-page sites.

You can sync a Figma design system with a Tailwind theme file by fetching variables from the Figma URL and exporting them as Tailwind v4 @theme tokens, eliminating manual token mapping and ensuring design-to-code parity.

Yes, the Figma to Tailwind token workflow supports multiple Figma collections and modes. It fetches all variables from the Figma file URL and maps them to appropriate CSS variables for your project.

The Figma to Tailwind skill finds the correct CSS entry file by scanning your project structure for a suitable Tailwind entry file, then writing the fetched Figma variables as @theme tokens directly into that file.

Yes, you can automate Figma to Tailwind token handoffs for multi-page sites. This design-to-code workflow fetches all Figma variables and writes them as Tailwind v4 @theme tokens, enabling consistent theming and faster handoffs.