Figma’s Auto Layout has been around for a while, but not everyone’s aware of the benefits it brings. It doesn’t replace constraints, they’re still very much needed. The trick is to use the right feature where necessary. I want to show you how to combine components, constraints, and Auto Layout for the best results.
I threw together a screen for an Uber Eats inspired food delivery app and I’m going to tear it down to show you how you can use Auto Layout along with constraints and components to up your design game.
Most of you already know that, but for a word of introduction, what Auto Layout does is automatically arrange elements placed inside of a frame. These elements can be either arranged vertically or horizontally and you can set the spacing between individual elements as well as between the elements and the borders of the frame. Because of this can’t use constraints or place elements on top of one another in frames that use Auto Layout.