Figma variables
Last updated
Last updated
Our Figma kit is set up to control all tokens through Figma Variables. This starter kit includes all tokens directly configured in Figma Variables, allowing you to manage any token—such as colors, typography, sizes, spacing, and borders—in a centralized manner. Even the components are created and configured consistently to automatically adjust to changes made to the tokens you wish to modify.
In the variables panel, you'll find the three token levels configured as collections, and for each level (collection), you'll find the categories with their respective values.
For better consistency, only control the tokens from the System layer. This kit is configured so you won’t need to do much work: simply change the tokens from the System layer, and you'll see the entire UI and components customized. Remember to follow the token layer hierarchy: Component is fed by System, and System is fed by Global. In the Global layer, you’ll find many options to personalize your UI without losing consistency.
Our Figma kit is made and configured with precise tokens to ensure consistency and scalability. However, you are free to change and/or edit any token or variable you find necessary. If you want to edit variables, we recommend the following:
Change only the tokens from the System layer. As mentioned above, you can modify the appearance of your interface simply by changing the tokens in this layer.
If you’re adding more tokens, follow the pyramid rule:
Global Tokens: Options
System Tokens: Alias
Component Tokens: Components
To add new component tokens and maintain clear organization, separate each group with a /. For example: button/background-color/primary/default. Remember to use this naming rule for components.
Figma has made incredible efforts to provide us with tools to manage tokens within its platform. However, there is still no fully correct or standardized way to do this.
Quantum is a design system methodology that works both inside and outside of Figma. We use Figma to make it visible, but there are certain limitations in its functionality. Therefore, it’s important that every new token you add has the scope configured correctly to avoid interference within the Figma interface.
In the settings icon of each token within the variables panel, you can specify where you want the token to be applied. This kit is primarily configured to work with the tokens from the System layer, but you can adjust it according to your needs.
