Token System Design in Figma

Design tokens are small pieces of data that define the design elements of a user interface, such as colors, typography, and spacing. By using Figma Tokens in Ant Design System for Figma, designers can use design tokens that can be easily shared and updated across their projects.

Here are some advantages of using a token system in Figma for both designers and developers:

Primitives is the highest level of token hierarchy. This is the "What" of the future design system, and contains properties and values that exist within the entire design.
Primitives include all colors, all spacing variables, all fonts and their parameters, all round corner settings etc.

Semantic is "How" and "Where" the tokens should be used.
Semantic names convey meaning, purpose, and how and where the asset should be used.

Component tokens are specific to individual components and generally refer to semantic tokens. Depending on the narure of the project and the team set up I might create this layer that defines tokens to be used for specific components explicitly.

Now that all properties and variables were defined as tokens it is time to start building UI elements.
Check my approach of creating design system below:

Or you can download this token system on Figma on the "Resources" page.