Text & Color to CSS Variables

Extract text styles and fill colors from Figma layers and convert them into organized CSS variables.

Plugin Preview

This plugin helps you generate clean, reusable CSS variables from selected Figma layers.

It supports both text styles and fill colors, and automatically converts them into:

@mixin snippets for font styles

:root CSS variables for color values (in HEX format)

Auto-detects color types like color-gray, color-blue, color-red, etc.

Prevents name duplication with numbered suffixes (e.g., --color-gray-1, --color-gray-2)

Sorts all variables in ascending order for better readability

Perfect for building design systems or exporting ready-to-use CSS from design files.