Variables library in the design system file

I’m starting a new project a work and it’s the perfect timing to try and deeply understand variables. I’m preparing the files for the team to get started and I have a doubt:

I have two different files in the project, one for the design system and one for the ui design. I’m not sure if it makes more sense to build the variables library in the design system file o in the ui design one. I know the variables can be shared in the different files and projects, but I am not sure if it is then is possible to use the full potential of variables, for example in prototypes or if it can become confusing.

Do you have any advice on how to organise the files and combine the two things?

1 Like

Hi Allegra,
in terms of where to build your variables library, it’s best to do this in your design system file. This centralizes your variables, making them easier to manage and update.

Now, onto your main concerns: using variables in prototypes and potential confusion. Variables defined in your design system can be fully utilized in your UI design file, including in prototypes. Any changes made to variables in the design system file will reflect in your UI design file, keeping everything synchronized.

To avoid confusion, use clear naming conventions for your variables and document their intended use. Regular team syncs can also help ensure everyone is on the same page. If confusion arises, consider simplifying your system or improving communication around it.

In summary, build your variables in the design system file, use them in your UI design file, and maintain clear communication to make the most of variables and avoid confusion.

I hope this helps! If you have any other questions, feel free to ask.