Blog category
How-to
Accessible color palette for light and dark mode in Figma
Build an accessible color palette that meets WCAG AA in light and dark mode: the contrast ratios, the color pairs to test, and the Figma tools that check or adjust them.
Catppuccin, Dracula and Tokyo Night in Figma: turn an editor theme into variables
Map Catppuccin, Dracula, Tokyo Night or One Dark onto Figma variables with Light and Dark modes: which flavor goes where, which roles to create, and which pairs fail contrast.
How to export Figma variables to Tailwind (v4 @theme or v3 config)
Three ways to export Figma variables to Tailwind: native JSON export plus a build step, an export plugin, or a generator with export built in. With v4 CSS for light and dark.
How to create a design system in Figma from scratch (startup size)
Build a small design system in Figma from scratch: color variables, text styles, spacing and radius, ten core components, a docs page and a library, with plan limits noted.
How to set up variable modes in Figma: collections, aliases and theme switching
A hands-on setup for Figma variable modes: which collection gets the modes, aliasing in each column, switching frames and pages, and what Figma's plan limits mean.
Figma variables on the free plan: what works without modes
On Figma's free Starter plan you can create variables, aliases and scopes, but not a second mode or a shared library. What works, the workarounds, and when to upgrade.
Primitive vs semantic tokens: the difference, with examples
Primitive tokens store raw values; semantic tokens name what a value is for and point to a primitive. Examples for color, spacing and type in Figma and Tailwind.
How to replace hard-coded colors with variables in Figma
Fix an inherited Figma file: find hard-coded hex colors, map them to variables, rebind them with Selection colors or a plugin, and check the result before you ship.
Tailwind dark mode color palette: which steps to use
Which Tailwind color steps to use for backgrounds, text, borders and accents in dark mode, how to apply them with dark: or CSS variables, and how to mirror them in Figma.