Respondents will most likely interact with your form on both mobile and desktop browsers. It's therefore important to make sure that your form looks right, regardless of viewport sizes. In this tutorial we'll explain how to use Figma's auto-layout functionality to make your form responsive and how to easily check your form's design on various standard viewport sizes.
Would you rather have a Weavely team member explain this to you in a video? Check out this video tutorial:
Weavely uses your design to determine how your form should behave when scaled to various viewports. In other words, designs that only use absolute sizing will never adapt to different viewports. In most cases this doesn't lead to a great user experience. To make your form adapt to various viewports you can use Figma's auto-layout functionality.
The frames generated by the Weavely plugin come with default auto-layout settings. We will therefore use these as an example to explain how to use auto-layout for your form's responsivity.
The top-level frame of each page will automatically expand to fill the viewport. The top frame is typically used to determine a background which can easily adapt to various viewports. Pages generated by Weavely will automatically set top-level frames in auto-layout, which enables you to easily determine where the inner-frame (see next section) with form elements should render. The gif below showcases how to use the top-level frame to set a background for a form and change the inner-frame's location to be centered.
The Weavely plugin generates pages with the following structure: a top-level frame for the form background and an inner-level frame for the form elements. You are free to design and structure your forms any way you see fit. But, we found this structure to be the easiest to design responsively. This inner-frame enables you to determine how your form elements should behave, regardless of the form's background (i.e. the top-level frame).
For example, you can set your form's elements to fill the inner frame. It is important to note that, by default in Figma, instances of components are set to fixed width and height. The gif below showcases how changing a form element's width from fixed to fill in the inner frame changes your form's UI.
Weavely will set the maximum width of this inner-frame to be 700 pixels by default. This ensures that your form elements don't get overextended on very large viewports (e.g. external monitors). You can use Figma's max width and min width properties to determine scaling thresholds.
Weavely supports Figma's auto-layout wrap functionality. This enables you to determine when form elements should be placed next to each other (e.g. on desktop) or on top of each other (e.g. on mobile). For example, in the image below we horizontally framed the last two elements of our form. Moreover, we've enabled wrap.
As you can see in the gif below, enabling wrap ensures that our horizontal form elements are stacked vertically whenever the viewport becomes too small (e.g. on mobile).
If you want to preview how your form will respond to various viewport sizes you can do this immediately from within the plugin. This avoids you having to publish and check in a real browser how your form behaves. Note that the preview also allows you to interact with your form's elements. The gif below shows us using the plugin's preview functionality for our example form.
There are cases where your design significantly differs between mobile and desktop. In these cases using auto-layout to specify how your design adapts to viewport size changes is unfeasible. For example, some of the Weavely templates are too complex and have separate mobile and desktop designs.
Weavely currently does not allow you to explicitly link different designs (e.g. a mobile and a desktop design) for the same form. Therefore, A workaround is to publish both designs as separate forms and use a link shortening tool (e.g. Linkly) to redirect respondents to the mobile or desktop version depending on their device. If you want us to prioritise built-in functionality for "multi-design" forms, don't hesitate to join our slack community and tell us!
