In Web design
Advanced Figma Tips & Tricks | 2022 – by moonlearning.io - read the full article about Figma, Web design and from moonlearning on Qualified.One
Youtube Blogger
Welcome to this video about advanced Figma tips & tricks by moonlearning.io moon learning is an online learning platform for UX/UI Design and Figma in this video are some takeouts of little hidden gems that we found throughout our videos. I am working on a mac if youre on a pc then just make sure to substitute the keys accordingly. Lets jump right in and start with one of my favorite Figma features. Left-right honor the grid. I cannot live without this one and its been around for quite a while but still worth mentioning. When you set constraints while having a grid added to the frame then the nested items will take the columns as their parent container. So here I have a frame without any grid added to it, and you can see that the direct child element if I add constraints here, that they will align with the frame because thats its direct parent. Now if i add a grid and make sure that this child element is placed within one of the columns you can see that the constraints now use the grid as their parent element.
So if you set your elements to left right theyll behave nicely when resizing the grid. Ignore auto-layout. I love auto layout but sometimes its super annoying if you just want to try out an element quickly and not position it yet. Theres a little trick press the space bar as you drag and it will add the layer above the auto layout and thereby you can just see if you like the positioning or not.
Quick copy file links. Inside your file press command+L and it will copy the file link to your clipboard. If you have a specific element selected while creating the link then the person opening the file with this link will jump directly into that element, however still have access to the whole file. Quick embed elements and prototypes. You can also embed links that you created with command+L from Figma anywhere outside your Figma file. So here for example, Im embedding my canvas into my Medium article. I can either embed the whole canvas or i can copy the link to a specific frame or element and share that. This is really amazing for documentation and design systems or style guides as well. My favorite part about this is that you can also embed prototypes like this. Simply copy the link to your prototype and then paste it into your style guide or article save it and then anyone looking at it can click through your prototype.
Nudge text and color values. You can move any element in Figma with the arrow keys on your keyboard if you hold shift press then it will jump and thats what we call nudge in larger amounts. Per default the nudge amount is set to 10. you can change that by pressing command and forward slash to open the quick search menu and simply type in "nudge" you can now alter the amount. I like having it set to 8 as Im using an 8 pt spacing system now my elements move in steps of 8. if you keep "alt" pressed you can see the distance to any other element which is really great for positioning. So besides nudging positions, you can also nudge things like the text, which is really great if youre working with an eight point spacing system. Then you can have this multiple of eight or also change your line height, you might want to change it to four if youre working with a full baseline. But it doesnt stop there you can also nudge color. Select a color and then nudge up and down to move it along the color wheel if you move your mouse wheel you can also change the hue of the color and if you keep all pressed while zooming in and out with your mouse this changes the opacity.
Scrubbing fields. When hovering over some of the property fields in Figma the so-called scrub arrow will appear simply press your mouse key down and move the mouse from left to right to scrub the value up and down. Hold "shift" to increase the scrub speed Copy a png without exporting. This has been a total time saver for me. Before, if I wanted to share something outside of Figma, I had to export it now i simply press command+shift +C to copy the frame as a png to my clipboard. I can now paste it anywhere inside my file for example into mockups. Or I can also make a copy and share that for presentations in slack or via email. Only assets for development stay with my export panel as I need different resolutions. Component naming with pages and frames. You are probably familiar with the "/" naming conventions for components but did you know that adding a master component to a frame gets it organized the same way as using a "/"? this is really amazing because you can simply set up frames in different categories and then add your components to it. This way you not only detach organization from naming, but you can re-organize components in a second, simply by dragging them from one frame to another. And your component names stay nice and short. If you have a document that is for example a standalone library you could go even further and use pages to add one more level of organization You could set up different pages for different breakpoints and then store your components within them. Ive seen people using pages for different libraries such as Android and iOS within one document. Be creative with it. Screenshot right into Figma. This will keep your desktop nice and tidy get ready to get your fingers twisted a bit though. Press shift+ctrl+command+4 and just make a screenshot. This will save the screenshot to your clipboard instead of your desktop and you can now paste it right into Figma. If you do the same shift+ctrl+command+4 AND press the spacebar then you can print the whole screen.
With the tidy up feature inside Figma you can now arrange everything nicely if you have different sizes you can also just use auto layout to arrange it little trick just double click while holding alt and you can also crop the images directly Copy editable SVG from the browser. You can copy SVGs directly from the code of a page. Select an SVG, right click and select inspect mode now click on the image source to get the view only of that image you can now select the SVG and make sure that you select the SVG and not the little code highlighted and then right click again and choose copy element. You can now paste it into your Figma file and it will remain scalable and editable just like any other SVG.
Deep detach multiple instances. If you have an item with many nested instances that you want to detach, simply open your quick search menu by pressing command+slash and search "instances". You can now choose "detach all nested instances" And of course we only detach instances if our life depends on it, or for copying something over from the community section. Object hierarchy tree.
choose any element and right click and then go to select layer. Youll find a full overview of the current selection, the group it is in, and whats above and below it. Now navigate wherever you want to go this is really great without having to search your layers panel.
Add properties to unions.
Did you know that if you set up a union in Figma, you can still use properties such as radius to smooth edges? You can still manipulate a single element of a union and by the way. You can also add other elements to take on all the properties you just set. This also works for component which is quite cool. Bulk sort and move styles. I spent a lot of time naming my styles with a slash naming convention. Especially with typography this can drive you a little insane and theres a great shortcut. Click on the grey area of your canvas to get an overview of your styles in the right hand menu. Now simply select the styles you want to be grouped together press command+G to group and now you can name the folders. You can also move styles in between folders.
Use description for styles. When naming your style you find a little field below called "description" thats often ignored. Anything you put in here will show in a descriptive tooltip when someone picks the style. I love using this as it helps me to add more information about the styles purpose.
Underscore for private styles.
Want to set up a style but not quite ready to share it? To ensure it doesnt get uploaded by accident to your team library just add an underscore to the name. In this way once youre updating it will not be added to the list. Did you know that images can be styles? You can save images as a style through the fill menu, just as you would with color. You can now fill any shape, including text with that fill. Using color names. you can type in color names into your text fields and it will be applied as a fill. Probably nothing for a final brush up UI design but really handy for some quick testing. Quick auto width text. This is a quick one indeed. If you want your width to be set to auto, then simply double click the text box. Done! Toggle design and prototype.
this is also one of these obvious ones that i just didnt know about. With shift + E you can toggle between prototype and design mode which is such a time saver. Set any frame as a thumbnail. Figma always uses your first page as a thumbnail. If you want to set another thumbnail, simply click any frame that you set up right-click and select "set as thumbnail". Hide cursors of others.
Dont want to see all your co-workers floating around the shared file? No problem simply press alt+command and forward slash. You can also go to the menu via menu>view >multiple cursors to set this. Use percentage for line height. In Figma line height is set in pixels which drives me a little nuts. I like using generic ones like in css so i want something like 1.5 Unfortunately that cannot be set up in Figma, however you can use percentage, this also allows me to change the font size and always keep my unified line height. By the way in inspect mode this will still show as pixels. If you like this video hit the subscribe button there is more coming. Also make sure to visit moonlearning.io where you find all my courses on UX/UI and Figma
moonlearning: Advanced Figma Tips & Tricks | 2022 – by moonlearning.io - Web design