Advanced Figma Tips & Tricks | 2022 – by

In Web design

Advanced Figma Tips & Tricks | 2022 – by - 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 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 where  you find all my courses on UX/UI and Figma

moonlearning: Advanced Figma Tips & Tricks | 2022 – by - Web design