Hi everyone,
We’re currently on the Figma Professional plan and we are in the process of building a central design system library that we want to reuse across all the website projects we work on.
In this library, we’ve created:
• Naming conventions for typography (font families, sizes, line heights, semantic text tokens)
• Color tokens and color styles
• Variable collections for colors, typography, spacing, etc.
• Starter layout components like headers, footers, accordions, “media + text” sections, and other common section patterns
Our goal is to publish this library and then use it as the foundation for every new website project we create.
However, we need the following workflow to be possible:
-
We want to import / enable the library in a new project and have access to all typography tokens, color variables, and components.
-
We want the core components (headers, sections, etc.) to remain usable and connected to the library, not detached.
-
For each new project, we need to be able to adjust the brand colors and typography (per project) without affecting the main library and without breaking the component connections.
-
Ideally, we want to do this by creating local variables that alias the library variables, so I can override the values locally (new brand palette, new font scale), while keeping everything linked.
In short:
We want a reusable design system library that provides structure, components, and semantic tokens, but still allows project-specific customization of typography and colors through local aliases or overrides, without detaching components or modifying the main library.
Is this the correct approach?
Is there a recommended best practice for setting up a multi-brand, multi-project workflow with shared components but customizable variables per project?
Any guidance, examples, or confirmations from the community would be extremely appreciated!
Thanks in advance! 👋