Hey, we have some great news! We're thrilled to announce a big and important update to our form builder plugin for Figma— introduction of conditional logic. This will make your form-building experience in Figma much more advanced and intuitive. Without exaggeration, our logic functionality is super straightforward and only takes a few clicks to configure.
Weavely offers advanced conditional logic capabilities allowing you to build flexible and dynamic forms. Hiding & showing fields and layers, hiding and skipping to pages based on users’ answers are only some examples of the plugin's logic rules.
Configuring with ease
On the image above you can see how application of conditional flows works with the Weavely plugin. Choose the "Logic" tab in the plugin, name the rule (in case you will have multiple logic rules applied in your form), select the form element and configure the "If/Then" clause.
For the "If" clause our logi functionality lets you choose from four essential options:
- Form Element Equals/Doesn't Equal: Set conditions where specific responses must match exactly to trigger an action or remain hidden.
- Is Empty/Is Not Empty: Tailor the form’s content based on whether a particular field is left empty or contains a response.
- Contains/Doesn't Contain: Trigger actions based on whether a response contains or doesn't contain specific keywords or phrases.
- Starts With/Ends With: Customise your form's behaviour by specifying whether responses should start with or end with particular text.
The "Then" clause has four distinct features:
- Show/Hide element: When a specified condition in the "if" clause is met, reveal or hide specific form elements.
- Show/Hide layer: With dynamic layer control you can decide what layers (e.g. images, icons, text etc) to show or hide based on user's response.
- Hide page: Create dynamic form navigation when users can totally bypass certain irrelevant questions.
- Skip to page: When the conditions are satisfied, users will be automatically directed to a specific page in the form.
Weavely's conditional logic works like you would expect from any renowned online form builder. The only difference is that with the Weavely plugin you can apply it directly in Figma.
Applying conditional logic in Figma. Examples
Showing Fields
This is the simplest example of logic application, and as you can see, there's no rocket science involved. You just need to ensure that the designated element will only appear when the user selects "yes" as their response. The same approach applies to hiding elements.
A summary of what we implemented:
- If: Do you have any dietary restrictions? (Radio buttons)
- State: Is Equal To
- Value: Yes
- Then: Show element
- Element: "Please specify your dietary restrictions" (Short answer)
Skipping to Pages
With the skipping to page feature you can create truly personalised experiences. For example, such as a separate page relevant to each of your single-choice options. To do that, first, create a multipage form. There is no restriction on the number of pages you can include in your form. Second, prepare the content. And finally, with the Weavely logic configuration, specify in which case which page must be shown to your respondents.
A summary of what we implemented in the example:
- If: Select the type of event (Radio buttons)
- State: Is Equal To
- Value: Workshop/Seminar/Registration
- Then: Skip to page 2/3/4 accordingly
- Elements: name and email address on each registration page (Short answer & email)
Conclusion
Conditional logic helps to simplify and structure surveys. By showing only relevant questions, you can reduce the cognitive load on respondents. Displaying questions or sections of the form only when necessary also reduces user confusion and saves their time. This can be especially important in complex and time-sensitive surveys or forms.
And there are many more obvious reasons to incorporate conditional logic in forms. By validating user inputs in real-time, logic helps to prevent errors before they occur, lets you personalise user experience and simplify user journey.
