10 Figma Tricks I Wish I Knew Earlier

Figma hacks you might not have heard of.

I’m consistently impressed by all the useful features Figma has baked into their app. What used to be a workaround in Sketch is now a thought out feature in Figma — a breath of fresh air.

I frequently stumble upon time-saving features that I wish I knew about sooner — hopefully, some of these are as exciting for you as they were for me when I discovered them.

1. The easiest progress ring you’ve ever made in your life

Tutorial:

···

Maybe it’s just me, but I had no idea about the arc tool until I randomly dragged it one day and had my mind blown. It makes for some really simple and beautiful progress rings.

2. Use the scale tool to avoid distortion

Keep your designs pixel perfect with the scale tool — simply select what you want to scale, then pressing K on the keyboard, drag, and voila.

I was always reluctant to scale designs in the past because something always broke, and I’d have to make adjustments. With the help of the scale tool, those worries are no more — everything scales perfectly and maintains its proportions with no rework needed.

3. Drag objects outside of a frame while keeping them inside it

Hold spacebar while dragging an object outside of a frame for it to remain inside the container. You can also turn off “clip contents” for the frame that contains the object so you can still see it when it’s outside of the container — you can also press CMD (CTRL)+ Y to reveal the outlines.

4. Tidy up, swap position, and organize grid

Tidy up your designs by clicking the grid icon in the corner after selecting multiple objects in an array. This makes all spacing between objects equal, and you can then drag objects to re-arrange them and adjust their spacing.

5. Duplicate the last action

CMD + D to duplicate your previous action. CMD + D will also duplicate objects, frames, and anything else.

6. Preview a color with the eyedropper

When using the eyedropper tool (i) hold down instead of tapping to preview different colors.

7. CMD + / unlock all objects

CMD + / has a ton of useful quick actions that will save you tons of time in your workflow. If you’re not using it, I highly recommend seeing what’s available in the menu. An action I use a lot is quickly unlocking all my objects and changing fonts.

8. Easily drop images inside placeholder shapes

CMD + Shift + K to replace the fill of shapes or frames with a bunch of images.

9. More tricks with spacebar

Drag a selection area and then hold space to increase the selection size of your pointer.

If you’re drawing a shape, you can also hold space to move the object while drawing it.

And if that’s not enough, you can also hold spacebar to override Figma from automatically nesting objects inside frames or auto-layouts — spacebar is very handy!

10. Content Reel + Unsplash

Content Reel and Unsplash have been two indispensable plugins to save time and avoid “John Doe” as the name I use for every user. With Content Reel, you can plug avatars, lorem ipsum, names, addresses, and so much more into your design with one click. Unsplash is a library of high-quality graphics free to use.

11. BONUS! Fix line height in seconds

If your line-height looks wonky and you don’t have a specific value just type “auto” into the line-height field or delete whatever number is there and press enter and it will adjust auto-magically!