Need help organising variable structure in my design system

Ask the community
1

How should I structure variables using the concept of Foundations and Tokens in my shared library/design system, so that the token variables are visible to use? For example, I have a foundation variable colour that I only want to reference from a token variable, not expose to use. E.g.

Foundations
Colours > Greys > Colour 1 = #999999

Tokens
Reference to the above colour

I only want to expose Tokens to choose from, not Foundations. Is this even possible right now?

Thanks in advance

2

Yes it is. Place a period . or underscore _ at the beginning of your collection name. Showcased here Figma like the pros - Christine V, Eugene F, Femke van S, Helena Z, Joey B, Molly H, Rusmir A - YouTube

3

Thank you so much @James_Sann. I completely missed this! I’ll go watch the video.

4

I think I got a bit excited too soon. I was meaning more about hiding variables for use in the same file. I think I’ve taken the wrong approach and combined my variables and components in the same file. Placing a period . or underscore _ at the beginning of your collection name only hides it from publishing, not within the same file.

Should I be creating a separate Figma file for foundation variables/tokens which the component library uses as a shared library?

This Figma video seems to show that there is a standalone styles file that the components file uses: Backing color styles with variables - YouTube