The Figma content block lets you display Figma files, frames, and components directly in your Frontify guidelines. Changes made in Figma automatically sync to Frontify, helping you keep design system documentation up to date.
To use the block, an account admin must first install it from the Marketplace. Automatic syncing requires a Figma connection configured in your account settings.
Prerequisites and sync setup
To ensure your Figma components stay automatically updated in Frontify, your organization needs to configure the Figma sync:
Install the block: An account admin must install the block from the Frontify Marketplace.
Connect your Figma team: An account admin can configure the connection in Frontify using a Figma team ID and a personal access token with read-only file access and webhook permissions.
Complete the sync setup: Follow the configuration instructions to establish the connection between Figma and Frontify.
Note: Figma sync isn’t supported for projects with access set to Invite only.
You only need to configure the connection once per Figma team. For instructions on finding your Figma team ID and generating a personal access token, see Installation guide for Figma block sync.
Note: Once configured, changes made in Figma aren’t reflected immediately. Figma triggers a sync within 30 minutes of editing inactivity in a file.
Add Figma components to your guidelines
To use the Figma content block, first import your Figma designs into a Frontify project.
Import Figma assets into a project
Open an existing project or create a new one.
Select New in the top-right corner and, under Integrations, choose Figma.
Log in to your Figma account.
Paste the link to your Figma file or layer into the URL field.
Select the pages, sections, or frames you want to import.
Choose PNG or SVG as the preview format and, optionally, adjust the export scale.
Select Create Asset to import the selected designs into your Frontify project.
Once the import is complete, the assets appear in your project and can be selected using the Figma content block.
For more information, see Getting started with the Figma app.
Add the Figma content block
Once you’ve imported your Figma assets into a Frontify project, you can display them in your guidelines.
Open your guideline in edit mode.
Add a block and search for Figma, or find it under UI and code.
Select the Figma content block.
Click on Choose Figma asset, choose the project where your synced Figma files are stored, and select your asset.
Tip: If you want to display Figma content by pasting a URL directly, use the Embed content block instead. Unlike the Figma content block, it doesn’t require you to import assets into a Frontify project first. For more information, see Embed block for guidelines.
Choose your preview mode
In the Figma content block settings, choose how your designs are displayed in your guidelines.
Image mode
Image mode displays your Figma designs as optimized image previews in PNG or SVG format. The images automatically sync with their source files in Figma, keeping your guidelines up to date.
This is the default and recommended option for brand guidelines and design system documentation. Viewers don’t need a Figma account to see the designs, making it suitable for employees, partners, and external agencies.
Live mode
Live mode embeds an interactive Figma view in your guidelines. Viewers can zoom in and explore designs directly, making it useful for internal product and design teams.
Viewers must have the appropriate Figma permissions to access the embedded content.
Customize block layout and styling
In guideline edit mode, select the gear icon on the Figma content block to open its settings panel and customize its appearance.
Layout settings
Show Figma link: Enable this setting to display a link to the source file in Figma, allowing viewers with the appropriate permissions to open it directly.
Image fixed height: Enable this setting to preserve the height of the original Figma asset. Alternatively, choose a predefined height (S, M, or L) or enter a custom height in pixels (minimum 50 px).
Style settings
Background: Choose a background color from your brand color schemes or use a custom color.
Border: Add a solid, dashed, or dotted border and customize its color and thickness.
Corner radius: Choose a preset size (S, M, or L) or enter a custom pixel value.
