Perform Print Merge on Figma with Composer Plugin

5 min readMar 5, 2022

Introduction

Print Merge is a powerful tool that allows you to merge text from a data source with a document.

Usually this feature is used to create documents with large amounts of data, for example, each document will have different data but have the same design. Yepp, you can find this stuff in Corel Draw or Adobe Illustrator . This time i will explain how to run Print Merge on Figma, Figma is a very popular free design application, many features and supported by large community make Figma a great application 🔥 .

Preparation

1. Figma account. If you don’t have it, sign up here 👈🏻
2. Google account for create spreadsheet document, sure you have it 😀.

Step 1 : Create Design

1. Open Figma on your browser or with desktop app
2. For first time, name your Team first (e.g Design Team 🎨), skip for Add Collaborators, then Finish Setup and choose starter for team plan.
3. Go to Team Project, create New Design File

4. Now you re on editing page, named your project (e.g Print Merge)
5. Create new frame, and craft design with your creativity !

6. This time I will make a simple certificate design as an example

Step 2 : Create list data in Google Sheets and configure Composer Plugin

1. Go to Google Spreadsheet page with your browser, then create new sheet

2. Add 2 column called name and workshop_date
3. Fill in the data as needed

4. Back to Figma, then install Composer Plugin. Right click → Plugins → Browse Plugins in Community → type “Composer” in search tab → select Plugins tab → click Install, voila Composer plugin is Installed 👏🏼

You can read full documentation for this plugin in Creator’s Github : marqroldan/figma-composer: Mail-merge type of plugin (github.com)

5. This plugin is required an Google Sheet-scoped API key, if you didn’t have it, follow this step 👇🏻

6. Go to Google Cloud Platform Console, login with your Google Account. If this is your first time, check Terms of service and check email updates if you want (optional), then click AGREE AND CONTINUE

7. Select Project or Create New Project if didn’t have

8. Go to API & Services, click Enabled APIs & services,

In search tab type “Google Sheet”, click Google Sheets API

9. Click ENABLE, you will be redirected to API/Service Details page

Go to Credentials page

Click Create Credentials → API key

Your API key is ready !! Copy and Paste the API key to Safe Zone 😝

10. Click close

Step 3 : Run the Composer Plugin🔥

1. Before back to Figma, make sure your spreadsheet data is public and anyone can view

Copy your GSheet URL

2. Back to Figma, Right click → Plugins → Composer, paste your generated API key, click Save and GSheets URL, click Fetch and select Sheet List with the sheet name

If you want to create a new design with different data again, you don’t need to create a new API key. One generated API key can be used forever. You just need to change the design and data in the spreadsheet (in your google account).

3. Back to design, adjust the design with the name of the column you want to make a print merge

Headers will always be on the first row
They can only be alphanumeric, with dashes, and underscores
Make sure a frame layer is selected
Make sure to insert %%{header name}%%on your text, the plugin will loop over the text layers under the selected frame

Will be like this ☝🏻

Select certificate Frame, then click Select All and Generate
OR
You can preview your design that will be print merged in Figma, just click Preview