Iain Kettles
Drawing inspiration from the Data Stack and Airtable packages, the Framer Data Component allows you to seamlessly integrate data into your prototypes. By connecting a Design Component you’ve visually created on Framer’s canvas, you can render a list of components in your prototype that are populated by a real data source.
First, you need to decide your data source.
Source | |
---|---|
API | Connect to an API. Need authentication? Use the HTTP Headers property control. |
File | Upload a JSON/CSV/TSV file. We’ll convert it into machine-speak. |
Airtable | Connect to Airtable. Make sure an api_key query parameter appears in your URL. |
If you’re prototyping for a very specific use case, you may find the out of the box features with this component insufficient. Whilst we do our best to solve a wide array of use cases, you may find it easier to write your own adapter. This will give you more control over how data is formatted/searched/sorted whilst still relying on the functionality that comes with the component itself.
Dealing with a deeply nested data structure and wondering how to map those values to the fields in your components? Maybe you want more control over how sorting/searching is handled? You probably want a custom adapter that gives you full control over this. Don’t worry, it’s pretty easy to build! Click here to open the example project in Framer Web and check out Example 6.
Once you’ve decided on your data source, you’re ready to start populating your prototype with real data. You’ll first need to grab the frame you want to use as your list item—this will be the component that’s repeated for each item in the data you provide to your prototype. This frame needs to be a Design Component so you can assign a name to the properties of your component. This allows the text layers and images within your component to be populated and overridden by the Data Component.
For this component to function, it needs to be connected to a Design Component on Framer’s canvas. When you create a Design Component, Framer will show some checkboxes in the properties panel that allow you to control which fields in your prototype can be populated. When you select these checkboxes, you also give them a name, which becomes the “variable” of that field. Providing that name matches the fields in the response from your chosen data source, Framer will populate that field with the value from the data. This works for text fields and for images too.
The layout controls at your disposal vary depending on which direction you choose to lay elements out.
Lays the items out horizontally from left to right. Preserves the original width of the connected Design Component.
Horizontal | |
---|---|
Gap | Sets the horizontal gap in pixels between elements |
Wrap | Items will wrap. The Reverse option makes elements flow from right to left. |
Lays the items out vertically from top to bottom. The width of the connected Design Component will be resized to fill the available horizontal space or number of columns selected.
Vertical | (Single Column) |
---|---|
Gap | Sets the vertical gap in pixels between elements |
Distribute | Controls the vertical distribution of elements |
Vertical | (Multiple Columns) |
---|---|
Gap (↔) | Sets the horizontal gap in pixels between elements |
Gap (↕) | Sets the vertical gap in pixels between elements |
Using Framer’s Scroll component, you can easily add a native feeling scroll interface to your prototype.
Scrolling | |
---|---|
Scrollable | Whether the component is scrollable. The scrolling direction is inherited from the layout direction |
Drag scroll | Enables/disables drag scrolling with built-in momentum and overdrag |
Wheel scroll | Enables/disables scrolling with the mouse wheel |
In the same fashion as connecting a Design Component on the canvas, you can also connect other layers to be used as empty/loading states within your component. As your prototype is now fetching data for real, depending on the user’s internet connection you may want to show a helpful loading state. If your data source returns nothing, or perhaps the user is performing a search and doesn’t get any results, you can connect an empty state.
The minimum amount of time to wait before displaying data. Useful for user testing scenarios with slow internet connections
By default, this component will not sort your data. This means the order in which your data source returns data is preserved. If you’d like more control over how it’s sorted, you can enable Manual sorting. This component will take care of sorting alphabetically or numerically.
Sorting | (Manual) |
---|---|
Property | The field in your data to sort on |
Direction | The direction to order elements by. Defaults to ascending (lowest first) |
This component has fuzzy searching built in, allowing you to build complex searching interfaces that allow the user to approximately search for what they want. It uses the Fuse.js library to do this.
Once search is enabled, you can set a Search Query via the properties panel. In most cases, you’ll probably want to leave this field blank and set your search query using Code Overrides. This example project illustrates how to build a basic search interaction using Framer’s built-in Input component.
This component has 3 separate modes which can be used for guidance & troubleshooting.
Mode | |
---|---|
Default | The default behavior of this component |
Help | Instructions for how to connect this component to your data source |
Debug | Displays the raw JSON of your data. Useful during troubleshooting |
Working with an API that requires authentication? This component allows you to attach custom HTTP Headers which will be included in the request to your chosen data source.
HTTP Headers | (Custom) |
---|---|
Authorization | The HTTP Authorization header included in the request |
HTTP Headers | A list of HTTP headers in the format Key: Value |
Feel free to leave questions/bugs on the GitHub repository for this package. You can also contact me directly on Twitter @iKettles