Importing a Figma design into Produce

Beta: Figma import is in Beta. Its screens and options may still change, and this guide is updated as they do.

This guide covers the last part of the Figma workflow: taking the ZIP file exported with the Papirfly Produce Exporter plugin and turning it into a template in Produce.

Before you import

• Your Produce instance must be set up for Figma imports. This is done by Papirfly. If you cannot import a Figma file, ask your Customer Success Manager to enable Figma import for your account.
• Upload the fonts first. Unlike an InDesign package, a Figma export does not contain font files. Every font the design uses must be in your Produce font library before you import. Click the settings icon at the bottom left, choose Produce settings, then Fonts. Use Upload font to add any that are missing. The list shows every uploaded font file with its upload date and uploader.
• You need template administrator rights in Produce to create templates.

Import the file

1. Open Produce and go to Templates.
2. Click New Template.

3. Enter a name for the template.
4. Open the Design tab. Under Design based on, choose Design file, click Browse and select the ZIP file you exported from Figma.

Produce uploads the file and shows Design file uploaded.

Map the fonts

If the design contains text, Produce lists every font it uses, grouped by font family, and asks which of your uploaded font files to use for each one. The import waits until everything is mapped.

For each font family:

1. For every style the design uses (for example Regular, Light, Medium), pick the matching font file from the dropdown.
2. If the design uses a style in italic, a second dropdown appears next to it. Pick the italic file there.
3. Optional: use More styles to map extra weights the design does not use yet, so template builders can pick them later in the editor.
4. At the top of the section, pick a Normal and a Bold style. These two control the Bold button in the editor (see below). If you skip them, the Bold button is not available for this family.

The confirm button becomes active once every style the design uses has a font file. Click it to continue.

How Normal and Bold work

The Bold button in the Produce editor does not make letters thicker. It switches the text between two font files you choose here, the same way Google Docs does.

• Normal is what text returns to when you remove bold. For most families this is Regular.
• Bold is what text becomes when you press B. Pick SemiBold or Bold, whichever your design uses for emphasis.

Any style at least as heavy as your Bold pick counts as bold: with SemiBold as the Bold pick, text in SemiBold, Bold or Heavy all show the B button as active. Removing bold always returns text to the style it had before, so a subtitle set in Light goes back to Light, not to Regular.

The Italic button works the same way: it is only active when the current style has an italic file mapped. Produce never slants letters artificially.

Finalize the template in the editor

1. Click Finalize in Editor. The editor opens in a new window with a short welcome message; close it to start.

2. Check the design against the Figma original. The tools on the right give you Save, Edit locking, Document, Layers, Variables and Frame.
3. Open Layers to see the imported elements. Shapes named "Shape 1", "Shape 2" and so on are vectors that were merged during import.
4. If you set up dropdowns in the plugin, open Document and check that they appear and switch the design as intended.
5. Use Edit locking to decide what end users may change, and add annotations or layouts if needed.
6. Click Save and confirm.

Publish the template

Back in Templates, the new template is marked Draft. Documents cannot be created from a draft.

1. Click the template and click Continue setup.

2. Check the template settings (thumbnail, permissions, folders and so on).
3. Click Publish. The template is now available to your users like any other template.

If the import fails

• Error right after selecting the file: a font in the design is not in your font library. Upload it under Fonts in the Produce settings and import again.
• A QR code came in as a plain shape: in Figma, name the QR code group [QR] followed by the link, export again and re-import.
• Elements are in the wrong place or merged unexpectedly: make sure you use the latest plugin version, then export again. If it still looks wrong, contact Papirfly support with the ZIP file and a link to the Figma frame.