*The Figma Block is available through the Marketplace.
​
The Figma Content Block seamlessly connects Figma and Frontify. This is the ideal Block to use when you want to document Figma files, document your Design Systems, keep files up-to-date between both tools and share your Frontify Guidelines with anyone.

The Figma Block ensures that any change you will do on Figma will be automatically synced on Frontify without any further action needed from your side.

This Block aims to increase your design system adoption with faster and customizable Figma assets on the Brand Guidelines.

To enable the new Figma Block, please read this document to provide us with the information needed to create a real-time sync between Figma and Fronitfy.

In case you have any further questions, please don't hesitate to contact our support team.

3. Upload your Figma asset. You can upload the whole page or be as granular as a single-frame component. Add the URL of the file, and then on Frontify, decide what components to import.

Now you have the Figma assets to add to your Guidelines. In the next section, we explore how to connect the Figma assets from the Creative Collaboration Project to your Guidelines.

Switch back over to your Guidelines to add the Figma Block. In edit mode, add a new Block from the block chooser. Scroll down to the section “UI & Code,” or simply type “Figma” in the search bar as shown below.

Next, click on “Choose Figma asset.” Select the project where you are storing the Figma assets and click on the asset to upload it.

Live mode: This selection will show an embed of the Figma file. See it as a window looking into Figma. To see this embed, the user needs to be a user of your Figma account.

Image mode: When selecting this one, we will create an Image (SVG) from your Figma preview. This allows you to add to the Guideline an image that is synced to your Figma file. By having an image, the speed with which the page loads will be at the best standards. Moreover, you can share the Guideline with anyone, also users outside your organization, and they will be able to see the preview. To get this image mode up and running, you need to go through the sync procedure, which you can find it here.

The new asset is uploaded as an image by default, but you can also select embed on the cogwheel on the right-end side of the block.

With this view, you can expand the file fullscreen, zooming in and out and not losing any details.

The image mode allows you to create a preview of the Figma URL, which is synced with the Figma source file. When you make changes to a Figma file, the sync isn’t triggered immediately. Figma will trigger the sync within 30 minutes of editing inactivity in a file.

When clicking on the cogwheel, you can customize the block. With the uploaded Figma asset set on 'Image', the asset is visible to anyone - regardless of their Figma access. This means that you do not need to alter your Figma permissions to share your design system.

Image fixed height: If this toggle is on, the image size shown on the Guideline has the same height as in the Figma source file.

If the toggle is off (right side image), you can either customize the pixel height (minimum 50px) or choose between S, M, or L sizes. Choosing the predefined sizes can help you to have consistency throughout the Guidelines.

Show Figma Link: When this is on, on the bottom left of the page, we show the name of the Figma file with a hyperlink to the original Figma file. This allows your designer to seamlessly move from the Frontify Guidelines to the correct Figma file with one click.

Show Background: To increase the customization of the Figma Content Block, the user can add a background color (predefined brand colors or custom ones) to the block.

Show Border: Adding border options is also possible around your Figma Content Block to create a visual separation from the background. Choose from dotted, dashed, or solid lines, define the strength in pixels and the color.

Corner Radius: Optionally, add rounded corners between S, M, or L sizes or custom radius.

The Figma block allows you to create a preview of the Figma URL, which is synced with the Figma source file. This way, the assets load instantly and are always up to date. The block will load in milliseconds, avoiding that tedious black block in your Guidelines that never loads.