Figma Plugin: Bulk Data Insert

Step-by-step guide

The Bulk Data Insert is a Figma plugin that allows you to fill repeatable text and image content from multiple rows from any spreadsheet (which can be an .xlsx/.csv file ) to your selected Figma layers.

Get the plugin here: BULK DATA INSERT

See the plugin in action

How to setup your spreadsheet

Regardless of if you’re using an XLSX, CSV for your spreadsheet, the structure is always the same; the very first row (or the “header”) of your spreadsheet has to contain the names of the Figma layers that you would like to bulk fill.

You can name these whatever you like, but it’s easiest to use a short yet descriptive hashtag format like: #Title or #Body.

In Figma, you would then name your text layers #Title or #Body as well; this will ensure that they are mapped together when the spreadsheet is synced up in the plugin later.

| #Title      | #Body          | #Image                 |
|-------------|----------------|------------------------|
| lorem ipsum | dolor sit amet | https://img1.url.com   |
| lorem ipsum | dolor sit amet | https://img2.url.com   |
| lorem ipsum | dolor sit amet | https://img3.url.com   |

Note:

1. To insert image, input the image source URL

How to setup your Figma layers

1. Create a component where you want to insert the data into.
   - To insert text -> create a text layer
   - To insert image -> create a frame layer
2. Change the layer names according to the spreadsheet headers (e.g. #Title, #Body, #Image)
3. Create instances out of that component as many as you want

How to use the Plugin

1. Setup your spreadsheet (you just did)
2. Setup your Figma layers (you just did)
3. Open the Autofill Layer plugin
4. Drag and drop your spreadsheet file to the plugin
5. Select the layers you want to autofill to
6. Press the “Autofill Selected Layers” button