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:
Open the File Browser in Figma.
Click the Community page in the sidebar.
Search within the Plugins section for ‘Frontify.’
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.