Figma plugin

JSON → Content

by Lucas Dietrich

users
17K
likes
226
saves
4K
comments
31
FreeWorks inFigma Design
Price
Free
Latest version
v10 · Oct 7, 2022
First published
Jan 11, 2020
Features

What JSON → Content does

Summarised from Lucas Dietrich's description on the Figma Community.

  • Easy mapping via layer name

    Map your data and your layers together simply by using the same name.

  • Selection rewriting

    Overwrite multiple text layers within your selection and any data that’s attached to the entry will be written into layers that have the same name…

  • Choose between specific or randomised data

    When you have imported your data, the plugin will print a list with every entry that’s in your file.

  • Multiple datasets via tab menu

    Push your productivity even more with the new tab menu feature. It's now possible to set up multiple datasets without switching between files.

  • Iterate over random entries

    Iterate over multiple entries of your list to your selection. The next entry will be used as soon as the same data would be applied a second time.

On this page
Overview

About JSON → Content

JSON → Content is a free Figma plugin published by Lucas Dietrich in 2020. It works in Figma Design and has 16,704 users and 226 likes on the Figma Community.

In the developer's words

Easily map your data and layers together by using the same name. Either select specific entries from your overview or shuffle through them for a randomised dataset

Tired of incoherent random data?

Set up your data separately as a JSON or CSV file and start adding your content. The content of the datasets always remain together to create a seamless data retrieval experience.

Easy mapping via layer name

Map your data and your layers together simply by using the same name. The name of your text layers only needs to match the key of your object and the value will be parsed.

Selection rewriting

Overwrite multiple text layers within your selection and any data that’s attached to the entry will be written into layers that have the same name as the key.

Choose between specific or randomised data

When you have imported your data, the plugin will print a list with every entry that’s in your file. Click on an entry if you need specific data from that set.

Multiple datasets via tab menu

Push your productivity even more with the new tab menu feature. It's now possible to set up multiple datasets without switching between files.

Iterate over random entries

Iterate over multiple entries of your list to your selection. The next entry will be used as soon as the same data would be applied a second time.

You can now utilize the power of layered JSON files if needed. This is a much more common way of writing JSON and allows for more flexibility. Files which have worked before will work as expected.

Changelog

What's new

Version 10 · released Oct 7, 2022

  • Added multi-layered JSON capability
Trust

Permissions and privacy

Network access

This plugin's manifest doesn't declare its network access, which is common for older plugins. Figma shows a warning on the Community page for plugins like this.

Extra permissions

None beyond the standard access to the file you run it in.

Read from the plugin's published manifest.

Compare

JSON → Content alternatives

  1. 1

    Figma to Code

    by Bernardo Ferrari

    2.4M users8.9KFree

    Code Conversion Made Easy: Figma to Web & Apps

  2. 2

    Anima

    by Anima

    1.9M users18KFree

    Anima - AI Design to code, Vibe code, Vibe design

  3. 3

    Builder.io

    by Steve Sewell

    1.3M users23KFree

    Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.

  4. 643K users12KFree

    Convert your Figma design to HTML code in seconds with Framer.

  5. 5

    SkewDat

    by Unfold

    640K users7.3KFree + $2/mo upgrade

    Skew any layer or group with all layers preserved to edit.

  6. 6

    Locofy Lightning

    by Locofy.ai

    608K users5.4KFree

    Convert Figma designs to code in a flash: React, React Native, Flutter, HTML/CSS, Angular, Next, Vue

FAQ

JSON → Content FAQ

What does JSON → Content do?

It's a Figma plugin by Lucas Dietrich that runs in Figma Design.

Is JSON → Content free?

Yes. JSON → Content is free to install and run from the Figma Community, with no paid tier listed.

How do I install JSON → Content?

Open it on the Figma Community, or search for it in the Actions menu (Cmd/Ctrl + K) inside any file you can edit. See how to install Figma plugins.

What are the best alternatives to JSON → Content?

By user count, the closest alternatives are Figma to Code, Anima and Builder.io.

For developers

Built this plugin?

Use this page as a landing page for JSON → Content: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.

JSON → Content on figmaplugins.co

Style

Label

Size

Code

<a href="https://figmaplugins.co/plugins/json-content/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="JSON → Content on figmaplugins.co" width="220" height="48"></a>

Want it featured on figmaplugins.co? Submit it for review