Create and Use Variants Variant Properties And Values The utilization of variant qualities and their corresponding values enables the specification of the characteristics associated with different versions. Variant characteristics refer to a distinct category of component qualities that are only associated with variants and component sets. Users have the ability to incorporate numerous characteristics and values into their designs, allowing for customization that aligns with their specific design system. It is possible to establish a correspondence between the properties and values of a design system and the code components. 1. Variable Properties The variable properties refer to the dynamic attributes of our component. An illustration of features pertaining to a button component includes attributes such as size, status, and color. 2. Values Values refer to the several choices or alternatives that are associated with each specific attribute. As an illustration, the state property may encompass default, hover, pushed, and disabled values. Rename Your Components The aforementioned naming method can also be employed for the purpose of converting one's pre-existing components into variants. In order to achieve precise conversion, it is imperative that component names adhere to this prescribed pattern: componentName/property1value/property2value/property3value Explanation:  The component set will be named based on the text preceding the first "/".  In Figma, a new property will be generated for each alternate occurrence of the forwards slash ("/") in the name of the component. Subsequently, the attribute will be appended as the corresponding value for that property.  If the naming method you have employed includes the usage of suffixes, it will be necessary to append these suffixes to the name of the component, with each suffix being separated by a forward’s slash ("/"). Button/Primary/Large/Default/False Explanation:  Component set name: Button  Variant: Primary  Property 2: Large  Property 3: Default  Property 4: False In the image below, we can see how the rest of our component names (on the left) are converted to variant values (on the right). Organize Components On The Canvas Components refer to the constituent elements that can be employed again in various design contexts. They assist with the establishment and administration of cohesive designs throughout various projects. Here is the step: 1. Choose the constituent elements you wish to amalgamate. 2. To initiate the process, locate the Combine as Variants button in the right sidebar and proceed to click on it. 3. Figma has the capability to consolidate all components into a unified component set Give Properties Descriptive Names Components refer to the constituent elements that can be employed again in various design contexts. They assist in the establishment and administration of uniform designs throughout various projects. It is necessary to alter the nomenclature of those features to encompass more descriptive terms. 1. Choose the component set. 2. Examine the existing attributes within the Variants category located in the right-hand sidebar. 3. To facilitate the identification of a certain property, just position the cursor over the property, prompting the display of a visually distinct grey box surrounding it. 4. To enhance the clarity and specificity of the property, please click on it and modify the name accordingly. 5. To initiate the application process, please select an area outside the property and click on it. 6. Proceed to replicate the aforementioned process for the other attributes. Create New Variants Components are fundamental constituents that can be employed again in many desig contexts. They assist with the creation and maintenance of uniform designs across many projects. There exist several methods for generating a novel variation. Choose a primary constituent and: 1. Click from the toolbar, or 2. Right-click the main component > Main component > Add variant, or 3. Click [+] in the Properties section of the right sidebar > Variant.