My Take About the “Component Properties”
Have you ever wondered what Component Properties are for?
Here’s a quick story about how I learned the importance of creating component properties.
I began working at a company as a junior UI/UX Designer with zero knowledge of creating component properties. Naturally, I didn’t know how to apply them correctly in every wireframe I created. It wasn’t until I realized that I was making many tons of duplicates that the sizes, gaps, padding, and so on weren’t consistent at all.
Our lead UX designer always told me that it might seem like a lot of work initially, but in the long run, you would appreciate the beauty and convenience it brings.
So, I’ll provide a quick rundown of my perspective and understanding of component properties and how easily they can be comprehended and applied. I’ll use Input Fields as an example.
Input fields consist of the Label Text or Title, Input text, which serves as the placeholder text, and Text description, or Helper Text. Of course, there’s a text box that acts as a container for the input text and the option icons, which can be placed on the left, right, or both sides of the box.
As an example, I’ve used a Search Icon in the following illustration, where I created an input field for location search.
I typically start by duplicating the final set to create as many states as I need for a component set. For this case, I’ve decided to create four states: default, active, hover, and error.
As you know, In UX and UI design, various component states help communicate different interactions and conditions to users. The four states I mentioned — default, active, disabled, and error — serve distinct purposes and these are the common states being used but in the actual project or design, lots of states might be added such as hover, selected or enabled, and so on.
So I’ll give you a quick description of these state that I used:
Default State
This is the standard state of a component. It represents the component’s appearance and behavior when it is not being interacted with.Active State:
The active state is typically associated with the component when it’s actively being interacted with. It’s the state that appears during the interaction.Disabled State:
The disabled state is used to indicate that a component is not currently usable or interactive. It’s often employed when certain conditions need to be met before the component can be enabled.Error State:
The error state is applied when there is an issue with the user’s input or a task can’t be completed as expected. It communicates that something has gone wrong. If you’ll notice, I have indicated below that a certain inputted value is invalid which serves as our error indicator.
Disclaimer: This is not a tutorial, so I may not be able to give one by one steps on how to create component properties
Here below is how I add the properties to a component:
On the component set, I select a particular element, based on my example above, I start with Label text and once selected, I go to the property section to add various properties to your component. These properties can include:
Name: Give the component a descriptive name.
Description: Provide additional details or notes about the component.
Accessibility: Define accessibility properties, such as alt text for images or labels for interactive elements.
Variants (for interactive components): Define different interaction states like default, active, error, and disabled. Specify how the component should look and behave in each state.
Overrides (for component instances): Define what can be overridden when you use the component in different instances.
If your component has interactive states, click on the “Variants” section in the Properties panel to define each state. Then customize the appearance and behavior of the component for these different states.
So what is the importance and advantages of using Component Properties?
To me, component properties in Figma are a very powerful and crucial aspect of the design system, and they play a significant role in the user experience (UX) design process.
They are a set of attributes and behaviors that define how a component functions and appears in your design. These properties help ensure consistency and efficiency in your design process. I’ll be listing down the YouTube videos that helped me understand and create component properties, but before that, here’s my take on why it is really important:
Consistency
Component properties allow you to define a set of consistent design elements (like buttons, icons, or input fields) that can be reused throughout your design. This ensures that the same visual and interactive elements are used consistently across the entire interface, enhancing the user experience by reducing confusion and making the design more cohesive.
Efficiency
When you create a component with predefined properties, you can easily reuse it in multiple places in your design. If you need to make changes to the component, such as adjusting the text or changing its color, you can do so in one place, and those changes will be reflected everywhere the component is used. This saves time and effort in maintaining and updating your design.
Interactivity
Component properties can include interactive behaviors, like hover states for buttons or navigation links. Defining these properties helps you create a more interactive and engaging user experience by allowing you to specify how elements should behave when users interact with them.
Accessibility
Figma allows you to define accessibility properties for components, such as alt text for images or labels for interactive elements. This ensures that your designs are more accessible to all users, including those with disabilities, improving the overall user experience.
Scalability
As your design project grows, component properties become even more important. They allow you to scale your design system by easily creating and managing a library of components that can be reused across various screens and projects.
Component properties in Figma are essential for creating a consistent, efficient, and interactive user experience. They enable designers to define the attributes and behaviors of design elements in a centralized and reusable manner, making it easier to maintain, update, and scale your design projects while ensuring a cohesive and user-friendly interface.
And as promised here’s my list of how I learned how to create and apply component properties to our design system:
Mavi Design —
Figma —
Mizko —
Thanks so much for reading! Have a great day.
Love — Angel 💕
#uxdesign #uxdesigner #component #uiux #userinterface #userexperience #properties #figma #figmadesign
Originally posted at medium by My UI/UX Design Journey