Learn & Grow with Figma-User Guide 2022

Figma is by far the best tool I have used for high-fidelity mockups in my journey as a UX designer. Gone are those days when you had to rely on different tools for design and wireframing differently. With Figma, you can unleash your inner UX designer. With more and more digitalization and businesses coming online, the demand for UX designers is increasing by the second. And time constraints are also in effect. To save time and do more in less, Figma has some amazing tricks under the sleeve that you can use for a smooth workflow and make an amazing design very fast.

Had I known these tips and tricks earlier, Google would’ve hired me.

Whether you're a Figma newbie or a seasoned pro, you've probably discovered that there will always be more efficient ways to do your work. After using Figma for quite some time, I frequently come across amazing, time-saving functions that I wish I had discovered sooner. Nonetheless, these Figma hacks are quite impressive and useful for work, making your website design tasks easier, faster, and more productive.

With that being said, let’s look at some amazing Figma tips and tricks that will enhance your Figma designs for sure!

Figma Tips and Tricks for Amazing Figma Designs in 2022

If you're a UI/UX designer or a web designer, you've probably heard of Figma and what it can do for you. But did you know that you can now simplify your task with some simple Figma tricks and tips?

Figma, a relatively new tool in the design and experimentation world, has come a very long way since its initial release in 2016. This cloud-based, user-friendly application allows you to create applications, webpages, and other Ui elements that can then be merged into other projects.

Let’s keep the ball rolling!

1. A for? Auto Layout!

You can use Figma's auto layout feature to implement dynamic frames that adapt to their contents. This amazing feature can be used to create buttons that recompress based on their text, lists, or columns of components that can be conveniently rearranged or even nest auto-layout frames inside other auto-layout frames.

2. You Can Update Nudge Amount up to 8px

A base unit of 8px is frequently recommended for a range of reasons and must be used continuously for all sizing and spacing tasks. You can make this easier for yourself and your team by changing the "nudge amount" in the Figma app to 8px. This way, every time you switch or change the size of an object, it'll be in 8-point increments.

How to use the nudge?

You just press the shift + arrow key (to use the nudge)

You navigate the menu and click on preferences. Then select nudge amount and choose 8px. (To change nudge amount)

3. Use Blurs!

Blurs are Figma effects that can be implemented to objects. Layer Blur and Background Blur are the two main types of Blur effects that can be implemented from the right sidebar.

Layer Blur is the most common type of blur, whereas Background Blur can be used to blur a particular location of your design.

You can find the blurs option on the ride side under the effects option.

4. Rename Multiple Layers – All at Once!

It's critical to keep your file organized, with a clear naming framework and hierarchy for all of your layers. This task is greatly accelerated by Figma's "Rename Layers" prototype, which allows you to change the name of layers in bulk. You can change the name of each layer to be the same, to have a number suffix, to have distinct names with a prefix, or relabel only part of the layer's title.

To navigate the Rename Layers prototype, right-click layers and select "Rename."

5. Embedding Elements & Prototypes Outside of Figma Real Quick!

Copy the link to a particular page or frame using the hotkey cmd/ctrl+ L and easily paste it to embed outside of Figma. You can either try sharing the entire canvas or a specific frame. This is incredible for documentary evidence, design things, and style guides.

This is also applicable to prototypes. This one made my day when I explored it; it's so sweet! Oh, and it, of course, updates automatically!!!

6. Scrubbing Fields

Figma designs can be made faster if only you knew about scrubbing fields!

A scrub arrow appears when you hover over some characteristic fields in Figma. Simply move the pointer from left to right with your mouse. To increase the scrub speed, hold shift. This works for any value field that shows the scrub arrow once you hover over it. How could I have missed this?

7. Get a PNG of your Designs, Without Exporting

To replicate the frame as a png file to your clipboard, press cmd/ctrl + shift + c (or access through the right-click menu). You now can paste it anywhere within or outside of your file. I like using this for a quick copy for briefings, Slack, or emails, as well as making mockups without exporting.

8. Screenshots – Right into Figma!

It will keep your computer looking neat. Now, bend your fingers and press shift + ctrl/cmd + 4 to capture a snapshot (+ spacebar to snapshot the whole window). It will copy the snapshot to your clipboard rather than your desktop. You now can paste it directly into Figma by pressing cmd + V. Try alt + print screen on Windows.

You can now use Figmas' tidy-up function (select all similar ones, and you'll see a small square symbol in the bottom right corner) and arrange the function to get a complete overview of your study. Wonderful!

9. % For Line Height

Line height in Figma is set in pixels, which drives me insane. I prefer to use generic ones, such as line-height=1.5 in CSS. Unfortunately, it cannot be set in CSS units, but it can be set using %. This also allows you to change the font size while maintaining a consistent line-height.

10. Figma to HTML!

Figma to HTML is a Figma widget that allows you to easily translate your Figma layout to code without losing any of your configuration or colors.

This is accomplished by employing only good design principles and guidelines to achieve the desired result of an exact copy of your layout in code form.

Let’s talk about some tips that will make you a better Figma designer:

1. Mobile-first designing

Big things start small, and User experience is no exception. Smaller screen sizes contain less content than larger screen sizes, so instead of customizing from large to small and deciding which item on your screen to hide, you can design smaller screens first with the essentials and then add the extra components as the screen size increases. Another benefit of designing for a phone is that it has fewer features most of the time, giving you the breathing room, you need to focus on the brand-building aspect. When you're finished, you can increase the screen resolution and gradually build up, confident that you understand what you're doing.

2. Use a color wheel

At a glance, colors are the most remarkable feature of product designs; they speak a unique language. In today's fast-paced world, patience is at a premium. The colors you choose will ascertain whether you can keep potential users' attention sufficiently for them to listen to what you have to say. A color wheel is an often-overlooked tool. Understanding the fundamentals of the color wheel would vastly enhance the aesthetic aspect of your layout, not to mention save you time deciding which colors go together.

3. Use font scale

It's not a dumb choice to use a preset font scale with predefined parameters for headings, subheadings, contents, and so on. This eliminates the need for randomized selection in your typography procedure. Using this measure in your design phase will help you stay coherent without even attempting. Figma's 'font scale' plugin is useful for this.

These were some of the tips & tricks that I have learned this year, and by the end of 2022, you will also be acing in Figma using these. Your Figma designs would be on another level if you tried even a single tip or trick mentioned in this article.

With that being said, unleash the hidden UX designer in you to make wonderful designs.