MASTER Unique Layouts Using Figma Auto Layout
Вставка
- Опубліковано 29 тра 2023
- 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!
You can download the community file in the description to challenge yourself with it!
Thank you so much
That part where you start squishing the frames and turning it into mobile blew my mind. Chef's kiss. Life changing. Love it.
It really is lifechanging!
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).
Respect the grind bro!
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! 🙌😄
Thats awesome :)
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 :)
Glad it was helpful!
Awesome as always 🚀🚀
Thank you Joy!
Absolutely I will download the community file and challenge to myself ♥
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 :)
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
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.
Thanks!
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.
Hey, Can do! What do you mean by build an entire screen?
very clear and pedagogic.
Well done.
Many thanks!
thank you so much for you knowledge . keep doing such great things .
thanks for stopping by!
Would love to see this replicated in Framer considering framer has no negative margins/spacings available so i cannot envision this in Framer.
Thank you for using my design
Awesome, thanks for creating such a fun design to build!
Hey! Great design :) How did you make the green shape? There is a name for this technic? Thank you!
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.
Love it arnau !
Thanks Faizurrahman :)
@@ArnauRos wants mobile responsive version, please 🥺
I'd like to see the mobile design and possibly a webflow conversion video for it.🙏🏽
Thank you for the awesome tuts ✨
Absolutely :) coming up
Nice! I always wonder where to get those 3rd abstract shapes.. maybe tutorial on midjourney soon?
Could be a good one!
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?
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
Make a mobile version of this as well. Awesome work.
yes sir! coming soon :)
awesome 🎉, are you going to build it in webflow?
Not yet, I think next step would be mobile video
Hey Man! This so help full. can you do the mobile as well. would be a lot.
Coming out today!
@@ArnauRos Wooooo! 🤜
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?
If you move your site to webflow you change the system completely, making it impossible to keep any plugins
Круто!
thanks!
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?
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
How do you measure?? So cool
No measuring! Simply using design standards like 4px grid, and a 1200px max width :)
@@ArnauRos i meant to cm like tool never seen that on figma
got it, do you mean the Ruler tool? Shift + R. Let me know if thats it
@@ArnauRos exactly thank you!! Will save me from creating squares to get px hahah
Great!!
the tutorial was so fast and i got so confused man
Damn, you are fast 😢😢
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?
@@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💯
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
Thank you Bro , Btw trim some beard 😁
But this doesn't answer the WHY. Why does absolutely everything need to be in autolayout. what problem does it solve.
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
2023 - People are still worried about what their website looks like on a PC, while already about 80% of traffic comes from smartphones.
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
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.
trust me watched many video to understand auto layout but this video made my day.
Thank you so much @arnauRos
Thank you! This made MY day