Figma tutorial: Constraints

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:

On My Way by Ghostrifter Official
Creative Commons — Attribution-ShareAlike 3.0 Unported — CC BY-SA 3.0

#Figma #FigmaDesign #FigmaTutorial #Constraints

[Figma]

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

[timsilva_]

Y'all have the clearest, loviest tutorials!

[ednh]

This is so powerful! I'm watching every video/tutorial available and I feel amazed by all of them!

[Silfiderium]

I'm still learning to use Figma, but I found this tool very useful!

[michaelhenes]

This video is more followable than the older constraints video for sure

[Tecboy]

By far 1 of the best tools I've worked with in a long time! Tutorials are very clear & informative. Thanks Figma & team!!

[borisnefyod]

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.

[KonkuerorPZ]

Very informative. I am learning more about Figma as I have been a Visual UX designer for a year now

[newtonoluoch]

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

[EPSTomcat]

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?

[lofi_Insomnia_]

Would love to see a more web-based tutorial on this.

[trifco-studio]

Very nicely visually explained "Constraints". Thank you!

[KameDoes]

why are so many people confused, this was straight to the point!

[XandWacky]

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.

[marwinthedja]

Um, how do I put it... but how many different microphones did you guys actually use to record this ?

[sj]

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" ?

[mrajax_]

i am confused in constraints & auto layout there work are same or what?

[mhardee]

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.

[WaltonV]

Also don't forget to set Text Alignment to the desirable direction (Ctrl + Alt + T, L or R)

[excmax]

Well, well. Constraints are good, but what about autolayouts? They don't work like that! Still. When you will upgrade it?