Upload your JSON

Before uploading your JSON make sure it has a valid structure. Valid JSON structure

Then you can upload a local file from your machine or fetch a JSON file from the weblink.

In order to fetch a remote JSON file you should copy a weblink to the JSON file and then in the plugin click on “Copy from clipboard” button.

<aside> 💡 Here are a few examples of links you can copy and parse with the plugin:

• https://raw.githubusercontent.com/PavelLaptev/JSON-to-Figma/master/json-test-files/workers-json%2Bimage-short.json
• https://random-data-api.com/api/v2/users?size=6&is_xml=true </aside>

JSON tree

Let’s take this item in JSON and see how the plugin renders it

{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "[email protected]",
    "address": {
      "street": "Kulas Light",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },

If there is are nested objects in the JSON — plugin will automatically group them, no matter how many nested items are there.

Nested objects will be rendered within their parent names. It means that nested property name inside the company object will be transform into name.company. That’s because we need to have unique ids for each item and layer in Figma.