Component Properties in Figma

Component Properties in Figma What is Component Properties? The properties of a component refer to the variable attributes that can be modified. The specification of design attributes enables the designation of specific components that can be modified by others. This feature enables users to exercise control over several aspects, such as: 1. One might choose to conceal or reveal layers. 2. The question of whether an instance can be switched. 3. Which text strings have the potential to be modified Property Types The naming scheme can also be utilized for the purpose of converting pre-existing components into variants. In order to achieve precise conversion, it is necessary for component names to adhere to a specific structure. Component attributes can be classified into various sorts. 1. Boolean property 2. Instance swap property 3. Text property 4. Variant property Boolean Property Boolean characteristics are utilized to assign values of either true or false. This feature enables users to switch an attribute between an active and inactive state. As an illustration, in the context of a design system, when buttons are designed to have both icon and non-icon versions, rather than generating separate variants for each state, it is more efficient to utilize a Boolean property to control the visibility of the icon layer. Additionally, this approach offers a valuable means of diminishing the dimensions of design systems and file libraries. Instance Swap Property The instance swap attribute denotes the specific instances inside a primary component or variant that are eligible for swapping. When implementing an instance swap property, it is possible to provide the default value of the instance by selecting from a range of local libraries that are currently enabled. Users of this property will be presented with an instance swap option, which allows them to replace the nested asset with another asset from either the same component subset or any available library. Text Property Text attributes can be employed to specify the text layers that want modification. When it comes to managing the default value of a text property or utilizing an instance that includes it, the text string can be modified either through the right sidebar or directly on the canvas. The value updates bidirectionally. Variant Property A variation refers to an individual constituent within a group of components. The inclusion of a variation property enables the specification of various attributes associated with the variants, such as their status, color, or size. A collection of components has various iterations, each of which possesses qualities that can be specified by variant properties. Variant properties are exclusive to variations and sets of components, and cannot be generated or implemented on primary components. Expose Nested Instances Reveal the component attributes of certain nested instances with the properties of the toplevel instance. This feature facilitates the exploration of nested instances and their associated component properties for users of the design system, eliminating the need for extensive layer selection to locate them. Upon selecting a top-level instance that has exposed nested instances, a sidebar will display a list of component properties for both the top-level and nested instances. Choose Nested Instances To expose properties from a selected main component or component set, navigate to the Properties section located in the right sidebar. Within this area, click on the option labeled "Nested instances" to proceed. Choose Nested Instance to Expose To reveal instances at the top-level, please choose the corresponding checkboxes in the Expose nested instances modal.