ShadcnStore Create Plugin for Figma
Bring the shadcn/ui Create customization experience straight into Figma. Pick your base color, accent theme, font, icon library, and border radius, then hit Apply. The plugin does the rest, writing Figma Variables for both light and dark mode so your entire file stays in sync instantly.
Compatibility
This plugin only works with the ShadcnStore Figma Design System. It will not work with other Figma files or generic design systems. Make sure you're using the official ShadcnStore file before continuing.
Getting Started
Prerequisites
Before you launch the plugin, make sure you have the following ready:
- ShadcnStore Figma Design System: Download the design system file from your Purchases dashboard
- Edit permissions: You must be an Editor on the file, not Viewer
- Fonts installed: Install any fonts you want to use. At minimum, install Inter (the default). The full list: Inter, Noto Sans, Nunito Sans, Figtree, Roboto, Raleway, DM Sans, Public Sans, Outfit, JetBrains Mono
- Choose your icon library: See Recommended Icon Workflow before getting started
Installing the Plugin
The plugin is available on the Figma Community. Open that page, click Install, then relaunch your ShadcnStore design system file.
Launching the Plugin
- Open your ShadcnStore Figma Design System file
- Go to Plugins → ShadcnStore Create in the menu
- The plugin window opens. If you've used it before, your previous settings load automatically
Works offline
The plugin has no network access and runs entirely offline once installed. No account or internet connection needed.
Plugin Interface
The plugin is a single panel with five customization sections stacked vertically, plus action buttons in the footer.
| Area | Purpose |
|---|---|
| Base Color | The neutral palette: backgrounds, borders, muted areas |
| Theme | Primary accent color applied on top of the base |
| Font | Font family for font-sans |
| Icon Library | Which icon library is active across the file |
| Radius | Corner rounding scale for all components |
| Footer | Shuffle, Reset, Cancel, and Apply buttons |
Customization Options
Base Color
The base color is your neutral "gray scale" foundation. It controls backgrounds, cards, borders, muted text, and more.
| Option | Description |
|---|---|
| Neutral | Pure neutral gray, no color cast |
| Gray | Slight cool-blue cast |
| Zinc | Subtle purple-gray undertone |
| Stone | Warm beige-brown undertone |
| Slate | Prominent cool-blue tint |
Each base color defines values for 19 semantic tokens (background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input, ring) in both light and dark modes.
Theme
The theme sets your primary accent color, overriding just three tokens: primary, primary-foreground, and ring. Choose Neutral to use your base color without any accent overrides.
18 available themes: Neutral, Amber, Blue, Cyan, Emerald, Fuchsia, Green, Indigo, Lime, Orange, Pink, Purple, Red, Rose, Sky, Teal, Violet, Yellow
How Base + Theme interact
The base color builds your entire neutral palette. The theme then layers just three tokens on top. For example, Base = Slate + Theme = Blue gives you a cool-gray foundation with blue buttons and focus rings.
Font
Selects the font-sans font family. Each option is rendered in its own typeface in the dropdown so you can preview before applying.
| Font | Style |
|---|---|
| Inter | Sans-serif |
| Noto Sans | Sans-serif |
| Nunito Sans | Sans-serif |
| Figtree | Sans-serif |
| Roboto | Sans-serif |
| Raleway | Sans-serif |
| DM Sans | Sans-serif |
| Public Sans | Sans-serif |
| Outfit | Sans-serif |
| JetBrains Mono | Monospace |
Font must be installed
The plugin updates a Figma Variable. It does not update individual text layers. The ShadcnStore design system components are pre-bound to the font-family/font-sans variable and will update automatically. For custom text layers, you'll need to bind the font yourself or update them manually. Make sure the font is installed on your system or added to your Figma team fonts.
Icon Library
Determines which icon library is active across your entire file. Switching libraries updates boolean variables that control icon visibility inside switchable icon components.
| Library | npm Package |
|---|---|
| Lucide (default) | lucide-react |
| Tabler Icons | @tabler/icons-react |
| HugeIcons | @hugeicons/react |
| Phosphor | @phosphor-icons/react |
| Remix Icon | @remixicon/react |
Read more about how icons work in the Switchable Icons documentation.
Radius
Controls the border radius scale across all components. Eight variables scale proportionally based on your selection.
| Option | radius value |
|---|---|
| None | 0 px |
| Small | 8 px |
| Default | 10 px |
| Medium | 13 px |
| Large | 15 px |
The full set of radius variables at Default (1× scale):
| Variable | Value |
|---|---|
radius/xs | 2 px |
radius/sm | 6 px |
radius/md | 8 px |
radius/radius | 10 px |
radius/xl | 14 px |
radius/2xl | 16 px |
radius/3xl | 24 px |
radius/4xl | 32 px |
TIP
None gives a sharp, angular feel. Large creates a softer, rounder look. Most apps land somewhere in the middle. Default is a safe starting point.
Applying Changes
Click Apply in the footer. A progress overlay shows each step as it runs:
- Finding collections: Locates or creates the
Themesvariable collection - Theme updated: Writes light and dark color variables
- Fonts updated: Updates the
font-family/font-sansstring variable - Border radius updated: Writes all 8 radius float variables
- Icon library updated: Toggles boolean icon library variables
- Configuration saved: Saves your selections for next time
Each step shows a live status icon (pending, in-progress, complete, or failed). Once all steps finish, click Done to dismiss.
Smart change detection
The plugin only processes what actually changed. If you only updated the font, the theme and radius steps are skipped entirely. Re-applying small incremental tweaks is fast.
Icon propagation delay
If you changed your icon library, updates can take up to 2 minutes to fully propagate across all pages. This is a Figma rendering constraint on large files, not a plugin issue.
Quick Actions
Two utility buttons sit on the left side of the footer:
Shuffle
Randomly picks a base color, theme, font, icon library, and radius. Great for quickly exploring combinations and finding unexpected ideas. Remember: Shuffle doesn't apply your changes. You still need to click Apply.
Reset
Returns all selections to factory defaults:
- Base Color: Neutral
- Theme: Neutral
- Font: Inter
- Icon Library: Lucide
- Radius: Default
Recommended Icon Workflow
For the best Figma performance, choose one icon library and remove the others. Five libraries loaded simultaneously increases file size, slows component search, and adds unnecessary complexity.
Here's what we recommend:
- Pick your library: Choose from Lucide, Tabler, HugeIcons, Phosphor, or Remix Icon
- Switch via the plugin: Select it from the Icon Library dropdown and click Apply
- Delete unused library pages: In the Pages panel, delete the four icon pages you won't need
- Keep
Icons Switchable: This page must always stay. Every block usesswitchable/*components from it - Clean up variables: In the Variables panel, delete the boolean variables for removed libraries
Refer to the Switchable Icons doc for the full step-by-step on this process.
Variables Reference
The plugin creates and manages two variable collections in your file.
Themes Collection
All color, font, and radius variables live here. Colors use -light and -dark suffixes for mode support.
Color variables (19 tokens × 2 modes = 38 variables):
| Variable | Description |
|---|---|
colors/background-light / colors/background-dark | Page/canvas background |
colors/foreground-light / colors/foreground-dark | Primary text |
colors/card-light / colors/card-dark | Card surface |
colors/card-foreground-light / colors/card-foreground-dark | Card text |
colors/popover-light / colors/popover-dark | Popover surface |
colors/popover-foreground-light / colors/popover-foreground-dark | Popover text |
colors/primary-light / colors/primary-dark | Primary accent |
colors/primary-foreground-light / colors/primary-foreground-dark | Text on primary |
colors/secondary-light / colors/secondary-dark | Secondary surface |
colors/secondary-foreground-light / colors/secondary-foreground-dark | Text on secondary |
colors/muted-light / colors/muted-dark | Muted surface |
colors/muted-foreground-light / colors/muted-foreground-dark | Muted text |
colors/accent-light / colors/accent-dark | Accent surface |
colors/accent-foreground-light / colors/accent-foreground-dark | Text on accent |
colors/destructive-light / colors/destructive-dark | Destructive/error actions |
colors/destructive-foreground-light / colors/destructive-foreground-dark | Text on destructive |
colors/border-light / colors/border-dark | Default border |
colors/input-light / colors/input-dark | Input border |
colors/ring-light / colors/ring-dark | Focus ring |
All colors are converted from shadcn's native OKLCH format to Figma-compatible RGB using perceptually accurate conversion.
Font variable:
| Variable | Type | Description |
|---|---|---|
font-family/font-sans | STRING | Font family name, e.g. "Inter", "Figtree" |
Radius variables:
| Variable | Type |
|---|---|
radius/xs | FLOAT |
radius/sm | FLOAT |
radius/md | FLOAT |
radius/radius | FLOAT |
radius/xl | FLOAT |
radius/2xl | FLOAT |
radius/3xl | FLOAT |
radius/4xl | FLOAT |
Icon Library Collection
| Variable | Type | When true |
|---|---|---|
lib-lucide | BOOLEAN | Lucide is active |
lib-tabler | BOOLEAN | Tabler is active |
lib-hugeicons | BOOLEAN | HugeIcons is active |
lib-phosphor | BOOLEAN | Phosphor is active |
lib-remix | BOOLEAN | Remix Icon is active |
The plugin enforces that exactly one of these is true at a time.
Binding Variables to Your Designs
The ShadcnStore design system components are pre-bound to these variables and update automatically when you apply changes. For custom components and frames you've created yourself:
- Select a layer
- Click the fill, stroke, or text color chip in the Design panel
- Click the variable icon (⬡) and choose from the
Themescollection - For border radius: select a frame → corner radius field → click the variable icon → choose from
radius/
Common Workflows
First-Time Setup
- Open your ShadcnStore Figma Design System from your Purchases dashboard
- Follow the Recommended Icon Workflow to simplify your file
- Open the plugin and configure your Base Color, Theme, Font, Icon Library, and Radius
- Click Apply
- Your design system is ready. All pre-built components update automatically
Trying Different Themes
- Reopen the plugin. Your current settings load automatically
- Change just the Theme dropdown to try a new accent color
- Click Apply. Only the theme step runs, so it's nearly instant
- All layers bound to
primary,primary-foreground, andringupdate everywhere
Exploring Combinations Fast
- Click Shuffle to randomize everything
- Review the combination shown in the dropdowns
- Like it? Click Apply. Otherwise, shuffle again or tweak individual options
- Click Reset to return to defaults at any time
Troubleshooting
Variables not appearing after Apply
- Check permissions: You must be an Editor on the file, not a Viewer
- Check the collection name: The plugin looks for a collection named
Themes. If you renamed it, the plugin creates a new one instead of updating yours - Refresh the Variables panel: Close and reopen it to see the latest state
Colors look slightly different from shadcn/ui website
OKLCH to RGB conversion is mathematically accurate, but Figma's color rendering can have subtle differences from how browsers render OKLCH natively. This is expected and generally imperceptible in designs.
Font isn't changing on text layers
Remember: the plugin updates the font-family/font-sans variable, not individual text layers directly. If a text layer isn't updating, it either isn't bound to the variable, or the font isn't installed. Bind the layer to the variable in the Design panel, and make sure the font is installed on your system or added to your Figma team fonts.
Icon library switch doesn't seem to work
- Make sure you're using switchable icon components (
switchable/*) from the Icons Switchable page, not raw icon instances from individual library pages - Check that the
Icon Libraryboolean variables exist in the Variables panel - On large files, visibility changes can take up to 2 minutes to propagate across all pages
Icons disappear after switching library
The target library has no instance in that switchable icon component. This usually happens if you deleted a library page before switching, or the icon wasn't pre-mapped for that library.
If you're using a single library, follow the Recommended Icon Workflow to simplify things and avoid this entirely.
Progress panel shows a failed step
The error message next to the failed step explains what went wrong. Common causes:
| Step | Common cause |
|---|---|
| Collections | Conflicting collection name or restricted permissions |
| Fonts | Selected font isn't installed. Install it and try again |
| Icons | Icon Library variable collection is missing or corrupted |
Plugin window is blank or not loading
Close the plugin, refresh the Figma page (browser) or restart Figma (desktop app), then run the plugin again.
FAQ
Does this plugin work with any Figma file?
No. It's designed exclusively for the ShadcnStore Figma Design System. It won't work with other Figma files.
Does it require an internet connection?
No. The plugin runs entirely offline with no network access.
Does it work in the browser and the desktop app?
Yes, both are supported.
Will it modify my existing components or frames?
No. It only creates or updates Figma Variables. Your designs are untouched unless they're already bound to those variables.
Can I use it with a file that already has a `Themes` collection?
Yes. The plugin updates variables in your existing collection without deleting anything it doesn't manage.
Why are there 8 radius variables instead of just one?
shadcn/ui uses a proportional radius scale so different elements can have appropriately sized corners. An input might use radius/sm while a dialog uses radius/xl.
What happens if I click Apply without changing anything?
The plugin detects no changes and only runs the "Finding collections" and "Configuration saved" steps. It's nearly instant.
Should I use all 5 icon libraries at once?
No. For best performance, choose one and delete the others. See the Recommended Icon Workflow.