Preparing and exporting a Figma design for Produce

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

This guide takes you from a finished Figma design to an exported template file. You need the plugin installed first, see Installing the Papirfly Figma plugin. Importing the file into Produce is covered in Importing a Figma design into Produce.

Prepare your design

A few things in the Figma file decide how well the template comes out in Produce. Check them before you open the plugin.

• Put each design in a top-level frame. The plugin exports frames that sit directly on the Figma page. It cannot export a group, a layer inside a frame or an empty area of the canvas.
• Name your layers. Layer names are what you see in the plugin's Inspector and what the template builder sees in the Layers panel in Produce. "Headline", "Logo" and "Background" are easier to work with than "Rectangle 14".
• QR codes need a special name. Figma has no QR code element, so the plugin recognizes a QR code by its layer name. Name the QR code group [QR] followed by the link, for example [QR] https://www.example.com. Without the name it is imported as a plain shape, and the import shows a warning.
• Fonts are not included in the export. Figma cannot hand over font files, so the fonts your design uses must already be uploaded in Produce before the import. See Importing a Figma design into Produce.
• Vector shapes are merged. When the file is imported, Produce combines the vector shapes in a frame into a single shape. In the Layers panel in Produce they appear as "Shape 1", "Shape 2" and so on, and the original vectors cannot be edited, hidden or recolored one by one. A dropdown rule that targets an individual vector has no effect after import. Keep this in mind when you decide which parts of the design the end user should be able to change.

Open the plugin and add frames

1. Open the design in the Figma desktop app.
2. Go to Plugins > Development > Papirfly Produce Exporter. The plugin opens on the Export tab.

3. On the canvas or via the pages menu to the left in Figma, select the frame you want to export. You can select several top-level frames at once.
4. Under Frames to export, click Add frames. The button shows how many frames are selected, for example Add 1 frame.

If you select something that is not a top-level frame, the plugin shows Please select a valid frame component. Select the frame itself and try again.

Each added frame is listed with its name and size. Drag the frames to change their order, or click the red cross to remove one. The plugin takes a snapshot of the frame when you add it, so if you change the design afterwards, remove the frame and add it again.

Export tab: template settings

Below the frame list, expand Advanced options and check the settings:

• Template type: Graphic or Print. Choose Print for material that will be printed, Graphic for everything digital.
• Include images: bundles the image files so Produce uploads them to Document Images at import. Leave it off and the image frames arrive as empty placeholders.
• Lock all elements: prevents end users from moving, resizing or deleting elements in Produce. You can fine-tune locking in the Produce editor later.
• Enable dynamic layouts: adds Produce's dynamic layouts feature to the template. Once it is on, you can also switch on Allow Content Creators to define layouts, which lets end users in Produce create their own layouts.

Inspector tab: layers and instructions

The Inspector tab shows the content of one frame at a time. Pick the frame in the dropdown under Frame content.

• Each layer is listed with its type (Frame, Text, Group and so on), its name and its size. Check that every layer has a clear name and that the plugin found everything you expect.
• Click a layer to add an Annotation: a short instruction that the end user sees in Produce, for example "Keep the headline to two lines" or "Use the approved campaign image". For a group you can also set a Group type. Auto-detect is the default.
• Under Page notes, add an annotation for the whole page. It is shown to editors for that page in Produce.

Logic tab: dropdowns that change the design

The Logic tab lets you add dropdowns to the template. Each dropdown becomes a menu the end user can use in Produce: pick an option and the design changes. A typical example is a "Theme" dropdown that switches colors, or a "Show button" dropdown that shows or hides a call-to-action.

1. Type a name in New dropdown name, for example Theme, and click Create Dropdown.
2. Inside the dropdown, type the name of the first option, for example Blue, and click + Option. Repeat for every option.
3. Under an option, click + Add Rule. Pick what should change (show, hide or recolor), the value, and the element it applies to.
4. Add more rules to the same option if several elements should change together. Each rule is listed under its option, for example Color → #ec1211 → Group 1.

The Summary at the bottom counts your dropdowns, options and rules. Rules only work on elements that keep their own layer in Produce. Vectors that get merged during import (see Prepare your design above) cannot be targeted.

Export the template file

Go back to the Export tab. Type a Template name and click Export ZIP. Save the file on your computer; the plugin confirms when the export is done.

The ZIP contains the template description, a thumbnail and, if you enabled Include images, the images from your design.

Next step

Continue with Importing a Figma design into Produce.