Skip to main content

Import Yuzu templates from Figma

Use the Yuzu Figma importer to create Yuzu templates from selected Figma frames, with notes on fonts, variables, QR codes, handwriting layers, and review steps.

Import Yuzu templates from Figma

Use the Yuzu Figma importer to bring a selected Figma frame into Yuzu as a template. The importer can carry across layout, images, text, team fonts, variables, QR placeholders, and handwriting layers, but you should always review the imported template in Yuzu before using it in a live campaign.

Install the plugin from the Figma Community: Yuzu Template Importer.

Before you start

  • Make sure you have access to the Yuzu team where the template should be created.

  • Create or copy a Yuzu API key for that team.

  • Prepare one Figma frame that matches the template size you want to import.

  • Check that the fonts you use in Figma are also available in your Yuzu team, or map them in the importer.

  • Copy any Yuzu variable tokens you want to use before editing the Figma text.

Yuzu font settings used by the importer

Import a Figma frame

  1. Open the Figma file that contains your template design.

  2. Run Yuzu Template Importer from Figma.

    Yuzu Template Importer opened in Figma

  3. Add your Yuzu API key in the importer settings.

    Create a Yuzu API key for the Figma importer

  4. Select the frame you want to import. If multiple nodes are selected, the importer uses the first one.

    Selected Figma template ready to import

  5. Choose the paper size and orientation that matches your Yuzu template.

    Select the paper size and orientation before importing

  6. Create the template.

    Importer dialog with the selected design

  7. Open the template in Yuzu to check the output. Make sure variables, fonts and QR codes have been created as expected.

    Imported template open in Yuzu

Use fonts from your Yuzu team

The importer loads the fonts available to your Yuzu team. If a Figma font family or style has a different name in Yuzu, open the importer Fonts page and map the Figma family/style to the Yuzu font.

For example, you can map a Figma family such as Futura PT and styles such as Book, Regular to the matching Yuzu font. If a font cannot be matched, review the imported template and update the font in Yuzu.

Add Yuzu variables in Figma text

The importer can replace text tokens with Yuzu variables. Copy the exact variable token from the importer Variables page, including the curly braces, then paste it into the Figma text layer where that value should appear.

Copy a Yuzu variable token from the importer

Do not retype variable names by hand. Use the copied token so the importer can match the variable in Yuzu.

Variable token placed in a Figma text layer

Add QR codes

To create a QR code in Yuzu, name the Figma layer QR. The importer replaces a vector, shape, or frame with that layer name with a Yuzu QR code element in the same position and size.

Figma QR layer selected before import

After import, open the QR code in Yuzu and set the destination URL or QR content you want to use.

Add handwriting layers

To import a text layer as handwriting, rename the Figma text layer using this pattern:

handwriting/<family>

Renaming a Figma text layer for handwriting

Supported family names:

  • handwriting/carpenter

  • handwriting/foster

  • handwriting/george

  • handwriting/grogan

  • handwriting/knowles

  • handwriting/nightingale

  • handwriting/robinson

  • handwriting/singh

  • handwriting/stafford

The importer uses the layer's text content and converts it to a Yuzu handwriting element. Black Figma text imports as black handwriting; other text colors import as dark blue handwriting.

Imported handwriting shown in Yuzu

Review the imported template

The importer tries to convert layer names, text, images, shapes, and groups into Yuzu. Some complex Figma layers may be simplified, flattened, or converted into image-like elements so the template remains usable in Yuzu.

Review the imported template carefully before publishing or assigning it to a flow. Pay extra attention to:

  • Variables and whether they resolve to the right Yuzu data.

  • Fonts and font weights.

  • QR code size, position, and destination.

  • Handwriting layer content and style.

  • Images, gradients, shadows, blend modes, dashed strokes, and mixed text styles.

Yuzu does not guarantee the imported template will look exactly the same as the Figma design. Make any final adjustments in Yuzu before using it for live orders.

Troubleshooting

  • No variables appear: Check that your API key belongs to the right Yuzu team, then reload the importer.

  • A variable does not import: Copy the token again from the importer and replace the text in Figma with the exact copied value.

  • A font looks wrong after import: Add a font mapping in the importer Fonts page, then import again or update the font in Yuzu.

  • The QR code imports as a normal shape: Rename the Figma layer to QR and import again.

  • Handwriting imports as normal text: Rename the text layer using handwriting/<family> with one of the supported family names.

  • The design does not match Figma exactly: Review the template in Yuzu and adjust unsupported or simplified elements manually.

Related Articles
Designing Templates: Bringing Personalization to Life
Troubleshooting Flows & Templates
Did this answer your question?