15 tips to design 15X faster in Figma in 2022

 hello and welcome to another content so if you're new here i am Rachel a senior product designer working in Malaysia and this is my website today i'm going to share with you

 15 tips to design 15 times faster in sigma i don't know whether it's 15 times properly it's just for the title right when i start a new file i will usually change the background to a dark color and i'll just use this color code because it's easier to remember

so i'm just going to use a project that i designed for clients so i can walk you through some tips to design faster in figma so the first thing for example when you're designing something in figma and maybe you forgot a keyboard shortcut or you want to launch

a plugin right i'll just hit command p you can search menu commands or plugins i will usually search for a plugin called iconify

 right while this plugin launched i will just drag this over here boom there you have a radio button already so i could also use this quick action to do other things like say i want to add a comment use as a mask you know even you want to tweak the notch amount so that when you nudge it it will be eight pixels and sometimes

 if you forgot what's the shortcut key for color picker for example you can just type color and you click on it you can pick your color straight away color picker is always i for example if i have turned these into components and i'm

not sure which component is part of the design system i'll just hit command y to view outline and once the outlines are visible anything that is purple means that it's already a component and i'll try to convert as much as possible

into components so that i have a better scalable design system when you want to duplicate something hold on option and just drag this thing so that you could have duplicates of this or you could press command

d you could also duplicate this by holding an option and just dragging if you just keep on like letting go of the option key you could undo your action so yeah this is one of the tips is to duplicate something another tip

 i like to share is so press one it will bring you to the entire art board and fit to your screen if you are trying to work on this text here you can tap two to zoom in into this selection another tip is for example if i am trying to gauge

 you know what is the box size for this sometimes i want to adhere to my margins on the side and i want to keep the equal spacing i will just do a math here like for example misusing the 20 pixel margin on the side but let's say

 i want to split into three boxes say the middle spacing would be 12 pixels i will just deduct 12 by two times divide by three so now that you can see there are faces in between is 12 pixels and they are aligned to the margin on the

 sides so yeah this is one of the math you could do on the side for example if you have a progress bar and you're trying to illustrate step one to five you could just take one of these 335 full length divided by 5 steps times 1 and

 this is obviously 335 because of the last step so now you have progress bars that are precise so in a case where you know you are trying to export multiple icons or your developer ask you know how can i export multiple icons

at your file because i don't want to export one by one so there is a trick for this so once you have selected all your icons tap on export here add all the different sizes that your developer wants to export to be in for example

 i want to export svg and png and i will just tap on command shift e here to batch export all these icons and you can straight away export them so back export icons is really helpful in figma another really quick tip that you could use is for example

 if you want to copy a font style or a photo right you could just hit on command option c and command option v to paste it and now you have the same font style if um say you want to copy this style and paste it here you

can as well even for photos right you could do the same so i'm just going to command and select on this photo here command option c to copy the style command option v to paste it over on this iphone photo and you get the same thing so this is really useful if you want to work fast and ensure that your design styles

 are consistent with other components so yeah and if you have a small screen like me you could just press command and full stop to hide or show the ui you could also tap on command 1 to go back to your space or tap on command

 2 to go to the first page or the third page in the case where you have a 16 pixel icon here and it is in the form of a stroke when you resize this icon it will actually resize the stroke you see it will look thicker when it's smaller and looks

 thinner when it's enlarged how do i ensure that my icon strokes are uniform i will take this icon just hold option to duplicate it i'll hit on command shift o to outline this stroke so that when it's enlarged see it's gonna be uniform another

 way is command e this and it will be flattened so yeah this is to outline your strokes using command shift o if you have multiple icons here and for some reason you want to lay them in a layout just tap on shift a to create an auto layout immediately you could tap here to make it vertical or horizontal you could even add

padding around these icons and if you change your mind you want to make it back to horizontal you can so yeah this is auto layout and just tapping shift a sometimes you want to batch rename your layers so let's take this example that i want to rename three of these frames here on figma select these frames hit on command

 r to rename all of them and say i want to rename this to explore and i'll just put something like this so it will rename these layers according to the number so yeah this is how you can rename layers by batch by just hitting command r for example i duplicated this thing and i want to move it over here without it coming out of the frame

 how do i do that right i want it to still stay in that frame just now i'll just drag this inside here i'll hold on space bar and look at it if i let it go it will still be in this frame here so if i hit spacebar again it will be inside this ring so whenever you're

 in a frame that you want to keep it in there just hold space bar and it will be just quietly and happily in this frame and when you're

presenting your designs to a stakeholder and you're viewing it in prototype mode um you can tap on z just keep tapping on z where you can fill your screen zoom to 100 or fit to your screen you can tap on command dot to show

 the toolbar so that it doesn't distract the user these are all the controls that you have and the last tip is you know when you are creating something always use frames because if you turn it into a group the sizing is going to be weird

 but if you turn it into a frame which is like this for example if you're creating a button instead of creating a rectangle at the back you know turn this into a frame instead so always leverage on frames and sigma and your designing

 file is going to be way more cleaner you could still clip content you make sure that your button text and all that doesn't go out of the frame you could drag these and you know prototype it whereas for a group you can't do that because

 it's not a frame so try to keep your designs in frames instead of groups if i want this to be an icon i will just use command option g to frame them together i'll just group these two but frame something outside of it so it will be

 easier for me to select everything in the frame when i group them together so yeah these are my 15 tips for you to design faster in figma let me know if this video helped you i hope that you have found some new tips that you have never seen before

 i hope these tips help you save time be more productive at your work if you like what you see subscribe comment