fig2tw - Convert variables to Tailwind, CSS or JSON

About this plugin

Convert Figma variables into a Tailwind plugin, CSS or JSON file.

Key features:

Tailwind configuration is inferred from the variable scopes.

Configure the variable scopes in Figma to generate useful Tailwind configuration.

All variable modes are converted into CSS variables.

Change the mode (light, dark, etc.) with a CSS class.

Number units are configured by variable scope.

Define how numbers are to converted to CSS. You can choose from px, em, rem. Font weights don't have units.

Getting started:

1. Download the generated Tailwind plugin

Download the tailwind plugin using the "Download" button and place the file next to your tailwind.config.ts.

2. Import the generated plugin in your Tailwind configuration

In the tailwind.config.ts file, import the generated plugin and place it in the plugins array. The configuration should look like below.

Supports:

Tailwind configuration scopes:

colors, fill, accentColor, backgroundColor, gradientColorStops, borderColor, stroke, ringColor, ringOffsetColor, outlineColor, textColor, textDecorationColor, caretColor, placeholderColor, boxShadowColor.

spacing, size, width, minWidth, maxWidth, height, minHeight, maxHeight, margin, inset, borderRadius, padding, gap, space, scrollMargin, scrollPadding, borderSpacing, strokeWidth, outlineWidth, borderWidth, ringWidth, fontFamily, fontSize, lineHeight, letterSpacing, fontWeight

Figma variables scopes:

ALL_SCOPES, ALL_FILLS, FRAME_FILL, SHAPE_FILL, TEXT_FILL, STROKE_COLOR, EFFECT_COLOR, CORNER_RADIUS, WIDTH_HEIGHT, GAP, STROKE_FLOAT, FONT_SIZE, LINE_HEIGHT, LETTER_SPACING, FONT_WEIGHT, FONT_FAMILY