Creating Interactive Form in Figma
Last Updated :
19 Oct, 2023
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.
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.
.gif)
Why to use?
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, Lets use 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.
1. Create elements like text field , checkbox, button and group then separately if required.
.gif)
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
.gif)
3. Add Interactions from prototype , move the components away and add combined one from assets tab like it is shown for some elements below
.gif)
Implementation of above design :
Here, we will convert the above design into code using figma with plugin.
Note : I am using Anima, which is a figma plugin for generating code for the UI design
.gif)
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:
.gif)
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.
Share your thoughts in the comments
Please Login to comment...