Creating Interactive Form in Figma

Last Updated : 14 May, 2024

Creating an interactive form in Figma has become an essential skill for UX/UI designers aiming to craft engaging and efficient digital experiences. Figma is a collaborative design tool that helps in UX/UI designing. This tool helps to build creative UI designs. You can use this tool to create interactive forms before actually implementing them in the app.

<bi>

Interactive Forms

Interactive forms are the best way to visualize the workings of user interactions. They can be used to collect user information. Figma allows you to add interactions and animations to your forms without any need to code them.

Interactive Form in Figma

Why to use Interactive Forms?

UI designers or Developers can easily identify the End-to-End working of forms in the application else they will have to waste lots of time or energy in actually building it and troubleshooting it iteratively. So, this feature in figma helps you to avoid any such hectic.

How Figma can be used to design interactive forms?

Interactive forms are made up of interactive form elements like Text Field , Buttons , Checkbox , range fields etc. To create an interactive form in figma we should follow some general steps :

Creating a form element
Right click on it and selecting auto layout
Right click again and then create component
Select variant on properties panel
Make changes in the variants
Go to prototype tab
Select the elements and pull the arrows according the the required flow.
Preview the page

Now, let us explore the above steps with a good example:

Example

In this example, let us create a form containing more elements like text field with validation , checkboxes , buttons following the above steps.

Step 1: Create elements like text field , checkbox, button and group then separately if required.

Create elements like text field , checkbox, button

Step 2: For text field create 3 variants , one for normal , two for focus , three for error. Two variants for check boxes. For checked and unchecked conditions. Similarly , create 2 variants for buttons

creating 3 variants , one for normal , two for focus , three for error

Step 3: Add Interactions from prototype , move the components away and add combined one from assets tab like it is shown for some elements below

Adding Interactions from prototype

Implementation of above design

Here, we will convert the above design into code using figma with plugin.

Note : We are using Anima, which is a figma plugin for generating code for the UI design .

Implementation

Steps:

Switch to dev mode in figma.
Download Anima plugin or other and sign in.
Select the form to generate code.
Add interactions into the form following the below given code <script/>.

Code Generated:

HTML

<!DOCTYPE >
<html>
       <head><title>GFG</title></head>
<body>
<div>
  <div id="div1">
    <div id="button">
      <div>Button</div>
    </div>
  </div>
  <div id="div2">
    <div>Name</div>
    <input id="name"/>
  </div>
  <div id="div3">
    <div>Password</div>
    <input id="password"/>
  </div>
  <div id="div4">
    <input type="checkbox" />
    <div>Checkbox one</div>
  </div>
  <div id="div5">GeeksforGeeks</div>
  <div id="div6">
    <input type="checkbox" />
    <div>Checkbox two</div>
  </div>
  <div id="div7">
    <input type="checkbox" />
    <div>Checkbox three</div>
  </div>
</div>
<script>
    let input1 = document.getElementById('name')
    input1.onfocus = (e)=>{
        e.preventDefault()
        input1.style.borderColor = "green";
        input1.style.borderWidth = 4;
    }
    input1.onkeypress = (e)=>{
        e.preventDefault()
        input1.style.borderColor = "red";
    }
    input1.onblur = (e)=>{
        e.preventDefault()
        input1.style.borderColor = "black";
        input1.style.borderWidth = 1;
    }

    let input2 = document.getElementById('password')
    input2.onfocus = (e)=>{
        e.preventDefault()
        input2.style.borderColor = "green";
        input2.style.borderWidth = 4;
    }
    input2.onblur = (e)=>{
        e.preventDefault()
        input2.style.borderColor = "black";
        input2.style.borderWidth = 1;
    }
    input2.onkeypress = (e)=>{
        e.preventDefault()
        input2.style.borderColor = "red";
    }
    input2.onblur = (e)=>{
        e.preventDefault()
        input2.style.borderColor = "black";
        input2.style.borderWidth = 1;
    }
    let button = document.getElementById('button')
    button.onclick = (e)=>{
        e.preventDefault()
        button.style.backgroundColor="red";
    }
</script>
</body>
</html>

CSS

body > div{
    
    width: "375px";
     height: "667px";
      position: relative; 
      background: white;
    }
    #div1{
    left: 38px; 
    top: 543px; 
    position: absolute; 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: flex-start; 
    gap: 10px; 
    display: inline-flex;
    }
    #div1 > div{
    width: 300px; 
    height: 75px; 
    position: relative;
    }
    #button{
    width: 290px; 
    height: 75px; 
    left: 0px; 
    top: 0px; 
    position: absolute; 
    background: #DFDCDC; 
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 
    border-radius: 6px;
    }
    #div1 > div > div:last-child{
    width: 218px; 
    height: 55px; 
    left: 90px; 
    top: 15px; 
    position: absolute; 
    color: black; 
    font-size: 38px; 
    font-family: Inter; 
    font-weight: 400; 
    word-wrap: break-word;
    }
    #div2{
    left: 44px; 
    top: 86px; 
    position: absolute; 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: flex-start; 
    gap: 10px; 
    display: inline-flex;
    }
    #div2 > div:first-child{ 
    width: 146px; 
    height: 25px; 
    color: black; 
    font-size: 16px; 
    font-family: Inter; 
    font-weight: 500; 
    word-wrap: break-word;
    }
    #name{
    width: 284px; 
    height: 64px; 
    background: white; 
    border-radius: 9px; 
    border: 1px black solid ; 
    outline:0;
    }
    #password{
    width: 284px; 
    height: 64px; 
    background: white; 
    border-radius: 10px; 
    border: 1px black solid ; 
    outline:0;
    }
    #div3{
    left: 44px; 
    top: 197px; 
    position: absolute; 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: flex-start; 
    gap: 10px; 
    display: inline-flex;
    }
    #div3 > div:first-child{
    width: 146px; 
    height: 25px; 
    color: black; 
    font-size: 16px; 
    font-family: Inter; 
    font-weight: 500; 
    word-wrap: break-word;
    }
    #div4{
    height: 34px; 
    left: 71px; 
    top: 351px; 
    position: absolute; 
    justify-content: flex-start; 
    align-items: flex-start; 
    gap: 26px; 
    display: inline-flex;
    }
    #div4 > div{
    width: 201px; 
    height: 34px; 
    color: black; 
    font-size: 16px; 
    font-family: Inter; 
    font-weight: 500; 
    word-wrap: break-word;
    }
    #div5{
    width: 237px; 
    height: 44px; 
    left: 86px; 
    top: 25px; 
    position: absolute; 
    color: #34AD09; 
    font-size: 26px; 
    font-family: Inter; 
    font-weight: 500; 
    word-wrap: break-word;
    }
    #div6{
    height: 34px; 
    left: 71px; 
    top: 402px; 
    position: absolute; 
    justify-content: flex-start; 
    align-items: flex-start; 
    gap: 26px; 
    display: inline-flex;
    }
    #div6 > div{
    width: 201px; 
    height: 34px; 
    color: black; 
    font-size: 16px; 
    font-family: Inter; 
    font-weight: 500; 
    word-wrap: break-word;
    }
    #div7{
    height: 34px; 
    left: 71px; 
    top: 453px; 
    position: absolute; 
    justify-content: flex-start; 
    align-items: flex-start; 
    gap: 26px; display: inline-flex;
    }
    #div7 > div{
    width: 201px; 
    height: 34px; 
    color: black; 
    font-size: 16px; 
    font-family: Inter; 
    font-weight: 500; 
    word-wrap: break-word;
    }
    input{
    width: 20px; 
    height: 20px; 
    margin-top: -1;
    }

Note : Please try the plugin to get the complete code structure

Output

Benefits of using Figma for designing forms

You can demonstrate the working of the form.
You can make better form responses by identifying the form flow.
Get better User Experience.
Improves productivity and saves time.
Encourages better collaboration between design and development.

Conclusion

Interactive forms are the great way to easy UI development. So, you understood the working process of building forms with interaction in figma without code. You can give it a try yourself with multiple examples. This helps you to provide a full proof plan of UI responses to the users.