"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 constraints in Figma: help.figma.com/hc/en-us/articles/360039957734-Apply-constraints-to-define-how-layers-resize"
Constraints don't show up as an option for me. I followed this tutorial a few times and I never got the option to constrain things. It simply never appeared.
I have the same question! I played around with switching the Tab Bar constraint back and forth from "Scale" to "Left & Right" and they both looked the same as far as I could tell.
It's unclear and doesn't work. This tutorial is very confusing because it doesn't explain how the objects are grouped together.I followed it step by step and my components stretch and deform if I click and pull the rectangle. How do you even click and simply select individual shapes inside a component? Is there a key you are holding? Are the components made in a different way than the classic method? The left panel needs to be in the picture.
to the right of the x, y coordinates there is a little icon that appears when constraint options are available. I wonder why people are still using constraints though. I think this functionality is better covered by auto layout. but I could be missing something
In regards to Constraints, specifically: Constraints -> Vertical: Left & Right Constraints -> Vertical: Scale I seem to get the same results. Is there a difference in this case, I can't seem to spot one?
How to group all the elements properly so that they don't stretch? Please explain the stretch constraint a bit more, I didn't quite understand what it means...
Hello, I believe you want to edit an instance, which is a copy of a component. Check out our video tutorial on component: th-cam.com/video/EoJolbaEQi8/w-d-xo.html You can override an instance text, fill, stroke, and effect properties (Learn more here: help.figma.com/hc/en-us/articles/360039150733-Apply-overrides-to-instances). If you would like to make changes to the properties that aren't supported by overrides, you can detach the instance from the component (Learn more here: help.figma.com/hc/en-us/articles/360038665754-Detach-an-instance-from-the-component). Hope this is helpful!
I think there would be 2 solutions: 1. Selecting a frame inside which all the interesting you nested constrained objects are. Then press enter (this will make you select inner objects inside selected frame) and change constraints. Then press enter again and release again, etc. 2. There actually may be a plugin for that if you google well, since most of what I tried to find was solved using plugins already.
I've watched so many tutorials and I'm finding figma incredibly frustrating to learn. I just need a simple design system. I dont understand why the top down shit cant be explained. I get the tools are helpful bunt I dont understand where people are learning how to align text to a box. how does this text stay centered. It feels like there are fifty different ways to center text. Both with the text align tools, the top align features. I dont understand how large the text barriers should be. Should it hug the text? should it not? Do I need to select the outer box with the inner text in order for these top contraints to work? what happens when I resize the text. why cant i just easily create a color style without having to try to color a shape. Why isnt there a simple add main color style and just choose your style. but instead you need to enter a menu and decide on the fly what color style you want and then once you have sort of decided that, easily finding these styles in one of four different locations and knowing which place you need to go to edit it seems frustratingly difficult just to figure out. Im sure the designers at figma watch begginers learn this products with no explanation or help given, but omfg I just need to easily learn the basics and get a project done. it feels like this product wants more noteriety for being a solid solution than actually stepping to the side and let the software be self explanatory and just do what it needs to. are colors at the bottom of the right hand bar and layers are above that. Dont people often choose to modifiy colors as one of the most frequently used things. I feel like auto layout is just right where I'd like colors to be and god knows what layout grid is doing rightttt in the middle of the most useful location. and fill isnt clear in terms of how it is different than selections colors. at this point im just ranting, but i keep trying to learn this thing and i keep getting frustrated and then never want to look at this software again. how long does it take for it to become instinctual just to align text inside a freaking box in this thing. Im going to take a break and come back but hopefully not another 2 week break. good god.
Lol, Figma is the current market leader because is the easiest tool for designers. If you can't take the time to learn it, then it's time to switch careers.
I would like to pat you on the back, bro. You'll get there. Im having hiccups here and there too but experience will be your best teacher. Make mistakes and you'll find the best solution when in dire times
Hello Laura, that's by design (the view only mode). It's technically a master copy, so what you need to do is copy it, and paste it over to your own blank document, then you're good to go. select all (ctrl +a), copy. Then create a new blank file, then paste.
They do make some fantastic work and set the bar really high! We're currently testing a bunch of different production methods, so hopefully one of them gets close to what they're doing.
I think it's a screen recorded with something like Cleanshot, then you put it in After Effects and add animated custom mouse + all other motion elements.
Hi Lisa, you can click on the chevron next to the file name and select "Duplicate" from the dropdown menu to make a new copy in your Figma account. Hope that helps!
It's all the same person! Because we went into lockdown from the state government while in mid-production, I lost access to our recording space and equipment and had to record in a bedroom with a blanket over my head
Hi, for some reason the files for the tutorial are "view only" on my desktop - can you help me what might be the issue? Would greatly appreciate it as I would dig deep into figma thanks to your awesome videos :)
Click on the mame of the file "Constraints Tutorial File" just above the workspace (below the tabs, if you're using the app). It has a chevron next to it. If you click "Duplicate" it'll let you make a copy you can edit :)
I love this tutorial from the content perspective, but the fact that it's not a real in-app footage is a little sad-I miss seeing how things snap to other things like in your previous tutorials. Feels less human this way.
Keen eye! We were testing a couple of different production workflows to make the videos easier to update, so this one was animated by hand. We did use real in-app footage for this video: bit.ly/2YoncxN and will be using that method for some future videos, so be sure to subscribe to keep up to date!
Figma , I’m using the TH-cam app on mobile and the bit.ly URL opens in my browser instead of the app itself despite being another TH-cam video, which is a bit inconvenient.
I am a bit confused with how text constraints work. Let's say I have a text button component, should I apply constraints to the text? So that it responds to any changes in the button size? Isn't there some other function that allows the textbox to adjust according to the size of its parent element?
Figma The first that come to mind are AJ&Smart and Flux. Thomas Frank sounds like he may have some interested connections (albeit not through his main channel). TheFutur (Chris Do) or one of their associates would also be a good fit as long as their not already aligned with a competitor.
"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 constraints in Figma: help.figma.com/hc/en-us/articles/360039957734-Apply-constraints-to-define-how-layers-resize"
Y'all have the clearest, loviest tutorials!
Hey I know Tim!
@@Chadthaniel Small world! :P
This video is more followable than the older constraints video for sure
Why did the top bar get "Left-to-Right" H-constraint and the bottom bar get "Scale" H-constraint? The H-constraint meaning is the same in both cases.
i am confused in constraints & auto layout there work are same or what?
Constraints don't show up as an option for me. I followed this tutorial a few times and I never got the option to constrain things. It simply never appeared.
it took me 2 hours struggling on my own before I swallowed my pride just to come get this perfect 4 minutes video. Thanks for this
I don’t feel so bad that I am still confused about how this works... anyone know a good tutorial on constraints and auto layout in figma?
Um, how do I put it... but how many different microphones did you guys actually use to record this ?
I feel totally same lmao
Great contents with very unstable audio is super unique (I'm trying to stay positive haha
Well we can't be professional on everything I guess......
I liked the video. Super useful. I have question, why did choose horizontal constraint for tab bar to "Scale" while status bar to "Left and right" ?
I have the same question! I played around with switching the Tab Bar constraint back and forth from "Scale" to "Left & Right" and they both looked the same as far as I could tell.
Depending on whether you want to keep a fixed padding for the icons with left and right edges.
Very nicely visually explained "Constraints". Thank you!
Very informative. I am learning more about Figma as I have been a Visual UX designer for a year now
This should probably add a note about when to use auto layout vs (or with) constraints. I think the video was created before auto layout was released.
Also don't forget to set Text Alignment to the desirable direction (Ctrl + Alt + T, L or R)
Why set the horizontal component for the Tab Bar to "Scale" and not "Left&Right" like the Status bar?
You should've every option while doing it.
Great video! Why margin 16 and Gutter 32? For some reason, I don't have layout grid in my educational account
Thanks, Figma! You're great!
what if you want to set a constraint to an element with auto layout?
Well, well. Constraints are good, but what about autolayouts? They don't work like that! Still. When you will upgrade it?
they work fine in my figma
I cannot move the bars, it apears with a red border and I cannot drag in to the workspace
That was brilliant, thank you!
It's unclear and doesn't work.
This tutorial is very confusing because it doesn't explain how the objects are grouped together.I followed it step by step and my components stretch and deform if I click and pull the rectangle.
How do you even click and simply select individual shapes inside a component?
Is there a key you are holding?
Are the components made in a different way than the classic method?
The left panel needs to be in the picture.
thanks a lot!!! so nice reverb
I was struggling for ages till I watched this video and realised that constraints only apply to parent frames, not groups.
Amazing Amazing! Thanks a ton man
Thank you figma.
Thanks, it helped me
I have my constraints set to left-center and the element still scales down when I scale the parent component. What is going on?
Very nice. Where's this in the new UI?
to the right of the x, y coordinates there is a little icon that appears when constraint options are available
Can one use auto layout and constraints at the same time, or does one replace the other?
What is the button to undo the frame it's isn't working cmd +z
Does constrains is suposed to work in prototype? I'm having problems with the layers overlaping each other while using auto layout.
Where can I find the 2024 version of this tutorial, please?
to the right of the x, y coordinates there is a little icon that appears when constraint options are available. I wonder why people are still using constraints though. I think this functionality is better covered by auto layout. but I could be missing something
many steps to remember :O
Hey Figma ! Sorry to say, I love Adobe's one minute tutorial. Billions are coming from that way.
Thanks for listening !
Now, After listening to you peacefully, you've explained or connected me pretty well.
Thank you.
thankyou so much
In regards to Constraints, specifically:
Constraints -> Vertical: Left & Right
Constraints -> Vertical: Scale
I seem to get the same results. Is there a difference in this case, I can't seem to spot one?
i think in this case not since both left and right are 0 px from the borders, so it gives the same result as scale
thank you bro thank you
How to group all the elements properly so that they don't stretch?
Please explain the stretch constraint a bit more, I didn't quite understand what it means...
You need to select inner objects inside the auto-layout and set their resizing rules in the top of right bar (near sizes, angle and rounding)
@@grinkevych Superb, thank you :)
Hello! i am seeing purple boxes around the icons and therefore not able to edit them to practice- could anyone help? what does this mean?
Hello, I believe you want to edit an instance, which is a copy of a component. Check out our video tutorial on component: th-cam.com/video/EoJolbaEQi8/w-d-xo.html
You can override an instance text, fill, stroke, and effect properties (Learn more here: help.figma.com/hc/en-us/articles/360039150733-Apply-overrides-to-instances). If you would like to make changes to the properties that aren't supported by overrides, you can detach the instance from the component (Learn more here: help.figma.com/hc/en-us/articles/360038665754-Detach-an-instance-from-the-component). Hope this is helpful!
constraints don't show up on some of my frames
The link to the design files sends you to a View Only file. Is there an editable file that we can follow along with?
Hi Kirby, you can duplicate the file to your draft and follow along.
Is it possible to mass release constraints? Like a "release all constraints in frame" function?
I think there would be 2 solutions:
1. Selecting a frame inside which all the interesting you nested constrained objects are. Then press enter (this will make you select inner objects inside selected frame) and change constraints. Then press enter again and release again, etc.
2. There actually may be a plugin for that if you google well, since most of what I tried to find was solved using plugins already.
I've watched so many tutorials and I'm finding figma incredibly frustrating to learn. I just need a simple design system. I dont understand why the top down shit cant be explained. I get the tools are helpful bunt I dont understand where people are learning how to align text to a box. how does this text stay centered. It feels like there are fifty different ways to center text. Both with the text align tools, the top align features. I dont understand how large the text barriers should be. Should it hug the text? should it not? Do I need to select the outer box with the inner text in order for these top contraints to work? what happens when I resize the text. why cant i just easily create a color style without having to try to color a shape. Why isnt there a simple add main color style and just choose your style. but instead you need to enter a menu and decide on the fly what color style you want and then once you have sort of decided that, easily finding these styles in one of four different locations and knowing which place you need to go to edit it seems frustratingly difficult just to figure out. Im sure the designers at figma watch begginers learn this products with no explanation or help given, but omfg I just need to easily learn the basics and get a project done. it feels like this product wants more noteriety for being a solid solution than actually stepping to the side and let the software be self explanatory and just do what it needs to. are colors at the bottom of the right hand bar and layers are above that. Dont people often choose to modifiy colors as one of the most frequently used things. I feel like auto layout is just right where I'd like colors to be and god knows what layout grid is doing rightttt in the middle of the most useful location. and fill isnt clear in terms of how it is different than selections colors. at this point im just ranting, but i keep trying to learn this thing and i keep getting frustrated and then never want to look at this software again. how long does it take for it to become instinctual just to align text inside a freaking box in this thing. Im going to take a break and come back but hopefully not another 2 week break. good god.
Lol, Figma is the current market leader because is the easiest tool for designers. If you can't take the time to learn it, then it's time to switch careers.
I would like to pat you on the back, bro. You'll get there. Im having hiccups here and there too but experience will be your best teacher. Make mistakes and you'll find the best solution when in dire times
I love figma...
i don't see layout grid ...
The linked design file is in view only mode so i can't really use it.
Hello Laura, that's by design (the view only mode). It's technically a master copy, so what you need to do is copy it, and paste it over to your own blank document, then you're good to go.
select all (ctrl +a), copy. Then create a new blank file, then paste.
I can only access the "view only" mode to try to follow only with this tutorial .....
ㅎㅎ감사합니다
I love Figma, but your tutorials could really use a little something - maybe get some inspiration from the guys over at Webflow, they're killing it
They do make some fantastic work and set the bar really high! We're currently testing a bunch of different production methods, so hopefully one of them gets close to what they're doing.
I get migraine listening to these tutorials.
Can you tell how you made this video? What softwares you used?
I think it's a screen recorded with something like Cleanshot, then you put it in After Effects and add animated custom mouse + all other motion elements.
audio production :(
File is VIEW ONLY
Hi Lisa, you can click on the chevron next to the file name and select "Duplicate" from the dropdown menu to make a new copy in your Figma account. Hope that helps!
cmd + z on ios, how it will be on windows?
its ctrl + z
Mlk, se pá que o canal foi hackeado
а раньше ни кто этим не пользовался?
ни кто
Oof, Top Quality....
Figma is amazing, it works just as good on pc as it does on mac.
Finally i can ditch that shitty macbook and keep all my work in Windows.
Was the voiceover recorded by 10 different guys wtf ahahahaha
😂
this is not a great video tutorial for beginners sorry
This is so powerful! I'm watching every video/tutorial available and I feel amazed by all of them!
Animations With Figma th-cam.com/video/aMFUuGZ9LEs/w-d-xo.html
I'm still learning to use Figma, but I found this tool very useful!
Glad it was helpful!
I dont understand" how to use layout grid constrains" .
Would love to see a more web-based tutorial on this.
Who is this guy at 1:41?
goolug lol
It's all the same person! Because we went into lockdown from the state government while in mid-production, I lost access to our recording space and equipment and had to record in a bedroom with a blanket over my head
@@Figma It sounded great, thank you guys so much!
Perfect one
Why set the system bar component horizontal "left and right" and the bottom nav bar horizontal "scale"? Why are they set differently?
Hi, for some reason the files for the tutorial are "view only" on my desktop - can you help me what might be the issue? Would greatly appreciate it as I would dig deep into figma thanks to your awesome videos :)
Click on the mame of the file "Constraints Tutorial File" just above the workspace (below the tabs, if you're using the app). It has a chevron next to it. If you click "Duplicate" it'll let you make a copy you can edit :)
Is there an easy way to make sure components are "16 pixels above the tab bar"?
Select the item to measure and hold option or alt to see it's distances to other items.
làm sao để bên trái của tôi có ràng buộc nhỉ
I love this tutorial from the content perspective, but the fact that it's not a real in-app footage is a little sad-I miss seeing how things snap to other things like in your previous tutorials. Feels less human this way.
Keen eye! We were testing a couple of different production workflows to make the videos easier to update, so this one was animated by hand. We did use real in-app footage for this video: bit.ly/2YoncxN and will be using that method for some future videos, so be sure to subscribe to keep up to date!
Figma , I’m using the TH-cam app on mobile and the bit.ly URL opens in my browser instead of the app itself despite being another TH-cam video, which is a bit inconvenient.
Cool.... not really explaining WHY on the scale constraint, but I guess I'll figure it out.
I am a bit confused with how text constraints work. Let's say I have a text button component, should I apply constraints to the text? So that it responds to any changes in the button size?
Isn't there some other function that allows the textbox to adjust according to the size of its parent element?
too complicated. I never manage to achive what i want.
WHY DID I NOT LOOK THIS UP EARLIER?!
Well, that's really confusing
3:24 where can I check the pixels?
What's up with the team tagging voice overs?
Someone doing the videos does not understand how to set the mic levels and audio standards up professionally
This doesn't work for me. Every time I frame the selection, the prototype view gets shifted and content appears misaligned.
I cant find contraint bar
This is superb.
why are so many people confused, this was straight to the point!
Please create a video for Double stroke?
i hope Adobe fixes auto row layouts, so that we can specify min and max width and the cards can automatically bump down to new row.
i dont understand why you changed the column margin and gutter to those respective numbers at 3:00 part of the video???
can anyone have idea that constrains only work when parent have frame ? or it can work on layer, group folder ?
Is layout grid really necessary? 3:16 I could do it with just the centered constraints
By far 1 of the best tools I've worked with in a long time! Tutorials are very clear & informative. Thanks Figma & team!!
Maybe partner with some talented TH-camrs to make more engaging tutorials?
Great idea! Got any one in mind?
Figma The first that come to mind are AJ&Smart and Flux. Thomas Frank sounds like he may have some interested connections (albeit not through his main channel). TheFutur (Chris Do) or one of their associates would also be a good fit as long as their not already aligned with a competitor.
is there more videos on constraints provided by figma?
HOW CAN I FIND THE PADDING OF AN ELEMENT>!?!??????????????
3:23 how do you know that is 16 pixels?
I think it was hidden by recording app, but you can select an object and then press Option to view distances to nearby objects.
How did yo decide the margin and gutter values?
Fantastic
Why should the gutter be 32?
That lil gap left at the end tho 🫨
We have to think the X y axis?
Excellent Explanation
So cool! Thank you!