Building a Form with Weavely in Figma in 3 Simple Steps

In this mini-tutorial we will show the fundamentals of building a form in Figma

If you are new to Weavely, this guide will help you to grasp the concept of building forms in Figma. You'l see how easy it is, just 3 simple steps.

Step 1. Build

To start, choose the type of form you want: standalone (a dedicated web page), embedded, or pop-up.

Next, decide how you want to build your form. You can begin from scratch by selecting "blank form," or speed up the process by using our AI assistant to generate a form for you. This tutorial provides a detailed walkthrough of our AI feature. You can also choose from two simple templates.

Creating a web form in figma step 1

For this example, let’s go with a blank form. Select your desired form elements and click "generate." The elements will appear in the component library. Copy and paste them onto your form’s canvas. And that’s it for building!

adding form elements to a Figma form

Pro tip: To keep your form responsive, always use the canvas provided by the plugin and apply autolayout. Check how your form looks on mobile, tablet, and desktop in the plugin’s preview mode.

Step 2. Design

With Weavely as a Figma-integrated form builder, you have full control over your form’s design. In this example, we’ll change the colour of the submit button, background, and radio buttons. But you can do much more — adjust the layout, change fonts, add images, tweak any form element for a unique look, and more.

Step 3. Publish

The final and easiest step is publishing your form. Once you hit "publish," your Figma design instantly becomes a live web form. Now, share it with your respondents!

publishing a figma form to the web

The best part? You can iterate your form anytime. Need to edit the copy or design? Just make the changes in Figma and re-publish for an instant update.