Figma plugin

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

Overview

This plugin will enable designers to create dynamic, personalized creative within a familiar design tool environment, rather than having to code templates in HTML. Designers will no longer have to hand their designs to a developer to make them dynamic; instead, they can use this plugin to have their design instantly converted into Lob-ready HTML, including image and text variables.

In order to use this plugin, you will need to host your own creative images and font assets, so that the publicly-sourced URLs may be referenced within your HTML templates.

You can download the plugin, but reach out to your Account Manager or contact us for more information or to provide you with access to the tools.

This feature is currently in beta, and is subject to change without notice.

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. To do so follow these steps.

1. Create and open a blank design template.

2. Open the plugin at the top and select the desired form factor.

3. Click "Create Template"

Step 2 - Design away

Now that you have your template set up, you should go ahead and design as you normally would! There are only two things to keep in mind when you are designing.

1. Mark dynamic text with double brackets. e.g. {{first_name}}

2. Name Images that should be dynamic with double brackets.

Step 3 - Convert to HTML

Once your design is ready, it's time to convert that mail piece into HTML. To do so we want to follow these steps.

1. Hide all guides. They are elements on each page called "_guides"

2. Open the Plugin

3. Select the form factor you are using

4. Click Export

Step 4 - Upload into Lob

Once your design is exported, it's time to upload it into Lob. To do so, you will need to follow these steps.

1. Upload any image assets to a publicly hosted location

2. If you are using custom fonts (ie. fonts not available at https://fonts.google.com/)

   1. You will be prompted that they will need to be hosted and pointed to via merge variable

   2. You can either edit the document and include them inline

        <style>
          @font-face {
            font-family: 'Custom Font';
            font-style: normal;
            font-weight: 400;
            src: url("https://etc");
        }

   3. Or you can use the provided link merge variable to point to a hosted CSS file which contains your custom font-face stylings

      <link href="{{Custom_Font_stylesheet}}" rel="stylesheet">

   4. If this process is unfamiliar to you, you may want to consider foregoing the use of custom fonts.

3. Change local image paths to remote image paths

4. Copy HTML, and paste into the Lob dashboard, within the HTML Template section

5. Preview Template

If you have any questions on the plugin, contact your CSM or [e-mail].