# 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.

<figure><img src="https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN8XHqatGwdZo585nW3%2Fuploads%2FvdIv908Cf3vjTuyDO5FQ%2FFigma1.png?alt=media&#x26;token=a23f5fab-ae67-4381-8eda-89f084632ef9" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN8XHqatGwdZo585nW3%2Fuploads%2F5BhYLfqheyfK6UQ7WNS8%2FFigma2.png?alt=media&#x26;token=179e05d3-a855-476d-8333-d2e5474d02ef" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN8XHqatGwdZo585nW3%2Fuploads%2FEKcsmeuYVu1AupmUOAfU%2FFigma3.png?alt=media&#x26;token=e50c419c-703d-4104-a0c6-52c65e8e327f" alt=""><figcaption></figcaption></figure>

## Foundations

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

<figure><img src="https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN8XHqatGwdZo585nW3%2Fuploads%2FTkRxE4CX5EfXfbkeHpH7%2FFigma4.png?alt=media&#x26;token=eafe1a53-1615-4a5f-865e-c9b3c5b815f8" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN8XHqatGwdZo585nW3%2Fuploads%2FqT7qqrUsitkxzLabP9ty%2FFigma5.png?alt=media&#x26;token=0f103652-1fb8-4a18-b93a-7867b4743633" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN8XHqatGwdZo585nW3%2Fuploads%2FLSfHaR2rDluPne5k4Ruw%2FFigma6.png?alt=media&#x26;token=be0f9961-8207-434b-a2ea-6ba5ba0d1d62" alt=""><figcaption></figcaption></figure>

## Master Components

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

<figure><img src="https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN8XHqatGwdZo585nW3%2Fuploads%2FczsYD8dBRqyBnLJF3HyQ%2FFigma7.png?alt=media&#x26;token=a681f91e-e12a-4b7b-a72d-fc8f853d0234" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN8XHqatGwdZo585nW3%2Fuploads%2FxiA0R966sLc7JvAYJahl%2FFigma8.png?alt=media&#x26;token=58a3972c-0bf5-49bb-ab3f-a98fdb352d48" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN8XHqatGwdZo585nW3%2Fuploads%2FAtbjUH0FUEG57yEo5bwU%2FFigma9.png?alt=media&#x26;token=dda9db70-72a5-40c4-8c24-4ecf90225264" alt=""><figcaption></figcaption></figure>
