November 28, 2023
November 28, 2023
After creating a colour palette I was happy with, it was time to start defining colour variables using the not-so-recently released Variables feature in Figma. I needed to figure out a hierarchy to organise all of them. I jumped right in and figured out as I went along.
Oh and yes, I had to upgrade my Figma account to be able to play around with Variables without limitations.
To summarise, this is the hight-level structure I have so far – multiple collections for different purposes, and nested groups for better organisations. Variables in each collection can reference values defined in another collection.
This collection contains the base name: value pair for all possible colours. Eg. blue-50, blue-100 … blue-900. The variables from this collection are not intended to be used in the designs directly. Hence, I hid this collection from publishing to prevent showing this in other files. Underscore prefix in the collection name. Eg. “_primitive colours” did the job for me.
This collection is intended to provide a layer of meaning to the variables in the Primitive collection. Semantic collection is divided into 4 groups based on usage. All relevant colour variables fall into one of these groups...
For reference, Uber’s Base Design System uses 3 groups instead of 4 namely content (text, icons, illustrations), background (all surfaces) and borders (all lines).
Each group further contains nested groups to organise variables…
This is a work-in-progress. The idea is to repurpose variables from Semantic collection to be more meaningful by defining the components they should be used with. Eg. buttonMain, buttonHover, buttonDisabled etc.
For my website, there aren’t that many components needed. So this collection becomes less practical, and more of a good practice kind of thing.
