Considerations before starting
Figma Considerations
There are some limitations to creating design tokens in Figma that should be considered at the start.
1. Only some design characteristics can be managed through Figma libraries
Partially supported characteristics in Figma managed through styles stored in libraries:
Color
Typography
Shadows
Grid
Characcteristics that cannot be be stored through Figma libraries. All we can do is document them in Figma for development:
Spacing
Radius
Opacity
Border Width
Size
Interactions
To learn more how to document these characteriscits, skip to the documentation section of this playbook.
2. Color styles in Figma cannot relate to other color styles
3. Text styles in Figma cannot be defined in an atomic way.
Development Considerations
1. White-label design systems are compatible with any development ecosystem:
React, Vue, Angular, Vanilla, mobile applications, etc.
2. Token logic is flexible and can be used with different stacks, practices, and file formats like CSS, SCSS, JS, JSON.
Tokens can also be integrated into design system development tools like StoryBook.
Last updated
