Auto layouts in Figma

Autolayout in Figma

Hey there! In my previous article, I spoke about Components in Figma, and If you followed that you’ll realize I used a feature called Autolayout a lot while carrying this out. I’d be talking a bit more about the feature and giving a tutorial after this showing exactly how we can use this and its benefits.

So Let’s Dive In !!! 🏊🏽‍♀️

According to Figma Auto layout is a property you can add to frames and components. It lets you create designs that grow to fill or shrink to fit, and reflow as their contents change. This is great when you need to add new layers, accommodate longer text strings, or maintain alignment as your designs evolve.

Basically, it works in the same way as Flexbox in CSS which also allows us to create a flexible and responsive structure. There are a lot of reasons why we make use of Autolayout while designing.

1. Scalability: Using the auto layout feature allows us to easily scale our designs for various screens without having to start to redesign certain components from scratch
2. Consistency: We experience a great amount of consistency in how design elements appear across a large number of screens when we use the Autolayout feature
3. Control: The Autolayout feature empowers us as designers to make massive changes to how we want elements to appear in our design in the shortest amount of time possible.

Major features of Autolayout include:

• Spacing
• Alignment
• Direction
• Padding
• Spacing mode
• Strokes
• Text base alignment
• Resizing (Vertical and Horizontal)
• Absolute position

In the tutorial, I would be covering all major features of what Autolayout can do and applying them to a design element.

Tutorials on Auto layouts

In Conclusion

There are a lot of advantages to making use of Auto layouts in your design and with constant practice, you can be extremely amazing at this, I would say to look at more materials.

Hope you all enjoyed this as much as I loved making it ❤️

Don’t forget to leave a clap you can also reach out to me on Twitter, Linkedin, Dribbble, or Behance.

If you really enjoyed this, you can leave a tip 😄⬇️