Using the Built-in Weavely Styles and Templates

This tutorial shows you how to speed up the process of building forms in Figma by using the Weavely built-in templates.

Don't feel like designing a form from scratch? In a rush to get your form out there and start collecting responses? We got you covered! Weavely comes with a set of built-in templates and styles for you to choose from. In this tutorial we'll quickly touch on where to find these inside the plugin and what they look like.

If you don't feel like reading, this short video will also showcase how to get started with Weavely styles and templates:

Publish Modes Vs. Templates & Styles

If you've used Weavely before you'll be familiar with the screenshot below. When you run our plugin in Figma you'll be asked about your form's publish mode. This determines how your form will be shared with respondents (i.e. as a separate web page, as form embedded on a website or as a pop-up survey or form).

Screenshot of the Weavely plugin in Figma, allowing you to build bespoke forms from Figma designs.
Choosing publish modes in the Weavely plugin

Once you've selected the desired publish mode you'll be able to further specify whether you want to start your form form scratch (i.e. Blank Form), create a form using AI or select one of our templates under the Form Type category. The dropdown selection marked Form Style on top enables you to choose a specific style. We give you an overview of these styles below.

Screenshot of Weavely plugin, showing a menu to choose the form type and form style in Figma
Choosing form type and style in the Weavely plugin

Overview of the Weavely Form Styles in Figma

The following styles are available in the Weavely plugin. It is important to note that each of these styles serves as a full-fledged component library in Figma for all things form related. You can also find these styles as separate design files on our page in the Figma Community.

Weavely Light & Dark

It is important to note that, by default, your forms will be in the Weavely light style, left on the screenshot below.

Image showing the Weavely light and dark themes from Figma
Weavely Light Theme (Left) Vs. Weavely Dark Theme (Right)

Slick Light & Dark

Image showing the Weavely light and dark slick themes from Figma
Weavely Slick Dark Theme (left) Vs. Weavely Slick Light Theme (right)

Glassmorphism

Image showing the Weavely glassmorphic theme from Figma
Weavely Glassmorphic Theme