Designing in Figma? Up your game with these two critical tools

Figma is a revolutionary cloud-based design platform that simplifies team collaboration and absolutely crushes the risk of losing your work from unwarranted crashes (I’m looking at you, Adobe). With that said, it’s still relatively young and is always evolving. It wasn’t too long ago that powerful features like Auto Layout and Variants were still on our wish list (not to mention Smart Animate, gif support, and plugins). If you’re like me and always striving to keep up with the latest and greatest, you’re going to want to learn how to apply Auto Layout and Variants to your design systems. But I’m not going to lie, it’ll take some getting used to. These tools require you to adhere to a disciplined architecture and forbid quick-and-dirty, experimental changes to frames (a.k.a artboards).

So is it worth it? Absolutely, and here’s why.

First Things First: What Are We Talking About?

Auto Layout

In the most simplistic terms, Auto Layout allows you to combine multiple layers into a single row or a single column, with each layer equidistant from the next.

When you combine layers with Auto Layout, it will wrap them in a “frame.” Like with any other frame in Figma, Auto Layout frames can be nested.

The end result is the ability to build layouts fixed to a grid. You no longer have to worry about objects being a few pixels off your guide. Auto Layout will ensure that everything is always perfectly aligned.

Layers wrapped within an Auto Layout frame cannot be freely dragged around the frame. Depending on where you mouse-up, clicking and dragging on one of those layers will either (1) swap that layer with a sibling or (2) remove the layer from the frame. This restriction saves you from yourself: your designs need to adhere to a specific, purposefully designed and symmetrical architecture. This isn’t a…