Member-only story

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

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

Christine Vallaure
UX Planet

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

responsive design with figma intro image

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.

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Responses (2)

Write a response

Your article is an excellent resource for designers looking to set up responsive design in Figma. Your coverage of auto layout, constraints, and grids is comprehensive, and your writing style is engaging and easy to follow.

文章內容品質很好