10 Figma Best Practices to 10X Your Workflow
By: Danny Sapio
Tags: Figma, UI, Design, Product Design, UX

10 Figma Best Practices to 10X Your Workflow

1. Use base components for variant sets

Tutorial: https://youtu.be/vVPSYSziRFY

If we have a large set of variants for buttons, input fields, and so on, it will cost us tons of precious time if we decide down the line that 8px radius looks better than 12px or if we need to make any other adjustments.

By using base components for our variant sets we can make one adjustment to our base and it will push the changes to all of our variant instances.

To do this, create a base component with all of the elements needed in our different variations for default, icon left, icon right, hover, active, error, and so on. Then it’s as simple as hiding elements we don’t need in different variants.

Base components themselves don’t need to be part of our component set and can be placed nearby on the same page or frame. Use a . or _ to prevent them from being published as part of our component library.

Credit: David Shackelford // dribbble.com/davidshackelford

2. Add a cover photo to your Figma file

Tutorial: https://youtu.be/77lx5dTaXS0

When managing various different projects and Figma files at a glance it can be frustrating finding the project we’re looking for.

Creating a cover photo is a simple and elegant solution to make projects instantly recognizable at a glance.

To add one, all we have to do is…

Create a page in the document and name it “cover” (optional) Draw out a frame for the cover image (1920 x 960 works best) Fill it with some design goodness like a logo or something to help you and your teammates recognize the project Right-click on the frame and select “set as thumbnail”

3. Use styles for everything

Think of styles like components for colors, text, effects, and stroke.

When we design using styles and decide we want to test different variations of colors, stroke thickness, font styles, and so on — one quick change and the design will auto-magically update all instances where that style is referenced.

It’s tempting to use the eyedropper and just fill in colors where we need them, but I’d urge you to design with this best practice as much as you can. Styles will save us headache down the line and allow us to make updates on the fly.

Also, if you want to organize your components into folders like “Brand Colors” use the slash naming convention: Brand Colors / Primary .

4. Organize variant sets with auto layout

Did you know you can organize your variants in an auto layout? Tap on the frame of a variant set and press SHIFT + A. With auto-layout, organizing and re-ordering components is a breeze.

This leads me to my next point…

5. Use auto layout for everything

Auto-layout is one of (if not the) most important skills that any modern UI designer should master.

Auto layout is an absolute game-changer in product design — it enables us to design more closely to how products are developed and maintain consistency and scalability in our design file.

If you’re not up to speed with auto-layout yet, I can’t recommend enough Pablo Stanley’s free crash course on auto layout. 👈

By following the best practice of designing with auto-layout, we can save considerable time when deleting content, adding content, building rows of similar content, creating responsive components, and so much more.

I design every page using auto layout so I can make quick adjustments to spacing or add and remove content without needing to push pixels to get elements re-aligned.

6. Create flow diagrams from your screens

As our design files grow, things can quickly get confusing for outsiders like clients and collaborators who may not be in the weeds day to day like we are.

To help communicate the flow from screen to screen, I’ve been using a not-so-well-known trick — simply copy and paste a connector (or another flow element) from FigJam into a Figma file and it will retain all of its functionality.

Credit: Mike Rogers // dribbble.com/mikewrogers

7. Use constraints

To keep a frame organized and adaptable, use constraints to tell Figma how objects should respond as we resize their Frames. Constraints help us to control how designs look across different screen sizes and devices and save us needing to make adjustments every time we need to resize a frame.

If you ever want to ignore the constraints set constraints for objects in a frame, all you have to do is hold down CMD or CTRL as you resize the frame.

8. Create templates for components

Creating a component for a profile card is great, but what happens when we have a list of profiles? This is where templates will save us tons of time and make our life 10x easier.

The idea of templates was popularized by brad frost in Atomic Design Methodology and it’s a pretty straightforward concept.

Here’s how it works: let’s say we have a blog post component — it has a picture and some text. Well we could just place that component 10 times on every artboard that needs a list of blogs or we can create another component that has the blog component nested 10 times inside of it.

We can then drop this template into our design file, and if we need to add content or make adjustments to the space between the components, we’ll only need to adjust it on our main component.

9. Organize components

There’s nothing worse than opening someone’s design file and realizing I have no way to make edits to the main components without right-clicking and selecting “go to the main component” because they aren’t organized away from the designs.

This lack of organization is sure to backfire at some point, so I always recommend moving all main components on their own page or own section of the design file away from our work. This makes it easy to update components and spot inconsistencies. It’s even better when designers organize their components with page headers for buttons, color styles, inputs, and so on.

The better our design file looks, the better our designs will look.

10. Use Loom

What’s Loom? Loom allows you to record your screen and send quick videos when calendars won’t line up, and you don’t have time to type a wall of text. It’s been an essential tool while working remotely and has saved me countless meetings and valuable hours that I can put towards design.

If your team is in different time zones, has crazy schedules, out of office, or just can’t chat when you can — try using Loom for async design critiques and design shares.