Figma to Lob (Beta)

About this plugin

CLOSED BETA - reach out to [email protected] to be added!

Translate Figma documents into HTML templates for Lob!

Help Page

How to use

1. Install the plugin
2. Generate a template from an empty document with selected form factor and size using the "Create Template" button
3. Design on top of the generated template
4. For text merge variables, include a variable name enclosed in curly brackets IE {{first_name}}
5. For image merge variables, enclose the image name in double curly brackets IE {{image_3}}
6. Once your design is complete, run the plugin again.
7. Select the desired form factor and size.
8. Click "Export" at the bottom and save
9. Unzip the newly created folder
10. Host the images within the zip to a public url
11. Open the HTML and modify the background-images to point to their respective public urls.

Hosting Images

You will need to host any assets in the "img" folder of your export. You will then need to reference them within your HTML template. See step 11 of "How to Use"

Disclaimer

Translating Figma into HTML is a best-effort process. Even getting 90% there can save you a ton of time, only having to clean up a few things.