JSON Frame Mapper

About this plugin

# JSON Frame Mapper: Figma Plugin

## Main use case

You have a number of items with data in a collection as a single source of truth.

You also have a Figma design which you would like to use as a template.

You would like to create as many items as you have in your collection, with the data from each item using your Figma design as a template.

Wouldn't it be useful to map the data to the template, press a button and - BAM! - loads of content based on the template with the data from your collection?

I think so.

---

This plugin is completely free so feel free to not buy me a [coffee](https://buymeacoffee.com/shragor)

Although... if you did, you could leave a message asking for functional upgrades which I would consider 🤔

---

## How the thing works

1. Install the plugin in Figma (you should know how to do this)

2. Pick the frame you want to use as a template

3. Alter the fieldNames you want populated with your JSON data - note, change the name of the field, not the value - by surrounding them like {{this}}

4. Open the plugin (you can do this at any time tbh)

5. Click "Load JSON File" to load your JSON file (check next section for the required format)

6. If your frame is not selected, select it by clicking its name

7. JSON Frame Mapper will attempt to map {{fieldNames}} to Fields

8. You can manually change the mapping of fieldNames to JSON fields if you want to

9. Set "Generation Settings". Frames are generated from left to right starting from the right of the template (so make sure you have room!)

10. Frame separation sets the number of pixels between generated frames

11. Max horizontal frames sets the maximum number of frames generated to the right before it moves to a new line below the first generated frames

12. The "Generate Frames" button is there but I don't remember why. Give it a shot and see if anything happens

---

## The data

Currently the **JSON Frame Mapper** accepts only a JSON in this form:

```

[

{

"name": [Item 1's name/title],

"field1": [VALUE],

"field2": [VALUE],

...

},

{

"name": [Item 2's name/title],

"field1": [VALUE],

"field2": [VALUE],

...

},

...

]

```

So, an array of objects with key/value pairs or fields of whatever you want to call them.

In my use case, the keys correspond to column headings in a spreadsheet I output to JSON. Each row beneath the column headings is a single item I want to use with the template.

---

## Other stuff

- The plugin will look for a JSON field of "name", "Name", "title" or "Title" and use it as the name for the generated frame

- On successfully loading a JSON, it will display the number of items and fields such as ```25 items with 23 fields loaded```

- It looks for {{fieldNames}} whenever a frame is selected so you can deselect or select another frame/template after the JSON is loaded

- You can't load another or different JSON once you have loaded the first one. Unfortunately, the only way you can change JSON once loaded is:

1. Closing the Plugin

2. Exiting Figma

3. Uninstalling Figma

4. Uninstalling Windows or if Mac, upgrade your Mac to the latest silicon

5. Reinstalling Windows or opening your new Mac

6. Installing Figma

7. Installing JSON Frame Mapper Plugin

8. Opening the Plugin

- Note: only steps 1 and 8 are required for most people to clear the JSON file

## Similar plugins I tried and didn't like

- JSON -> content

- Google Sheets Sync

- Google Sheets → Figma

- Data Lab

- Google Sheets Sync

- Data Populator

- others I can't remember

## Language clarification

You *probably* don't need to read this.

*Frame* = A Figma frame, you should know what this is. It will contain your Template

*Template* = A frame where you have all the design done and text fields in place but need lots of versions of each with different text (which is in your JSON file)

*fieldNames* = The name for a field/text field etc. in your Figma Frame/Template. Some of these will contain the text you want lots of different versions of

*Item* = An individual thing in your JSON file which contains many Fields each with the data you want to map to your fieldNames and add to your Template

*Fields* = These are the names/titles/keys of the data in your JSON. Each Item will have one or more of these and each Field can be mapped to none, one or many fieldNames in the Template

*Value* = The actual value for a given Field of a given Item in your JSON. Hopefully, this will eventually appear in a Template if everything goes well

*Map* = Linking of a fieldName to a Field