Using Variables

To effectively utilize variables in the VOIT Design System, follow these steps:

1. Accessing Variables

• Open the Foundation file where the variables are defined.
Navigate to the Styles section to find predefined variables for colors, type, spacing, etc.

2. Applying Color Variables

• Select an element in your design.

• In the right-hand properties panel, click on the color swatch.

• Choose Styles and select the appropriate color variable from the VOIT color styles.

3. Applying Text Variables

• Select a text layer in your design.

• In the right-hand properties panel, click on the text style dropdown.

• Choose Styles and select the appropriate text style from the VOIT typography styles.

4. Using Spacing Variables

• Consistently apply spacing values from the Foundation file to maintain uniform padding and margins.

• Use the spacing tokens provided to set values for padding, margins, and gaps between elements.

5. Maintaining Consistency

• Always use the predefined variables for colors, typography, and spacing to ensure consistency across your designs.

• Avoid hardcoding values; rely on the design tokens provided in the VOIT Design System for a scalable and maintainable design process.

By following these steps, you can ensure that your designs remain consistent with the VOIT Design System, making it easier to maintain and update your work. (Check Tutorial)