Figma tutorial: Constraints
Вставка
- Опубліковано 9 лип 2024
- Figma is free to use. Sign up here: bit.ly/34FmXQa
Get your own copy of the design File: bit.ly/3cjudnq
In this video, you'll get a quick overview of Figma's constraints feature and how you can use constraints to build a scalable and consistent UI.
0:00 - What are Figma constraints
0:15 - How to use constraints in Figma
0:25 - Child objects and parent objects in constraints
0:45 - How to create constraints
1:00 - How to set horizontal and vertical constraints
1:30 - How to set center constraints
1:58 - How to resize the width in a constraint
2:42 - How to use layout grid constraints
3:25 - How to constrain objects to a frame
4:10 - How to wrap text using constraints
Learn more on our Help Center:
Apply Constraints to define how layers resize: bit.ly/3a8Gc5x
Combine Layout Grids and Constraints for flexible layouts: bit.ly/3eiuUzb
On My Way by Ghostrifter Official
/ ghostrifter-official
Creative Commons - Attribution-ShareAlike 3.0 Unported - CC BY-SA 3.0
Free Download / Stream: bit.ly/on-my-way-go
Music promoted by Audio Library • On My Way - Ghostrifte...
#Figma #FigmaDesign #FigmaTutorial #Constraints - Наука та технологія
This is so powerful! I'm watching every video/tutorial available and I feel amazed by all of them!
Animations With Figma ua-cam.com/video/aMFUuGZ9LEs/v-deo.html
Very nicely visually explained "Constraints". Thank you!
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
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?
That was brilliant, thank you!
Thanks, Figma! You're great!
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.
Very informative. I am learning more about Figma as I have been a Visual UX designer for a year now
i am confused in constraints & auto layout there work are same or what?
By far 1 of the best tools I've worked with in a long time! Tutorials are very clear & informative. Thanks Figma & team!!
Would love to see a more web-based tutorial on this.
I'm still learning to use Figma, but I found this tool very useful!
Glad it was helpful!
So cool! Thank you!
thanks a lot!!! so nice reverb
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.
This is so amazing
This is superb.
Amazing Amazing! Thanks a ton man
Excellent Explanation
Thanks, it helped me
Perfect one
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
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......
Thank You !
Thank you figma.
thank you bro thank you
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?
thankyou so much
many steps to remember :O
what if you want to set a constraint to an element with auto layout?
Fantastic
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.
Can one use auto layout and constraints at the same time, or does one replace the other?
Great video! Why margin 16 and Gutter 32? For some reason, I don't have layout grid in my educational account
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.
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.
Why set the system bar component horizontal "left and right" and the bottom nav bar horizontal "scale"? Why are they set differently?
WHY DID I NOT LOOK THIS UP EARLIER?!
Also don't forget to set Text Alignment to the desirable direction (Ctrl + Alt + T, L or R)
Does constrains is suposed to work in prototype? I'm having problems with the layers overlaping each other while using auto layout.
That lil gap left at the end tho 🫨
JUST WOW.
can anyone have idea that constrains only work when parent have frame ? or it can work on layer, group folder ?
is there more videos on constraints provided by figma?
I cannot move the bars, it apears with a red border and I cannot drag in to the workspace
Is layout grid really necessary? 3:16 I could do it with just the centered constraints
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 :)
ㅎㅎ감사합니다
Please create a video for Double stroke?
I was struggling for ages till I watched this video and realised that constraints only apply to parent frames, not groups.
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 get migraine listening to these tutorials.
I love figma...
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.
We have to think the X y axis?
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.
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
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 have my constraints set to left-center and the element still scales down when I scale the parent component. What is going on?
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.
Cool.... not really explaining WHY on the scale constraint, but I guess I'll figure it out.
How did yo decide the margin and gutter values?
how do I make text resize for when the screen gets smaller
You need to select the text inside the auto-layout frame and set it width to Fill in top right bar.
What is the button to undo the frame it's isn't working cmd +z
This doesn't work for me. Every time I frame the selection, the prototype view gets shifted and content appears misaligned.
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: ua-cam.com/video/EoJolbaEQi8/v-deo.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 cant find contraint bar
i dont understand why you changed the column margin and gutter to those respective numbers at 3:00 part of the video???
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 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 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 UA-cam app on mobile and the bit.ly URL opens in my browser instead of the app itself despite being another UA-cam video, which is a bit inconvenient.
constraints don't show up on some of my frames
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 :)
I dont understand" how to use layout grid constrains" .
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.
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!
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
HOW CAN I FIND THE PADDING OF AN ELEMENT>!?!??????????????
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.
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.
i don't see layout grid ...
Why should the gutter be 32?
I can only access the "view only" mode to try to follow only with this tutorial .....
I dont understand 3:02 , why 16 and 32 ???
16 px/pt seems to be a standard / minimum choice for margin distance (i.e. padding). The gutter has to be bigger than the size of the margin because a gutter distance of 16px/pt will make the icons closer to each other when you resize the width of the bar to a shorter distance. It's just about the spacing between the objects, and I guess they chose 32 to make icons more evenly spaced from each other. It also just makes more sense mathematically because it's 16 | object | 16 + 16 | object | 16 + 16 | object | 16
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.
cmd + z on ios, how it will be on windows?
its ctrl + z
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.
а раньше ни кто этим не пользовался?
ни кто
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
audio production :(
Mlk, se pá que o canal foi hackeado
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!
Was the voiceover recorded by 10 different guys wtf ahahahaha
😂
Maybe partner with some talented UA-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.
Well, that's really confusing
too complicated. I never manage to achive what i want.
this is not a great video tutorial for beginners sorry