/JSON-to-Figma

An easy way to populate Figma layers with JSON

Primary LanguageTypeScriptMIT LicenseMIT

JSON to Figma 3.0

plugin preview

An easy way to populate Figma layers with JSON.

The plugin can parse local or JSON files from URL link. You can populate any layers with text or images.


πŸ’‘ Features:

  • Load local files and fetch from URL
  • Fetch images
  • Parsing of JSON files with any amount of nested levels
  • Popualte all matches only by one button
  • Three populate options β€” populate only selected layers, by layer name, by string templates
  • Popualte by direct or random order
  • the "skip" rule for layers you won't populate

Get the plugin

Youtube demo

Plugin guide in Figma


πŸš€ How to Use

All you need is a proper JSON. The plugin will parse show all available keys from the JSON including nested layers. The plugin has three populate options and a few additional settings.

How to use


βš™οΈ Populate Options

1. By layer name

You can populate layers deeply nested in any group or frame. To do so, manually rename the layer you want to populate so that it matches the name in the JSON file. Not a case-sensitive method β€” a JSON item with a job name will be match to Job layer name.

Selected layers only preview

2. Selected layers only

Replaces text only for directly selected text layers.

Selected layers only preview

3. String templates β€” Select frames or groups that content text layers with string templates. Replaces only the contents of a string in {braces}.

String templates preview


🎚 Additional options

Random order β€” If you switch it on all items will be filled in random order. By default, all your layers will be filled in order.

Random order

Skip marked layers β€” if you want to skip layers, groups or frames β€” exclude them from the list, then you can use the β€œSkip marked layers” option. Just select layers and press β€œSkip selected”. You can also clean marked layers or add the marker ^ manually.

Skip marked layers

Populate all matches β€” If you want to fill all your layers with all possible keys from the JSON at one β€” use this button. This option available for "String" and "By name" options.

Populate all matches

Image URLs recognition β€” The plugin will automaticly recognise values from a JSON that end with .JPG, .PNG, .GIF or .WEBP as images. You can distinguish the value with the picture by the following buttons:

Populate all matches


⭕️ JSON Restrictions

  • Do not use null objects without quotes.

βœ… The correct JSON structure

The better JSON structure for the file should look like an array of objects. All keys and values, except numbers, should be under quotes. No single quotes, only double.

[
    {
        "key_string": "string #1",
        "key_number": 1
    },
    {
        "key_string": "string #2",
        "key_number": 2
    }
]
⚠️ Other JSON structures

But you also can use different JSON structures. For example:

{
    "obj0": {
        "key_string": "string #1",
        "key_number": 0
    },
    "obj1": {
        "key_string": "string #2",
        "key_number": 1
    }
}

// As a result you will see buttons β€” `0`, `1.key_string`, `1.key_number`

πŸ““ Services to generate JSON data

You can download try different JSON samples from this repo.

Or you can use on of these services:


πŸ€™ Feedback

Please if you have any trubles with the plugin or ideas how I could improve the plugin, let me know here or by email 😊