Member-only story

UI DesignTutorial

Figma Guide for Auto Layout & Constraints

Learn how to build responsive components in Figma with ease.

Thalion
Prototypr
Published in
7 min readOct 4, 2021

featured image with figma constraints visualization

Creating components with automated sizing behavior saves a lot of time during the process. They also let us think more like a developer that has to implement the real application. That is why it is essential to master Constraints and Auto Layout in Figma.

In this article, I would like to present you not only the features but also samples — how components benefit from sizing behaviors. Let’s begin with Constraints.

Constraints

With Constraints, you may build components that adapt size and position to their environment (frame). Use it every time when you need to prepare designs that have to be resized for multiple platforms or breakpoints (responsive websites) and share the same UI elements.

Thanks to constraints, Figma knows how to modify the size and position of the specific element when its frame is resized.

You may choose multiple options when working with Constraints. The object may stick to the Left, Right, Left and Right, Top, Bottom, Top, and Bottom. If may be positioned in the Center, or even scale proportionally to the frame size changes.

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)

What are your thoughts?

Hi guys I need you help, I'm trying to create a card on figma and every time I resize it to check if it is responsive the settings change from hug content to fixed width, why is that?

--

This was super, super helpful. The GIF's really helped me better grasp the nuances of auto layout and constraints that I think was missing from my understanding of them. Thank you so much for putting this together, it was a very educative and well written piece!

--