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 for Figma Design files only.
BEFORE STARTING: Please ensure that fonts are set up correctly. The Frontify team can help you with this; just contact your Customer Success Manager.
Figma file setup
1. Create a new page
Everything on the first page of your Figma file will be imported as a template, so it's best to create a fresh page to start with and move it to the top of the page list.
2. Add your designs as frames (or instances)
Make sure that only your designs are on the new page. Don't use sections or additional frames to group your designs. The first-level frames of the first page will be imported as pages into Frontify.
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 right from the beginning.
3. Reduce nested elements
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.
4. Use shapes for images
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 rather 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.
5. Remove auto-layout & auto-sizing text
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.
6. Confirm sharing settings
Ensure that the person whose access token has been added to Frontify has at least view access to the file.
This can be achieved by clicking on the "Share" button in the top righthand corner of your design file and:
Setting the “Anyone in [organisation]” sharing permission to “can view”
Moving the file to a project that the access token user has view access to
Inviting the access token user directly to the file with the “can view” permission
Importing to Frontify
1. Copy the Figma file URL
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".
2. Open your template library on Frontify
Go to the template library that you want to import into.
3. Press "New" > "Figma URL"
4. Paste the Figma file URL
5. Change the title (optional)
6. Press "Create template"
It may take some time to generate the template. Please be patient and keep the window open.
7. You're done!
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
Figma variables are imported into Frontify when you create the template:
Template users can leverage variables when using the "Simplified" template block via the guidelines
When several unlocked properties are linked to the same variable, they will see one input to control all properties across the template pages simultaneously.
Note: This function is not yet available for „advanced“ template blocks. 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.
We are currently working on supporting variables management for all Frontify templates.
Noteworthy limitations
Frontify templates already support a range of Figma features, but there are also some limitations to consider at this beta stage.
Frame properties
Several properties are not respected when applied to frames, we recommend using shape layers (e.g. rectangle) where possible.
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.
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 the first page of your Figma document. All other pages will be ignored.
Components
While component instances are generally supported in templates, components themselves are not.
Troubleshooting & Support
Issues with fonts
Ensure that the fonts have been installed on Frontify. They should have automatically changed status to "Installed". Note that manually setting the status to "Installed" will not have any effect, the automation to install fonts is run when the status is set to "Ready to Install".
Ensure that the font files uploaded to Frontify are the same ones your designers are using for Figma.
If you want to add additional fonts at a later stage, you may. Once your font library is configured, you can install all your desired fonts. If we have to reconfigure your font library to work with more or other template libraries, you would need to reset your fonts to "Ready to Install" and they will be reinstalled for the new template libraries.
Issues with template design
Double-check the limitations listed above and make sure your design adapts to them accordingly.
Please reach out to your Customer Success Manager with any issues you encounter.