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, border radii, shadows, spacing. 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). Org and 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, border radii, 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.

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.