Figma plugin

A plugin that converts Figma files to Lob-ready HTML templates

Overview

Our Figma plugin enables designers to create dynamic, personalized creative within a familiar design tool environment, and export them to Lob to be used in mail campaigns.

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 to Lob listing to download the plugin.

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

Steps to using the plugin

Step 1 - Create a template

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, Postcards 4x6, 6x9, 6x11 , and Self-Mailers 6x18, 12x9, 11x9

3. Click "Continue"

Step 2 - Design away

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

Once your design is ready, it's time to export it to your Lob account. The plugin achieves this by converting your Figma design into HTML.

1. Open the plugin and click "Export your mail design"

2. If your design uses Google fonts and static imagery, Lob will auto-host your background imagery. Your creative will appear as an HTML template in your Lob account.

   1. As a default, the plugin sets your template as a Live HTML Template, but you can always choose to set it as a Test Template instead.

   2. Assets will not expire, but we do have a 100 asset cap in place to manage storage per account. Once you hit this cap, reach out to support and we will help you clear room for new images.

3. If you’re using variable imagery, you can still click "continue" to port your creative to your Lob account. While building your campaign, you'll need to host these images and add hosted image URLs to your audience file in order to map images to recipients.

For those using custom fonts (ie. fonts not available at https://fonts.google.com/), 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.

If you have any questions on the plugin, contact your CSM or reach out to [email protected]. Happy designing!