webdew-logo-new_v2-1
   
webdew-logo-new_v2-1
Close
  • Services
  • Work
  • Resources
    • Knowledge
    • Ebooks
    • Tools
      • Website Audit
      • Website Grader
      • HubSpot ROI
  • Blog
  • About
Let's talk

  • fb-icon-01
  • tw-icon-01
  • insta-icon-01 (1)
  • linkedin-icon-01
  • youtube-icon-01
website-green-icon
Websites
  • Website Designing
  • Website Development
  • Website Migration
  • HubSpot Website
  • WordPress Website
  • Growth-Driven Design
video-blue-icon
Videos
  • 3D Videos
  • 2D Animation
  • Whiteboard Animation
  • Video Ads
  • Explainer Videos
  • Testimonial Videos
  • Onboarding Videos
  • Tutorial Videos
  • Social Media Videos
  • Product Demo Videos
marketing-yellow-icon
Marketing
  • Inbound Marketing
  • Inbound Consulting
  • Marketing Automation
  • Search Engine Optimization
  • Brand Domains
hubspot-red-icon
HubSpot
  • HubSpot Apps
  • HubSpot Themes
  • HubSpot Migration
  • HubSpot Onboarding
  • HubSpot Management
  • HubSpot Development
  • HubSpot Audit
  • Free HubSpot Demo
  • HubSpot Diamond Partner
webdew-logo-new_v2-1
  • Services
  • Work
  • Resources
    • Knowledge
    • Ebooks
    • Tools
      • Website Audit
      • Website Grader
      • HubSpot ROI
  • Blog
  • About
Let's talk

13 best Figma tips and tricks for designers in 2022

13 best Figma tips and tricks for designers in 2022-vbh
Tag: Websites
Author: Jyotesh Kumar Gupta
Jyotesh Kumar Gupta
Quick Links

Subscribe to Our Blog

Never Miss Any Update From Us !

If you're a UI/UX designer or perhaps a web designer, then you might probably know about Figma and what it has in store for you. But did you know you can now make your task easier with some easy Figma tips and tricks?

While a pretty new app in the design and prototyping world, Figma has come a long way since its launch in 2016. This cloud-based, easy-to-use application lets you design apps, websites, and other UI components that perhaps need to be integrated into other projects.

Having used Figma for quite some time now, I often stumble on incredible, time-saving features that I wish I knew about sooner.  Nonetheless, these Figma hacks are pretty impressive and valuable for work, making your web design task easier, and faster, and not to forget the increased productivity.

Besides, as good as Figma is, these tips and tricks will make working on it even better. So, let's get down to business.

reasons-why-figma-is-an-essential-tool

Figma tips & tricks to make your work easier

As someone who practically uses Figma day in and day-out, obsessing over its features and team productivity, I LOVE how it allows us to speed up our workflow! 

Here are 10 best principles of good design

Excited to know my secret mantra to work on Figma effectively? Well, without building any more suspense, let's hop onto some of my favorite Figma tips and tricks that I can't live without.

Update auto layout

Update or add the new auto-layout feature for dynamic resizing of your designs. With the auto layout, you can quickly create buttons, lists, models, etc., with multiple margins and resizing rules that can easily accommodate more intricate components and eradicate the need for tedious spacing edits.

Update the nudge amount to 8px

Using a base unit of 8px is often recommended for multiple reasons and must be used consistently for every sizing and spacing task. You can make this more straightforward for yourself and your entire team by simply setting the "nudge amount" in Figma from 10px to 8px. This way, every time you will move or resize an object, it will be in increments of 8.

  • To use the nudge, hold down the Shift + arrow key, and to adjust the nudge amount, navigate to Menu > Preferences > Nudge amount > 8.

Are you guilty of web design plagiarism? Here's all you need to know

Use the bar graph arc tool

I had no idea about the Bar Graph arc tool until I read about that tool on the FIGMA blog and tried it. It makes a minimalist Bar Graph arc and saves time to create arcs like how we did in the old days.

 

Manage base components

You can use the base components more efficiently by creating and managing components with multiple variants. Each variant will hold its individual nested base component overwritten to create a novel state. This makes bulk updates pretty easy and also ensures 100% consistency.

Use true/false logic 

Use "true/false" or "on/off" labels to switch between two distinct properties. This little trick will make switching variants quicker and closely match how different components work in the code.

  • For instance : Type=Single-line, State=Default, Optional=Yes
speed-up-your-workflow-with-smart-selection

Organize the grid or swap position

After selecting multiple objects in the table, click the grid icon in the corner to organize your design. This equalizes all distances between objects, allowing you to drag and rearrange objects and adjust their spacing.

 

Edit spacing in bulk

Aligning various objects and adjusting the spacing just right can seem pretty tedious and time-consuming. However, fortunately, Figma's "Smart selection" & "tidy" features enable you to do just that in bulk. 

With Figma, similar objects can be auto-arranged into a neat list or grid, bulk spaced, and reordered.

  • To bulk edit spacing, select similar objects > select list/grid icon > drag spacing right, left, up, or down.
  • And to swap the object placement, select similar objects > select the dot inside a single object > drag and drop it into a new location.
Get the inside scoop on moving from design to development process

Rename multiple layers at once

It's essential to keep your file organized with a defined naming structure and hierarchy for all your layers. This task is made much quicker with Figma's "Rename Layers" model, enabling you to rename layers in bulk. You can rename each layer to be the same, have a number suffix, add a prefix to distinct names, or rename only part of the layer's name.

  • To access the Rename Layers model, navigate to Right-click layers > choose "Rename."

Organize your file pages 

Let's face it, having to look for a specific design or master component can sometimes be pretty time-consuming and may also lead to miscommunications and duplicacy.

Therefore, organize your file pages to make navigating and maintaining them quick and easy. Make sure each page has a well-defined name for various design and documentation purposes.

 

Use keyboard shortcuts

It's no mystery that using keyboard shortcuts is much quicker than using the mouse. Practically every action can simply be initiated with a keyboard shortcut to make working in Figma seem much faster and more efficient.  

Besides, is there anything worse than seeing a designer struggle with their mouse while they can simply use the shortcut key?

Therefore, challenge yourself to learn a new shortcut every day!

  • To view keyboard shortcuts: Hit"?" in the bottom right corner of your browser.

New call-to-actionUse the scale tool 

To keep your design pixel-perfect with the help of a scale tool, simply select all the objects that you want to scale, then hold K on your keyboard and drag.

Earlier I was so reluctant to scale the whole artwork because something always broke, especially the text field, and I'd have to re-adjust the artwork. But now, with the help of the Scale tool, those headaches are no more. All your artwork scales perfectly and maintains the propositions, and you do need to re-work the artwork.

 

 

CMD (CTRL) + to unlock the lock objects

CMD (CTRL) + / has many practical quick applications that can save you a lot of time in your workflow. If you are not using it, it is strongly recommended that you check what is available on the menu. Unlock all items and change the font.

 

More time-saving tricks with spacebar

  • Drag the selection box and then hold down the spacebar to increase the size of the cursor selection. If you're drawing a shape, you can also reserve space to move the object as you draw. If that's not enough, press the spacebar, and Figma will automatically move the object into an auto frame or layout. You can also substitute it for nesting. The space bar is very handy!!

  • Hold down the spacebar and move the object out of the frame to make it stay inside the container. You can also disable movie clip content in the object container so that it can be seen even when it is outside the container. You can also press CMD (CTRL) + Y to display the outline.

 

The Bottom Line

There you go, folks! These were some of my favorite Figma tips and tricks. 

Whether you are looking for design templates, icons, high-performance tools, a better way to manage design operations, responsive and chic designs, easy access to developer tools, and a strong community of developers and applications, Figma is undoubtedly the way to go. 

Hope you find these tips effective in enhancing your Figma experience even further. 

If you have any questions for us, feel free to ask! And for all your website development, website design, and website redesign requirements, do reach out to us!

Editor: Richa Sharma

improve your website usability and UX

Related Blogs

How to use motion plugin in Figma for your animation?-vbh
Websites

How to use motion plugin in Figma for your animation?

A complete guide that will help you protect websites data-vbh
Websites

A complete guide that will help you protect websites data

Improve your website performance with Responsive Web Design tools-vbh
Websites

Improve your website performance with Responsive Web Design tools

review-star

Based on 1000+ Reviews on

footer-dot-logo-img
  • Hubspot_Logo-icon
  • clutch_Logo-icon
  • upwork_Logo-icon
  • designrush_Logo-icon
  • goodfirms_Logo-icon
  • g2_Logo-icon
WE ARE GLOBAL
  • US-flag
  • CA-flag
  • IN-flag
  • GB-flag

Copyright © 2019 - 2021 Webdew, Inc. All Rights Reserved

Copyright © 2019 - 2021 Webdew Labs Inc. All Rights Reserved

Copyright © 2016 - 2021 Webdew Private Limited. All Rights Reserved

Copyright © 2019 - 2021 Webdew, Inc. All Rights Reserved

WE ARE SOCIAL
  • fb-icon-01
  • tw-icon-01
  • insta-icon-01 (1)
  • linkedin-icon-01
  • youtube-icon-01
Terms of Services
Privacy Policy