CSS Export plugin - Documentation

The Obra shadcn/ui Pro kit ships with a companion Figma plugin — the CSS Export plugin — that closes the loop between design and code. Customize the kit’s tokens in Figma, run the plugin, and walk away with a globals.css (or design tokens, or Style Dictionary output) ready for your project.

What is the CSS Export plugin?#

The CSS Export plugin is a Figma plugin that turns the Obra shadcn/ui Pro kit into code. It’s the design-to-dev bridge: a designer customizes the kit’s variables in Figma, runs the plugin, and gets a globals.css file that drops straight into a shadcn/ui project.

That’s it, conceptually. The kit is built on Figma variables — colors, typography, shadows. shadcn/ui is built on CSS variables that mean the same things. The plugin reads one and writes the other, so the design and the code stay in sync without anyone copying hex values by hand.

Beyond globals.css, the plugin also exports your tokens as design tokens in a generic JSON format, and as Style Dictionary tokens — so you can feed the same source of truth into other platforms and pipelines (iOS, Android, internal tooling) via Style Dictionary.

It’s distributed on the Figma Community as a regular plugin (free to install, gated to Pro license holders by an authentication key). Enterprise customers also get the plugin’s source code, so they can fork it and adapt the export to their own token system if they need to.

Get the Obra shadcn/ui Pro CSS Export plugin from the Figma Community.

Going further#

Developer tutorial: from design to dev — a step-by-step walkthrough for setting up a shadcn/ui project and pulling tokens out of Figma with the plugin.
Designer tutorial: setting up multi-brand exports — how to structure your Figma collections so the plugin emits a clean multi-brand globals.css covering every brand and theme in one go.
Manual install procedure — for Org and Enterprise customers who want to install and customize the plugin from source.

Multi-brand exports#

The plugin reads specific collections by name — shadcn colors, chart colors, typography, plus the Obra-extended set. Anything else feeds these through aliases but isn’t exported on its own. That naming convention is what enables multi-brand exports: add a mode per brand inside the collections the plugin reads, and each mode comes out as its own CSS scope (:root, .dark, .brand-a, .brand-a.dark, etc.) in a single export.

For the full walkthrough — naming conventions, how to structure your collections, and how devs apply the result — see the Designer tutorial: setting up multi-brand exports.

Custom type styles#

The plugin ships with 12 built-in type styles — heading 1–4, paragraph large/regular/small/mini, caption, and monospace regular/small/mini. Add your own on top of those and the plugin picks it up automatically, no plugin update required — it just has to follow the same folder convention as the built-in presets: a group folder holding font-size, line-height, letter-spacing, and weight children.

For example, an overline style:

overline/font-size
overline/line-height
overline/letter-spacing
overline/weight

exports as its own text-overline utility, right alongside text-heading-1 and text-paragraph-large. A group needs at least a font-size or line-height variable to be recognized — weight-only groups are skipped. The Custom type styles checkbox in Setup lets you turn this off if you’d rather only export the 12 standard presets.

Google Fonts loader#

If the font in your Figma variables is available on Google Fonts, the plugin automatically detects that and generates the code to implement it — for both Next.js projects and standard HTML/CSS projects — surfaced in the head.html tab of the Code panel.

Copy that snippet into the right place in your project (the app/layout.tsx head in Next.js, or the <head> of your root template in plain HTML) and the font will load on every page.

If your font isn’t on Google Fonts, the plugin doesn’t generate any loader output — you’ll need to host or self-import the font yourself.