Naming Things in Figma: My Best Tips & Tricks

hey my name is joey and i'm a designer working over at twitter on design systems now before joining twitter just a couple of weeks ago i spent about 16 months over at figma and at figma i was working as a designer advocate while i was at figma i loved creating content to help other designers feel more confident and comfortable in the tool and i want to keep doing that so today i want to talk about something that i care a lot about which is naming conventions and figma and the reason i care so much about this topic in particular is because i really think if done right it can save you a lot of time and when it comes to working in design systems and discovering and storing and finding components the right naming structure can provide so much ease of access when designers are looking for components when you're trying to look for components or really just kind of storing things away so there's a lot that i want to get into today maybe you're someone who's been using figma for a long time or perhaps you're someone who's brand new i hope there's a little bit that i can share that can help you just work a little bit more efficiently in figma also if you have any topics you want to see let me know in the comments below i would love to continue making these and i definitely have a lot of plans for the future but i want to make sure everything is as relevant as possible alright so let's get into it the first thing that i want to talk about is pages and figma and you might be familiar with pages already but just in case pages are ways for you to store different elements of your design or different elements altogether in a single file so i have a couple of demo pages over here on the left hand side and in case you don't ever see your list of pages you can always click this little disclosure icon up here at the very top clicking this will reveal all of the different pages that you have if you create new ones they'll appear over here at the bottom of the list so right away you'll see i have a couple that i tend to use pretty often so the first one i call cover and this is a place for me to store a thumbnail inside now a thumbnail is just a 960 by 480 frame which we'll talk about in just a minute but it's a frame that allows you to essentially put content on to create a preview of what you want your file to look like so in this case i have a frame again it's 960x480 and in here i have a little tag that i can switch out pretty easily which is just uh currently says status is completed but i could go in here and i could type anything else that i want i could change the color and i'll actually share out after this i have a little thumbnail kit that i've made for figma where i'm pulling these assets from in here you can see i have all sorts of different avatars that you can use you can replace figma's logo with your own company logo and i created a couple of these kind of predefined statuses so things like completed and progress ready for development and there's more so i'm actually using this uh thumbnail here and i brought it into my file over here and uh to actually set this as the thumbnail all you have to do is simply right click and in this case i've already set it but for now i'll just choose restore default thumbnail once that's done i can now right click and i can choose set as thumbnail and you can imagine as you kind of grow in the number of files that you have and as your team kind of expands and gets larger it's really helpful just to kind of see again maybe some statuses some indicators of who's working on it if you want to apply some branding your company logo there and perhaps a background color that matches your own primary brand color and i also like to just kind of include the name here even though it's included in figma by default i think just having the name really helps kind of call attention to the file it's much larger so if you're uh maybe not a designer and you're someone who's less familiar with figma i think it the whole thing just kind of makes it a little bit less intimidating okay so when it comes to creating other pages um there's a little bit more that i like to do so you can really create an unlimited amount of pages and you'll see here uh we talked about that first one just now which is my cover page um and next i like to create an about page i don't have anything in this demo file but what i'll typically put in here are things like um what the project is about perhaps who's working on it or any updated context that might help a another designer or a non-designer who's taking a look at this file just kind of catch up on what was going on um or who are the stakeholders or deadlines or anything like that so this is kind of like a metadata page and again you can customize these however you want this is really just how i tend to organize my own files so next i included a demo page and this might be a um a space where you can actually include perhaps like a a prototype or a kind of a walk-through of what you're planning to build out or maybe it's the actual final thing so next i like to include an exploration page and this is a space where i can put inspiration or maybe other examples from different uh companies where they do something really well that uh maybe they've got a pattern down that seems to work really well that might be something that we can kind of take advantage of i like putting it in this space again called exploration you could call it inspiration or really whatever you want it's just kind of a space to really create like a mood board of sorts all right so next up i create a space called latest design i think a page like this is really helpful in your files just because as we all know in even inside of our files we can have v1 v2 v3 and it's so helpful for a non-designer or even other designers to come in and know that there's a page in here that will always have the latest design um this isn't anything that's automated with figment but it's just something where you can create this page and just as a general practice being able to put the latest designs or making a habit to put the latest designs in here i think can just work really well for the entire team okay finally i have two other pages and this one here is kind of a feedback slash crit space so perhaps you've shared out those signs with your team maybe you're uh including different pieces of feedback in here um for example i like to kind of screenshot like slack messages that i might receive or comments and slack regarding different ideas or things that maybe i hadn't thought about before when it comes to a design maybe you've actually had like a virtual grit maybe in figma and you want to just capture those sticky notes or those comments that are actually documented and documented in the file this is kind of where i like to put all of those it's a way to show progress and also for me to refer back to really easily when i'm looking for a piece of feedback or if i just want to gather new ideas okay so this last page here is a page called handoff and it's definitely not necessary because i think figma already does a good job of being able to invite an engineer into your file and for them to be able to kind of poke around and export the assets that they need and click around while figma does provide measurements and everything i just think this space can be helpful for if you have any like assets that absolutely need to be exported or if you have any um notes for the engineer or if there's any bits about like animations um really this is kind of a space for uh i tend to think of it like as a space for communication between yourself and an engineer um or engineering partners okay so this last one here is a little bit different this is just a little divider that i created before going into components and all i did is i clicked the new page icon up here i did three little hyphens and i've got a divider so it's actually just a blank page but i tend to create a lot of these just because it can help kind of break up the um the pages so if you have different categories of pages or again as we're kind of going from these primary pages up here to a specific components page at the bottom i just think a little visual indicator is pretty helpful okay now for the components page so in case you're not working with a full-fledged design system yet or lots of team libraries in figma i like to include a components page down here at the very bottom which might just be filled with the local components that are relevant to the design so for example if i'm creating buttons over and over again that might not be part of a shared library but i know that i'm going to be using them throughout the file or maybe i'm just exploring with a new pattern that i know i want to repeat throughout my design this is where i'll actually store those that way if i'm working with a design systems designer or if i'm the one kind of putting those back into the design system i know that this is a space where i can look at and i can easily find all of the main components that i created for this design and it's kind of just a mental note that everything in here should eventually go back into the design system if it's used but it's also a way just to kind of store things and again easily reference okay so what i want to talk about next is uh the assets panel so we've been looking at the layer list so far and as we click around as we have different elements inside here we can see down here at the bottom left are all of our different layers so everything is purple here with kind of this four little diamond icon that just denotes it's a main component but for example if i grabbed our shape tool at the top and i drew a square or a rectangle rather we have that new rectangle layer up here at the very top all elements that are a part of your page are going to be in this layer list right here now the thing that i want to call attention to is this assets tab up here at the very top think about it as everything related to visual components in your design system so everything that's been pushed up to a team library or every team library that you're actually subscribed to for your file you can find all of those elements inside of the assets tab now when we're looking at the assets tab we can see right away we have a couple of different drop downs these drop downs pertain to the page list over here and the ones that are appearing here are ones where you have local components inside so for example our cover page here if we go back to that in a layer list and we click on cover well this is actually a component that i'm using so that's why that's appearing over there and if we click on the components page here we of course have all of these main components that are part of our design right here so if i click on that assets tab again i choose the cover page drop down we can see right away we have our cover and if i click on our components tab here we have all of our matching components that are on the canvas over here on the left hand side so what's really great about the assets tab is as i hover over these different components i can see right away their full name so this is just the name that you've given that component in the layer list and even more i can actually grab this and i can drag it right into the canvas and i can work with it i can go in i can replace the text so i can type hello right away and this is now an instance of a component that i can use inside of my design what i don't really love though when we're working with this is if i'm a designer working in this file or if i'm bringing other designers in when we click on the components tab here we can see that we have all of our components showing at once so as you can see we have a couple of message bubbles up here at the very top these are all sorted alphabetically so we can see that down here we've got our gray bubbles they're kind of apart from those primary blue bubbles up here we have this segmented control here and this is kind of scattered throughout because the ones up top are named dark and the ones down at the bottom are named light it's also not really easy like let's say we wanted to select um maybe we wanted to select this dark segmented control here we wanted to bring that in but then we wanted to really quickly maybe swap this out for one that was left selected or right selected well as it stands if we go to the instance swapping menu over here on the right hand side and we want to swap this out we're actually seeing all of the components that are over here in this list right here so it's probably not likely that we would want to instant swap this dark dark segmented control here for perhaps maybe a blue bubble light or maybe even we probably wouldn't want to swap this very commonly for uh maybe a light segment of control that has the left one selected we want to maybe stick to darker or stick to light so as you can see the the instant swapping menu over here on the right hand side is just kind of messy this is a really small file with only a couple of components inside and you could imagine if you're working in a file that might have dozens or even 100 components in it this list can get really long and it's a lot of information for a designer to have to parse if they want to either swap a component out or if they're just looking to find something it's just kind of a lot to deal with so i want to talk about frames for a second and how you can actually use frames to organize these components right away if you're coming from sketch frames are really the equivalent of artboards with one major difference that difference is that you can actually nest frames with inside frames so we'll definitely cover what that means in a little bit but i want you to think of components as actually just frames because that's essentially what they are so if we have a frame so for example if we grab our frame tool up here at the very top and we choose frame and then we draw a frame like this we can actually take an instance drag it right inside that frame and as we just said all components all instances are really just frames that are repeatable so in this case we've brought a instance inside of a frame so we're nesting frames within frames now that's not really important to know right now but what is important is to know that frames can help you organize these components so if we go back over here and i'm just going to clean this up real quick and delete some of these that we brought in as it stands right now we have three groupings of components we have these message bubbles up here at the top we have segmented controls down here at the bottom left and then we have these modal stacks over here on the bottom right and as we saw earlier they're all kind of clumped together in a list but we want to organize that list so what i can do is i can actually grab the frame tool up here at the very top or i can just press f on the keyboard and i'm actually just going to draw a frame around these components we've got a frame there we'll do the same thing for the bottom two so we'll draw a frame here and now we'll do it once more and we'll draw a frame here so right away let's take a look at actually what changed so if we collapse our layer list just by doing option l we can see that we have three frames now on the canvas and inside of each one of these frames we have our different sets of components so if i click on the assets tab up here at the very top we can see that now inside of our components page and if you remember earlier this was kind of a messy list of components but now inside of our components page we have a drop down with three new dropdowns for each one of the frames that we just created it's not really helpful to see frame one frame to frame three because as a designer looking at this list you're not quite sure what's going to be inside of each one of those frames so this is where i want to give each one of those frames a name so if we go back here let's go to the top and i want to name this first one let's just call this message bubbles i'll double click and i will type message bubbles and before we go any further let's just go back to our assets list and at the top we can see that our frame one has now been renamed to message bubbles so it's much more clear for me as a designer to know now when i'm looking in here what's going to be inside and if we go back let's do the same thing with these bottom two so let's call this frame three let's rename that to segmented controls and then for our frame two let's go ahead and name this modal stacks all right so now when we go to the assets tab we can see inside of components we have message bubbles modal stacks and segmented controls and a quick tip here this is something that um i like to pay attention to i think it's kind of fun just to organize these a little bit more to make them as visually kind of tight as we can if we click on message bubbles up here and we go back to our layer list we can see that if i click one of these and i hold option it's not quite centered in that frame and same below and that's just because i drew kind of arbitrary size frames around these components so what i can actually quickly do is let's click the outer frame here and i'm going to use auto layout over here on the right hand side just going to click the plus and right away we can see that it's tidied all of these up so we now have a frame around these with a spacing between each component of 32 over here and it looks like we have a mixed padding so let's also set this to 32 and now that looks a little bit more visually organized and i'll do the same thing down here so segmented controls auto layout 32 for the spacing 32 for the padding and then modal stacks here auto layout 32 for the spacing 32 for the padding it didn't make a difference in terms of how we actually discover or find these components but i think when you're looking at this and you have again maybe hundreds of components in all of these different frames it can just be really helpful to know that the sizing is kind of correct and if you bring something new in or let's say we even remove one of these components down here i'll just hide it for now but because this is an auto layout frame watch what happens when i hide it the frame actually collapses to match everything inside if i click on this bottom one here and i hold the option key it's a perfect 32 and 32 all the way around so regardless of how many elements i actually have inside or how many are removed it's always going to stay 32 for the spacing between and 32 for the padding outside okay so we've used frames to organize these a little bit more and again if we go to that assets tab and click at the top here we can see all of those however i think we could do a little bit better of a job because if we click inside message bubbles here it's not really clear until i hover over which one of these is meant for light mode and which one of these is met for dark mode and for example let's say i brought one of these in let's say this blue dark mode component here let's say i want to switch this out really quickly for the light version of this well if i click on the instance swapping menu here i see all four of them and again it's not too big of a deal when only when we're only working with four components but you can imagine for something like these segmented controls here now we're having to look through 10 different components and to try to quickly identify which one we want to switch to based on maybe if we're using light mode or dark mode or the the two option or the three options so i want to show how we can actually get a little bit more detailed here to make instant swapping easier so i'm going to click on our message bubbles frame and let's go back to our layer list here and if we find our message bubbles frame and our layer list we can see that these currently aren't named very well uh and what i mean by that is we have the dark mode and the light mode set in parentheses which figma isn't really able to tell what that means however if i want to switch this to the slash naming convention this is going to tell figma that we're building kind of categories within these components so let me show you real quick let's go ahead and click on this one here which we know to be our light mode component and let's click on this one here which we also know to be our light mode component all right so what i want to do is i'm actually going to first let's double click in here i'm going to remove light delete this put a slash which again is telling figma we're creating a new category and then just type white and we'll do the same thing here so we'll double click delete slash lights so now if i click on this uh component here let's actually delete that and i'll grab one of these and just option drag it over so that we're working with a new light component so if i click in the instant swapping menu now we can see that inside of blue bubble we only have the light component this is perfect but we're also missing the dark mode here because when we're working with blue bubble we probably want to see both the light and the dark mode so let's actually fix that so if we go back to our layer list over here and we select our gray bubble and our blue bubble again let's just change this i'll delete that put in dark do the same thing for our gray bubble perfect so now if i select that light instance again of the blue bubble and i go over here we can see that inside of the category blue bubble we have dark and we have light and if i go back we can see that inside of message bubbles now which is the frame that contains these we have both blue and gray and for instance if i click in gray we can choose between dark or we can choose between light really easily now something even cooler is let's say i'm working with this component here and maybe i want to change the text so i'll type hello and we can actually change our background so it's a little bit easier to see this so i've got an instance i changed the text let's say i want to actually swap this to the dark mode version of this well if i choose the instant swapping menu and i choose dark here our override that we just made is completely preserved and i can actually really easily go back here and maybe i want to swap this for the blue bubble well i can click on that and arrow back again click on blue bubble let's choose our dark mode version of the blue bubble component and we can see that that override also is preserved here and how we're doing this is if i go in and i look at the actual structure here all we have is a layer in here that's called message and this is something that i manually typed in so i when i was creating this component i double clicked here and i renamed this by renaming that text layer i'm telling figma that i want this to persist i want this to be a common text layer regardless of the instance that we're working in okay so next i want to talk about these segmented controls down here so if we take a look each one of these segmented controls is placed inside of that new frame that we created and just to show if we go to the assets tab again and we choose our segmented controls drop down we can see all of those controls kind of clustered together this is okay but again if we had multiple components it might not be the best and also it doesn't really make sense to have both our dark mode and our light modes together in this case so what i want to do is i want to walk through a feature called bulk rename the bulk rename feature allows you to select multiple different items in your layer list and really easily and really quickly rename them so for example what i want to do is if we take a look at the name here we have segmented control in the name itself but we don't need to do that because they're already inside the frame that's called segmented controls so what i can do is i click these first five and again i'm just shift clicking to select all of those ones in the range i can do command r to bring up the bulk rename menu and in here let's go ahead and rename this to light slash and i'll show you why in just a second so as a designer i can say i'm looking for a light mode version of the segmented control i can grab one of these i can drag it right in and now i can very easily swap it between but we actually need to give this a little bit more of a name right because we just did light slash and we're not really sure which one this is so let's go back to our layer list here and let's find these at the top okay so when i look at the segmented controls frame here i think what i want to do is distinguish these components by the number of options that are available so for example in the first two here we have two options that could be either on or off and here we have three options that could be either on or off so what i want to do is i want to take advantage of bulk renaming here to make this really easy so we'll select the first two just by shift clicking we'll do command r and in this bulk rename panel we can choose our current name and let's type in our current name and then do two options and rename so now we have light slash two options light slash two options we'll still have to go in to uh distinguish whether or not the right one is selected or the left one is selected but we're getting a little bit further so if you click on the assets tab again up here we can see that we have our components segmented controls light and we've got our two here now i want to show you how we can actually break these out a little bit more so it continues to make more sense so let's go back to the layer list and let's choose these here we'll choose these three because each one of these three have three options available so bring up our bulk rename panel choose our current name and then type in three options so we have light three options light two options all inside of the frame segmented controls now when i click on the assets tab here we can see that inside of our segment and controls we have light and we have our different options here between three and two so i can actually actually now pull this in and i can see that we're working with one that has two options here and i can swap this to be one that has three options as well but i want to break this out one more time again just to kind of indicate whether or not we're working with one that has the right option selected or the left option selected or in the case of three the center option selected okay so i'm gonna select the first two here we'll do light two options light two options command r actually let's not do that because we wanna rename these specifically so if i click on the first one here let's just double click in here and type in uh right selected and then on this one we have the left one selected so we'll do slash left selected now to show you if we go to the assets tab and we go up here at the very top we can see that inside of our segment it controls light we have our three that are unnamed just yet we have our light ones inside of light which have two options here and now if i pull this in like this one over here i can say do i want to swap this between the one that's left selected or the one that's right selected and i'll just quickly do the same thing for these below just to show you how everything comes together perfect so i have all these we need now and if i click on the assets tab up here at the very top let's go ahead and collapse this all the way so we can see if i'm a designer looking for a segmented control i can click on the components drop down i can choose segmented control here i can now choose between either light or dark and with these expanded i can say do i want a three option or a 2 option and let's say i want a dark mode 2 option so i'll select this here and we can now choose either left selected or right selected and i'll actually pull this in and we can see on the right hand side now in the instance swapping menu i can very easily change again between right selected or left selected or maybe i want to back out and i'll go to let's do one with three options and i can say let's keep this left selected and now we've got that picker right there so just making a couple of changes in terms of how you think about naming where things are placed inside of frames or how you're using that slash naming convention really can go a long way in terms of how you can actually organize and find those components okay so there's one other thing that i want to share here so if you're working in a design system or you're working in maybe just a component library that you're kind of building out there's probably going to be a time you're making a component that you don't want to be published when you publish your next series of components so for example if we were looking at these segmented controls here and perhaps i didn't want the three option ones to ever be published or maybe they just weren't quite ready for whatever reason well what i can do is i can select all of these here i can do command r to bulk rename again and let's choose to put a period in the rename along with the current rename and if i click rename we can see now in that list we have a period in front of the three that we selected everything with a period or an underscore in front of it will not be published to the team library so this makes it really easy to prevent accidental publishes if you don't want something or if you're not intending for something to be published or used yet by the team a lot of times i'll receive a question of how do you change the actual appearance of a component inside of the assets tab so for example if we click on our modal stacks here we can see that all of these have a white background and that's probably okay for most components but sometimes you'll have maybe a white component that isn't visible on that white background so if we go over here to the modal stacks frame what we can actually do is click on the frame itself over here it has a background by default of white but i can actually click on this and we can drag this down a little bit and as i make it darker perhaps i want to go maybe a gray like this just so it's a little bit easier to see you'll notice the background of the frame matches the background of the preview in the assets panel list and this can be really helpful if you're choosing to break your components out by either light or dark mode in these different frames all of the light mode components can of course have a white background all of the dark mode components can of course have a darker background just so that everything appears correctly for any designers who are looking for these components okay so that's all i have for today let me know if this was helpful or if there's other topics in figma you'd like to see i definitely plan to cover more on components more on variants which is in a really exciting feature and then we'll definitely get into auto layout because i know that can be a little bit of a complex or intimidating space so we'll do some examples there to kind of show how auto layout works and how you can actually apply it to your designs again to be more comfortable confident and efficient and figma thanks for watching and i'll talk to you soon

Channel: Joey Banks

Views: 9,696

Rating: 4.9713774 out of 5

Keywords: Figma, naming, design systems, tips, getting started, frames, components, design tools, dartboards, rename, beginner, tutorial, Organize

Id: hEUO-9s7db4

Length: 27min 45sec (1665 seconds)

Published: Sun Jan 03 2021