How to use team colours in Figma - CMPUT301F22T20/Team20 GitHub Wiki

In order to make our mockups and product as uniform as possible, a team library has been made in Figma (which will be recreated in our Android project's theme) that includes fonts, colours and variants.

While fonts and colours are pretty familiar to everyone, how to use the library fonts and colours is not always clear, and the notion of a variant in Figma may be new.

How to use the library fonts and colours

When in a design file, and selecting any object instance, you will see fill colours for shapes, colours for fonts, and selection colours when selecting multiple elements.

The concept is the same for both:

1. Select the four little dots in the colours section
2. Choose a colour that fits what you are looking for!

What are library variants and how to use them

Components are pre-made objects that can have multiple properties called variants, this can be like multiple button states or dialog options. These are great because they mean we do the work once, and then we can copy the variants into our other designs whenever needed.

To use the variants in the library, one way is to just copy and paste them; otherwise, use the assets page and select a component from there:

You can change the properties of the component and select a variant in the design tab for the component!

What happens if I change the variant in the Library file?

It is possible and it will happen that we want to change a component globally, in this case, we will go into the library file and change the component and re-publish it. Then, in all designs that use this, we will have a pop-up asking if we would like to refresh the components!