Working in Figma

File and Structure Organization

Structure the Figma to have one Master Components file as a separate project. Each Brand will have its own project folder with the Market variations as separate foundations files.

As you begin to design screens, use the master components that are connected to the foundations of the desired brand.

As we can swap foundation libraries, each brand can have their own pages built with the common components overwritten with their specific foundations library:

Foundations

We create brand dedicated libraries with all supported tokens stored as styles.

It is crucial to apply the same style names to all foundations libraries in order to be able to swap between them.

We can also include interchangeable components for other customizable assets such us logotypes, illustrations or icons.

Master Components

We create a common library to manage the components for all brands from one place.

We apply the styles (tokens) to all our components.

It’s crucial to craft all master components with auto-layout in order to change styles without issues.