From a UX perspective you don't always want all your forms' questions to appear on a single page. In this tutorial we'll showcase you how to use the weavely Figma plugin to design and publish multi-page forms and surveys.
Would you rather have a Weavely team member explain this to you in a video? Check out this video tutorial:
From a design perspective the only constraint is that each page of your form should be a standalone frame in Figma. The easiest thing to do is copy and paste the frame that weavely generates upon creating a new form. This ensures that your form pages come pre-configured with auto-layout settings. The image below showcases a basic multi-page form design in Figma. It comprises three pages (and therefore also three frames): two containing questions and a "submission completed" page.
By default the weavely plugin only adds the frames it generates to your form (e.g. when using the AI feature). If you want to manually add new pages to your form you can do this in the plugin's "Form->Form Pages" Menu. You add pages by selecting the desired frame and clicking the "+ Add x selected frames" button. The gif below showcases how this works for our example.
Once you've added a new page to your form it will automatically by added at the end. You can determine the order in which pages should appear by rearranging their order in the "Form->Form Pages" menu in the plugin. The gif below showcases how this can be done for our example.
The Next Page and Previous Page components in weavely's component library automatically respect the order of the pages you specified.
