MASTER Unique Layouts Using Figma Auto Layout

[@ArnauRos]

You can download the community file in the description to challenge yourself with it!

[@alfiartya23]

Thank you so much

[@TiianSama]

That part where you start squishing the frames and turning it into mobile blew my mind. Chef's kiss. Life changing. Love it.

[@ArnauRos]

It really is lifechanging!

[@alexbramwell1870]

For those who wonder why you do this is because auto-layout is very close to css-flex box. You can have way better Q/A with your dev team because you (as the designer) have nailed down most of the flex properties (layout) for the dev team. Rather than just placing elements anywhere in a free form style, you are working with constraints that are closer to the browser. (Don't forget you can also use the grid system and something akin to Bootstraps cols alongside these flex properties).

[@madedetatasya]

I wish I’d found this video sooner. It would’ve saved me so much hassle.

[@beforemiroafter1265]

I’ve been using Figma since the creation of the tool, but your knowledge about it is wild! Thank you for the tutorial; I really learned some new, very helpful shortcuts :)

[@ArnauRos]

Glad it was helpful!

[@alfiartya23]

I always used auto layout since I watched your tutorial. It makes easier for me to position each element. So, I really thankful for your tutorial! 🙌😄

[@ArnauRos]

Thats awesome :)

[@rawrdo123]

Thanks for this video man! I was getting little deeper into Auto-Layout after I finished UX Design bootcamp. I wondered how you could build an entire screen with with Auto Layout and this tutorial made that clearer.

[@ArnauRos]

Hey, Can do! What do you mean by build an entire screen?

[@contentmc]

Respect the grind bro!

[@ayeshasiddika7550]

Thank you for using my design

[@ArnauRos]

Awesome, thanks for creating such a fun design to build!

[@MDSluquinhas]

Hey! Great design :) How did you make the green shape? There is a name for this technic? Thank you!

[@p.g.3806]

The explanation of absolute positioning was really helpful. I was previously confused how to handle large splash elements in the context of auto layout so they didn't push everything out of the way.

[@ArnauRos]

Thanks!

[@TeDeoZ]

Nice tutorial, would be really cool to see how you do to adapt your desktop layout to different screen size. I struggle a lot to do that and i think it would really help people like me get deeper knowledge about this particular point. Peace :)

[@ArnauRos]

Absolutely, we can do that in an upcoming tutorial. I dive a bit into it in the end, but we can cover design systems for mobile too

[@joyahmed963]

Awesome as always 🚀🚀

[@ArnauRos]

Thank you Joy!

[@Kensingtonhawk]

Would love to see this replicated in Framer considering framer has no negative margins/spacings available so i cannot envision this in Framer.

[@jkoblivion4175]

very clear and pedagogic. Well done.

[@ArnauRos]

Many thanks!

[@Sathi963]

thank you so much for you knowledge . keep doing such great things .

[@ArnauRos]

thanks for stopping by!

[@takazcao]

Thanks for sharing your knowledge. I agree that auto layout is a powerful tool, but it can be difficult to make changes for client. This is because auto layout creates a system of constraints that can be difficult to break. However, learning how to use auto layout in Figma can help you better understand webflow development. This is because webflow also uses a system of constraints to create layouts. So, by learning how to use auto layout in Figma, you will be better prepared to create layouts in webflow.

[@irfansaeed4076]

Absolutely I will download the community file and challenge to myself ♥

[@faizurrahman7791]

Love it arnau !

[@ArnauRos]

Thanks Faizurrahman :)

[@faizurrahman7791]

@@ArnauRos wants mobile responsive version, please 🥺

[@vividaero4484]

Great Video! I do have a question tho, Is it feasible to use auto layout at the initial phase of design (When you are just starting to explore different ideas)? Won't auto layout hinder your creative abilities at that phase?

[@ArnauRos]

If its a super creative design like the one in the vid then autolayout would hinder creativity, but if you're in the building phase and want to see how you'd get something like this then autolayout is great

[@adetayoadebajo1756]

I'd like to see the mobile design and possibly a webflow conversion video for it.🙏🏽 Thank you for the awesome tuts ✨

[@ArnauRos]

Absolutely :) coming up

[@safsafaf2838]

Nice! I always wonder where to get those 3rd abstract shapes.. maybe tutorial on midjourney soon?

[@ArnauRos]

Could be a good one!

[@danielandersson4095]

Does anyone know if it’s possible to redesign a Wordpress website in webflow but keep all of the Wordpress plugins? Or if this would create an issue what these issues may Be?

[@ArnauRos]

If you move your site to webflow you change the system completely, making it impossible to keep any plugins

[@watch3370]

awesome 🎉, are you going to build it in webflow?

[@ArnauRos]

Not yet, I think next step would be mobile video

[@rubenccnv]

How do you measure?? So cool

[@ArnauRos]

No measuring! Simply using design standards like 4px grid, and a 1200px max width :)

[@rubenccnv]

@@ArnauRos i meant to cm like tool never seen that on figma

[@ArnauRos]

got it, do you mean the Ruler tool? Shift + R. Let me know if thats it

[@rubenccnv]

@@ArnauRos exactly thank you!! Will save me from creating squares to get px hahah

[@ArnauRos]

Great!!

[@OSANDA_Design]

Hey Man! This so help full. can you do the mobile as well. would be a lot.

[@ArnauRos]

Coming out today!

[@OSANDA_Design]

@@ArnauRos Wooooo! 🤜

[@brunoescoto9630]

Hey! I'm new into this and I still don't understand certain things. Why you do all this autolayout if at the end the developer is going to redo it with code? as far as I understand Figma does not export to HTML and the CSS can be done through a style guide, right?

[@ArnauRos]

Hey! This basically makes handoff easier to devs, if you're working in Webflow you can also export to Webflow or Export to Framer with those scalable settings already set. Let me know if that makes sense

[@varunn_b]

Make a mobile version of this as well. Awesome work.

[@ArnauRos]

yes sir! coming soon :)

[@osemudiamenineomon1415]

Damn, you are fast 😢😢

[@ArnauRos]

I'll try to go slower next time! Its hard to fit in the full redesign in a 10 minute video, would you be open to watching a live stream or a 30 min version?

[@osemudiamenineomon1415]

@@ArnauRos A 30 mins version is alright. So, I know the amount of time I'm putting into watching the video. Thanks for all you do💯

[@shmss10]

He's definitely goes wayyy to fast! Love the video but had to pause and rewatch a lot to catchup, so I feel where you're coming from. I used playback speed at 0.75. That helped a ton as well. @@osemudiamenineomon1415

[@masterloot]

But this doesn't answer the WHY. Why does absolutely everything need to be in autolayout. what problem does it solve.

[@ArnauRos]

Autolayout helps handoff for developers, but it also teaches the logic of how designs are built. If you’re just placing things as absolute its not a realistic way to build sites

[@ShamsudinS]

Круто!

[@ArnauRos]

thanks!

[@cyberkalagh]

the tutorial was so fast and i got so confused man

[@sameernikhil6990]

Thank you Bro , Btw trim some beard 😁

[@Atractiondj]

2023 - People are still worried about what their website looks like on a PC, while already about 80% of traffic comes from smartphones.

[@ArnauRos]

This is closer to 55%, but yes! Mobile is a huge market. Next video in the series we’ll cover how to convert this design into mobile friendly

[@jstenberg3192]

Yes. I am worried how it looks on a PC. Why wouldn't I be? 1) Traffic is different from buying, 2) many buyers do both and a crappy PC experience doesn't help the brand.

[@humzitoo]

trust me watched many video to understand auto layout but this video made my day. Thank you so much @arnauRos

[@ArnauRos]

Thank you! This made MY day