This an aggregated guide into how Figma auto-layout settings translate to the web applications that weave.ly generates.
Don’t feel like reading? Don’t worry we got you covered. Sit back, relax and let us run you through it in this video!
Responsive vs. Non-responsive prototypes
We’ll be using a simple example to explain how prototypes can be built to be either responsive or non-responsive purely using Figma auto-layout settings. You can see this example below, and copy the source file here (we strongly suggest you duplicate this file in order to easily play around with the various settings yourself).
Concretely, our design contains various auto-layout settings. For example:
- The top-level frame has a fixed height and width (as seen in the image above)
- The header section of the frame is set to fill in width and hug the content in height
- The middle section is set to contain the three panel cards in the center of the frame
- etc.
Out of the box weave.ly will always try to adhere as much as possible to your design. In other words, if we publish the example design it will respect the auto-layout settings and given proportions which are fixed in height and width (for the top frame). The gif below showcases how our prototype responds to varying viewport sizes. Simply put, the prototype does not scale at all depending on the viewport size. This is because the top frame has fixed width and height setup.
If we change our top frame’s auto-layout settings to hug for width and height our prototype will adapt as our viewport size changes. The gif below showcases how this looks like in a browser.
However, neither of the solutions above allow you to really build a responsive prototype given that Figma does not have a fill property for top-level frames. Luckily, you can turn your design into a fully responsive web prototype by toggling the Responsive layout option before publishing from the plugin (see image below).
When toggling this option weave.ly will automatically turn your design into a responsive web app, relying on your auto-layout settings to determine how various elements adapt to viewport sizes. The gif below shows the result of toggling this option for our example.
Given that Figma currently doesn’t support breakpoints you will not be able to have prototypes that adapt based on exact viewport sizes.
Using Zoom-to-Fit when Sharing your Prototype
In some cases you want to avoid the use of auto-layout in general, and simply have your prototype fit the viewport as best as possible without scaling or adapting particular layers. In Figma you accomplish this with the “Fit to screen” option when playing a prototype. In weave.ly you can toggle this option (called zoom to fit) when sharing a prototype from the flow editor (see image below). Weave.ly will then scale the entire prototype to ensure that it fits the viewport of the browser. You can further specify the dimensions of the prototype (which are taken from the top frame by default).
