This task is about how to work with multiple brands and sub brands.

New challenge

Imagine the business owners want expand and want to sell cupcakes. They are looking for your help to rebrand and adapt the existing online store to the new product.

For images use any open source image stock such as unsplash

What to do?

• Change components and styles in Figma
• Transalte the changes to code
• Update the product

Using the plugin Themer (Figma teams plan only)

1. First setup

• Open themer panel.
• Add themer API from jsonbin account.
• Share access with teammates.

2. First theme

• Publish styles
• Open themer panel and create a theme for the existing brand.
• Publish styles
• Create a new theme on themer panel for the new brand.

3. Second theme

• Duplicate the figma file for to work on the new brand.
• Adapt the colors to the new brand.
• Publish styles
• Create a new theme on themer panel for the new brand.
• Select "Color styles, text styles and Effect styles"

4. Re export design tokens

• Export the design tokens by export the json file