As you all loved Advanced Figma Tips & Tricks Part 1, here is part 2! As usual, Figma did not fail to impress and come out with some fantastic new features and hidden gems hiding in plain sight (and some stuff that has been there forever and I just did not notice till now). So here are my top Tips & Tricks by moonlearning.io to make life with Figma even more fun!

···

Video version of this article:

There is also a video version of this article if you prefer to see the tips and tricks in the workflow.

By the way, I am using Mac shortcuts. If you are on a PC please swap as shown below. This works for most cases. There are some edge cases that I will make sure to mention.

···

1. Quick copy file link (cmd+L)

Inside your file, press cmd+ L and it will copy the file’s link to your clipboard. You can now share and paste anywhere.

···

Share specific selection

If you have a specific page, frame, or element selected, the file will jump to your selection when opened with the link. Nice!

···

2. Quick embed elements and prototypes outside of Figma

Use the hotkey cmd+ L to copy the link to a specific page or frame and simply paste it to embed outside of Figma. You can either share the whole canvas or pick a specific frame to share. This is absolutely amazing for documentation, design systems, and style guides. But also to showcase on other websites, like right here in Medium is how I embedded the images below, go ahead and try it:

Now the best: Embed prototypes. This also works for prototypes. This one really made my day when I discovered it, so sweet! Oh, and it updates automatically of course!!! Go ahead and click (setup for desktop):

···

3. Nudge text, color, and values

Select a colored shape and open the colors menu, keep shift pressed and move up and down as you would with nudging. You can see the color “nudge”. If you use the mouse wheel, you can change the hue of the color. If you keep alt pressed while zooming, this will change the opacity too. You can also nudge any other field, such as line-height.

Tip: Use 4 or 8pt nudging on Typography and line-height to set up your type scale in your rhythm! By the way, the default nudge is 10, to change it press cmd +/ and type “nudge”. Make sure to keep alt pressed when nudging to see the distances.

Change nudge amount:

···

4. Scrubbing fields

When hovering over some properties fields in Figma, a scrub arrow appears. Simply press your mouse key and move the arrow from left to right. Hold shift to increase scrub speed. This works with any value field that displays the scrub arrow when hovering over it. How could I not know this!

···

5. Copy as PNG without exporting

Press cmd + shift+ c (or access via right-click menu) to copy the frame as a png to your clipboard. You can now paste it anywhere inside or outside your file. I love this for a quick copy for presentations, slack or emails, and making my mockups without exporting.

···

6. Left-right honor grid!

I cannot live without this one. It has been around a bit but is still worth mentioning. When you set constraints while having a grid added to the frame, the (not nested) items will take the columns as their parent container. If you want your elements to behave perfectly with the grid then set them to left-right.

This works nicely for text and groups or other frames. It will not work on the auto-layout setting. Little trick: just package your auto layout inside a group you can then set constraints on that group.

···

7. Component naming with pages & frames

You were probably familiar with the “/” naming convention for components. Did you know that adding a master component to a frame gets organized the same as with a “/”? And it gets better. You can also use pages to create meta categories.

This way, you detach organization from naming and can re-organize components in a second simply by dragging them to a new frame. And your component names are nice and short.

In my example, I created one page for mobile and one for general (I could set up one for each breakpoint, or one library for web and app, android or iOS, you get it). Inside the page, I simply have my frames where I place the components. It could be single components or component sets with variants.

Tip: If you are importing from Sketch or an old Figma library and have the usual “button/primary/active/more stuff/andmore” you can set up the page and frames and then simply use the batch rename feature in Figma and remove all prefixes with regular expression.

···

8. Screenshot right into Figma

This will keep your desktop nice and tidy. Ok, get ready to twist your fingers and press shift + ctrl + cmd+ 4 to make a screenshot (+ spacebar to capture an entire window). This will save the screenshot to your clipboard instead of the desktop. You can now paste it right into Figma with cmd + V . Windows try alt + print screen.

You can now use Figmas tidy-up feature (select all similar-sized items, and you get the little square icon in the bottom right corner) and arrange function to get a nice overview of your research. So nice!

Tip: Double click while holding alt and you can crop the image directly

···

9. Copy editable SVG from the browser

Instead of downloading SVGs and importing them back into Figma, you can copy SVGs directly from the code of a page. Select the SVG image and right-click to select inspect mode. Click the image source again. Then in the image view, right-click for inspect mode again, and then on the whole SVG element (!!), right-click and choose “copy element”. You can now paste it into your Figma file, and it will remain a scalable and editable SVG which all its layers.

···

10. Deep detach multiple instances

If you have an item with many nested instances you want to detach, open your quick search menu with cmd +/ search Instances you can now choose to detach all instances or detach all nested instances but they keep their setting such as frames and auto-layout. And yes, we only detach if our life depends on it!

···

11. Object hierarchy tree

Right-click and go to “Select layer,” and you will get a full overview of the current selection, the group it is in, and what’s above and below it. Now navigate where you want to go without searching in the layers panel.

···

12. Add properties to unions

If you make a union, you can now use things like radius to smooth edges. You can still manipulate the single elements of a union. And by the way you can also use your components and add them unions or create unions, they will then follow the set colour and property styles.

···

13. Bulk sort and move styles

I spent a lot of time naming my style with the / convention, especially with typography. This can drive me a little insane. So to find out that you can group them in the properties panel made my day.

Select the styles and press cmd + G to group and then name. You can now sort and drag styles within and between the folders.

···

14. Add _ for private styles

Want to set a style but not quite ready to share it? To ensure it does not get updated by accident just att a _ to the name e.g. “_highlight” and it's all yours.

···

15. Use descriptions for styles

When naming your styles, you find a little field below, called description. Your description will be added to the descriptive tooltip when someone picks the style. I love using this to add more information about the style’s purpose. This used to show up in inspect mode too, but it seems like that was changed.

···

16. Did you know that images can be styles?

You can save images just like color styles (just be aware resolution obviously starts playing a role). You can now fill any shape, including text with the fill.

···

17. Using color names

Did you know that you can just type in a color name in the color field? Probably nothing for your neat and final UI Design but handy for quick testing or highlighting things when Debugging. All W3 CSS Colour module names are supported (they are a bit mad, so I usually stick to green, blue, and yellow).

···

18. Ignoring auto-layout

I love auto-layout, but sometimes it’s super annoying if you want to just add or try out an element quickly. There is a little trick I did not know about, and I wish I had! Just press the spacebar as you drag for it to be added above the auto layout set.

···

19. Quick auto-width text

Want a text to be set to auto width? Easy! Just double-click on the text box. done.

···

20. Toggle design & prototype (shift+E)

This one is also one of these odd obvious ones I just did not use before. With shift+ E you can toggle between prototype and design mode…such a time saver.

···

21. Set any frame as a thumbnail

Before, you had to setup up the top page of your design as a thumbnail. No more! You can now simply pick a frame and make it into a thumbnail. Nice! Select a frame, right-click and select “set as thumbnail”

···

22. Hide cursors of others

Don't want to see all your coworkers floating around the shared file while working? No problem, you can just hide them via Menu>View>Multiple cursors or simply press alt + cmd +/

···

23. Use % for line-height

In Figma, line-height is set in px/pt, which drives me little nuts. I like using generic ones like in CSS, so something like: line-height=1.5. Unfortunately, you cannot set it in CSS units, but you can use %. This also allows changing the font size and keeping a unified line-height.

To calculate it: text: 16 ad 1.5 or 150% line-height would be the same as 16*150%=24px /pt. By the way in inspect mode, this will still show as px!