Although Autolayout is a feature that Figma released some time ago has been completely redesigned recently. In this tutorial, we will learn how to use it and understand it! It has a ton of new possibilities and uses, and the translation to Html and CSS is far way better than before (now it uses flexbox).

If you are just familiar with the old Autolayout version or if you are a complete newbie to Figma this tutorial is for you. We will be designing a responsive button a tooltip, a group of responsive cards, and finally a fully responsive landing page.

If you are interested in speeding up your workflow and make better responsive designs with Figma this tutorial can be great for you.

See you in the tutorial!

PS: If you struggle with the Frame-trick: just watch this video when you have finished the whole tutorial: https://www.loom.com/share/a60d68760da74c1ba1c96deb0b29c78a

Freddy Castro

--

2