Skip to content
rdloom

Figma plugin

The same tokens and variants in Figma, so design and code share names and values.

  • Variables: an "rdloom" collection with Light and Dark modes. Dev Mode shows each one's CSS variable, like var(--site-primary).
  • Components: one component set per spec, with variant properties named from the spec (Variant=primary, Size=md, Disabled=false). Each variant is drawn like the component (a field's label, input and error; a grid's header and rows) with colors and radii bound to the variables.
  • Safe to re-run: it updates values and adds missing variants, and never deletes or restyles designers' work.

Run it

The plugin isn't in the Figma Community yet. Build it from the repository:

npm run gen && npm run build:figma

Then in the Figma desktop app: Plugins → Development → Import plugin from manifest… and pick packages/figma/manifest.json.