Component Properties
In this article, I’ll give a review on Component Properties and its advantages. Before that, I’d like to first give a fast summary on what Visual Design is.
What is Visual Design?
Visual Design aims to enhance a design’s/product’s aesthetic appeal and usability with the appropriate images, typography, space, layout and color. As Designers, we aim to place elements carefully to create interfaces that optimizes user experience and drives conversion.
Careful Visual Design plus Good Usability = Lucrative Design. While a close examination of each element (line, shape, volume, value, color and texture) is “usually not necessary” in one’s daily work as a designer, the principles of Design — how to place elements together to build pages and app screens optimally — play a crucial role in our design path. Learning how to effectuate unity, gestalt, hierarchy, balance, contrast, scale, dominance and similarity will be satisfactory.
Component Properties
Basically, the components are chosen on the design screen and properties changed into different colors, fonts and icon, etc. There are two main types of components:
· Visible components; such as Buttons, Text Box, Label etc are all part of the User Interface.
· Non-Visible components; such as Accelerator, Sound, Orientation Sensor are not seen and thus not part of the UI screen, but they provide access to built-in functions of the device.
During the Config 2022 conference, FIGMA announced a bunch of exciting new features. One of them is the launch of Component Properties which brings a significant change to the way components are created and managed in Figma.
Before that, we made use of variants to create every possible variation of a component and include it into a component set, having the ability to set up a wide range of properties and values combinations (size, color, icon visibility, element positioning, etc).
The issue with variants comes with larger amount of multiplex projects and design systems, where you could end up with tons of variants for a single component, leading to an oversized and mismanaged figma file which could cause execution issues.
Advantages of Component Properties
· For new designers who joined recently and don’t know the existing designed system, it will be much easier to understand which parts of a component can be changed.
· The components you will create with properties will be closer to the attributes used by developers at the coding stage, which will ultimately lead to a better alignment between design and code.
3 NEW COMPONENT PROPERTIES
· Text Property: It allows you change the text of a layer included in the component directly from the properties panel, instead of having to click on each individual text layer in the canvas and edit it. It comes in handy when you need to change the text of multiple component.
· Boolean Property: It allows you to easily toggle the visibility of a layer within a component, directly from the sidebar panel which could be made visible or hidden. Of all 3 component props released, this is probably the one that will enable you to significantly cut down the number of variants needed.
· Instance Swap Property: This property allows you to quickly swap an instance within a component, straight from a dropdown menu in the sidebar panel, choosing from all the instances included in a local or shared library. The most common example is a button with an icon next to the text.
In conclusion, Component Properties — related properties, define parts of the component people can change by tying them to specific design properties. You can create component properties for any main component set and apply them to nested layers of the component or variant.
