How to use: JSON to Canvas Ninja

Introduction
JSON to Canvas Ninja is a Figma plugin designed to effortlessly enhance your designs with real-world data. By populating your prototypes with actual content instead of placeholder text or lorem ipsum, you can create accurate, realistic, and production-ready designs with confidence.
Check out the plugin
1. Prepare your JSON Data
First of all you will need a JSON file or a copied JSON text from somewhere that stores the data. Make sure your JSON is well-structured and formatted. There are a lot of JSON online checking tools out there, if you need to check its validity (for example https://jsonlint.com/).

Example of a valid JSON structure:
[
  {
    "Name": "Alice",
    "Job": "Software Engineer",
    "email": "alice.johnson@example.com",
    "Address": {
      "Street": "123 Maple Street",
      "City": "Springfield",
      "State": "IL",
      "Zip": "62704"
    },
    "image": "https://randomuser.me/api/portraits/men/1.jpg"
  },
  {
    "Name": "Bob",
    "Job": "Project Manager",
    "email": "bob.smith@example.com",
    "Address": {
      "Street": "456 Oak Avenue",
      "City": "Madison",
      "State": "WI",
      "Zip": "53703"
    },
    "image": "https://randomuser.me/api/portraits/men/2.jpg"
  }
 ]
2. Import the JSON
Import our JSON either via uploading it as a file from a source or just paste its code into the input field.

Let's take a look how the JSON to Canvas Ninja renders it:
The plugin rendered it to a nice tree-structure. You can see, that we have normal keys like "Name" or "Job" and also nested keys inside the "Address" object.
The plugin automatically detects this and you can expand or collapse the nested items.

It also automatically adjusts the name of the nested keys, so that you can easily match them (e.g. "Street" inside "Address" becomes "Address.Street")
The plugin also checks, if there are images linked inside your JSON. In this case a little image-icon will indicate fields containing image URLs.
3. Match your Figma layers
For the plugin to work, you will need to name the text or image layers exactly as it is named in your JSON.
‍
So let's check the data we want to populate our design with and name the layers of our design exactly as they are in the plugin (case-sensitive).
4. Hit "Populate Design"
After you are all set, just select the entire component, group or frame and hit "Populate Design".
The plugin has now created all of the designs for you.
Done!
Check out the plugin