Components
Introduction
Components are a key part of a design system.
To define Components, we have the following principles: 1. Widely used in the design. 2. The number of Components should be as small as possible.
The design logic of SnowUI components is to make the most frequently used combinations into base components, and then make other components and page elements from the base components.
The benefits of doing this are:
The extensibility of components is better. For example, you can replace the Icon in the button component with the avatar, and you don't need to add new components for this design.
The maintenance cost of components is less. For example, you only need to change the Icon set component to change the size of all Icons.
Maintaining the existing structure of components during design and development can give you more space to deal with uncertain product requirements in the future.
Examples of component usage
Button
Button component
↓
Button
Replace Icon with avatar. Double-click to select the Icon set, and replace the property with an avatar.
↓
Button
Change the size of the avatar. Double-click to select the Icon set, and change the value of Size.
Rules of use
Please minimize the number of Components to reduce maintenance costs.
90% principle: If Components used in a single product accounts for less than 10%, please do not include it in the design system.
How to use
Components can be added, modified and deleted. Modifying them will affect all components and pages, please proceed with caution.
Base components
The base components of SnowUI, they are the most frequently used components, and most of the page elements are made of them.
In most cases you don't need to modify them, each base component has multiple variants, you can add more variants to meet your design needs.
Common components
Common components other than base components.
Chart components
Components for making charts.
Phone components
Mobile components. Since the mobile design will use the Apple Design Resources – iOS 17 and iPadOS 17↗ library, this part of the components is only a supplement.
Page components
Page-specific components. These components are usually only used on certain pages, they do not belong to the design system, but their design conforms to the design system rules.