Comment on page
Creating Responsive Designs
Making responsive designs is as simple as using Auto Layout in Figma.
Let's consider a simple login form as an example, where the text fields and the button are always centered.
In this example, we have a parent container (frame) that includes Label and Input components ("Email", "Password"), Paragraph component, and a login button.
At the top level, we set Auto Layout to "vertical" and add padding for aesthetics and to separate form elements. The size of this padding depends on your personal taste and project requirements. When adjusting the size, you can set "Horizontal Resizing" and "Vertical Resizing" to "Hug Contents" for each form element. This way, the elements automatically adjust their sizes to the content.
For the parent frame, which is the main container of the form, set "Horizontal Resizing" to "Fill Container". This way, the form will automatically adjust its width to the width of the container it is in, making it responsive.
In the context of Auto Layout, "Hug Contents" means that the size of the element is always adjusted to its content, while "Fill Container" ensures that the element always fills the available space in the container.
In conclusion, thanks to Auto Layout, we can easily create a responsive login form in Figma that elegantly adapts to the changing width of the container.