Multi brand v2 preview

We're working on a new evolution of the kit: multi brand v2. Here's a short preview of where it's going.

The complaint#

It started with a fair complaint from a customer. If you customize Vega today, you can change the theme mode and the shadcn colors mode, and the CSS Export plugin picks those up. But there is no way to change the border radius or the spacing anymore.

Why we removed it#

The first version of the CSS Export let you change those values. We took that out in v2, because it caused a lot of problems.

Say you change radius-sm from 6 to 8, or md in the spacing scale from 16 to 12. That seems logical, but those names have a specific meaning in Tailwind. Change the value and you change what “medium” means everywhere it’s used.

If a component should be smaller, it’s better to change the component: use sm where it used md. The component looks different, and the variable still means what it says.

Doing that by hand for every component is a crazy chore. Tools like Figma MCP or Figma Console MCP help a lot, but you still end up with a single brand. What if you need several?

That’s why we’re introducing multi brand v2: a fork of the Vega file with a components layer. It’s in beta, for Organization and Enterprise customers.

A components layer#

We avoided a components layer until now, because it makes the kit too complicated for 90% of customers. Some recent quotes about our kit:

I’ve evaluated many Shadcn Figma libraries out there, but i found the Obra shadcn to be the most production grade and the most close to being a turn key solution with minimal configuration.

We integrated the Obra shadcn/ui kit directly into our design system, and it saved us countless hours of setup. Everything is super clean, and easy to customize for our product

These customer quotes prove our choice to keep things simple is right. With a mode, 4 to 5 customizable parts per component and 60-ish components, you end up with about 270 extra variables to customize.

But if you want multi brand to work correctly within the same file, you really do need it. So the fork has a components collection, and you choose which parts of your brand to customize. The CSS Export plugin picks up same-name modes like it always has.

In the video above there are two modes: shadcn and a test brand called razmataz. Inside a brand, each component has its own variables. Button radius points at radius-md; change it to radius-2xl and every button follows. In razmataz the button radius is 0 and the default button padding is md, so the same components look like a different product.

The variables follow shadcn’s own code: wherever shadcn’s styles (Vega, Nova, Luma…) differ for a component, there is a variable you can set per brand.

Built up, not stripped down#

We want the kit to stay lean. Some other kits ship all 8 shadcn styles as modes in one file, which adds up to 4,000+ variables. We tried them: publishing one of those libraries took 1 hour and 20 minutes, and one didn’t publish at all until we deleted those modes. Our kit publishes in 7 minutes.

That’s why multi brand is an option and not the default. For 80-90% of our customers the regular kit is the right choice. If you need multi brand, you start from the multi brand fork of Vega and add the brands you need, instead of removing styles you never asked for.

Try it#

Multi brand v2 is part of the Organization and Enterprise licenses, and you don’t have to ask us for the beta:

1. Sign in to the customer center with your Organization or Enterprise license key. You’ll find the link in your original purchase email.
2. Under Figma files, pick “Vega, multi brand v2 (beta)” (version 2.6.0).
3. Download it and open the .fig file in Figma.

The eight regular styles are unchanged. The Multi brand v2 tutorial explains how the file is built up and how to add your own brand.

The brand export is part of version 3 of the CSS Export plugin. Version 3 is already published on the Figma Community, so you have it as soon as the plugin updates. Its new functionality stays hidden until your file has the right variable: a boolean called css-export-v3, set to true, in a collection called feature-flags. The beta file already has it. Without it, the plugin works as before.

Already customized one of our kit files? We also offer a plugin that migrates your existing file to the multi brand setup, so you don’t have to start over: Obra Multi Brand v2 Migration on the Figma Community. It adds the components layer to your file and binds your components to it, and your file looks the same afterwards.

Don’t have Organization or Enterprise? Click here to purchase the upgrade.

Questions or feedback? Let us know.