Data Sync - live REST data in your designs

About this plugin

Design with your real data instead of placeholders, straight from the API it lives behind.Paste any REST endpoint (your staging API, Supabase, anything that returns JSON), or pick Google Sheets, Airtable, Contentful, Firestore or Realtime Database and fill in a couple of fields. Add an auth header if it needs one, and hit Fetch. No endpoint handy? Five real sample APIs are built in - products, people, characters, crypto prices, food - one click, no key, no signup, so you can see the whole flow with live data before wiring up your own.Every field in the payload shows up in the explorer with a type badge and a live sample, click one to bind the selected layer, or name layers yourself: #name, #user.email, #avatar_url.Populate fills them: text layers get values, layers with fills get the image behind that URL or a solid color, when the field holds one. #hair.color reading "Purple", "#8A2BE2", "rgb(138 43 226)" or "hsl(271 76% 53%)" paints the swatch; alpha becomes the fill's opacity, and color fields carry their own color as their badge in the explorer. Colors stay ON your design system: "Purple" binds your own brand/purple variable rather than a literal, matched by name or by exact value, so populating a mockup never quietly detaches a variable or a paint style.NO RENAMING REQUIREDPress "Map fields to this card" and the plugin reads the layers you already have their names, what they currently say, how big their type is and proposes which field fills which: price to Price by name, the 80-character paragraph to the description by shape, the biggest type to thetitle. Instances are included: it spots that a "Sold out" value is one of your Status variant's options and proposes driving the property from it. Every row shows why it was proposed; change one, skip one, Apply. Your layers keep the names you gave them.BIND ONE CARD, SYNC THE WHOLE GRIDBind a single card and the plugin detects the look-alike cards around it one click copies the bindings onto every similar card, and Populate fills the grid IN PLACE, card i ← row i, without cloning or moving anything you drew. Stories, trays, nested grids of rows, the structure youbuilt is the structure that fills. Point a bound layer at a different field and its siblings follow instantly; one ⌘Z undoes any of it.PIN A LAYER TO ONE RECORD#title fills card by card, but #title@3 always shows the third record wherever it sits, so you can keep related copy in one column and address it cell by cell.TEMPLATES, NOT JUST TOKENSMix data into prose right in the layer name — "Album #albumId", "$#price|fixed2 / day".Formatting modifiers ride the token: numbers (fixed2, round, comma, compact, percent)dates (date, dateLong, time, month, year, and "ago" for 3 days ago)text (trim2, clip20, lines2, upper, lower, title)chainable, and pinned to one locale and timezone so a file reads the same for everyone who opens it. The built-in template editor autocompletes fields on # and modifiers on |, previewing row 0 live as you type.DRIVE COMPONENTS, NOT JUST TEXTName an instance #variant:Status and its variant switches per row, a status pill, a size, a state. BOOLEAN properties take the same route (#prop:Featured), so a sale badge shows only for discounted rows, and component TEXT properties fill without reaching inside the instance.KEEP IT LIVETurn on Auto-refresh and the plugin re-checks your endpoint on a timer, 5 seconds to 15 minutes.It only redraws when the data actually changed, so a quiet API costs one request and leaves your undo history alone; it backs off when the endpoint errors and stops itself rather than hammering.Runs while the panel is open, which is what you want for a live demo or a screen on a wall.SHAPE THE ROWS BEFORE THEY LANDFilter, sort, limit and shuffle live in the panel, saved with the connection: "only category is beauty", "cheapest first", "just six", "surprise me". No query-string gymnastics, and it works the same for a sheet or a Contentful space as it does for a REST API. Limit 1 is also how a detail screen takes one record instead of being cloned per row.And when the data changes, hit REFRESH: the plugin refetches the endpoint and updates the same layers in place. Edge cases from real rows - long names, missing fields, brutal enum values, show up in your design before they show up in production.HOW IT WORKS#field layer names bind layers to JSON fields (dots reach into nesting: #company.name)Rows array is auto-detected (or set a JSON path like data.items)A collection fills in place, child i ← row i; a lone card is cloned once per row insteadComponent cards get instances, not copies and layers inside instances fill via overridesOne ⌘Z undoes an entire syncBindings survive renames and edits - Refresh needs no re-setup; rename away from #field to unbindSupabase is just REST: your project URL + an apikey headerGoogle Sheets, Airtable, Contentful, Firestore and Realtime Database read through their own APIs with your keyContentful links are resolved for you: assets become image URLs, linked entries become their fields (#author.name), and rich text becomes plain paragraphsRefresh needs no selection: it updates every synced group, touching only bound layersFREE AND PAIDEverything that makes the plugin worth installing is free: connect to any endpointexplore every fieldbind layerswrite templatescopy bindings across a whole gridPopulate up to 10 rows. No account, no trial countdown.Paid unlocks what you come back for:REFRESH - re-fetch the endpoint and rewrite every synced group in placeUnlimited rows per populateMore than one saved connectionAuth headers, for Supabase and private staging APIsThe Google Sheets, Airtable, Contentful, Firestore and Realtime Database sourcesYOUR DATA STAYS YOURSRequests go from your machine directly to the endpoint you configured, there is no server in between, nothing is proxied, logged or stored anywhere except Figma's own per-user plugin storage for your saved connections. Note: your API must allow cross-origin requests(Access-Control-Allow-Origin: *) — Figma plugins fetch from a null origin.---Built by Catalin Miron (@mironcatalin)keyframer.dev × animatereactnative.com.