Figma Tutorial: Components - Organize Your Components

welcome to another figment tutorial in this video we'll be teaching you how to organize your components in our last video we learned how to create and use basic components we also learned that components can be found in the components tab at the bottom of the layers panel which can be accessed using the option to keyboard shortcut in this example we've created a few more components in our file if we return to the components tab we can see that they all appear together with only three components this is still easy to navigate but let's discuss best practices to keep these organized as we continue to create more two of these are buttons so let's start by grouping the similar components together we can do this by creating a new frame on our canvas using the F shortcut which we will rename two buttons now we can select our two button components and move them into our new frame when we return to the components tab we will see our buttons organized in a newly created section named buttons let's do the same for our last remaining component by creating a new frame this time let's click and drag the frame over the existing component will name this frame cards if we return to the components tab we now have two sections cards and buttons notice these sections and the components are ordered alphabetically by using pages within the same file we can add an additional layer of organizational hierarchy and the components tab here we have similar components on another page our first page is named orange theme and our second is named blue theme we can see this additional grouping reflected in the components tab organizing our components by type can help us navigate and find our components quickly figma allows for you to create components anywhere in a file but by keeping our master components on a separate page of our design we can have all components in one place and we don't risk losing track of them some of our components are a bit hard to see on the white background of the now if we change the color of their containing frame we can make them easier to see let's change these to a darker gray color when it comes to naming your components there's no right or wrong way but we do have a tip to make your life a little bit easier we previously group similar components in a frame to keep them organized in the components tab we can do something similar when naming our components to help organize them elsewhere in our file right now our two buttons are named primary button and secondary button let's rename those to button / primary + button / secondary respectively when we follow this / naming convention for our components figma will automatically create a parent category name button which will contain our two buttons primary and secondary in the instance swapping menu this menu is used for when you want to swap an instance with a different instance check out our video and instance swapping to learn more let's review what we've learned today organize similar components in a frame with a short but descriptive name change the frames background color to change the thumbnail in the components tab keep track of your components by putting them on the same page of your file if you have master components on multiple pages they will be organized by page use the slash naming convention to organize the instance swapping menu

Channel: Figma

Views: 138,944

Keywords: figma, ux, ui, design, design software, symbols, components, instances, organize

Id: FFXNLmt-JY4

Length: 3min 26sec (206 seconds)

Published: Tue Mar 20 2018