> For the complete documentation index, see [llms.txt](https://help.lob.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.lob.com/print-and-mail/designing-mail/no-code-design-suite/figma-connector.md).

# Figma Connector

Convert Figma files to Lob-ready templates

## Overview <a href="#plugin-overview-0" id="plugin-overview-0"></a>

Our Figma plugin enables designers to create [dynamic, personalized creative](/print-and-mail/designing-mail/maximizing-engagement/dynamic-personalization.md) within a familiar design tool environment, and export them to Lob to be used in mail campaigns.&#x20;

**Here’s what you can expect**

* **Design it.** Build branded templates with proper dimensions, address blocks, and bleed lines.
* **Personalize it.** Add dynamic variables, like first name or variable imagery, to tailor each piece.
* **Send it.** Your design automatically ports to Lob when you're ready to send.

In order to use the plugin, you can navigate to the **Integrations** section of your Lob dashboard. The Figma plugin is listed in the Design Tools section of the page. You can also go straight to the [Figma Lob listing](https://www.figma.com/community/plugin/1121939663584407048/figma-to-lob-beta) to download the plugin.

Enter your Lob login information to the plugin to get started.

<figure><img src="https://1775164782-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiXDYGxBp6aAwhpEhTMNC%2Fuploads%2FyHM1N0OuhElGzOGJ6LVx%2Fimage.png?alt=media&amp;token=022519c9-50d0-4a7f-a850-9697c920d422" alt=""><figcaption></figcaption></figure>

## Steps to using the plugin <a href="#steps-to-using-the-plugin-1" id="steps-to-using-the-plugin-1"></a>

### Step 1 - Create a template  <a href="#step-1-create-a-template-2" id="step-1-create-a-template-2"></a>

Once you have downloaded the plugin, you will want to create a new base file by creating a template.

1. Create and open a blank design template.
2. Open the plugin at the top and select the desired mail format. We currently offer templates for Letters: 8.5x11, 8.5×14, A4, Postcards: 4x6, 6x9, 6x11, 5x7, A5, Self-Mailers: 6x18, 12x9, 11x9, 17.75×9, Snap Packs: 8.5×11, and Booklets: 9x6, 8.375×5.375.
3. Click "Continue"

### Step 2 - Design away  <a href="#step-2-design-away-3" id="step-2-design-away-3"></a>

Now that you have your template set up, you should go ahead and design as you normally would! To create dynamic personalization in your creative:

1. Mark dynamic text with double brackets. e.g. `{{first_name}}`
2. Name dynamic images with double brackets on the leftside nav

When you send mail with Lob, dynamic text / imagery is populated when columns in your audience file map to merge variables in your creative.

**Best practices to keep in mind while designing:**

* Create your design on the template generated and be sure to only use 1 root frame (ensure all design elements, shapes, images, text are all contained within this single frame)
* Rotating the root frame of your design file will result in an error
* Be sure your design fits within the bleedlines, and takes the address block into account. We will automatically hide guide layers (bleedlines, address block) when you export - if you change the names of guide layers you will need to hide them on your own.
* No need to flatten non-variable imagery and text - this will happen automatically on export
* For letter templates, duplicate the second page until you have the needed page count

### Step 3 - Port to Lob <a href="#step-3-convert-to-html-4" id="step-3-convert-to-html-4"></a>

Once your design is ready, it's time to export it to your Lob account.&#x20;

1. Open the plugin and click "Export your mail design"
2. If you are using any custom fonts in the file, we'll ask you to either upload the font file or provide us a publicly hosted font or stylesheet URL.

   1. Uploaded files will automatically get added to your Lob Design Library and make editing your template in the Lob Visual Editor much easier.

   <figure><img src="https://1775164782-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiXDYGxBp6aAwhpEhTMNC%2Fuploads%2FPSmhhsN7ZL3Siy2Z8YfM%2FScreenshot%202026-09-24%20at%209.46.53%E2%80%AFAM.png?alt=media&amp;token=d5350385-cc2e-44e0-be01-fad4a7cc8f32" alt=""><figcaption></figcaption></figure>
3. As a default, the plugin sets your template to the Live environment, which means you can use it for live mail, but you can always switch to Test mode instead.
4. If you have created a Lob template from this file previously, you will see the option to both create a new template and replace an existing template. If you choose to replace an existing template, you will be shown the template ID and name of the previously created file and can override that design with the new updates.

   <figure><img src="https://1775164782-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiXDYGxBp6aAwhpEhTMNC%2Fuploads%2Fry3Vo4UXqpVGfwLzApyF%2FScreenshot%202026-09-24%20at%209.47.07%E2%80%AFAM.png?alt=media&amp;token=8eca1068-ab11-4d66-acfe-c605ba885537" alt=""><figcaption></figcaption></figure>
5. If you’re using **variable text or imagery**, you can test different variations of the creative in Lob's template proofing tool. For variable images, you'll need to host these images and add the hosted image URLs to your audience file in order to map images to recipients.&#x20;

For those using custom fonts (ie. fonts not available at <https://fonts.google.com/>), and who prefer to host the fonts youself, we need access to the versions of that font you’re using in order to port your dynamic creative to Lob. Don't worry—we've laid out instructions for how to host custom fonts yourself [here](/print-and-mail/designing-mail/no-code-design-suite/figma-connector/publicly-hosted-custom-fonts.md).

If you have any questions on the plugin, contact your CSM or reach out to [support@lob.com](email:support@lob.com). Happy designing!