Introduction to figma auto-layout and how it help us to code easily. From design to code.
Published: 2021-03-03 06:13:58

# Introduction to figma auto-layout and how it help us to code easily. From design to code.

with help of figma auto-layout we can understand the basics of UI and it reduce the stress while coding.

## What are we going to design and code?

A simple sign up form lets start

<img src="https://imgur.com/K3q1Zze.png" alt="form"  />





###   1. setting up of our container

​       <!--***Note: I made color and text styles. add your own styles to your project***-->



1. Select the text layer ![textlayer](https://imgur.com/TPKoIic.png)

2. After writing our text select the auto layout option ![auto](https://imgur.com/1uSwgS8.png)

 Now auto layout is added ![](https://imgur.com/wXVXNKl.png)

 properties of auto layout  

-  Direction (flex-direction)

- spacing between items

- padding 

- positioning the items

  ![](https://imgur.com/cZEHz6r.png)

5. now add the padding (top,bottom, left,right) of `24px ` and add fill to our container.  ![gif](https://imgur.com/EKSAjpS.gif)



6. now copy the same text and change the direction and the copied text to (Create your account with easy
   with less information)![direction](https://imgur.com/ihSDJhZ.png)

7. Now our container is ready and add space between two text to `16px`. ![gif](https://imgur.com/MHWrTe2.gif)

### 2. Setting up th Input container.

1. create a label for our input  ![label](https://imgur.com/QjUhTkw.png)



2.  Add auto layout to this label ![auto layout](https://imgur.com/5x40WT1.png)
3. Add a rectangle to our Frame2(label frame). ![rectangle](https://imgur.com/pbnp9Ux.png)

4. Add width and height to our rectangle and spacing is `10px` and padding is `0px`![width and height](https://imgur.com/0Y8Rw4Y.png)

5. Now change the direction ![direction](https://imgur.com/gICdDgw.png)

6. adjust the width of the rectangle(input) and make it as a component ![component](https://imgur.com/WmdmpJI.png)

7. Input component is ready. add the component instance to our container and copy it and change the label name. 

   ![](https://imgur.com/KXz51PD.gif)



 Now group everything inside our container and space between our groups is  `48px`. 
 ![gif](https://imgur.com/9AnsV1V.gif)

 now change the style of input by changing the component. ![](https://imgur.com/Fu9nUD8.gif)

  Now submit button. 
![](https://imgur.com/EWgrB92.gif)
-  Add a text layer 
-   Add a button label

   - Add auto layout to this text layer
        paddding of `16px 24px` (16, 24 in input)

   - Align to center direction 
        corner radius of `50px`

   - Add Fill and change the colour  
   - Add a button to our main container.



      





### 3. Design is ready and Design to code.

  add little adjustment to our container add `padding-bottom :48px`

   destructuring  from our design

  ![](https://imgur.com/C5AmkQE.png)

### HTML structure 

container ![](https://imgur.com/XxYd5BU.png)
component-1 ![](https://imgur.com/nD4YvYb.png)component-2  ![](https://imgur.com/Jj3aP12.png)
 component-3 ![](https://imgur.com/w3JER7D.png)
![](https://imgur.com/MVQydLO.png)



### CSS

with basics styles, we can code our form.
centre our container![](https://imgur.com/wAGZCDM.png)
 adding styles to our container the padding from auto layout and using grid we're aligning our components in a single Column

 ![](https://imgur.com/0OBIeRM.png)
now adding styles and spacing to our component-2     
![](https://imgur.com/qxBI2Nq.png)
![](https://imgur.com/M2oqN6N.png)
 Final out button styles
![](https://imgur.com/gcAmTEa.png)![](https://imgur.com/2Ly9IyE.png)

   our form is ready


[codepen](https://codepen.io/yadzero/pen/PobaNYL)