Pro EditionCommunity EditionCSS Export pluginCreate plugin

Changelog — CSS Export plugin#

1.4.1#

Setup#

  • Reload button. A small refresh icon next to the info button in the Setup tab re-runs getLocalVariableCollectionsAsync() so newly added, renamed, or removed Figma variable modes show up without closing and reopening the plugin. The icon spins until the new data arrives (minimum one full rotation).

Bug fixes#

  • Typography row was mis-described in Setup. The base-shadcn typography row claimed it emitted Tailwind v4 @utility classes (text-heading-1..4, text-paragraph-*, etc.) and was tagged “Obra Extended”. In reality this toggle only emits the --font-sans / --font-heading / --font-mono variables — the utility classes are gated by the separate Typography utilities toggle. Description and example output rewritten to match the actual behavior.
  • Chart colors example was in the wrong order. Real output emits --chart-5 through --chart-1; the inline example was reversed. Now matches the export.
  • Border radii row didn’t point at its setting. Description now references the Infer scale from --radius toggle in Settings → Border radius, so users can find the calc-formula-vs-Figma-values switch from the row.
  • Preview inputs had a dark fill in dark mode. Input, Textarea, Checkbox, and RadioGroup previews carried dark:bg-input/30 from the upstream shadcn defaults. The Obra kit ships transparent input fills in both modes, so the preview’s dark-mode fill has been removed for consistency.

1.4.0#

Syntax highlighting in the Code tab#

Generated CSS (Tailwind / shadcn + Vanilla) and JSON tokens (Design Tokens 1.0 + Style Dictionary) are now syntax-highlighted via Prism. Token colors adapt to Figma’s light or dark chrome automatically. The existing Color-code lines by source collection experimental setting still draws its colored left border on top of the highlight.

Output refinements#

  • Compact DTCG / Style Dictionary color values. The spec’s color object — { "colorSpace": "...", "components": [...], "alpha": ..., "hex": "..." } — is now emitted on a single line instead of wrapping across five, so the JSON files are dramatically shorter and easier to scan.
  • Token group renamed to Design Tokens 1.0 in the Code tab (was “DTCG”), to make the spec link more obvious.

Setup tab refinements#

  • Obra Extended is now opt-in. Shadows and spacing default to disabled — both override scales that can break shadcn components, so they only emit when you explicitly enable them.
  • Better empty state when the open file has no variable collections, or none that match the kit’s expected names. Links straight to the Obra shadcn/ui Pro Community page.
  • Tooltips replace inline body copy on the collection picker and dark-pair indicator, keeping the panel header compact.
  • About tab now states the kit version requirement (1.8.0+) and explains each Code-tab output format up front.

Plugin chrome#

  • Width reduced from 1100 → 980 so the plugin fits more comfortably alongside Figma’s right panel.
  • Native-style checkboxes. Plugin-chrome checkboxes are restyled to match Figma’s own checkbox (filled glyph on the brand color).
  • Copy feedback. The Code tab’s Copy button now shows a “Copied to clipboard” toast.
  • Contact link in the header pre-fills the form’s Feedback category.

1.3.0#

New export formats (Code tab)#

The Code tab is now grouped into three categories with variant switchers:

  • CSS — Tailwind / shadcn (existing shadcn-style globals.css) and a new Vanilla variant: pure :root + .dark with flat --* declarations, no Tailwind directives — drop-in for projects that don’t use Tailwind v4.
  • Fonts — head.html and layout.tsx (Next.js).
  • Tokens — two new outputs:
    • DTCG — W3C Design Tokens Format Module (stable 2025.10): per-leaf $type / $value, object-form colors { colorSpace, components, alpha?, hex }, object-form dimensions { value, unit }, structured shadow sub-values, fontFamily as arrays. Dark variants are emitted as *-dark siblings in the same file.
    • Style Dictionary — same token tree in Style Dictionary’s bare-key value / type form for v3-era starter configs.

Typography & utilities split#

Typography is now generated in two clearly separated parts:

  • Base typography (font-family vars, weight tokens) — emitted whenever the typography collection is enabled, since these are core shadcn tokens.
  • Typography utility classes (text-heading-1, text-paragraph-large, text-caption, text-monospace*, etc.) — opt-in via a separate row in Obra Extended. The original “Include Obra Extended” master toggle is gone; each option is now its own checkbox.

A related experimental setting controls whether utility classes are emitted as @utility text-… blocks (Tailwind v4’s directive form) or as plain .text-… CSS classes.

Trace which collection produced which line (experimental)#

A new Settings → Experimental option, Color-code Code-tab lines by source collection, draws a colored marker next to each row in the Setup tab and a matching colored left-border on every line of the generated CSS so you can trace at a glance which collection produced which output. Same colors used across both panes:

  • Blue — semantic colors
  • Emerald — chart colors
  • Violet — border radii
  • Amber — typography
  • Rose — shadows
  • Cyan — spacing

Kit compatibility (1.8.0 → 1.9.3)#

The plugin now reads both the older 1.8.0 kit and the current 1.9.3 layout without configuration changes:

  • Border radii — both rounded-* (1.8.0) and radius-* (1.8.3+, including the new radius-lg (radius) form) names are accepted via a translation map.
  • Chart colors — parser uses the last /-segment so legacy 1.8.0 paths like categorical/chart 1 match the same way as 1.9.3’s flat chart 1.
  • Font families — bare font-family (renamed from font-family-sans in 1.8.3+) maps to --font-sans. font-family-headings (plural) is still detected.
  • Collection names — semantic colors (1.8.0) and shadcn colors (1.9.3) both map to the same template. Reference / unpublished / absolute collections are auto-excluded by name pattern ((unpublished, (absolute, references, raw color, ---).

Note: 1.8.0’s shadcn-dark mode has card-foreground set to pure black, which causes low-contrast text inside Card components in the dark preview. This is a kit-side data issue and is corrected in 1.9.3 — the plugin emits whatever the kit defines.

Preview enhancements#

The Preview tab now mirrors shadcn’s own demo layout much more closely:

  • Real shadcn components rendered against your tokens — Card, Button, Badge, Input, Textarea, Checkbox, Switch, Slider, RadioGroup, Label, Separator — using the same composition as the official next-app demo.
  • Chart swatches only render when chart-colors is enabled; the rest of the swatch grid scales to match the demo’s proportions.
  • Sub-tabs (Colors / Typography / Radius / Shadows / Spacing) appear only when their tokens are present in the export.
  • New Spacing preview — named scale rendered as bars at their declared widths.
  • Typography preview lists detected fonts with primary family, full stack value, a sample line, and a “Google Fonts” badge for families that auto-load.

1.2.0#

Bug fixes#

  • Charts preview rendered even when chart colors were disabled — the Charts accordion now only appears when --chart-N variables exist in the generated CSS, instead of falling back to neon-green placeholder swatches.
  • Colors/Buttons/Inputs preview rendered without shadcn colors — when the shadcn colors (or fallback semantic colors) collection is disabled, the preview now shows a hint card explaining the requirement instead of unusable neon-green tiles. Charts still render independently below the hint when chart colors are enabled.
  • New monospace text styles weren’t exported — kit 1.9.2+ splits monospace into monospace/regular, monospace/small, and monospace/mini. The plugin now generates text-monospace-regular, text-monospace-small, and text-monospace-mini utilities. Legacy single-style monospaced is still supported for older kits.
  • Google Fonts only loaded in the Typography preview — Colors, Radius, and Shadows previews now also inject the Google Fonts <link> so custom fonts (e.g. Nunito Sans set as --font-sans) render everywhere instead of falling back to system fonts.
  • Google Fonts URL silently dropped fonts with non-default weight axes — the request used :[email protected], which Google Fonts rejects for families whose weight axis doesn’t fit (e.g. Nunito Sans is 200..1000). Switched to specific weights (:wght@400;500;600;700) so all common Google Fonts load reliably.

Preview improvements#

  • Monospace preview now renders the same “The quick brown fox…” sample as paragraphs, one per size, with the section open by default.
  • Typography preview includes a small note explaining that fonts depend on what’s available locally and pointing to the head.html snippet in the Code tab for Google Fonts setup.
  • Radius preview includes a note explaining that disabling the border radii collection falls back to shadcn’s default --radius: 0.625rem.
  • Charts accordion placement preserved between Colors and Buttons, matching the original layout.
  • Diagnostic console.log lines added to the preview path so font-loading issues are inspectable from the plugin console (font vars detected, generated link tag, per-iframe injection, and the typography iframe’s actual FontFace statuses).

1.1.0#

Features#

  • Infer radius scale from --radius — new Settings toggle. When enabled, the exported @theme inline block uses shadcn’s canonical calc(var(--radius) * …) formulas for radius-sm through radius-4xl instead of per-step Figma values, matching shadcn’s default output. --radius still comes from the kit (or falls back to 10px / 0.625rem). Off by default so existing exports are unchanged.
  • Support 1.8.3 border-radius naming — the plugin reads older rounded-* variables, radius-* with a bare radius base, and current naming where the base is merged into radius-lg (radius). radius-4xl is now included. Plugin keeps working for any kit version.

1.0.0#

Initial release.