Data Sync

About this plugin

Sync your design with API data

Features

• Load JSON, XML and CSV from API url or paste as text
• Google sheets URLs are also supported
• Navigate your data in a simple interface
• Populate, connect and sync your layers with text and images

Demo

https://twitter.com/eminsinani/status/1254058106713186304

Google sheets

• Just paste the URL and your data will load
• You can use the standard URL format shown in the browser: https://docs.google.com/spreadsheets/d/[spreadsheetID]/edit#gid=[tabID]
• Only sheets with sharing option "anyone with the link" are supported
• First row will be used as the header row

Formatting

Because data does not always come in the way we want to visualize it, you can format your results before populating. For flexibility the formatting is done using js code where you can use $value as the variable coming from the data. Here are a few examples:

• John-follower -> $value.split('-')[0] -> John
• 224.50 -> '€ ' + Math.round($value) -> € 225
• true -> $value ? 'available' : 'occupied' -> available
• 1 -> ['Clear', 'Rain', 'Snow'][$value] -> Rain
• 1988 -> "'" + ($value).toString().substring(2,4) -> '88
• klm -> `https://airlines.com/${$value}.png` -> https://airlines.com/klm.png

API Request Options

In the case you need to add request options to your API call, you can do so in a separate field and provide the options as an object. To find out which options are available and how they are named, check out the following library: https://github.com/Jam3/xhr-request

Example usage:

{
   "headers":{
      "secret-key":"XXX"
   }
}

Notes

• You need to manually select which arrays to loop through after selecting the path
• CSV and Google sheet data are always parsed with the first row as a header row
• Insecure http calls are not supported, but localhost or http://localhost should work.
• To multiply layers quickly, install the Multiply plugin
• If the amount of layers on your page exceed the limit, the info on the sync page will not auto-refresh when something changes on the page, instead you can use the manual refresh button. This is done to improve performance.

Wishlist

• Dataset editing
• Color support (RGB)
• Component property change support
• Component replacement support
• Show/hide layer support
• Merge data from different keys
• Advanced error messaging
• FigJam support
• Sync selection
• Refresh connect page
• Select data range
• Random populate data
• Switch datasets for existing connections

Let me know in the comments if you have questions, requests or feedback! For detailed questions/debugging please send me a DM on twitter.