About Paint By JSON — Design Figma against real API data
Overview
Paint By JSON is a Figma plugin that binds design layers to live REST endpoints. Paste a URL, map JSON paths to layer names, save the recipe as a Palette, and apply it to any frame in a click. Design with real data instead of lorem ipsum, and repaint anytime.
The plugin runs in early access and connects Figma files to the same data the product ships, from live API responses to mocked JSON. Design specs and engineering specs become the same artefact, including the design-to-code handoff. Because palettes target layers by name, saved recipes stay portable across files, team libraries, and refactors.
Key Benefits
- Save palettes once — store an endpoint, headers, and mappings as a reusable Palette and pick it from a list to repaint any frame without re-wiring.
- Transform on the way in — truncate text, format currency, parse dates, branch with if/then/else, or chain transforms before values reach the canvas.
- Single frame or collection — fill one frame from a single response, or iterate an array onto repeated component instances.
- Target layers by name — map JSON paths to layer names so palettes stay portable across files, team libraries, and refactors.
- Sandboxed by default — the plugin runs entirely in its iframe, and API responses and auth values stay on your machine.
- Export for handoff — export the populated frame as JSON, Markdown, or a Spec Frame on the canvas.
How It Works
Connect an endpoint by pasting a URL and adding headers or auth if you need them, then preview the JSON response in-plugin. Bind a JSON path to a layer name and apply transforms if the raw value needs shaping before it lands on the canvas. Save the recipe as a Palette to reuse it on any frame, share across files, and export to JSON, Markdown, or a Spec Frame for handoff.
Use Cases
- Designers pressure-test their designs against the names, lengths, and edge cases real data will actually carry.
- Product teams keep design specs and engineering specs as the same artefact, including the design-to-code handoff.
- Handoff partners export the populated frame as JSON, Markdown, or a Spec Frame to pass data alongside the design, not just the pixels.
- Teams reuse Palettes across files, team libraries, and refactors without re-wiring each frame.
- Hobbyists try the plugin free with one saved palette and no account.
- Anyone who can GET an endpoint — live API responses or mocked JSON — feeds the same data into Figma.
Why Choose This Product
Paint By JSON runs sandboxed in the plugin iframe, so API responses and auth values never leave the machine and none of it reaches the database. A free tier supports hobby use, and Pro adds 50 saved palettes, all transforms, and exports for handoff.
Paint By JSON — Design Figma against real API data Pros & Cons
- Free Guest tier needs no account
- Runs sandboxed in the plugin iframe; data stays local
- Reusable Palettes store endpoint, headers, and mappings
- Cloud sync across files and devices on Free and Pro
- Exports to JSON, Markdown, or Spec Frames on Pro
- Export to JSON, Markdown, and Spec Frames limited to Pro
- Currency, math, and conditional transforms limited to Pro
- Free tier caps saved palettes at 2
- Plugin is in early access
Key Features
Connect endpoints
Paste a URL, add headers or auth if needed, and preview the JSON response inside the plugin.
Map JSON to layers
Bind a JSON path to a layer name and apply transforms before values land on the canvas.
Reusable palettes
Store an endpoint, headers, and mappings as a Palette you can pick from a list to repaint any frame.
Value transforms
ProTruncate text, format currency, parse dates, branch with if/then/else, and chain transforms.
Array iteration
Iterate an array onto repeated component instances to fill a collection from one response.
Cloud sync
Free+Sync saved palettes across files and devices.
Sandboxed runtime
Runs entirely in the plugin iframe, so API responses and auth values stay on your machine.
Export & handoff
ProExport the populated frame as JSON, Markdown, or a Spec Frame on the canvas.
Paint By JSON — Design Figma against real API data Pricing
View full pricing →- Try the plugin without signing in
- 1 saved palette
- Basic text transforms
- Single + collection mode
- Everything in Guest
- 2 saved palettes
- Cloud sync across files and devices
- Everything in Free
- 50 saved palettes
- All transforms (currency, math, conditionals)
- Export to JSON, Markdown, Spec Frames
- Priority support
| Feature | Guest Free | Free Free | Pro $12/mo |
|---|---|---|---|
| Value transforms | |||
| Cloud sync | |||
| Export & handoff |
Pricing extracted from the product website and may change. Check the source for current details.
Frequently asked questions about Paint By JSON — Design Figma against real API data
Is Paint By JSON free?
Yes. The Guest tier lets you try the plugin without an account, and the Free tier is $0 forever with 2 saved palettes and cloud sync. Pro is $12/month for designers shipping against real data daily, with prices in USD and local taxes added at checkout.
Where do my API responses and auth values go?
They stay on your machine. The plugin runs sandboxed in its iframe, and none of your API responses or auth values are sent to the Paint By JSON database.
How do I populate a Figma frame with API data?
Paste a URL and add headers or auth if needed, preview the JSON in-plugin, bind JSON paths to layer names, and save the recipe as a Palette. You can then apply that Palette to any frame in a click.
Can I export the populated data for handoff?
On the Pro plan, you can export the populated frame as JSON, Markdown, or a Spec Frame on the canvas. This lets you hand off the data alongside the design, not just the pixels.
What transforms can I apply to values?
You can truncate text, format currency, parse dates, branch with if/then/else, and chain transforms before values land on the canvas. All transforms including currency, math, and conditionals are available on Pro; basic text transforms are in the free tiers.
Can I try the plugin without signing in?
Yes. The Guest plan lets you try the plugin without signing in, with 1 saved palette, basic text transforms, and single plus collection mode.
How Paint By JSON — Design Figma against real API data compares
Paint By JSON — Design Figma against real API dataThis | ||||
|---|---|---|---|---|
| Starting price | Free | $9/month | Free | — |
| Pricing model | Freemium | Freemium | Freemium | unknown |
| Platforms | — | Web | — | — |
| Top features |
|
|
|
|
| Rating | — | — | — | — |
