Hey, we have some great news! Although still in beta, we are continuously improving Weavely's functionality. And today, we're thrilled to introduce a new feature — 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 two clicks to configure.
While more complex logic is on the way, we've introduced the simplest yet the most requested solution. Weavely's new basic conditional logic feature is designed to address the fundamental needs of form builders like hiding & showing fields, hiding pages and skipping to pages based on users’ answers. With just a few clicks, you can create smart forms that adapt to user inputs, ensuring a hassle-free, user-friendly experience.
Configuring with ease
In short, 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 current 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 three distinct features:
- Show/Hide element: When a specified condition in the "if" clause is met, the "then" clause allows you to reveal or hide specific elements of the form.
- Skip page: Create dynamic form navigation when users can totally bypass certain irrelevant.
- Skip to page: When the conditions are satisfied, users will be automatically directed to a specific page in the form.
Basically, 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. Let's take a look at some short examples.
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
The Weavely plugin for Figma is a very young product. Yet, we realised that a form builder with conditional logic is a must. That's why we put all our efforts in delivering this feature as soon as possible. ( Apart from logic, Weavely also has lots of other features and cool form elements that you can check here)
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.
