Introduction To Components and Variants

Components:-

A component is like a reusable building block that you can create once and then use multiple times in your designs. It’s a way to encapsulate a particular design element, like a button or a navigation bar, so you can easily replicate it throughout your project while maintaining consistency. Think of it as a template that you can customize and reuse, making your design process more efficient and your designs more cohesive

Variants:-

A variant is like a different version or variation of a component. It allows you to create multiple versions of a single component with different properties, styles, or states, all within the same master component. This feature is particularly useful for designing interfaces with dynamic elements that can change based on user interactions, device types, or different states such as hover or active states. Variants help maintain design consistency and efficiency by allowing you to manage and organize multiple versions of a component within a single master component.

There are four properties 

• Type property with Primary and Secondary values.
• Size property with Large and Small values.
• State property with Default, Pressed, and Inactive values.
• Icon property with True and False values.

What is Style types of Styles:-

Use styles to define the color, text and any effects applied to objects; or to define the structure and appearance of layout grids.

colors: 

fill, stroke, background-color

Text:

 font family, size, line height, spacing

Effects: 

drop shadow, inner shadow, layer blur, background blur

Layout grids: 

row, column, grid

4Types of styles :

Text styles: 

text style has decoupled properties like alignment and color from being included in the style, so you won’t need to create a separate unconnected text style for every color or justification. This results in fewer styles, making them easier to manage. Many users will have two sets of type styles which include a type ramp for mobile and another for desktop.

Color styles: 

color style Make sure you have styles created for all of your documented colors in your design system, and name them appropriately so they are easy to identify, use, and implement. 

Effect styles: 

Effect styles allow you to consistently reuse effects like layer blurs, background blurs, drop shadows, and inner shadows. For example: the Material design system includes an entire set of drop shadows to coincide with different layers that are stacked in the UI—shadows are repeatedly used used to create the effect of different “elevations” tied to certain elements like modals and buttons.

Grid styles: 

Grid Style Often overlooked, grid styles can help standardize layout grids across multiple projects and viewports. If you have specific grids you use from desktop down to mobile phones, consider defining grid styles so they can be easily shared.