Download the interactive tutorial if you want to build the following steps yourself.
Section 1 of that Figma file contains the relevant wireframes.
Don’t feel like reading through the tutorial? Don’t worry we got you covered. Sit back, relax and let us run you through it in this video!
Core Concept 1: Tagging Figma Layers
Our plugin allows you to tag functionality to specific layers of your design.
Whenever you select a layer the plugin switches from its home screen to its selection screen and auto-suggests possible functionality based on selected layer. Depending on the layer you selected you’ll be able to tag different functionality.
Core Concept 2: Connecting the Blocks
Once you’ve tagged all the Figma layers to which you want to add functionality you can further configure this functionality in our no-code editor. You’ll find the tagged functionality represented by blocks on a canvas. By connecting these blocks you specify how data flows across your prototype.
Learning by Example, Step 1: Tagging
Let’s have a look at a step-by-step walkthrough with a concrete example shall we? Our example wireframe contains an input field, the content of which we want to display in a label below. Using the plugin we select the text layers consecutively and respectively tag them with the “Text Input” and “Text Label” functionalities.
Learning by Example, Step 2: Publishing
Once you’ve tagged all the functionality you need you can publish your project by hitting the “Publish” button at the bottom of the plugin. In case you haven’t created a project yet you’ll be able to do so directly from the “Project” dropdown in the publish screen. There’s two ways to publish a weave.ly project form your Figma design.
- You publish all the frames in the current Figma file (see left screenshot below).
- You publish all frames which are part of a specific Figma prototype flow (see right screenshot below).
In both cases weave.ly will combine your frames with the tagged functionality and generate a web app from them. Once that’s successful you’ll be presented with the screen below. You can then choose to view the web app directly (i.e. by pressing the “Web App” button) or configure your web app (i.e. by pressing the “Flow Editor” button). The latter option is usually needed to determine how various functionalities interact.
Learning by Example, Step 3: Connecting the Blocks
By linking blocks together in the weave.ly flow editor you determine how data flows across your web app. In our example we have two blocks on the canvas, in accordance with the functionality we tagged in Step 1. By connecting the output of the “Text Input” block to the input of the “Text Label” block we specify that the input field “sends” its data to the label, as shown below.
Weave.ly will automatically overlay blocks on a render of your design. The location of the blocks on the design solely serves to make it easier to know which blocks are linked to what part of your design. You can move the blocks around the canvas without impacting your app’s functionality.
Learning by Example, Step 4: Fruits of Your Labour
That’s it, you’ve just got a crash course in turning Figma designs into web app prototypes. Press the play button in the flow editor to see your prototype work as a full-fledged web app.
