Perform Print Merge on Figma with Composer Plugin
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 🔥 .
1. Figma account. If you don’t have it, sign up here 👈🏻
2. Google account for create spreadsheet document, sure you have it 😀.
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
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
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
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
4. Generating PDF 🚀
When it is finished it will turn into a .zip file and ready to be extracted
Yeay you have merged your document 👏🏼👏🏼
Now, back to work buddy, money can’t come itself to you. Good luck 😀😀
