First, let's create a version of the app where we define the style guide, the design system (including all components and their states), and all screens. That is either a non-branded version or for a brand that will have the app first. Let's use this simple app for a pastry shop as an example. We created a comprehensive Figma file that consists of everything we need. That's why we are turning that file into a library.

We can define some colors that stay the same across brands, usually white and some grays. Maybe some signal colors as well (error, warning, success).

For example, we imagined two different brands, a restaurant and a fruit store.

For each brand we defined 6 color styles:

• primary
• secondary
• item color 1
• item color 2
• item color 3
• background-color-style

We can create some key screens from the original flavor file as components and add their instances (child components) to other UI flavors. That way, all design changes on the master components are inherited to other flavor files. Nothing is detached from the library. After that, we can select all screens and change colors from one brand to another.

The other way is to copy all screens on each Figma page and paste them to a new brand's file, with the same color switching (manually or with a plugin).

The drawback of this method is that there is no connection between the child screens, so keeping all flavors updated requires some work. It's a good practice to leave a note when all instances of a screen for other brands are up to date. Usually, when I'm doing some design changes on a screen, I note that all changes are applied to other brands, and I put it back after I make sure all screens are up to date.

To switch other assets (logos, photos, illustrations, or icons) to the new brand, we need to do it one by one, since there is no way in Figma to do that automatically.

However, if everything is set up well, including organizing everything using Variants, that should be pretty easy. We just go screen by screen and change a variant to the one that fits the flavor.

Currently, Figma does not support swapping text styles on multiple screens at once. However, the Themer plugin can do it for us. One thing to keep in mind is that one structure and layout might not work for a wide range of fonts, so we have to choose fonts keeping their proportions in mind. That's why I advise using the same typography for all flavors. If that is too limiting, one text style can be used for all body text in the app, while subtitles can be custom-made for each flavor. This way, there is less stuff to go wrong when we create new flavors.

For icons, it's best to use the same icon set for all flavors. That way, we don't need to pay attention to have distinct icons for each flavor. For illustrations and some other assets, it's a good practice to organize them in Figma Variants, with brand being one property. That way, we can quickly swap different versions of the same asset.

I found it useful to create instances of all graphic components in a naming structure that corresponds to file structure in the project folder for development. When we export these assets, they are already organized in folders as they are in the development project folder. This makes it very easy to import all assets in a project.