Variables

Introduction

In SnowUI, we use variables to control color, spacing, icon size, and corner radius. These are key parts of the design system.

In addition, we also have variables such as Icon weight, Show text, Text, etc.

Rules of use

Please see below.

How to use

Variables can be added, modified and deleted. Modifying them will affect all components and pages, please proceed with caution.

Spacing

The Spacing variable is used to set the value of Spacing, which is a key part of the design system.

Applies to: Gap, Padding, Margin.

Rules of use

Icon size

The Icon size variable is used to control the icon size, which is a key part of the design system.

Applies to: the size of Icons, Avatars, Logos, Emoji, etc.

Rules of use

Corner radius

The Corner radius variable is used to set the value of the corner radius, which is a key part of the design system.

Applies to: All corner radii.

Rules of use

Themes

The Themes variable is used to switch between light and dark modes, and the colors in this variable are a key part of the design system.

Applies to: all colors.

Rules of use

Text

This variable is used to switch languages.

Show text

This variable is used to show and hide text.

Show icon

This variable is used to show and hide icon.

Icon weight

When this variable is used in an instance, the instance needs to be detached before it can be used. It cannot be added to a component. Hope Figma improves this.