This guide provides an overview of how to set up your Figma file and import it into Frontify as a template.

*Please note, this feature is currently in Beta and is for Figma Design files only (and not FigJam files). Contact your Customer Success Manager for more information.

Everything on the selected page of your Figma file will be imported as a template, so it's best to separate existing pages or create a fresh page to start with.

Please note that if a frame URL is copied, we will import the page that the frame is in. If it's not possible to determine the page selected, we will import the first page by default.

Make sure that only your designs are on the selected page. Don't use sections or additional frames to group your designs. The first-level frames of the selected page will be imported into a Frontify template, with each frame as a separate page within the template.

This makes it especially easy to organize and manage different designs, for example when working on multi-frame projects like social media campaigns, like the example above.

If you currently have your design as a component, copy an instance of that component to the new page, but make sure the component is kept on another page.

If you're creating your designs from scratch, make sure to read the following steps first to set them up well from the beginning.

Wherever possible, remove nested elements (e.g. text within a frame). There are many things we support, but at this stage we can more reliably support a more 'flat' design.

You may be used to applying image fills to frames, but there are cases where we cannot support this and you will get unpredictable results. It is best to apply image fills to shapes (e.g. rectangles, but all shapes are supported).

NOTE: If the layer has an image icon in the Figma layers panel, it's good to go.

We do not currently support auto-layout or auto-sizing text. While they will likely not break the Frontify template, including them may have unintended results. It's best to remove all occurrences of auto-layout and auto-sizing text in your design to have a more predictable outcome.

Ensure that the authenticated user has at least view access to the file being imported.

This can be achieved by clicking on the "Share" button in the top righthand corner of your design file and:

To ensure your Figma templates render properly in Frontify, you can upload and manage fonts directly in your dashboard.

Please note that this functionality is currently only available for Figma templates.

Once your fonts have been installed and your Figma design file ready to be imported, you can head to your Template library to create a new template.
​
In order to do this, you’ll first need to authenticate your Figma account using OAuth. This ensures a secure and seamless connection while keeping your login credentials private.

When you click to create a new Figma template in your Template library, you’ll be prompted to log in to Figma (if you aren’t already). A pop-up will appear asking you to authorize Frontify to access your account.

When granting access, Frontify requests permission to:

This authentication process is fully handled by Figma, meaning Frontify never sees or stores your credentials. Your login remains with Figma, and you can control what’s shared.

Once authenticated, you can continue importing files without logging in again, unless access is revoked or you decide to log out.

To import a design file, you can either:

If using Figma in the browser, you can copy the URL from the address bar. If using the Figma app right click the corresponding tab and press "Copy Link".

Go to the template library that you want to import into.

It may take some time to generate the template. Please be patient and keep the window open.

Check out the template and make sure it has imported as expected. If you encounter any issues reach out to your customer success manager.

Figma variables are imported into Frontify when you create the template:

We are currently working on supporting variables management for all Frontify templates. You won't be able to adjust the variables in the template editor once imported. If you‘d like to remove variables from your template in Frontify, you will need to remove them in your Figma design file.

Note: This function is not yet available for "Advanced" template blocks.

Frontify templates support many Figma features, with more being added continuously. However, some limitations still exist during this beta stage:

Auto-layout

There is no support for auto-layout. Frames with auto-layout will not break the template, but they will not behave as expected.

Auto-sizing text

There is no support for auto-sizing text. Text elements are imported at their current size and will not adapt to content changes.

Bullets and numbered lists

We currently don't support this functionality.

Components

While component instances are generally supported in templates, components themselves are not.

Frame properties

Several properties are not respected when applied to frames, we recommend using shape layers (e.g. rectangle) where possible.

Image fill on frames

We translate image fills to an image element in Frontify. Image elements can't have children in our templates so we cannot support image fills on frames currently.

Multiple pages

Currently, we only import a single page of your Figma document. All other pages will be ignored.

Variable Aliases

We currently do not support variable aliases. Please be sure to remove these prior to importing a template.

Please reach out to your Customer Success Manager with any issues you encounter.