All Collections
Getting Started with the Figma App
Getting Started with the Figma App

Learn how to get started with the Frontify Figma App.

Updated over a week ago

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:

  • Have an active Figma account.

  • Have Projects as part of your Frontify plan. And have editor rights in at least one project.

Contact your Customer Success Manager for further information on how to include Projects in your plan.

Getting started with the Figma App

  1. Sign up to Frontify

  2. Open your Projects tab in Frontify

  3. Open a specific project (or create a new one) and then select ‘New’ on the top right-hand corner > Click on Figma App.

4. Grant Access to Figma in Frontify (only on the first time) and Add your Figma Domain within the Figma App Interface

5. Browse the Figma file in the Frontify viewer

6. Select the Figma Elements (single or multiple select) you want to add to a Frontify Project

7. Add Figma Elements to Frontify your Project.

8. Invite all relevant team members to the projects to drive collaboration on designs

9. Start managing design assets through our built-in capabilities, such as comments, Workflow, Metadata, tags, etc.

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. 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.

Did this answer your question?