Little Figma tricks that saved my time.

Here’s a list of some tricks that helped me design quicker and more efficiently.

1. Auto Space anything and everything.

Starting of with the easiest trick that you might have already known. Figma has a feature that auto spaces items for you.

Simply select all the shapes or groups you would like to space equally and click on the little blue icon in the corner. Once clicked, Figma will auto space the selected items equally. You can also easily adjust the spacing amount on the design panel on the right.
Before this feature I would spend a lot of my time arranging groups individually. This was extremely time consuming and inefficient.

2. Resize instantly.

Next trick is about resizing anything. Whether it is a shape, frame or more. Easily resize without having to do the math.

Simply adjust your selected shape size by adding, subtracting or even multiplying. Figma will auto resize your item with the intended equation.
Prior to this trick, you would find me with a calculator trying to figure out the math. After learning about this feature, I spent lesser time on resizing frames and working more efficiently.

3. Figma’s colour magic.

This might be a little feature that you definitely did not know of. Instead of having to guess the HEX colours, Figma does the work for you!

When looking for a colour, simply type your preferred colour and Figma recolours for you.
Do note that this trick is limited to Figma’s colour palette list, so be mindful and stick to basic colours.

4. Rename frames in seconds

One annoying thing about designing is when your work is left with multiple unnamed or weirdly named frames (eg; Copy420). It is a tedious task to rename all the frames individually. Hence, this rename feature does wonders.

Easily select all the frames you would like to rename. Right click on the selected layers and select rename. On the pop up, input your preferred frame name. As a bonus, Figma allows you to even number the frames. Save by clicking on rename and all your selected frames are renamed.
This works amazingly for wireframes & flows, really helps with keeping your files cleanly organized.

5. Auto layout is your weapon.

Similar to trick no.1, auto layout revolves around spacing and cleaning up your design. In my opinion, auto layout is an underrated feature that really increases productivity.

Simply add auto layout to selected group and auto adjust the spacing. You can add and remove items whilst auto layout cleans up your design. This works great for components or even little groups.

6. Variations are a life saver

This might be the most complex yet manageable trick from the list. In short, with variants you’re saving time from having to create multiple different variations of the same design.

Remember to always start with a component. Select the component and click on create variant on the design panel on the right. Rename your property to an overall class and set variants accordingly.
Example; the property is Happy? and the classes are yes for a happy icon and no for a sad icon. Once this is done you can see your component now has a toggle for you to easily switch between the two icons.
This is a simple example, works great for changing statuses of checkboxes or radio buttons. However, you can go wild with variants and even create multiple different possibilities to your convenience. Example create variants of components or platforms or error messages… The possibilities are endless!

To sum up, these are just a list of little tricks I put together that saved my time, increased my productivity and helped me work more efficiently. Have a look at some of these articles by fellow designers for more tricks:

···