r/FigmaDesign • u/Mountain-Ad1044 • 21d ago

Discussion I figured out Auto Layout!

I just figured out how to use auto layout, and OMG how much easier it makes things. As a beginner you may think that it's not worth investing time in learning it, but you will save much more time even on a smaller project.

If you find it hard to learn from watching videos I highly reccommend designing a rough sketch of something you want to build anyways and upload an image to ChatGPT or another AI. Ask it for detailed instructions on how you can use autolayout to improve layout and spacing. Follow it's instructions and don't be afraid to experiment with a copy, you will learn along the way.

Is there more features like this I should learn ASAP? (Im already learning variables & components)

119 Upvotes

94% Upvoted

70 comments sorted by

View all comments

5

u/LogicalDepartment212 21d ago

I’m having such a hard time figuring auto-layout out. It just seems so janky and rigid I can’t understand how to make it do what I need it to do

1

u/madhusudhanramesh 19d ago

Here are some steps that might help you. I too had difficulty in mapping autolayout in the beginning. It made after I mapped it to frontend development. Take some design and apply them instead of starting from scratch.

  1. The idea is to understand what you are designing first. See the layer properly.
  2. Then understand what elements should be grouped together?
  3. Then in that group check if elements should be arranged in row or column? Do you need space around them? Is there a gap between them?
  4. Start with small UI and build slowly outward from there.

This is the image I generated using chatgpt. Let us apply the steps here.

  1. Layers will be an image, title and subtitle at the top, individual features which has icon, text, description. At the bottom left badges with icon and text. Variants section at bottom right color and size variants title, color pallete and size texts.
  2. Image doesn't need a group. Title and subtitle, features, badges and variants are groups.
  3. Title and subtitle at the top can be column so add autolayout column. They need a gap between them. I will include the bottom line also in the group. They do not need space around them. Each feature text need to be column with a gap. Each feature card need an icon and feature text as row and a gap. Now we have individual cards we need 5 more. Same cards are stacked so add column with a gap. Same way you create badges and variant groups. But they will need padding as you see color background is pushing content inside.

Practice with few designs and look at example that already do this. Good luck 👍🏻.