---
title: Figma | PostGrid
description: Use PostGrid's Figma plugin to export designs as HTML templates for personalized direct mail printing.
---

Created for designers and developers, PostGrid’s Figma plugin allows you to export Figma designs into PostGrid’s HTML templates. This lets you leverage all the power of Figma to design fully personalized direct mail.

## Step 1- Installing the Plugin

Follow the steps below to add the plugin to your Figma workspace:

1. Go to the [Figma Community](https://www.figma.com/community)
2. Search for PostGrid
3. Click on “Open in Figma”

OR

1. Click on the link to open the Figma PostGrid Design Plugin
2. Open the plugin in your Figma workspace.

![PostGrid plugin listing in the Figma Community with an Open in Figma button](/_astro/01-image.nZvDZxN1_TPsuh.webp)

3. You can either sign in with your PostGrid credentials or using the api key from “Settings” on the PostGrid dashboard

![PostGrid Figma plugin sign-in screen with options to log in with credentials or an API key](/_astro/02-image.LZuVn1mR_Z1w3OGG.webp)

## Switching between Test and Live mode

If you are logged in with your account credentials, you can switch between Test and Live modes by clicking on the arrow button on the right side of the panel and switching the toggle.

![PostGrid Figma plugin panel showing the Test/Live mode toggle switch](/_astro/03-image.CuPax-wg_Z9isMp.webp)

## Step 2- Creating a template

- To create a template from scratch, run the plugin and click on “Create Template”

![PostGrid Figma plugin home screen with the Create Template option](/_astro/04-Figma1_Homepage.3e9KBIG4_Z17PFu6.webp)

- Select the collateral type, collateral destination, collateral size, and add the number of pages you want to include in the design. Next click on “Create”.

![PostGrid Figma plugin template creation form with collateral type, destination, size, and page count fields](/_astro/05-image.CmdSoUM5_ZYBz3E.webp)

## Adding Customizable Images to the template

While adding text can be great for personalizing your mailings, incorporating images can enhance the impact of your communications.

To add a customizable image to the template, click on the arrow icon on the right side of the panel to access the menu. Next, click on the Image merge variable to add the image element. After adding the element to the template, you can resize the image and change the merge variable name to your desired one.

![PostGrid Figma plugin showing an image merge variable element added to the template canvas](/_astro/06-Image_merge_variable.DYMvyFhm_NEetV.webp)

### Adding a QR Code Tracker to the template

To reference a PostGrid generated tracker you should format the merge variable like so: `{{your_tracker_id.qrcode}}`. This will generate the [PostGrid Tracker ](/print-and-mail/dashboard/trackers-adding-qr-code-and-purls-to-your-mailings/index.md)that you created in place of the image merge variable block.

![Figma template showing a QR code merge variable formatted as {{tracker\_id.qrcode}} in the design](/_astro/07-Screenshot_2026-03-12_at_07.31.47.B1IlNU2D_Z1a1L5I.webp)

## Step 3- Exporting a Template

- Open the Plugin and click on “Export Template”
- Select the collateral type, collateral destination, collateral size, and add the description for the design design. Next click on “Continue”.

![PostGrid Figma plugin Export Template form with collateral type, destination, size, and description fields](/_astro/08-image.KXWTGnjY_rj8J4.webp)

- Select the designs from your workspace, and they will appear on the screen. Each frame you select will become a page and will be numbered. If you wish to delete a page, hover over it to see the cross sign and click on it. Next Click on “Export”.

![PostGrid Figma plugin export screen showing selected design frames numbered as pages before export](/_astro/09-Figma_Export_2.x8Dh-Z2e_Z1dbm08.webp)

- If the system detects custom fonts in your design, you will see a prompt to upload the custom font and click on “Next”.

![PostGrid Figma plugin custom font upload prompt with a Next button to proceed](/_astro/10-image.DAj0SNf__G3zHg.webp)

- You will see the final Export Results, and you can find the template on the PostGrid dashboard under Templates.

![PostGrid Figma plugin Export Results screen confirming a successful template export](/_astro/11-Export_5.BBvWaHV1_1lUCot.webp)

Here’s a quick video guide for more help -

[PostGrid Figma Plugin Guide](https://www.youtube.com/embed/5UG9ncpkj-k)