Add your Figma Designs to Frontify to involve everyone in the design process, and start documenting your Figma Design System as part of your Brand in Frontify.
Requirements to start using the Figma App:
Contact your Customer Success Manager for further information on including Projects in your plan. |
Getting started with the Figma App
Sign up to Frontify
Open your Projects tab in Frontify
Open a specific project (or create a new one) and then select ‘New’ on the top right-hand corner > Click on Figma App (If the Figma app icon does not show up, ask customer support to enable it)
4. Log in with Figma. In the popup window from Figma, click “Allow access.”
5. Paste a link to your Figma file or layer.
6. Select one or more layers or prototype flows you want to add. Prototype flows, pages, sections, and frames of the first three levels of the hierarchy can be selected.
7. Choose a preview format between PNG and SVG (more on the following paragraphs)
8. Click “Create assets” to add Figma Elements to your Frontify Project
9. Invite all relevant team members to the projects to drive collaboration on designs
10. Start managing design assets through our built-in capabilities, such as comments, Workflow, Metadata, tags, etc.
Choosing a format PNG vs SVG.
Why do I need to choose a preview format?
PNG will always render exactly like the design in Figma. That’s not always the case for SVG because the code generated by Figma doesn’t always lead to the same visual result. The file size of SVG is great for simple layers but can become very large for complex files. Every image has an impact on the loading time of the guideline page. Even though PNG doesn’t have the same scalability as SVG, it’s often smaller.
What format should I choose for the preview?
You can choose between PNG and SVG, and depending on your use case, one or the other is the right choice:
Choose PNG for prototypes, mockups, design system documentation, and presentation slides. Prefer PNG if the layer contains a lot of text or uses effects (drop shadow, image filters, etc.) that SVG doesn’t support. Choose a larger scale (e.g., @2x) to ensure the image looks sharp on retina displays.
Choose SVG if you want to import a logo, icon, or any kind of simple shape. Use SVG if zooming down the smallest detail is important. Take a look at the file size to make sure that the file you’re importing has a decent size. The app will display a warning for large files. The file size of SVG is driven by the complexity of the design and the amount of text included.
I need zooming. What format should I choose?
If embedding a live preview is not possible, then you need to decide between PNG and SVG. SVG will always look crisp but can lead to other rendering or performance issues. If exact rendering and file size are more important, choose PNG with a higher scale factor to enable zooming up to 4x.Bonus: Adding Figma Elements to Frontify Guidelines
Bonus: Adding Figma Elements to Frontify Guidelines
This is a powerful way to create a Design System within a wider Brand System.
To add Figma elements to your Guidelines, you can either:
Use the Embed Block to embed files directly with a Figma link or from your Frontify Projects. To do that, simply add a new block, choose “embed,” and pick one of the two options - enter a URL or choose an embed from a Project. Get more information in the dedicated help article here.
Use the Figma Content Block that allows you to retrieve Frontify-stored Figma assets. To do that, add a new block, search for “Figma” under the UI & code section, and then choose your Figma assets within Frontify. Get more information in the dedicated help article here.
The difference between the Embed Block and the Figma Content Block
The Figma Block has two view options: Image and Live. Using the Live view in the Figma Block acts similarly to the Embed Block. You must be logged in and have access to the Figma file to view it or use a share link that anyone can see. This is essentially a 'window' into Figma and takes more time to load.
The largest difference is using the Figma Block with the Image view. This view does not require access to the file in Figma. So, anyone who has access to Frontify can see the Figma image. Thanks to the image view, an updated file in Figma will reflect in Frontify just a few minutes later (this sync needs to be set up following this procedure). Image view also loads much quicker than live view or Embed Block.
Start sharing those Guidelines with your internal teams, external agencies, or partners, or make them public using our target feature.
Your Figma Elements are ready to be used & shared across your company.
If you have any questions, don’t hesitate to contact us.