Content:

If you prefer videos over reading, we have a quick summary video and a deep dive video available.

What is the Figma Library Sync?

The Figma Library Sync is an automated solution designed to streamline the process of transferring design assets from Figma to Frontify. This sync eliminates the need for manual downloads and uploads, ensuring that assets are always up to date in Frontify and aligned with the latest versions in Figma.

How exactly does it work?

Initial Base Sync:
1. The process begins with a base sync, where all components from a Figma library file are uploaded to the connected Frontify library for the first time. This base sync occurs once the customer has shared all necessary details for the integration with Frontify, and Frontify sets up the sync.
2. It’s crucial that all changes in the Figma library file are published before this initial upload to ensure that the latest version of every component is synced.
Automatic Sync on Publish: When a designer publishes library updates in Figma, the sync is triggered, and all components from the designated Figma library file are automatically synced to the corresponding Frontify library. This includes adding new components, updating existing ones, and removing deleted assets.
Version Control and Component Management:
1. New Components: Any newly added components in Figma will be synced into Frontify as new assets.
2. Updated Components: If a component has been modified in Figma, the sync will create a revision of the component in Frontify, replacing the old version.
3. Deleted Components: Components deleted from the Figma library will be automatically removed from Frontify, maintaining consistency between both platforms.
Handling Component Naming & Variants: For components with variants (e.g., different styles or states), each variant is treated as a separate asset in Frontify. The naming of the synced assets is controlled directly in Figma and works as follows:
1. For components with no variants: “Component Name.”
2. For components with one variant property: “Component Name - Variant Property=Value.”
3. For components with multiple variant properties: “Component Name - Variant Property 1=Value 1, Variant Property 2=Value 2.”
Flexible Syncing Setup:
1. The sync can link a single Figma library file to one Frontify library, or multiple Figma library files (from within the same Figma Team) to a single Frontify library.
2. The cost of the sync includes up to 5 connected Frontify libraries (additional packages of 5 can be purchased). The libraries all have to be in the same Frontify environment. For additional Frontify environments, you will need to purchase the sync separately.
Customizable Export Settings:
1. For each library, users can choose the file type and export scale for the assets synced to Frontify. Supported file types include PNG, JPG, SVG, and PDF, with export scales ranging from 0.01x to 4x.
2. Note: When using a Frontify Icon Library, only SVG is accepted.
Frontify Integration and Distribution:
1. Once synced, these assets behave as any other DAM asset in Frontify. They can be distributed, organized, and shared across the organization using Frontify’s extensive library features (i.e. custom metadata).
2. Frontify’s native features, such as icon recoloring or icon download sizes, remain fully accessible for these synced assets.

By automating the synchronization of brand assets from Figma to Frontify, the Figma Library Sync drastically reduces manual effort, improves asset version control, and ensures that the latest, most accurate versions of assets are always available across teams. This leads to better workflow efficiency and a more streamlined asset management process.

Getting started

The Figma Library Sync is a paid integration. If you'd like to start using it, reach out to your Customer Success Manager about adding it to your Frontify subscription.

If you have already added it to your subscription, follow the Installation Guide.

Frequently Asked Questions (FAQ)

How do I set up the sync if I have already added these assets to a Frontify library manually?

It's not possible to connect the automatic sync to assets that have been uploaded manually to Frontify (these manually uploaded assets lack a Figma component ID, which is needed for the sync). Therefore, the sync needs to be run from step 1 – the initial base sync – to work correctly. If you have already uploaded the assets in question to Frontify but would like to switch to the sync you have a couple of options.

You can start from scratch with a new library and delete the old library.
1. You'll need to make sure that you replace all links/buttons pointing to the old library with the new one and that your users are aware of this switch, in case they have bookmarked the link to the old library.
You can keep using the same library and delete/archive the manually uploaded assets.
1. The link to the library won't change and your users shouldn't notice a difference. You'll need to decide whether you remove the old assets first and then run the base sync or if you move the old assets to a separate folder while the base sync is running and then remove them once the new ones are there.
If either of these 2 options is problematic for you because you have manually added tags, custom metadata, statuses, etc. to these assets in Frontify and you don't want to lose this information, please contact your Customer Success Manager. The CSM can reach out to our Technical Solutions Team to discuss your situation. A few things that we'll need to know:
1. How many assets are there? What information have you applied to these assets in Frontify? Do the names of the components in Figma match the asset names in Frontify?

Can I set up a folder structure in the Frontify library?

The sync will always upload new components/assets directly to the library, outside of any folders. However, once they're in the library, you can move them into any desired folders within the same library and the sync (updating or deleting) will continue working.

Can the sync automatically apply tags or custom metadata?

No, this isn't possible You will have to do that yourself once the assets/components are in Frontify (updating a modified component will keep all the metadata or similar that you have applied to the asset in Frontify).

Can the sync automatically add a "Preview Color" to my assets in Frontify?

No, this isn't possible You will have to do that yourself once the assets/components are in Frontify (updating a modified component will keep the Preview Color that you have applied to the asset in Frontify).

Can the Frontify library contain additional assets that aren't uploaded via the sync?

Yes, that is no problem. The sync will only impact assets/components that have been added through the sync. Other assets can co-exist next to these, in the same library.

How do I control asset naming? Can I impact the structure?

The source of truth for naming is Figma. The name of the asset in Frontify will always be aligned to the component name in Figma.

If you change the name in Figma that will update the asset name in Frontify. If you change the asset name in Frontify, it will be overwritten by the Figma component name (only once there is some kind of update to that specific component in Figma).

The naming structure cannot be changed/impacted. You will need to make sure that you name your components and variants in Figma carefully, so they translate to useful asset names in Frontify (if done carefully, your users should be able to easily search for assets in the Frontify library). The naming structure is as follows:

For components with no variants: “Component Name.”
For components with one variant property: “Component Name - Variant Property=Value.”
For components with multiple variant properties: “Component Name - Variant Property 1=Value 1, Variant Property 2=Value 2.”

What happens with elements in the Figma library that aren't components (i.e. frames)?

The sync will only look at components (because of the way Figma library files work).

Any other element can be added, changed, removed in Figma as you wish. This will not impact the sync but there is also no way to include these elements in the sync, even if you wish to. The only way to get an element to sync, is to make it a component.

Can I connect a Figma file that isn't a library file?

No, this isn't possible.

Can I connect one Figma library file to multiple Frontify libraries?

It depends.

You CANNOT sync part of the components from one Figma library to one Frontify library and another part of the components from the same Figma library to another Frontify library (we would have no way to know which components to put where).
- Your only option is to split the Figma library up into two separate files.
You CAN, however, sync all of the components from one Figma library file to multiple Frontify libraries that sit in the same Frontify environment. Note:
- You will have multiple detached instances of the same asset in Frontify.
- Each of these Frontify libraries counts to your total of 5 connected Frontify libraries that you have available (unless you have purchased more connected libraries).
- The libraries have to be in the same Frontify environment or it will not work.

How is this sync different from the Figma App?

This sync is meant for component libraries where the brand assets should be available in Frontify as DAM assets. They will be available for download in Frontify and each component variant is managed as an own asset. You are able to add the assets to your Guidelines for documentation purposes, if you wish.

The Figma App can be used for any type of Figma design file. It allows you to pick the individual elements (frames or components) that you'd like to showcase in Frontify. These elements are then added to a Frontify Project as live embeds, where you can leverage Frontify's workflow and collaboration tool. The Figma App also connects to the Figma Content Block, giving you easy access to showcase & document your components in "Live" or "Image" mode.

Does the sync work for files that live in "invite-only" projects on Figma?

No, it will not. The sync relies on Figma webhooks and these will not work in invite-only projects.