Regular theming

Editing variables

You can quickly update the visual theme of components by editing variables in the Theme collection.

Make sure you have the main Shadcraft library file open — this is the file where all components live and variables are managed.

Change the primary colour

To update your primary colour (e.g. from Neutral to a custom blue #297EFF):

1. Open the Variables panel

2. Switch to the Theme collection

3. Locate the colors/light/primary variable in the colours group

4. Enter #297EFF directly in the value field

5. Repeat the process for colors/dark/primary

6. Figma will apply the new colour across all primary component references

Update neutral colours

You can replace default neutral (grey) colours used in background, border, input, and muted elements with your own colours.

1. In the Theme collection, locate the relevant neutral variables

2. Swap out the current values for your own

3. Changes will cascade across any components that rely on these variables

Using opacity variables

Tailwind lets you apply opacity to colours using syntax like bg-blue-600/90. You can replicate this in Figma using alpha variables.

To apply 90% opacity to a primary colour on hover:

1. Add your primary colour as a Fill in Figma

2. Add a second Fill layer above it

3. In the colour picker, switch to Library

4. Search for and apply the alpha/90 variable

In code, this would be used as: bg-primary/90

This approach keeps design and development aligned while avoiding the need to create new colours for each opacity level.

Changing the font family

To update your typeface across the system:

1. Open the Variables panel

2. Go to the Theme collection

3. Find the font-sans variable in the font family group

4. Replace the current value (e.g. Inter) with your preferred font (e.g. Roboto)

Make sure the font name matches exactly with your installed fonts or web font settings.

Adjusting border radius

Border radius plays a big role in the overall feel of your interface. Whether you’re after subtle rounding or bold curves, it’s easy to update system-wide:

1. Open the Variables panel

2. Navigate to the Theme collection

3. Find the radius group

4. Edit values like rounded-sm, rounded-md, rounded-lg, and radius-xl to suit your design

Tip: Adjusting other variables like rounded-xs or rounded-2xl will also cascade to related values in the Tailwind CSS collection, keeping things consistent across your UI.

Creating new variables and styles

Creating new variables

Custom variables are supported — just be sure they’re needed. The existing Shadcraft variable sets cover most use cases, and unnecessary additions can bloat your system.

To create a new colour variable that follows the established structure:

1. In the Theme collection, add:

   • your-variable-light (e.g. warning-light)

   • your-variable-dark (e.g. warning-dark)

   • Edit the variables to hide them from publishing

   • You most likely want to de-scope the variable from all supported properties

2. In the Mode collection, add:

   • your-variable referencing the light/dark versions

   • Adjust the scope to control where the variable applies

3. Use your new variable in components as needed

Example – Warning colour:

• warning-light: #F59E0B

• warning-dark: #F59E0B

• warning-foreground-light: #451A03

• warning-foreground-dark: #451A03

• Add warning and warning-foreground to the Mode collection

• Apply to UI components where caution or warning states are needed

• Use the Figma to shadcn/ui plugin to add matching variables to your codebase

Creating new themes

The Shadcraft variable system supports fast theme switching, ideal for brand variants or accessibility-focused themes.

To create a new theme:

1. Open the Variables panel

2. Navigate to the Theme collection

3. Click the ”+” icon in the top right to create a new mode

4. Rename the new mode (e.g. Brand B, High Contrast)

5. Adjust values to match your brand or visual preferences

You can now toggle between complete themes while keeping all components intact.

To use multiple modes, your file must be part of a Figma Professional or Enterprise team or org.

Working with styles

Figma Styles (typography and effects) mirror Tailwind’s utility classes and are powered by variables from the Theme collection.

Adding a new text style (example: Heading)

1. Use the Text tool to create some text

2. From the design panel, apply these variables:

   1. Font family: font-sans

   2. Size: text-4xl

   3. Weight: weight/font-extrabold

   4. Line height: line-height/leading-10

3. Click the Apply styles icon

4. Click the + icon

5. Give the style a meaningful name like text-4xl

6. Click Create style

7. Move the style into the relevant style group

Developers can now apply the style in code using Tailwind classes like:

<h1 class="text-4xl font-extrabold leading-tight">Heading</h1>

This keeps visual language consistent from design to dev.

Dark mode support

One of the most powerful features of variables in Shadcraft is the built-in support for light and dark modes — with no need to duplicate layouts or rebuild anything.

How it works

The Theme collection includes predefined values for both light and dark colour modes. Switching between them updates your entire file instantly.

How to switch modes:

1. Select a page or frame

2. In the Layer panel, look for the “Apply variable mode” icon

3. Click to open the dropdown menu

4. Select either Mode → Light or Mode → Dark

Your selection will now adapt to the chosen theme.

Multi-brand systems

To support multiple brands, create additional modes in the Theme collection.

1. Open the Local Variables panel

2. Select the Theme collection

3. Click “+” in the top bar of the variable table

4. Rename the new mode (e.g. Brand A)

5. Update variable values to reflect the brand’s colour, spacing, and font styles

How to apply a brand theme:

1. Select a page or frame

2. In the Layer panel, look for the “Apply variable mode” icon

3. Select Theme → Brand A to apply the new style