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.