Figma Tips & Tricks - UI Designer's Superpower

hey there this is Greg from learning extra IO and welcome to the video with some badass figma tips let's just jump right in and start with duplicating layers if you select the layer and then option drag it and I also recommend holding shift so that you can hold the line then you can release and press command D a couple of times to duplicate it within the sequence unfortunately figma cannot you know just make incremental numbers alone but if you change the names and here you still have the numbers so one way to sort it out is simply double click on the layer name and delete it and leave it empty I'm gonna press tab right now to go to the next layer name delete and tab and then it's gonna inherit what's inside of this text layer now fancy circles well figma allows you to create shapes like this pretty easily what you have to do is select oval tool and if you now start drawing this will start from the top left you can hold shift to maintain proportions and if you by the way you want to start from the center if that's more convenient for you you can just position the cursor on the center and hold option was starting drawing then I'm also gonna hold shift so hold shift option and if it's still not perfect you can always tap the spacebar and then you can reposition while still drawing so I can I can you know make a shape like this now let's change the color in order to select the color picker I'm gonna press ctrl C now let's select this color and now if you hover over this shape you have a little dog this is arc tool and it's just as easy as dragging this any direction you want so let's make it like this for example and now you have to change the ratio as well like so you can do it in either direction so let's change it like this and I also want to rounded corners you can have rounded corners in there and that's basically it now let's position it correctly and this is the shape applying capacity to literally anything if you select the thing that you want to apply a posse to to and you know that this should be like maybe 10% you just press 1 on the keyboard now you can see that the layers opacity change to 10% if you quickly press two buttons for example 1 5 it's going to change to 50 percent if you want to reset it if you press zero you're gonna have 100 again I'm gonna leave it at 15 and this was pretty easy so let me give you another advice and here so if you want to copy the styles of this particular item to copy the style you're gonna press command option C instead of simple command C and I'm gonna press command option V to paste it also if you want to copy only selected properties so for example on this stroke or feel or anything that you have in here you can select it in there and just copy it from here come on C then I'm gonna select any shape and command V paste it there you go you're welcome now this is a cool little tip if you want to adjust the position of the element by just scrubbing or adjust any of the fields while scrubbing you can do it so let's adjust the Y position I'm gonna click and scrub it to the left or right but that's pretty fast now while you are scrubbing you can also move your cursor up and down and you see that now I'm scrubbing at 1x but I can also have one 8 X and this is now pretty slow almost pixel values and you can easily scrub it like so so if you want to just scrub it faster let's go up and now we can scrub pretty fast wow that's nice smart selection now if you select multiple objects and it's important to keep them one kind so for example layers groups or frames so for this particular example let's select both of those guys and group them all together like this so I have all the groups and friends in here now it works so I can adjust margins spacing both vertically and horizontally and also I can access those little dots to reorganize the elements so I can change it like so or I can move it there then I can move the peaches here and those want to the left and that would be it for another sweet tip for you now that's a cool selection method well you can obviously select things like this if you just hover over different things you can click on them and at least you can select groups and you can select individual frames however sometimes it's so much better to simply create a selection that will cover like multiple items or go inside of the items and you sometimes use this method when you simply click and drag if you decide that I don't want to select that you're gonna press spacebar you can move this around and select this guy or this guy instead and also this gives you a little bit more ability it's not only to select groups but also individual layers and layers inside so sometimes you just might want to create a little pixel like this hold spacebar and now you can select a bit different things performance tip sometimes your computer slows down if you press command slash then you're gonna search for resource use and just preview this in here you're gonna see how many layers you have in the document how much space does it take in your RAM memory how much is free and then you're gonna of the CC that's not figmas folder just double click to dismiss it and sort it out somewhere else keyboard shortcuts in figma a couple of interesting ones so if you want to navigate between the tabs in the desktop app you just press command and the number of the top so for example if I want to go to the top number 2 I'm gonna press commands to comment one will go back to the first one also you can press page up and page down to navigate between the pages one more shortcut is command back slash it will hide the interface the figmas UI if you want to bring it back just press it once more or you can write it in here and do you have here show and hide UI command by the way if you want to just play some games with keyboard shortcuts why don't you go in here and just use keyboard shortcuts by the way keyboard shortcuts has its own keyboard shortcut if you click on it you'll see which of the shortcuts you use they are highlighted in blue and the ones you didn't so I didn't use arrow tool oh I have to you I just have to press shift and L yep woohoo level completed next up a pro tip which stands for prototyping so I want to make this guy an overlay in the prototyping mode I need to move it outside of the frame and this has to be frame itself so another bonus fantastic shortcut which is making a frame out of something if you select something command option G so like grouping but you press option as well and you have the frame now I want to rename it like let's say ovie for overlay now let's go to this frame I also want to hide this rectangle and let's go to prototyping mode now now I want this button group to show the overlay so let's link them together and in here in action I'm gonna select open overlay the position of the overlay instead of one of predefined it's gonna be manual and now I'm gonna move it right there to the top by the way a bonus tip if you hover outside of this guy and it's still selected you can use your arrow keys on the keyboard to position it correctly you can also shift arrow key to just majid by 10 pixels or whatever you have specified as nudging volume now let's go to this overlay background I want to show the black background and that would be maybe 55% below this modal window and let's close it when clicking outside also instead of the instant transition I'm gonna move it in from the top and leave the settings as they are right now I'm going to preview this prototype and come on come on Sigma now when I click on the order button it goes from the top and animate nicely I have this black background 55 percent opaque and I can click outside to just reverse the animation now another tip is you can just multiply this frame and create some States so now the activity is selected but if you want to create any other state so for example let's switch to the account and let's quickly go to the design I'm gonna come and see try to make this color active and also make this one in active so I have another state for the account when you click on the account or this little icon for example let's go to prototype what I can basically do is I can draw a rectangle an invisible one so let's go to design and just delete the field and I can link this to the next state like so and what I want to do is swap so let's use this one we're gonna leave transition instant and let's preview this prototype once more let's go to order and let's click on the account now you have the second state so this is how you can do it let's close it and works like magic now what if you want to create an egg's button that's pretty common I'm gonna use this create an X button shortcut in figma then position X button and make sure that the trigger is unclick so when someone clicks on it I'm gonna run the action and this will be closed overlay you can use open URL or back to just go back to any of the frame that initiated this model but I'm just gonna use close and now let's preview this I'm gonna play back and close works as a charm now I've already mentioned magic and magic is one of my favorite things I know that every designer simply loves magic when you press this keyboard arrow up down left and then unite it to pixels this direction and you have the sweet spot so this is like really satisfying right so what if you want to change those magic values if you press command slash in figma and then search for notch you'll find match amount and you have this small notch which is basically just keyboard arrows and the big nudge the big match is 10 pixels and you can obviously change it so if you press shift and up or down or left or right you're gonna nudge by 10 pixels okay nudging down next up selecting things and everyone knows how to select things right if you want to select even nested things you're gonna press and hold command and then you click on the thing that you want to select problem is sometimes you just want to select something like this gray background and you really can't do it why because it's locked instead of selecting this in the layers panel what I recommend doing is pressing and holding ctrl on your keyboard and then right-clicking so now instead of this simple right-click menu you're gonna have this menu of all the layers inside of that say a group or a frame and there is my little culprit so this guy is obviously locked and yeah that's why I couldn't select it so let's click on it select it and now you have it in the layers panel this is it also if you have multiple locked layers or hidden layers and you want to bash and lock them what you can do is search in figma so let's press command slash and now unlock all objects this is what you can do or unhide all objects so doors those are two commands that will let you simply unlock everything and that's pretty cool next up filling with images so if you have multiple placeholders and you want to fill them with images at once just press command shift key on the keyboard select the images you want to import and then click click click click you just have to click on the other to fill them up that's it now a cool way to bring an image into figma if you select any shape what you can do is basically drag the image from your hard drive and drop it on the field and you can also use some gifts in order to just display within your shapes so it will be loaded in a sec and now you can access this gif and you can change the frame you can change the frame of this crewel you can change the frame so that it appears for example like so in there on the canvas you won't have the preview of this gif I have a shape underneath I can also say a play some soft light or multiply to change some colors but if you play this gif will load and play back in there so this is pretty cool to mock up some freeloaders and States and some fancy animations that you want to please the user with thanks and one cool thing about copying and pasting if you want to select and copy something you just press command-c obviously then you can go to any frame and if you basically if you select the frame if you click in the frame and you paste it this will go at the very top of the stacking order of layers to this frame and will be positioned in the same place where it came from now if you wanted to go up in the stacking order it's just the case of selecting the layer you want this bit to paste it above and now let's press come on V and this will be pasted straight above this selected layer and one more cool shortcut is if you want to position it within some shape or some layer it's enough to select it and then press command shift V and now it will be positioned at the left top corner of this very selected layer you probably know the returner shortcut that will allow you to adjust the shape so if you select any of those shapes you can press return to go into editing mode also you can press shift enter to commit it and go outside and the same thing goes for the groups so if you have some groups like this one now I'm in this slide and I've selected entire group but if I press return I'm gonna go to calendar if I press return once again I'm gonna select all of the layers this comes in handy and you can also press shift return to go up the stacking order to the very highest group that you've selected now let's focus on some tips on text and color and let's select the text field so sometimes you have trouble with selecting the proper shade of grey in your project so what I suggest is starting from black and then if you enter this field value what you can do is you can press up and down arrow to adjust it and if you press and hold shift on top of it you have a shift up arrow to change it towards some lighter colors and maybe you can press shift down to again go to some darker colors and and that's how you can easily decide also a nice tip is that if you let's say want to copy some stars from CSS and in the clipboard you have something like this you know it's it's a class and there's a color inside however you know your clipboard is messy but you can still do it and don't really care you can just put it in here and paste it then press return and this will convert it into the proper color and take the values out and apply them also and this is a good one you already know how to change the color of the object so basically you press control C and then you can click on any other color that you want to apply it with color picker one tip here is that you can go outside of figmas window and select some different colors from outside of the app but another one and this is really nice is previewing those colors so if you want to preview those colors it's enough to click but don't release just yet just hold it and if you click and hold and then you select different colors you have them applied and you can see how it looks with this different color so that's pretty nice in terms of text that's also useful you can select the text ctrl C and then you click and just preview different colors that you have under your cursor and one size tip if you want to make this text one liner it's enough to select it and double click on the frame of the text and that's basically it also one great feature you guys requested this is a plugin but this is actually in figma if you press command slash so you go to search and then you search let's say for font you can search for select all with a phone so if you for example have an UI keyed or you change the phone across all of your you know company assets you can select them once and then you can change for example for a veneer and all the same phones will change accordingly across entire file that's pretty cool let's select this color once again and one more thing about the color and this especially this color picker is that right now you can scroll with your mouse or just with your two fingers on your touchpad in order to change the hue of the color that's really nice and also you can press and hold option while doing that to adjust the alpha so the opacity of the color so you can easily scroll up and down and then press and hold option and modify opacity now creating multiple components that's command shift click on different items to select them those are not components yet but I'm gonna click on this little icon and instead of creating one component I'm gonna create multiple components at once you can see there are a few master components in there I'm gonna press come on R to change the name and I'm gonna add a prefix so let's go ahead and add food and then slash I'm gonna use the current name afterwards and let's go ahead and rename it so right now I can duplicate this artboard and in the second artboard i have instances right now if you select this instance and right click on it you can select swap instance and now figma figures out that those are similar components why because they all have food slash at the beginning so now you can select the other fruit from the list and just swap it like so a couple of more things on instances and components if you select an instance you can obviously swap it from the right-click menu but you can also go to the instance in here and then its properties you can detach it and you can also change it to any of the related components but also you can select basically whatever is linked to this file and the nice thing here is also you don't really have to search for the master component you can go to master component from here so you can click on this link usually though you don't even have to go to the master component because if you let's say you want to change something in there so i'm gonna go to this text and let's maybe change it to 15 or 17 and change some properties as well now if I select this instance once again what I can do is I can push overrides to master so if I make any changes from there from the instance I can push those overrides and override the master component from within the instance so that's pretty great and also please keep in mind that you can reverse all the changes that you apply as overrides with this little icon you can reverse individual override or you can reset all of the overrides made and just go back to the initial state of this component if you have such components like this one I'm gonna select it and go to the master well it's white and this is white on white background so in the assets panel you're gonna just see white fingers in there so what I prefer to me instead is selecting this component I'm gonna take it out of this frame maybe I'm gonna create another frame for it and just put it in this frame but the but the new frame will basically have some kind of a background so let's select it and just change the background you can change it to black color and now if you go to the assets you have this on the black color this is one way you can keep your components nicely organized and visible for all times also similar concept applies to the thumbnails of your project in the file repository if you go there and instead of the preview of all the artboards on your page you want to have a nice thumbnail like this so for example name of the app or maybe a nice screenshot you can do it I'm gonna just open that file to show you how it's done well basically you have to have the first page that contains nothing apart from this cover I usually make this transparent and just create some graphic assets in there and on the page - I have my assets that I work on so that's how you can make your figma files a bit nicer advanced layer renaming if you want to change the structure of the layer names you just have to select them and press command R there you have and the rename layers so you can use this preview to select the match and in the you can use regular expressions if you want to learn more about records just take a look at the comments in here I'm going to search for the string that contains only small or big letters and you can see the preview in here if I add plus in there I'm going to search for the second part of this string and what I can also do is I can use parentheses and store this in a kind of variable I'm gonna say show you this in a second now I'm gonna search for another string like this so this is the first part of my word and this is the second one and the separator is this underscore so now I successfully found all of those layers and I did this in a kind of complicated way because I want to store these things and variables so I have two parts right now and if I search for the first one which is dollar one you're gonna see the first part of the word and dollar two is simply the second part after the underscore right now so what I can do right now is maybe just reverse the words in the sequence and also I can use some kind of separator and I can use this slash separator and that's pretty neat because now I can group it into this model section if I want to add another section like assets let's say and / you can do it as well now if you rename all the layers there you go now another tip is if I go once more to the renaming layers window if I decide that the structure is too complicated I can just remove any parts of the names at once so if I want to remove model slash I'm just gonna paste it in here in March and instead I'm going to just have assets fats so this is pretty cool and I think you will put in there so let's say assets will just delete anything from the string and I can rename the layers and I'm ready to go this is just the beginning of what you can do with this rename option combined with regular expressions so make sure you get to know them now a bundle of tips here first off is when you want to find something on the canvas so let's say you found some layer in the layers panel but you don't know where it is on the canvas it's pretty easy if you press shift - it will zoom into this a selected layer but even easier way is to simply double click on this little icon next to the layers so for example this guy and this one and if I want to select this layer I simply double click and that's it now what I have are some instances of components I can right click on them and you obviously know that I can swap instance in there and those instances are similar things so thanks to this models slash at the beginning it can group them all together but this is not the only way you can use this grouping you can obviously use let's say assets before and then it will have this two levels and this also applies to for example color styles so that's pretty cool if you select anything like this like maybe you want to add this color to the color stars I'm gonna click + to add it and in here instead of just let's say yellow I'm gonna say brand slash yellow and this will create a style but also it will give this kind of a label and if I'm going to select another one and let's add this color in here as well so I'm gonna use brand and now a green and this is gonna be a place under the same label so in general grouping and annotating think is a good idea especially if you're working in the team so this can help a lot as well as you can create some kind of hints for let's say developers when you have those master symbols you can just select them and add some description in the components section so hey this is my description yeah I know it's not meaningful however if you label components like this then if you share this file with anyone you'll be able to access the code and now it is inside of this CSS as a common and you know keeping in mind that developers don't really like to talk this might come in handy now we're just kidding I know they like to talk about code so what you can also do is while saving the file we'll figma saves files automatically for you but if you press command option s you will also add this to version history with some kind of title and description and this is really really useful because what you can do in here is you can give some hints to your team on what you actually updated so this might be I don't know icon up you don't even need to describe it a lot but just the name of the of the version in version history that will be visible to anyone and also if you go to this version history as you can see it's not really meaningful those are only ours and if you name the versions instead at least those major ones it will be so much easier to just browse them in there and by the way if you want to share this specific version with anyone in figma you can do it you can right-click and yeah let's rename this version that would be I can update for example and now I have the whole section for icon updates in there and what I can do is for any of those auto-saves or this particular one I can right click and copy link and send it to anyone so that he can access only this version with in version control that's pretty cool sharing the link to your file from figma you can obviously use this share button but this window is a bit complicated if you just want to share the link from the desktop up you can right-click on any of the tab and then copy link as such now it's in your clipboard well done oh and a bonus tip what you can do in here is you can go to file and then open file URL from clipboard so when someone shares the link with you instead of clicking and opening in browser you can just grab a link and open it here in the desktop that's it all right folks now this is all for this video thanks for tuning in and make sure that you watch other videos on learn your exit I'll see you there

Channel: Learn UX

Views: 280,458

Keywords:

Id: Vo0sEPqArRQ

Length: 25min 43sec (1543 seconds)

Published: Tue Aug 20 2019