Blog
Figma tutorial : autolayout and constraints
Are you working on Figma and would like to create responsive design interfaces, with blocks that adapt to all types of screens ?
Figma is a very powerful modeling software that allows you to create complex interface designs. There are a plethora of video tutorials online to learn how to create navigation bars in autolayout and responsive design, you can notably follow the YouTube channels of Jessica Trocmé and Basti UI who are my mentors for learning the basics of Figma. If you can’t follow a video and prefer the written tutorial version, here’s how to learn how to create a block with responsive text!
Components on Figma
First thing to remember !
The Master component on Figma is the main version of a clickable element that you will create, such as a button or an icon.
It serves as a template for all instances of this element in your design.
When you make changes to the Master component, they are automatically reflected across all instances, making it easier to keep your design up to date and consistent.
Create a responsive block on Figma
with autolayout and constraints in 6 steps
Step 2 : create a frame encompassing the texts and add a background (check “clip content” on the parent frame so that the red rectangle adapts to the rounded rectangle) + add constraints
Step 5 : create different formats from the master component (copy-paste the master component and adapt the cards according to the size you want)
Step 6 : as the long texts exceed, add auto-height on the master component texts
+ scale on the subtitle
+ add vertical autolayout on the bottom block
+ scale on the subtitle
Don’t forget to differentiate between constraints and autolayout : constraints are when you want to resize the parent by hand. Auto layout is when the child pushes the “parent”. layout c’est lorsque l’enfant pousse le “parent”.
