8 Figma Best Practices To Speed Up Your Productivity

Cheesecake Agency has decided to share some of Figma’s best practices that will help you to speed up your productivity. As we’re a UI UX Designing Agency we spend our time designing with Figma. We have some best Figma best practices for you and your team’s efficiency!

Even if you use Figma every day, these 8 practices can help you to speed up your productivity for sure. It’s a lot of fun to design in Figma (click here to have more fun while collaborating with brands). It’s very easy to use, quick to respond, and an intuitive tool.

While it is simple to use, there are several updates and features they have launched in May. (Click here to know these updates). BTW, let’s get back to our best practices!

1. Use base components

If you have a big number of buttons, inputs, and other variants, it will cost you a lot of effort. Such as if you decide later that a 6px radius looks better than an 11px radius, or if you need to make any other changes.

You can make a single modification to your base and have it propagate to all of your variant instances by leveraging base elements for your variant sets. To do so, you can:

• Create a base component that contains all of the elements required for defaults, icons, hovering, errors, and other variations.
• Then it’s just a matter of hiding non-essential features in multiple ways!

Note: Base components do not need to be included in your component collection to be used. They can be used both on the same page or in the same framework.

2. Apply styles to every design

Consider color, text, effects, and stroke components while creating styles. When a UI UX designer uses styles in the designs and wishes to play with new colors, stroke density, typefaces, and so on, they can make one quick adjustment and the design will update itself across all places where that style is referenced.

Just use the dropper to fill in colors where you want to. This practice can help you design as best as possible. Styles will save you time and money both in the long run by allowing you to make changes as quickly as you want.

Tip: Use the slash naming scheme if you want to divide your elements into categories like “Primary Colors.”

3. Use auto-layout to stay organized

Organizing and re-ordering components is super easy using Figma’s auto-layout. Perhaps one of the most critical skills for every UX UI designer should grasp is auto-layout.

You can also save time while deleting material, adding content, generating rows, making responsive elements, and so much more by implementing the best practice of designing with auto-layout.

Also, have you ever noticed that you can also use an auto-layout to organize your variants? No? Here’s how you can:

• Press Shift + A while tapping on the frames of a variation set.

Tip: you can use auto layout to design every page so that you can quickly alter spacing, and add or delete elements without having to push pixels to re-align elements.

4. Make use of constraints

Use constraints to instruct Figma how items should respond when you alter your frames to keep them structured and adaptable. Constraints allow a UI/UX Designer to manage how designs appear on various screen sizes and devices. Also, you don’t have to make changes every time you want to adjust a frame.

Tip: To ignore the constraints imposed on objects in a frame, just hold down CMD or CTRL while adjusting the frame.

5. Create component layouts

It’s fantastic to create a component for a business card, but what if you have a list of different preferences? This is where layouts come in handy. Brad Frost suggested the idea of layouts in his book “Atomic Design Methodology” and it’s a simple concept.

You can simply drop this layout into your design file, and you will only need to make changes to your main element. Or only if you need to add content or tweak the spacing between the elements.

6. Organize everything

Nothing is more frustrating than opening someone’s design file and finding that you can’t make changes to the core aspects without right-clicking and choosing to go to the main component because they’re not separated from the designs. Such a long procedure, huh!

This disorganization will inevitably backfire, so you can usually put all important aspects on your page or area of the design file, far away from your work. This makes updating elements and spotting inconsistencies a breeze.

Tip: To stay more organized UI & UX designers can use page headers for icons, colors, styles, buttons, and other elements.

7. Use outline mode to preview the elements

If you want to double-check that the design or framework is correct or not then you can practice using outline mode. When you need to see the accuracy of the layout and arrangement of elements, this way is much better. To use this feature:

• Press CMD + Y. To turn it off, press the shortcut once more.

8. Integrate components in a different framework

There is no easier way than this to integrate your components into a different framework. All you have to do is to choose the components you want to integrate then copy them from the original file, and paste them into the new location.

Note: If the document is a library, any documents that use it will receive an update informing you of some deprecated components. All you have to do now is double-check the modifications and navigate to the new framework.

Final Words

Did you know about all of these practices and tips before? If not then share it with other designers too. These practices can actually speed up your productivity and save you time. Also, if you want more tips n tricks, you must check out this blog.

Let’s dive into designing more together! Follow us on LinkedIn and Instagram. And don’t forget to follow us on Medium for more Figma and designing-related information.