All Collections
Integrations
Get Started with Your Frontify Plugin for Figma
Get Started with Your Frontify Plugin for Figma

Access your Frontify brand assets directly from within Figma.

Updated over a week ago

Frontify offers a plugin for Figma, made to simplify the use of brand-related definitions and assets, allowing you to find on-brand collateral and information without ever leaving your design tool ecosystem. You can use the plugin to:

  • Access and import your brand colors

  • Access and import your brand typography

  • Access your Media Library assets

  • Access your icons

  • Access your logos

Note: Only owners of the Library can choose assets from media, logo, or icon library.

Install the Frontify Plugin in Figma

Discover the Frontify Plugin on the Community page of your Figma account:

  1. Open the File Browser in Figma.

  2. Click the Community page in the sidebar.

  3. Search within the Plugins section for ‘Frontify.’

  4. Once you’ve found it, click on Install.

You can also access the Frontify plugin information page here.

Click on ‘Try it out.’

Figma will automatically redirect to a Figma page, where you will see the following screen.

Press the ‘Run’ button.

Insert your Frontify instance and sign in to your Frontify environment.

Start Using the Frontify Plugin

Access your newly installed Frontify Plugin, in Figma, by clicking on the main menu icon at the top left-hand corner of the screen > Plugins > Frontify

Sign In to Your Frontify Environment

Authorize the plugin to start using it.

Open an Existing Design or Create a New One

To start using the Frontify Plugin, open the design you want to work on or create a new one from scratch.

Create a new file or start with a new Sketch file base. By clicking on the Menu icon on the top left-hand corner > File > New / New Sketch file.

Start Using the Frontify Plugin

Navigate between your brands and start using the assets from Frontify in your Figma designs.

The Frontify plugin will present you with your different brands. You can switch between them whenever you want.

Access Your Brand Colors

You can access all colors defined in your Frontify brand guidelines. Navigate to the “Color” tab to find your color palettes. You can select and use those colors immediately by clicking them to fill a shape or use it as border colors, for example. You can also add them to local Figma’s Styles.

The colors can also be individually set as:

  • A fill

  • A border

  • Drop shadow

  • Inner shadow

You can find these options by hovering over a color and clicking on the three dots on the right side of the color.

Access Your Brand Typography

You can apply text styles defined in Frontify directly within Figma. Select the text you want to style, choose a text style, and apply one of your pre-defined brand colors to it. You can also import your text styles to Figma’s native assets panel.

Add to Local Styles

Your Frontify Color Palettes and Text Styles can be added to your local styles. Just head to the lower part of the Plugin screen and click on the blue button ‘Add all the local Styles.’ You can then view these styles in the Figma environment.

Access Your Media Library

You have access to your Media Library’s assets and can add them as a fill to any shape layer. The images will be downloaded at the smallest possible resolution based on the size of the selected layer. If you decide to increase the shape’s size later, just click on the Media Library panel image again to make sure the image has the appropriate resolution.

  • Drag and drop from the Frontify plugin to the canvas

  • Drag an image on top of the other to replace it

  • Select multiple images in the plugin to drag onto the canvas

Access Your Icon Library

Browse your icons and conveniently copy them to your clipboard – ready to be used in your design. You can also select several and drag and drop them into your canvas.

Access Your Logo Library

Just like with your icons, you can also browse your logos and add them to your designs.

If you have any questions, don't hesitate to contact us.

Did this answer your question?