MASTER Unique Layouts Using Figma Auto Layout

Подписаться 63 тыс.

Просмотров 17 тыс.

50% 1

Unique layouts are hard to build in Figma, especially using auto layout. However, in this video, we'll go deep into to how you can achieve this level of advanced layout only using auto layout. Building unique layouts can sometimes be a difficult decision, as it might not be what your client needs. So always make sure your unique layout has been tested before going forward with it.
Download the file for yourself and try it out:
www.figma.com/community/file/...
The original post:
dribbble.com/shots/21579411-A...
Explore Figma Components 👇
www.tilebit.io
🛠 Try Figma 👇
bit.ly/3LqgGig
🛠 Figma For Pros 👇
bit.ly/3V5oZmD
---------
🚀 Subscribe for more weekly design content
bit.ly/2FQLrO5
🎥 What I use in my videos!
kit.co/arnauros/filming-setup
📄 Bonsai Referral (try for free)
www.hellobonsai.com/invite?fp...
👨‍💻 Connect with me
arnau.design
🌎 Socials
/ arnau_design
/ arnau_design
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you!

Опубликовано:

29 май 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 69

@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).

@contentmc Год назад

Respect the grind bro!

@joyahmed963 Год назад

Awesome as always 🚀🚀

@ArnauRos Год назад

Thank you Joy!

@irfansaeed4076 Год назад

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

@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

@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 :)

@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!

@Sathi963 Год назад

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

@ArnauRos Год назад

thanks for stopping by!

@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!

@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!

@jkoblivion4175 Год назад

very clear and pedagogic. Well done.

@ArnauRos Год назад

Many thanks!

@Kensingtonhawk 2 месяца назад

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

@rawrdo123 6 месяцев назад

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 5 месяцев назад

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

@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.

@faizurrahman7791 Год назад

Love it arnau !

@ArnauRos Год назад

Thanks Faizurrahman :)

@faizurrahman7791 Год назад

@@ArnauRos wants mobile responsive version, please 🥺

@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!

@vividaero4484 8 месяцев назад

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 8 месяцев назад

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

@varunn_b Год назад

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

@ArnauRos Год назад

yes sir! coming soon :)

@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! 🤜

@watch3370 Год назад

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

@ArnauRos Год назад

Not yet, I think next step would be mobile video

@ShamsudinS 3 месяца назад

Круто!

@ArnauRos 3 месяца назад

thanks!

@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

@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!!

@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

@javidtechtips 2 месяца назад

the tutorial was so fast and i got so confused man

@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 10 месяцев назад

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

@sameernikhil6990 Год назад

Thank you Bro , Btw trim some beard 😁

@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

@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.