# 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

<figure><img src="https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN8XHqatGwdZo585nW3%2Fuploads%2FXScYCMGRfQe3CtBr1Lbf%2FConsiderations1.png?alt=media&#x26;token=5ff1a6d6-7434-4560-8aa9-171a49a2e0a6" alt=""><figcaption></figcaption></figure>

#### 3. Text styles in Figma cannot be defined in an atomic way.

<figure><img src="https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN8XHqatGwdZo585nW3%2Fuploads%2F8HuMjJCM5gJspzcJ6Chg%2FConsiderations2.png?alt=media&#x26;token=a6435681-8559-40c3-9159-b71addd43839" alt=""><figcaption></figcaption></figure>

## Development Considerations

#### 1. White-label design systems are compatible with any development ecosystem:

 React, Vue, Angular, Vanilla, mobile applications, etc.

<figure><img src="https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN8XHqatGwdZo585nW3%2Fuploads%2F0asm6fSZGuso32Y3R9kV%2FConsiderations3.png?alt=media&#x26;token=1675ea6a-0bc9-4f72-82ae-77f9cc52c6d2" alt=""><figcaption></figcaption></figure>

#### 2. Token logic is flexible and can be used with different stacks, practices, and file formats like CSS, SCSS, JS, JSON.&#x20;

Tokens can also be integrated into design system development tools like StoryBook.

<figure><img src="https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN8XHqatGwdZo585nW3%2Fuploads%2FkqJ3KziHIqGK7BQDsKec%2FConsiderations4.png?alt=media&#x26;token=e68f6518-4cc5-43e7-a934-06ececb276a1" alt=""><figcaption></figcaption></figure>