Weavely almost offers you the same design freedom that you've come to expect from design tools such as Figma. In this tutorial we'll run you through what that means, as well as highlight some of Weavely's limitations when it comes to its Figma integration.
Would you rather have a Weavely team member explain this to you in a video? Check out this short video tutorial:
Before we dive into some of the limitations of designing forms in Figma (see the next section), we're first going to run you through some of the basics you need to know in order to get the most out of the Weavely plugin.
The plugin will automatically create a component library for every Weavely form you create. This library contains Figma components which define the style of your form elements. For example, you can generate a Figma component for radio buttons (see the example below).
You add elements to your form by creating instances of components from the library. After which you add the instance to the appropriate page in your form. The gif below shows an example of how this looks like in Figma.
You can always create new components by using the "Library" menu at the bottom left of the plugin. The gif below showcases how this works.
There are essentially three ways in which you can style your form elements.
First, you can makes changes to main component in the Weavely Component Library. Figma ensures that all instances of these components will reflect your change. For example, in the gif below we change the color of some of our form's navigational buttons. By changing this in the component all of the instances in the form pages change automatically.
Second, you can restyle a particular instance of a component. The advantage is that this restyling won't impact other similar form elements in your form. For example, in the gif below we first detach one of our "Next Page" buttons from the main component. After which we change its color individually.
Third, you can adapt the styles generated by Weavely to change major design aspects of your form. For example, in the gif below we change the accent color of our form which impacts buttons but other form elements (e.g. the slider) as well.
Some of Weavely's form elements allow you to customise their selection states: default, hover and selected. For these form elements (e.g. radio buttons, checkboxes, etc.) Weavely will automatically create variants for each relevant state. You can update how these states look and feel by modifying the variants in the relevant component in the Component Library.
Weavely will read your form's auto-layout settings to determine how your form should behave with regards to responsiveness. This warrants a tutorial on its own, which you can find here.
Although we're constantly supporting new Figma features in the plugin, there are a number of limitations you need to take into account when using Weavely.
Weavely will not take into account any prototyping functionality you might have added to your form. For example, Figma's "blue spaghetti" will be ignored when Weavely translates your design into a functioning web form. Instead, you should use Weavely's navigational form elements to specify the flow of your form. Similarly, Weavely will also ignore any animations you might have added to your design.
When it comes to fonts, Weavely supports Google Fonts because these are freely available for public use. However, custom fonts (i.e., any non-Google fonts) are subject to copyright laws and are therefore not supported out of the box by Weavely. See this article for a more in-depth explanation.
Found an additional limitation that we haven't mentioned here? Do let us know, we're always looking to improve. Just send an e-mail to florian@weavely.ai.
