|
|
|
|
|
|
|
|
|
|
Scott
Ever spent hours updating the same color or spacing across dozens of design elements? Pixso 2.0’s design tokens end that hassle. These smart, reusable design tokens let you set colors, numbers, text, and more once—then sync them everywhere.
What Are Design Tokens?
Design Tokens are powerful tools to streamline workflows, boost design efficiency, ensure consistency, enhance collaboration, and build adaptable, interactive designs—all while improving scalability and overall design quality.
Key Advantages of Design Tokens
Reusable: Assign properties like colors, numbers, text, and booleans to elements.
Flexible switching: Seamlessly toggle between different themes.
Dynamic updates: Automatically sync changes across all instances where tokens are applied, saving time and effort when updating design systems.
Use Cases of Design Tokens
- Switch between light/dark modes or other themes
- Adjust layouts
- Toggle languages
- Apply to typography
Supported Design Tokens Types
Pixso offers 4 design token types to cover diverse design needs: colors, numbers, text, and Boolean values.
Color tokens can be applied to an object's fill or stroke.
Numeric tokens can be used to define dimensions such as layer width and height, spacing, and corner radius.
Text tokens can be applied to text layers, making them more efficient for repeating content and localization.
Boolean tokens can be used to toggle layer visibility.
How to Apply Tokens?
Design tokens are accessible in different sections of the design panel based on their type. Here’s how to use them:
1. Applying Design tokens to Objects
Select a layer on the canvas, then use the right sidebar. For color tokens: Click the Style icon.
For number, text, or boolean tokens: Click the token icon (hexagon) or open the dropdown menu in text/number input fields
2. Design Tokens in Components
Shape components using token Sets like "Colors" and "Spacing". Select an element, then pick color tokens from the "Colors" collection.
Apply number tokens from the "Spacing" set to auto-layout padding and spacing values in cards.
3. Using Design Tokens in Text
Bind text tokens to text layers for centralized content management (e.g., updating repeated text across designs).Use text tokens for typography settings like font family or weight.
Select text, apply text tokens via the panel—changes will sync across all bound instances.
4. Typography Tokens
Text tokens (e.g., font family) and number tokens (e.g., font weight, size) can be combined to standardize typography systems.
5. Tokens in Grids
Select a frame, then use tokens to adjust layout grid parameters dynamically.
6. Design Tokens in Effects
Bind tokens to effect properties. For example, link shadow values to tokens. Drag a card with shadow-bound tokens into another container, and the shadow may disappear (if tokens are set to only apply in light mode).
7. Design Tokens in Gradients
You can also bind color tokens to individual gradient nodes:
1) Select the layer, open the "Fill" setting panel, and select the gradient's starting point.
2) Switch to the "Tokens" tab, search for "Gradient," and select "gradient starting point" to apply it.
With Pixso 2.0’s design tokens, maintaining design consistency and adapting to changes has never been easier—streamline your workflow and build more robust design systems today.
