Paint by JSON Figma Plugin Brings Real API Data to Mockups
Quick Reads
- Paint by JSON is a new Figma plugin that connects live REST endpoints to design layers.
- Designers paste a URL, map JSON paths to layer names, and save the recipe as a reusable Palette.
- The plugin supports text, image fills, component properties, and powerful transformation logic.
- Free users can save up to two Palettes; Pro unlocks more Palettes, transformations, and export functions.
- Pro users can also export designs to a spec frame, markdown, or an importable Palette file.
Paint by JSON Figma is solving a frustration that product designers have lived with for years. Mockups built on lorem ipsum and placeholder images often fail to expose real-world layout problems. Now, this new Figma plugin binds design layers directly to live REST API endpoints, replacing fake content with actual data.
The tool works with a simple workflow. Designers paste an API URL, then map individual JSON paths to specific layer names on their canvas. They save that mapping as a “Palette.” Then, they apply that Palette to any frame with a single click. Notably, the plugin also supports local JSON for offline workflows.
According to maker Rob McLoughlin on Product Hunt, the tool specifically targets designers working with headless products, where design systems must reflect live backend data. Moreover, it handles edge cases well, applying transformation logic to manage long strings, missing values, and unusual data shapes that would otherwise break a design layout.
The Paint by JSON Figma plugin supports several layer types beyond text. Designers can set image fills, adjust component properties, and apply multi-step transformations using the Pro tier. Additionally, Pro users gain access to export functions, letting them push a finalized spec to a frame, generate markdown documentation, or export an importable Palette file for team reuse.
The free plan supports two saved Palettes, which suits solo designers or early exploration. A paid Pro plan expands Palette storage, unlocks more transformation options, and enables the export features. Visit paintbyjson.com to install the plugin and start designing with real data today.
