Figma in 5: Tricks on Fire 🔥

[Music] hey everyone it's roger back for another figment five and our topic this time is just all tips you all have been asking for these deceiving for these tips you want the tips you need the tips and so this session is going to be all about jamming your brains filled with this design knowledge so that the end of it you are a figma god really you're a sigma god and hopefully a better designer a better human a better person well let's jump right in let's start with doing some zooming uh to start if i want to zoom into this selection i can just hold command and mouse wheel or trackpad and i'll zoom in to wherever my cursor is additionally i can use shift 2 to zoom into a selection yet another way of jumping into that selection would be double clicking on the icon in the layers panel let's talk about traversing layers i've got a really complex component here and i want to go ahead and select all the child layers if i hit enter on the selection it'll select all child layers of a component or frame if i hit tab i can actually tab through the layers or shift tab will reverse tab through those layers if i hit shift enter i'll select the parent of my selected object now this complex component has a ton of different nested components inside of it what if i want to detach this and detach all of the subsequent layers underneath it if i hit command forward slash i'll bring up my quick search menu for keyboard shortcuts and commands now if i type in detach you'll see something really great here i have deep detach all selected instances and if i click that you can see now that i've detached all of those layers if i keep hitting enter i can expand out all those layers and see that they've all been detached did you know that double clicking a menu will bring you to the image fill menu but also even better than that option double clicking will bring you into the image crop menu if you ever need to be able to change the scale of your interface check out these commands here you can make them larger or smaller here with option command minus or plus if you'd also like to change the location or turn off your layers panels you can simply hit command and backslash or command in period to be able to toggle that interface on the left and right hand side additionally you can turn off just one of those if you go into the view menu you go into panels you can turn off the left sidebar let's do some nudging nudging is when you have an object selected and i use my arrow keys notice it's moving around by one pixel at a time if i hold shift i'll use a big nudge and that's moving around 10 pixels at a time if i go under my preferences and my nudge amount i can change those amounts maybe i can use big nudge at eight now when i move it'll stay on my 8 pixel grid but maybe when i'm zoomed in i only want to do half a pixel nudge amounts so i can specify small nudge to be a half a pixel and that's not all you can nudge look at this color by using arrows up and down i can darken and lighten holding shift and going up and down i can darken and lighten that color even more rapidly additionally i can come into here and use my mouse wheel on the color gradient here this will slide up and down my hues if i hold option as i scroll you can see that i can actually slide up and down my opacity did you know that any field you can scrub by dragging on the icon notice how i can change the height even wrap around my dragging to scrub at different values and higher speeds i can change the degree of this arc or by holding shift i can use increments and go up and down and scrub at slower speeds but any field is scrubbable just by holding alt on it so if i come to this text field that doesn't have an icon and i hold option or alt i can actually quickly scrub that opacity for that blur or quickly scrub that blur to be much larger with this component i want to be able to resize it and have this close button stick to the upper right what i'm going to do is hold command to drill into a sub object and i can now set it to the right without having to double or triple click this to get into it the other thing that i've done is i've set up this glyph with a locked layer that way when my designers command click they won't click the actual glyph but they'll click the whole button now let's see how the constraints work if we ever want to ignore those constraints we can now hold the command key while resizing the frame and it'll ignore the constraints if we ever want to see all the layers underneath a clipped frame we can hit command y and see an outline mode showing all the layers underneath that clipped frame i've got a bunch of svg icons here and i'm just going to drag them in and i'd like to turn them into components to be able to use for my project using tidy up on the screen here i can align all my icons i can specify space between or vertical space between or actually type it in here if i'd like to create it to be uniform additionally with tidy i can drag items around here once i'm done and i'm ready to be able to turn these into components simply just drop down the component menu to create multiple components now we've created all of our icons but the names are all strange so i'd like to go in and batch rename i can use command r or just right click and rename on all the selection now i'm going to use a little regex magic here but suffice it to know that i'm just saying match three digits in a row with a dash and then let's just replace this with icons slash so once i rename all of these we can see now that our icons are named how we want them to be and under the assets here i can see that they're categorized under icons want an easy way to create a single-sided border like this in figma just use an inner shadow with a negative on the y-axis and you can create a single-sided border holding option and dragging down one of these frames and if i keep hitting command-d i'm going to be able to duplicate this with the same offset as the previous one that i pasted here we've duplicated this name field to create an address field but we no longer want it to be called name if you simply just delete the text out of the name of the layer it'll become the value of the text itself inside here i've selected the vector inside of this icon but what if i want to select something up this tree now normally what i could do is go through my layers panel here but a cool trick would be to hold command while right clicking that object and i can get a menu of the full hierarchy above and below this object and select the thing that i want thanks for joining me raji in another episode of figma in five now in this episode i had so many tricks lined up that we've got another episode of all tricks dropping next tuesday feel free to like and subscribe if you're digging this content to keep on going

Channel: Figma

Views: 29,780

Rating: 4.9849906 out of 5

Keywords: figma, design, ui design, product design, tips, tips and tricks, tricks, graphic design

Id: UMaZ2ZY6Mik

Length: 6min 51sec (411 seconds)

Published: Tue Dec 15 2020