![]() ![]() With this component, I’ll always be able to increase number of sidebar-items anywhere without having to detach my instances. I finally selected all ten variations, click the component dropdown icon at the top center menu in Figma and I selected “Create component set”, and renamed the property to “Number of items”. I then duplicated it nine more times and decremented the amount of sidebar-items and the number in the name by one on each duplicate. ![]() I got an instance of sidebar-item from my assets, duplicated it 10 times, selected all 10 instance, framed them with auto layout set to center-center and width and height set to hug content, and then named the frame sidebar-body / 10. To avoid that, I created a body component that houses sidebar-item components ranging between 1 and 10. In figma, once you create a component with certain number of children or nested components, you wont be able to add more children in an instance and that’s where most of us decide to detach an instance and live life freely until the product manager request changes and now you have to edit 20+ elements individually. So, I switched to prototype mode and added a hover interaction to all default variant to change to hover variants on-hover. The last thing is to make this component interactive. On the left panel, the properties have been assigned default names of property 1, 2, and 3 so I’ll rename them to State, Inner, and Right Icon respectively. I finally selected all the nine variations, click the component dropdown icon at the top center menu in Figma and I selected “Create component set”, which create a component with three properties. I then duplicated the above frames, detached the padding to independent paddings, assign padding left to 40, and then renamed the frames’ “/ false” to “/ true”. I then renamed the frames’ “/ yes” to “/ no”. I duplicated all three frames, removed the left icon and set auto layout to left-center. The end result looks something like this: I made another duplicate and this time I increased the grey value a little bit and named it sidebar-item / active / yes / false. I then duplicated the frame and added a light grey fill and named it sidebar-item / hover / yes / false. So I named the frame sidebar-item / default / yes / false so later Figma can create three properties and pass those names as values to each property starting at “default”. Using slash-separated naming convention Figma will automatically group instances together, create properties and assign them values. Now, I want this component to have three properties state property which has three values: default, hover, and active, right icon property whose values are just yes or no, and inner sidebar property whose values are either true or false. I then framed together the left-content frame with the other icon and add auto layout set to space-between or auto center, a width of 250px, and horizontal padding of 15 and vertical padding of 10. This will provide the flexibility I need if I ever remove the icon the text will just snap to the left and the hug content width will ensure that the text will always have as much room to the right as the frame container will allow. I combined the left icon and the text layer into one frame with an auto layout set to center-left alignment and width of hug content. This component consists of two icon components and one text layer. For example the sidebar I mentioned I'd treat it like an organism, the sidebar-item-groups as molecules, and the sidebar-items and sidebar-title as atoms. I like to use the atomic design approach while making components in Figma. In this blog post, I'll go through a sidebar component that I made for ClickPesa's admin dashboard to show my approach to making complex components in Figma. Apart from maintaining consistency in the design, a complex figma component offers the ability to create states using interactive components feature.įigma offers a variety of features that I have been utilizing to create complex yet flexible components. Components are pieces of UI elements that can be reused across the design. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |