Figma: Setting up responsive design with auto layout, constraints & grids

Full guide on how and when to use what — the right way

Figma gives us impressive features when it comes to setting up responsive design. But let’s face it, responsive design can also be a recipe for disaster if you don't know what you are doing. So let's untangle our auto layout pages, and let's understand why constraints and auto layout actually go hand in hand.

This article is a free excerpt from my full responsive design course with Figma on moonlearning.io

The currently available tools for responsive design in Figma are:
1. Auto Layout
2. Constraints
3. Grids

We can use just one or combine them to a certain extent. There is no right or wrong. It is really about the behavior and setup you are trying to achieve. Thus it's key to understand how each of them works with its possibilities and limitations. Let’s learn about them:

1. Auto layout

Let’s start with the almighty and obvious: Auto layout! Your experience with auto layout probably looks a bit like this.