# Paint By JSON

> A Figma plugin that binds layers to live REST endpoints. Populate designs with real, live API data instead of lorem ipsum — saved once, applied in a click.

Paint By JSON is a Figma plugin for designers, product engineers, and people building with AI coding tools (vibe coders) who want their Figma files to show real data from real APIs — not lorem ipsum.

You connect any REST endpoint, map JSON paths to layer names, and apply the result to a frame. Designs stay in sync with the API the product actually ships with. The same palette can be reused across files and shared with engineering at handoff.

## What it solves

- Designing screens without realistic data ("lorem ipsum problem")
- Drift between Figma mockups and the live product
- Re-wiring fake data for every demo, prototype, or screenshot
- Handoff that ships pixels but not the data contract

## Who it is for

- Designers who want to prototype with live API data inside Figma
- Product engineers and vibe coders who want their designs to match the data their app fetches
- Dev-adjacent designers who already know real data beats lorem ipsum — and want it without the copy-paste dance

## How it works

1. Connect a REST endpoint (URL, headers, auth).
2. Map JSON paths to Figma layer names. Apply transforms (truncate, format currency, parse dates, conditionals) where needed.
3. Save the recipe as a Palette and apply it to any frame — single response or repeated component instances from an array.

## Key facts

- **Type:** Figma plugin
- **Distribution:** Figma Community
- **Pricing:** Free tier (up to 2 saved palettes). Pro is $12/month (50 palettes, all transforms, exports).
- **Data privacy:** API responses fetched by the plugin go from your machine directly to your endpoints — they never pass through Paint By JSON servers. The exception is Local JSON (a Pro feature) where pasted payloads are stored with the palette in our database so you can reload them.
- **Stack:** React 18 + TypeScript plugin, Supabase (Postgres + auth), Paddle for payments.

## Pages

- [Home](https://paintbyjson.com/): Product overview
- [Pricing](https://paintbyjson.com/pricing): Plan comparison
- [Privacy](https://paintbyjson.com/privacy): Data handling
- [Terms](https://paintbyjson.com/terms): Terms of service

## Contact

hi@paintbyjson.com