Let’s discuss ‘best-practices’ and some anecdotal examples/experience in managing Design System libraries. Specifically the relationship between component and variables.
Questions:
For your main/core component library, do you also publishes the main/core variables in the same library?
OR
Do you have a dedicated Library for the components, and a separate, dedicate library for your variables?
List suspected/experienced pros/cons.
It depends on your architecture. For example, if you have several libraries (web and app components), you need to maintain a variables library for both the web library components and the app library components. This means you should have a separate variables library.
yes, from what i gathered, in most matured, and scalable design systems, it’s best practice to separate foundations (variables and styles) and components into two dedicated Figma libraries.
The foundation library contains core design tokens: such as color, typography, spacing, and other variables.
While the component library consumes those variables to build UI components.
This separation creates a clean dependency structure, allows safer and more independent updates, improves theming and multi-brand support, and enables clearer governance and permissions. Also makes easier paths for version control, and deprecation of the parts and pieces of each library.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.