Figma is a great tool for businesses. It has lots of features and layers that you can exploit for each of your needs. There are some simple tricks that empower you to design faster with Figma. These tricks include some shortcuts and capabilities not written anywhere special. However, if you’ve worked with computers long enough, you already know some of them. In this article, we will introduce some of the ways that you can get the most out of your experience with Figma.

Top Web Design Services
Top Web Design Services

No Repeat Grid?

If you’ve worked with Adobe XD before, you know that there is a feature called Repeat Grid. Using this feature, you can duplicate a shape several times to form a repetitive grid of that shape or component. In Figma, you can control this in a different way. When you duplicate a component with Ctrl + D, and then, when you move it around, Figma remembers the pattern and the spacing. If you do Ctrl + D once again, the component will be placed with the exact same pattern and spacing that you determined for the previous copy. You can do this several times to form a repeat grid in whatever direction that you want.

Spacebar Tricks

Spacebar tricks are a huge thing when it comes to Figma. You can transform the way buttons and functions work just by holding the spacebar while doing them. The first thing that you can do is hold the spacebar while selecting some components. Then you can save that selection size and go around with it to select other components.

Another cool thing you can do with the spacebar, is holding it while resizing a shape. When resizing a shape, holding the spacebar makes you be able to move it around to adjust its position.

One last cool thing you can do is when you want to drag a shape or object into frames or auto-layout frames. Holding the spacebar while doing so will stop Figma from arranging the shape into the frame automatically. This allows you to place it wherever you want.

Quick Actions

One of the things that will save you lots of time while you design with Figma is the quick actions menu. If you ever need something but can’t remember what is the shortcut for it, you can use Ctrl + / on Windows or CMD + / on Mac to access the quick actions menu. In this menu, you can access plugins and various other kits, too. In the example below, we are using the quick actions menu to unlock all of the objects and see the keyboard shortcut for it.

Smart Animate and Delays, Perfect Prototypes

Making prototypes have never been easier using Figma. One of the things that is easier on Figma than other UI/UX design software and applications is that you can easily share your prototypes and other people can see your changes to the prototype real-time. One of the greatest things that Figma enables you to do is creating animations using the prototyping smart animate and delay features.

It works just like any other animating software. You can transform each frame into the other as long there are objects on the next frame that correspond to objects on the previous frames. Then, you can add the delay feature instead of “on click” and have the objects move around for you according to the passage of time. You can control all of these in the Prototype section of your workspace.

This functions works like the image below.

The prototype for this turns out to be something like the GIF below. You can see that we only click once to trigger action, and then, it moves on by itself to the next frame.

You can use this in much more advanced types of animations, such as the example below. As long as you understand the process and how it works with respect to the way each object gets displaced and where it is located next and how the sizing and the coloring of each object changes, you can create complicated animations.

Eyedropper

This last one helps you a lot if you just want to see all your color options on the screen. You can easily go around the screen and see different colors with their color codes.

Conclusion

There are much more things that you can design with Figma if you unravel the power of plugins. There are plugins such as Unsplash and Content Reel that help you create randomized content for your designs without ever having to type. You can also have ready stock photos for your designs to help you before you get things finalized. The only tip is to practice and just keep practicing. If you need help with your web design process or need a website built, you can always contact the professionals at PengYi Labs to help you in no time.