Download the interactive tutorial if you want to build the following steps yourself.
Section 5 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!
Say you have a weave.ly table filled with data (either from users, or imported through .csv from an external source). To show this data in your prototype you’ll need to first specify how data from your table maps onto your design. In the following example we’ll show you exactly how to do this.
Example, Step 1: Figma Components & Instances
The first step in showing real data in your prototype is using Figma components to style how individual elements should look like. In the example below we want to show a list of “user cards” containing people’s name and age. The component on the right specifies how an individual card should look like. The wireframe on the left contains an auto-layout frame with an instance of this component.
Example, Step 2: Tagging Functionality
You can tag any auto-layout frame containing instances of a component with the “List” functionality. Configuring how data is shown is done in the weave.ly editor, which is the next step.
Example, Step 3: Linking Data to Design
You’ll need to tell weave.ly where the data of your table should be shown in your design’s Figma component. To do so, click on the “List” block and use the configuration panel on the right. More concretely, complete the steps as such:
The label on top of each dropdown indicates a Figma layer in your list’s component. In our example we want the “John Doe” layer to show data from the “Name” column in our table and the “18” layer to show data from the “Age” column in our table.
Finally, you’ll need to select the “Table” block from the menu on the left and connect it to your list.
