"In June 2024, we introduced a redesigned Figma-called UI3. With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content. - Find where features moved to in our guide: help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI - Learn more about auto layout in Figma: help.figma.com/hc/en-us/articles/5731482952599-Add-auto-layout-to-a-design"
Frontend Developer here. Many designers find Auto Layout "complicated", because they are actually used to adaptiv designs, and not responsive designs. Auto layout is trying to simulate how a coder would have to think before he develops, not 100% but it goes in the same direction. This forces the designer to think a bit like dev and have the similar challenges when it comes to responsive design. It's a great practice and improves the hand over a lot. The code output is also way better with flex properties.
It could get complex and confusing when the auto layout starts getting nested. I’ve experienced this during my design process. It was frustrating. So for every designers out there, make sure you guys know what you’re getting into. It’s a very powerful tool, but also requires mastery. My word of advice: Use auto layout when you think the design is almost finished or when you just need a quick way of doing alignment and precision. Otherwise, when you use a complex nested auto layout from the exploration phase, any adjustments/revision later on might get really confusing if you are unable to remember each of the nested constraints--since all those nested parts are constrained with one another (exactly what happened in the video). Hope this helps
That isn't great advice in my opinion. Auto layout is a very powerful tool, so embrace the learning curve and just practice a lot. It's not that difficult in my opinion. Applying auto layout at the end of creating components and layouts doesn't make a lot of sense either, because every time you're adjusting text-size, length or object sizes, you're doing manual work. With auto layout you're avoiding that. Even basic components like buttons should always be created with auto layout, in my opinion. Bonus: with auto layout you're actually designing with the mindset of a front-end developer, because you're working with the same principles. Double bonus: imagine your colleagues want 5 iteration exercises of your design with different text and different amount of cards in a row and they want it on desktop and tablet. Have fun pushing pixels, my friend 😉 (Nope, I'm not sponsored by Figma haha. Although: @Figma, holla at ya boy 😘😂)
@@keunekeune yes, basic components should always use Auto Layout, thats why I mentioned the nested part. My point is not about how people shouldnt "master" or "use" the tool, but to actually know WHEN is the right time to start using complex nested Auto Layout. The context matters. Example: Sometimes designer just wanted to have a quick edit to move an object somewhere else. But by using a complex nested AL from the start, it hinders the ability to do so in an efficient way. Heck, I mastered how this feature works, but even I sometimes get confused when things started getting nested deep and that caused me spending more time just to move a button somewhere else because I have to look at each nested constraints.
for anybody wondering what he did at 7:18 without explaining... it's clicking on the card and pressing Ctrl-Shift-K and then adding the image files and using arrow keys to move them.
It's a good tutorial to learn about fixed height, hug content, and fill container. Definitely It's quiet confusing while watching for the first time , but watching it twice or trice will help to understand when to use fixed height, fill containers and hug content
Good explanation. For all designers, welcome to how developers would actually think and solve these kinds of problems in the real coding implementation. If you think doing this with Figma is tricky, try imagining when Figma wasn't around yet 🙃
@@simplyaizhan I am also quite confused as a beginner and do not get what actually is going on. I guess I'll be looking for a video with more detailed explainations. I like the 5 minutes format, but I guess this is content for 20 minutes or for advanced users.
@@adrienaminta go to figma’s channel and go to their playlists. This video is the 3rd or 4th video in the series. Start from video 1 and move through the journey with him. It’s actually quite easy to understand starting from the very beginning. It’s 8 videos in the auto layout series. I hope that helps.
If u wanna change shirt, then choose the shirt that says "change shirt", then remove the shirt you have on, but be sure to remove it vertically or else it won't match the shirt your aiming to change into cause that will not hug your body. Then after you have removed the shirt your wearing, put in a shelf that says "changed shirt" or else you won't be able to put on the new shirt cause that is fixed. If you want to move horizontally and still retain the fit property of the changed shirt, then make sure to make a component and duplicate the shirt. Then your able to move both horizontally and vertically. Different rules apply for child and parent. -- Or you could just choose to use Adobe XD and work with dynamic component states. Needles to say I chose the latter and saved myself a lot of trouble.
Minute 7:11. I was able to use and understand the layouts in the beginning; but contrary to your example, once I copy the cards from my component, they are not keeping the ability to resize text container nor images. It is like the lost the properties from the component, and the only way to change the container and image is by making changes on the main component.
Can we get a video update to reflect the new UI? I've been bashing my head against the 5 minute mark for the last half hour because, for whatever reason, my resizing constraints are either disabled or not behaving the same way. Really struggling to go back & forth between the video and my design file to try and translate to the new workspace.
Thanks for this video. It's an educational but last part got me confused. Parent and child thing. It would be appreciated if you had it mention in the video to which card you are mention as parent and how it turn out to be parent if it's an instance of component.
Hey Vivek, thanks for pointing that out! It's definitely something we should have been more clear about. When referring to components, we consider the main component to be the definition of the properties of the component, while an instance is exactly that -- an instance of the main component. This relationship is different than a parent > child relationship. We use the terms "parent" and 'child" to note the relationship of different elements within the layers panel. Specifically where a layer is placed within another layer such as in this example: > Frame (parent) ---> Nested frame (parent and child) ---------> Text layer (child) Where the frame is a parent only (not placed within another object), the nested frame is both a parent of the text layer and a child of the top-level frame, and the text layer is a child only.
@@Figma Hey Figma, @ 9:31 when I resized the vertical card frame to fill container nothing happens, the text is still clipped below the frame. What I did instead is set "card details" to hug content and that did the job. Why didn't card frame fill container resizing work? Thanks
As someone who is learning Figma for the very first time, I went through the gamut of negative emotions I should only experience while in a session my therapist. I will never admit to the crimes I committed to cope with the frustration I felt going through this video, and I have used After Effects. It's a great way to have someone look in the mirror and face their inner demons or learn self reliance in the face of adversity... but that's not what its supposed to be for. Several parts of me died while trying to follow along, and I can never get those parts of myself back. Specifically the excitement and joy of learning such a cool program. If this wasn't an assignment for school I would have abandoned this torment at 00:32. For real though at certain points I felt my brain turning off because I didn't trust the material being taught. I mean... windows doesn't even have an "option" key as presented in the video. Personally I don't see the value in keeping this outdated tutorial up or linking to it as a way to learn since all it does is cause frustration. I tried the pinned video tutorial and it's pacing wasn't beginner friendly. This video series pacing is pretty good and my bones know it's valuable, but my brain refused to acknowledge that since my trust was broken after the color and font choices didn't match what I was seeing. I'm open to being pointed in a different direction to learn, but again, since this specific video series is an assignment for school I feel I have no choice but to endure. Wish me luck my dudes.
You can get around by making the image and the content below two separate components as opposed to making the entire card as one single component, so any change to the height of the content area won't affect the image ratio above it. Not ideal, but it works when you have lots of cards and you need to keep their image ratio
@@Junnanma Thank you for this tip. I have one dilemma though, what to do when card have two images - one for default, and one for hover state? how to put them in auto layout so they are one behind the other? So that when creating interactive component everything works? Thanks
@@menoaindigo5711 Do you mean if the image and the text are two separate components, hovering over the text won't swap the image? I guess that is indeed a downside of this approach. However, if I don't think it is an issue. I assume there are 2 scenarios you want to do a prototype swapping the image: 1. for communicating with the dev how it works. 2. Prototype testing with the user. For both scenarios, I would just manually do the prototype without using interactive component.
At 2:00 minutes the automatic nesting doesn't work unless you hold Ctrl/Cmnd FIRST and keep holding down, double click on the image, and only then DRAG the image over the text frame. Another way to do this is to drag the rectangle frame under the text frame (card details) in the layers panel. Then, later on he explains we shouldn't do that anyway, but who know it might come in useful for Polaroid effect.
First, it's super-complicated. Second, it needs manual work all the time, in case you need to change the row's height or edit some text in the cards the common bottom edge gets broken immediately. So, why should I mess with not-so-robust auto layout and not just throw the controls on my card with a fistful of constraints instead? Also, Auto Layout doesn't allow negative spacing, so it's not possible putting a badge over a photo on-the-go (or you should first create a component for that, idk).
I didn't realize figma is so powerful till I watched this video. It has literally everything I could dream of. can't believe I didn't get a chance to try it till now.
Hi Xiaohan, thank you so much! We recently have some new updates on auto layout, you can check it out after you have learned the basic techniques: ruclips.net/video/floQKLsWAy4/видео.html
@@Figma I just watched it! Those are amazingly useful updates and some of them really blew my mind. I never thought I'd find a prototyping tool that matches the CSS logic so well. There is a lot of prototyping software these days but figma seems to be making the best progress in recent years. Thank you for sharing the link with me. I was very happy to receive your reply!
@@xiaohanma2584 Glad you enjoy using Figma and watching our tutorials! We'll keep updating our products and also our educational content. Stay tuned! 😉
As a developer coming to the Figma world: things became easier when I realized "converting something to auto layout" is effectively "wrapping it in a flexbox div".
yeah, they're actually a 'lot' better than the long-winded ones that those 'crazy' design-pro tutors have been coming out with. I started watching a few of them (coming from using Sketch for the past 10+ years) and those guys were just so long about explaining things that I went back to reading about it, then I've come across these Figma original tutorials and they're 1000% better - i should've started here. They're very clear and straight to the point. Thanks guys, you've got another convert here :)
I could not. Now I'll do it thanks to you. Good thing you made this video. Really thank you so much. I would be very happy if such videos come. Thanks again to the Figma team.👏🏼👏🏼
I like this tutorial but it no longer matches the updates we have on the current version. I feel lost while following the prompter and creating the elements. I have to figure out if I have done it right or not. I hope the tutorial series gets updated along with the versioning release.
Great tutorial. I just started UI design and I wish I knew about this then. Please I need help with adding and placing images. I was confused from 1:21 to 1:34.
So i'm having an issure making a auto layout structure with text (aligned to left) and a shape (aligned to right) ,for example choosing a shipping method with a dial button. Can a tutorial be done on this ?
@Figma Is there any way you can have the image-height fill the container as well and change the aspect-ratio of the image and card details from 50/50 to like 70/30 for example? Like you can with CSS grid "fr" measures. I'm trying to find a way to have the card details stick to the bottom, but also have the freedom to have a responsive image-height. Or any other solutions you might have in mind (on the roadmap)? Thanks! 😘
I wish we have your naming system inside CSS. It makes a lot more sense than the current flexbox terminology. Btw, the main issue is Figma makes auto layout based on the flexbox model. I wonder if Figma is going to support the grid model.
I don't get one thing - auto layout is similar to CSS flex but it's more convoluted and not nearly as powerful, so why didn't you simply implement something closer to CSS flex? Some designers are already familiar with it and it solves many common layout challenges better than auto-layout does. Also, please give us proper grid layouts!
Ok, so when I take my title and description texts, and then hit the "fill container", it doesn't make the same thing as on the tutorial. The white box should follow the text being higher in terms of lines, and it doesn't. Anyone else ?
@11:21 If you ever get stucked trying to figure out which resizing properties to use, stop and think about the functionality of the component you are trying to make and the context in which it will be used.
This sums autolayout pretty well. Really learn it's abilities and what they are used for. Use it only when necessary. Also depends what you are designing. If you are strictly designing mobile apps then I don't see much of a need for using autolayout as you will only be working within one specific width (breakpoint). Designing full webpages on the other hand would need autolayout to be able to respond amongst all breakpoints from desktop to tablet to mobile phone. Also, having downloaded the figma files for the above example, I found that there were multiple unneeded parent contrainers wrapping each other. Not sure why so many "wrappers." Anyways, great tutorial but have to watch it a few times.
Figma is so nice but this tons of children layers are a bit confusing Id rather just choose the oldschool way it saves more time than doing an auto layout to another auto layout to another auto layout to another auto layout to another layout to another auto layout to another auto layout! Makes my stomach feel bad.
The part where you override the componenets to change images you skipped through and I'm not really sure how that was done. When I try to replace the image of one, it applies the image to all of them.
I'm new to tools like figma as well as others. I'm coming from the Adobe suite world, but willing to switch. I'm about to get a new mac and the latest Adibe version tbat I have is cs6. Can I create something from scratch on figma like I do in Adobe Illustrator?
Was thinking exactly the same! Figma is really useful, but this example demonstrates why a coded prototype is sometimes better - especially because real content could test that container in ways we might not be considering.
But Figma is used mainly by UX/UI designers and creatives. Figma is for creating wireframes, prototypes, mockups, etc. People who write code is a different specialization. That’s two different roles or specializations within a company. Comparatively there is a small group of people who do both as a profession, but your thinking only applies to them.
@@M9Diry wooosh, it went right over my head lol. Yes you’re right. It does seem to be more complex software and a steeper learning curve with each update.
Does anyone know how I can swap the pictures in instances? This is actually why I watched the video but exactly that part is not explained at all and I cannot for the life of mine find any helpful information on how to do that on the internet.
Hello, we have recently announced new auto layout updates and have moved the resizing options towards the top of the panel. Check out this new auto layout tutorial here (at 5:34): ruclips.net/video/floQKLsWAy4/видео.html
Thanks for the tutorial but this was really confusing tbh. In the end I got the card to be perfectly repsonsive, but the row gave me trouble as there was excess white space at the bottom when I tried resizing the frame (fixed height image, filling card). When I tried to erase the extra white space by doing (filling height image, hugable card), I ended up with the initial problem that's addressed in the video with the image heights being different. Ugh am so close but so far to having an even image size and no extra white space, but so far... anyone else have the same issue?
@@exgeeinteractive Idk, it's been a while since I did this tutorial but I can recheck. I think since I've been using it a lot lately for work, it's been easier so hopefully everything is figured out. I do think it's a little confusing they don't let you play with the margins too, besides the padding.. anyway, thanks for responding though!
I have one dilemma though, what to do when card have two images - one for default, and one for hover state? how to put them in auto layout so they are one behind the other? So that when creating interactive component everything works? If anyone can answer, it would be great deal for me, fanks.
We announced some new updates for auto layout at #config2022. To learn more about the updates, check out our new auto layout tutorial here: ruclips.net/video/floQKLsWAy4/видео.html
Is there a way to make the parent container elevate(drop shadow) without affecting child auto-layout components? When I try to elevate a card and its content everything within the parent container elevates....
"In June 2024, we introduced a redesigned Figma-called UI3.
With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content.
- Find where features moved to in our guide: help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI
- Learn more about auto layout in Figma: help.figma.com/hc/en-us/articles/5731482952599-Add-auto-layout-to-a-design"
Frontend Developer here.
Many designers find Auto Layout "complicated", because they are actually used to adaptiv designs, and not responsive designs. Auto layout is trying to simulate how a coder would have to think before he develops, not 100% but it goes in the same direction.
This forces the designer to think a bit like dev and have the similar challenges when it comes to responsive design. It's a great practice and improves the hand over a lot. The code output is also way better with flex properties.
Well said
Most designers aren't coders.
It could get complex and confusing when the auto layout starts getting nested. I’ve experienced this during my design process. It was frustrating.
So for every designers out there, make sure you guys know what you’re getting into. It’s a very powerful tool, but also requires mastery.
My word of advice:
Use auto layout when you think the design is almost finished or when you just need a quick way of doing alignment and precision.
Otherwise, when you use a complex nested auto layout from the exploration phase, any adjustments/revision later on might get really confusing if you are unable to remember each of the nested constraints--since all those nested parts are constrained with one another (exactly what happened in the video). Hope this helps
That isn't great advice in my opinion. Auto layout is a very powerful tool, so embrace the learning curve and just practice a lot. It's not that difficult in my opinion. Applying auto layout at the end of creating components and layouts doesn't make a lot of sense either, because every time you're adjusting text-size, length or object sizes, you're doing manual work. With auto layout you're avoiding that. Even basic components like buttons should always be created with auto layout, in my opinion. Bonus: with auto layout you're actually designing with the mindset of a front-end developer, because you're working with the same principles. Double bonus: imagine your colleagues want 5 iteration exercises of your design with different text and different amount of cards in a row and they want it on desktop and tablet. Have fun pushing pixels, my friend 😉 (Nope, I'm not sponsored by Figma haha. Although: @Figma, holla at ya boy 😘😂)
@@keunekeune yeah, totally agree with you !!!
Thanks Jodie. I understand what you mean
Yeah it's too complicated to understand. But I'll try my best to master it day by day.🙂
@@keunekeune yes, basic components should always use Auto Layout, thats why I mentioned the nested part. My point is not about how people shouldnt "master" or "use" the tool, but to actually know WHEN is the right time to start using complex nested Auto Layout. The context matters.
Example: Sometimes designer just wanted to have a quick edit to move an object somewhere else. But by using a complex nested AL from the start, it hinders the ability to do so in an efficient way. Heck, I mastered how this feature works, but even I sometimes get confused when things started getting nested deep and that caused me spending more time just to move a button somewhere else because I have to look at each nested constraints.
I love Figma, but I have to admit that this new auto layout is taking more time to be loved.
É meio complicado, but it’s worth the time spent on it.
Gabo até do figma
I feel that way about 90% of figmas features, the app ui is really unintuitive/clunky as soon as builds get just slightly complex
@@attilabodi1216 True. Though it's still better than Illustrator
"Space between" has been converted to "Horizontal gap between items > Auto" in newer versions of Figma.
Hi everyone, UX/UI self-taught here, I love your new tutorials, love Figma too :)
for anybody wondering what he did at 7:18 without explaining... it's clicking on the card and pressing Ctrl-Shift-K and then adding the image files and using arrow keys to move them.
It's a good tutorial to learn about fixed height, hug content, and fill container. Definitely It's quiet confusing while watching for the first time , but watching it twice or trice will help to understand when to use fixed height, fill containers and hug content
Jr. UX/UI Designer here 🙋🏻♀️ Love the updated tutorials 💝 tysm!!
The most complicated Auto layout tutorial ever!!!!!!
i agree :(
I have lots of tutorials for the auto layout. This was the best.
This is the most complicated tutorial I've seen on Autolayout
I had a severe brainfog 10 mins in... and started hugging the contents of my pillow
@@M9Diry This made me laugh (and helped ease my tears of frustration)
I had to watch it a few times but when you get it, it's amazing. It just needs a few times to watch
I cannot find the resize section on my figma. :/
@@person81045 Please how was the image added to the card frame? I don't get it.
Still confusing, still complicated. Just isn't there yet to utilize without constant trial and error.
Good explanation. For all designers, welcome to how developers would actually think and solve these kinds of problems in the real coding implementation. If you think doing this with Figma is tricky, try imagining when Figma wasn't around yet 🙃
True. The vocabulary used for these cases are also related to CSS
Great tutorial on making flexible card components in Figma! Really shows how to use auto layout well.
Good tutorial but an incredibly complicated process. Hopefully there will be easier methods in the future
Yes, I think for me (newbie) it was hard to catch on what was going on exactly. Wish they explained a bit more about this function
you need to see and understand the first videos he mentioned at the beginning, then you will see this one easy and see that makes a lot of sense
@@simplyaizhan I am also quite confused as a beginner and do not get what actually is going on. I guess I'll be looking for a video with more detailed explainations. I like the 5 minutes format, but I guess this is content for 20 minutes or for advanced users.
It's rather an elegantly simplified explanation for the incredibly complicated task.
@@adrienaminta go to figma’s channel and go to their playlists. This video is the 3rd or 4th video in the series. Start from video 1 and move through the journey with him. It’s actually quite easy to understand starting from the very beginning. It’s 8 videos in the auto layout series. I hope that helps.
Autolayout is best feature of figma.I was scared of it before but now i am used to it. But i have learnt 50% of its uses yet.
not only you made best design tool but also best tutorials for it
however you should have updated them ;)
If u wanna change shirt, then choose the shirt that says "change shirt", then remove the shirt you have on, but be sure to remove it vertically or else it won't match the shirt your aiming to change into cause that will not hug your body. Then after you have removed the shirt your wearing, put in a shelf that says "changed shirt" or else you won't be able to put on the new shirt cause that is fixed. If you want to move horizontally and still retain the fit property of the changed shirt, then make sure to make a component and duplicate the shirt. Then your able to move both horizontally and vertically. Different rules apply for child and parent.
-- Or you could just choose to use Adobe XD and work with dynamic component states. Needles to say I chose the latter and saved myself a lot of trouble.
I can't stop laughing XD
Minute 7:11. I was able to use and understand the layouts in the beginning; but contrary to your example, once I copy the cards from my component, they are not keeping the ability to resize text container nor images. It is like the lost the properties from the component, and the only way to change the container and image is by making changes on the main component.
Great tutorial, Figma has so much potential! 🤯
Can we get a video update to reflect the new UI? I've been bashing my head against the 5 minute mark for the last half hour because, for whatever reason, my resizing constraints are either disabled or not behaving the same way. Really struggling to go back & forth between the video and my design file to try and translate to the new workspace.
Thanks for this video. It's an educational but last part got me confused. Parent and child thing. It would be appreciated if you had it mention in the video to which card you are mention as parent and how it turn out to be parent if it's an instance of component.
Hey Vivek, thanks for pointing that out! It's definitely something we should have been more clear about. When referring to components, we consider the main component to be the definition of the properties of the component, while an instance is exactly that -- an instance of the main component. This relationship is different than a parent > child relationship. We use the terms "parent" and 'child" to note the relationship of different elements within the layers panel. Specifically where a layer is placed within another layer such as in this example:
> Frame (parent)
---> Nested frame (parent and child)
---------> Text layer (child)
Where the frame is a parent only (not placed within another object), the nested frame is both a parent of the text layer and a child of the top-level frame, and the text layer is a child only.
@@Figma Hey Figma, @ 9:31 when I resized the vertical card frame to fill container nothing happens, the text is still clipped below the frame. What I did instead is set "card details" to hug content and that did the job. Why didn't card frame fill container resizing work? Thanks
As someone who is learning Figma for the very first time, I went through the gamut of negative emotions I should only experience while in a session my therapist. I will never admit to the crimes I committed to cope with the frustration I felt going through this video, and I have used After Effects. It's a great way to have someone look in the mirror and face their inner demons or learn self reliance in the face of adversity... but that's not what its supposed to be for. Several parts of me died while trying to follow along, and I can never get those parts of myself back. Specifically the excitement and joy of learning such a cool program. If this wasn't an assignment for school I would have abandoned this torment at 00:32.
For real though at certain points I felt my brain turning off because I didn't trust the material being taught. I mean... windows doesn't even have an "option" key as presented in the video. Personally I don't see the value in keeping this outdated tutorial up or linking to it as a way to learn since all it does is cause frustration. I tried the pinned video tutorial and it's pacing wasn't beginner friendly. This video series pacing is pretty good and my bones know it's valuable, but my brain refused to acknowledge that since my trust was broken after the color and font choices didn't match what I was seeing.
I'm open to being pointed in a different direction to learn, but again, since this specific video series is an assignment for school I feel I have no choice but to endure. Wish me luck my dudes.
When I change the stack direction the icon in the left panel also changes, I like these subtle details
Would be great to have the option to also keep image ratio on resize!
I’m looking for this option too 👍
+1
You can get around by making the image and the content below two separate components as opposed to making the entire card as one single component, so any change to the height of the content area won't affect the image ratio above it. Not ideal, but it works when you have lots of cards and you need to keep their image ratio
@@Junnanma Thank you for this tip. I have one dilemma though, what to do when card have two images - one for default, and one for hover state? how to put them in auto layout so they are one behind the other? So that when creating interactive component everything works? Thanks
@@menoaindigo5711 Do you mean if the image and the text are two separate components, hovering over the text won't swap the image? I guess that is indeed a downside of this approach. However, if I don't think it is an issue. I assume there are 2 scenarios you want to do a prototype swapping the image: 1. for communicating with the dev how it works. 2. Prototype testing with the user. For both scenarios, I would just manually do the prototype without using interactive component.
Wow, well explained. With all variables which causes Issues in designing.
Figma community i saw your old two tutorial about auto layout but blv me this mentor is better then before mentor's
At 2:00 minutes the automatic nesting doesn't work unless you hold Ctrl/Cmnd FIRST and keep holding down, double click on the image, and only then DRAG the image over the text frame. Another way to do this is to drag the rectangle frame under the text frame (card details) in the layers panel. Then, later on he explains we shouldn't do that anyway, but who know it might come in useful for Polaroid effect.
I couldn't get this to work. evertyime I hit fill contents it makes the image 1 px
thank you !!
I'd love a video tutorial explaining the best way to create a table utilizing auto layout.
This is a great idea, Rachel! Totally agree and it's already on our list of use cases we'd love to tackle soon!
First, it's super-complicated. Second, it needs manual work all the time, in case you need to change the row's height or edit some text in the cards the common bottom edge gets broken immediately. So, why should I mess with not-so-robust auto layout and not just throw the controls on my card with a fistful of constraints instead? Also, Auto Layout doesn't allow negative spacing, so it's not possible putting a badge over a photo on-the-go (or you should first create a component for that, idk).
You have to put that badge into a frame with a padding using auto layout too
I didn't realize figma is so powerful till I watched this video. It has literally everything I could dream of. can't believe I didn't get a chance to try it till now.
Hi Xiaohan, thank you so much! We recently have some new updates on auto layout, you can check it out after you have learned the basic techniques: ruclips.net/video/floQKLsWAy4/видео.html
@@Figma I just watched it! Those are amazingly useful updates and some of them really blew my mind. I never thought I'd find a prototyping tool that matches the CSS logic so well. There is a lot of prototyping software these days but figma seems to be making the best progress in recent years. Thank you for sharing the link with me. I was very happy to receive your reply!
@@xiaohanma2584 Glad you enjoy using Figma and watching our tutorials! We'll keep updating our products and also our educational content. Stay tuned! 😉
best card component tutorial ever.
The shortcut for creating a rectangle is 'R" not OPTION + R (for Ruler). Thanks for the tutorials, they are great!
i noticed that, bit weird they didn't notice that themselves, but then I found out a new shortcut for Ruler, so not all bad
Superb explanation
Thank you, Figma!
As a developer coming to the Figma world: things became easier when I realized "converting something to auto layout" is effectively "wrapping it in a flexbox div".
Love these quick tutorials. So helpful.
yeah, they're actually a 'lot' better than the long-winded ones that those 'crazy' design-pro tutors have been coming out with. I started watching a few of them (coming from using Sketch for the past 10+ years) and those guys were just so long about explaining things that I went back to reading about it, then I've come across these Figma original tutorials and they're 1000% better - i should've started here. They're very clear and straight to the point. Thanks guys, you've got another convert here :)
Thanks figma for this video.
You're welcome, Rahul!
This is a very useful and practical tutorial, really learned a lot, thank you so much !!!
Before start watched this videfigmas I had a lot of questions, but when it finished the video give me more questions about AutoLayout
@Figma I love, love, love all this Figma
Great videos. Thank you
I could not. Now I'll do it thanks to you. Good thing you made this video. Really thank you so much. I would be very happy if such videos come. Thanks again to the Figma team.👏🏼👏🏼
I like this tutorial but it no longer matches the updates we have on the current version. I feel lost while following the prompter and creating the elements. I have to figure out if I have done it right or not. I hope the tutorial series gets updated along with the versioning release.
I love this feature - so intuitive
Learned something new, nice video
While descriptive, I didnt expect such a dry approach to tutorials especially from figma
Great tutorial. I just started UI design and I wish I knew about this then.
Please I need help with adding and placing images. I was confused from 1:21 to 1:34.
I just did it. I realised that the image layer was nested with the card details. I'd been trying the shortcut the entire time.
Great Tutorial!
Thank you so much! The most detailed explanation of autolayout. You are awesome! BTW 5:02 we don't have option key on Win :))
Good functionality but so complex to comprehend
Thank you
awesome , thanks figma
Very well explained!
Oh my god so good explained thank you!!!!
Is it possible to constrain the image to a specific aspect ratio?
This was so helpful!! Thank you
I'm waiting for this, Man!!
just done watched the previous videos.
thank you so much but showing the errors made the learning process harder for me
it is kind of complicated to me. Any tutorial describe what are the difference between Fix width, hug contents and fill container?
just noticed 1:27 the shortcut (at least on mac) for making rectangles should be just R, not "shift + R" which is rulers
Love from Bangladesh
So i'm having an issure making a auto layout structure with text (aligned to left) and a shape (aligned to right) ,for example choosing a shipping method with a dial button. Can a tutorial be done on this ?
@Figma Is there any way you can have the image-height fill the container as well and change the aspect-ratio of the image and card details from 50/50 to like 70/30 for example? Like you can with CSS grid "fr" measures. I'm trying to find a way to have the card details stick to the bottom, but also have the freedom to have a responsive image-height. Or any other solutions you might have in mind (on the roadmap)? Thanks! 😘
I wish we have your naming system inside CSS. It makes a lot more sense than the current flexbox terminology. Btw, the main issue is Figma makes auto layout based on the flexbox model. I wonder if Figma is going to support the grid model.
Have you checked out figma layout grid?
is it possible to save proportion of image size in cards? so it would increase not only horizontal but vertical too?
I don't get one thing - auto layout is similar to CSS flex but it's more convoluted and not nearly as powerful, so why didn't you simply implement something closer to CSS flex? Some designers are already familiar with it and it solves many common layout challenges better than auto-layout does.
Also, please give us proper grid layouts!
Making this work requires too much nesting. It's like having multiple layers of in HTML.
Ok, so when I take my title and description texts, and then hit the "fill container", it doesn't make the same thing as on the tutorial. The white box should follow the text being higher in terms of lines, and it doesn't. Anyone else ?
The best!, thanks for sharing
please fix image resized so bad its makes my design so blurry when i export PNG&JPG my design and then import it again, i'm using figma destop ver
Interesting that a lot of people find auto layout complicated. I guess when you've worked with css flexbox it comes more naturally
Weird flex but okay.
@11:21 If you ever get stucked trying to figure out which resizing properties to use, stop and think about the functionality of the component you are trying to make and the context in which it will be used.
This sums autolayout pretty well. Really learn it's abilities and what they are used for. Use it only when necessary. Also depends what you are designing. If you are strictly designing mobile apps then I don't see much of a need for using autolayout as you will only be working within one specific width (breakpoint). Designing full webpages on the other hand would need autolayout to be able to respond amongst all breakpoints from desktop to tablet to mobile phone. Also, having downloaded the figma files for the above example, I found that there were multiple unneeded parent contrainers wrapping each other. Not sure why so many "wrappers." Anyways, great tutorial but have to watch it a few times.
In fact, it's just Flex properties in CSS applies in design.
Nice tutorial
Idk somehow this feels more convoluted than before...maybe just need to get used to it
It's way too confusing.
I felt the same way, but it's my first time I get introduced to Auto Layout.
Figma is so nice but this tons of children layers are a bit confusing Id rather just choose the oldschool way it saves more time than doing an auto layout to another auto layout to another auto layout to another auto layout to another layout to another auto layout to another auto layout! Makes my stomach feel bad.
Why do things manually in 6 minutes when you could spend 6 hours trying to automate it?
I couldn't lift my self-confidence after this tutorial. But your comment helped a lot
The part where you override the componenets to change images you skipped through and I'm not really sure how that was done. When I try to replace the image of one, it applies the image to all of them.
I clicked on command + Control button but it's not nesting 2:0
Explanation using elements- title, description, and CTA would have been cool. CTA is missing!
I'm new to tools like figma as well as others. I'm coming from the Adobe suite world, but willing to switch. I'm about to get a new mac and the latest Adibe version tbat I have is cs6. Can I create something from scratch on figma like I do in Adobe Illustrator?
absolutely
@@jodierizky- thanks
Very clever and all... but there comes a point where it is literally easier to learn CSS and design in the browser
Was thinking exactly the same!
Figma is really useful, but this example demonstrates why a coded prototype is sometimes better - especially because real content could test that container in ways we might not be considering.
But Figma is used mainly by UX/UI designers and creatives. Figma is for creating wireframes, prototypes, mockups, etc. People who write code is a different specialization. That’s two different roles or specializations within a company. Comparatively there is a small group of people who do both as a profession, but your thinking only applies to them.
@@kattomate my point was that Figma’s auto layout can become more complex than learning code … which is weird
@@M9Diry wooosh, it went right over my head lol. Yes you’re right. It does seem to be more complex software and a steeper learning curve with each update.
Does anyone know how I can swap the pictures in instances? This is actually why I watched the video but exactly that part is not explained at all and I cannot for the life of mine find any helpful information on how to do that on the internet.
Resizing option is not visible in my figma . Please explain how to do this
Hello, we have recently announced new auto layout updates and have moved the resizing options towards the top of the panel. Check out this new auto layout tutorial here (at 5:34): ruclips.net/video/floQKLsWAy4/видео.html
HELP!!!!!!!! How do I do this? I pressed control and my image won't nest within the auto layout description bar.....I am desperate now.......
Thanks for the tutorial but this was really confusing tbh. In the end I got the card to be perfectly repsonsive, but the row gave me trouble as there was excess white space at the bottom when I tried resizing the frame (fixed height image, filling card). When I tried to erase the extra white space by doing (filling height image, hugable card), I ended up with the initial problem that's addressed in the video with the image heights being different. Ugh am so close but so far to having an even image size and no extra white space, but so far... anyone else have the same issue?
Did you check the padding of the card box?
@@exgeeinteractive Idk, it's been a while since I did this tutorial but I can recheck. I think since I've been using it a lot lately for work, it's been easier so hopefully everything is figured out. I do think it's a little confusing they don't let you play with the margins too, besides the padding.. anyway, thanks for responding though!
I have one dilemma though, what to do when card have two images - one for default, and one for hover state? how to put them in auto layout so they are one behind the other? So that when creating interactive component everything works? If anyone can answer, it would be great deal for me, fanks.
It getting more and more confusing with every tutorial i have watched :) But when you do it finally it works like magic :)
Autolayout is the 8th wonder of the World
Clean
We announced some new updates for auto layout at #config2022.
To learn more about the updates, check out our new auto layout tutorial here: ruclips.net/video/floQKLsWAy4/видео.html
Makes me want to launch my computer through the wall
Before you do that make sure the wall is vertical or else the computer won't hug the wall. The parent computer must then be changed to fill content.
Pure madness! You should be working towards making things easier, not more confusing and complicated 👎
I wasnt able to execute vertical and horizontal resizing of cards. can anyone share or recommend any resource
i love it . it very very need for good designer
Is this only happening to me? I don't have the option filled with content, please help... thanks
Somehow this method it is faltering around 4:00 mins, would appreciate if latest changes can be incorporated
Is there a way to make the parent container elevate(drop shadow) without affecting child auto-layout components? When I try to elevate a card and its content everything within the parent container elevates....
очень интересно, нужно будет проработать данный функционал