with help of figma auto-layout we can understand the basics of UI and it reduce the stress while coding.
A simple sign up form lets start
<!--Note: I made color and text styles. add your own styles to your project-->
properties of auto layout
spacing between items
positioning the items
Input component is ready. add the component instance to our container and copy it and change the label name.
- Add a text layer
Add a button label
- Add auto layout to this text layer
16px 24px(16, 24 in input)
- Align to center direction
corner radius of
- Add Fill and change the colour
- Add a button to our main container.
- Add auto layout to this text layer paddding of
add little adjustment to our container add
destructuring from our design
our form is ready