# Figma sync

Keep visual foundations connected to the tools your team uses.

Figma is an optional authoring input for Frontfriend. Connect a Design System to its Figma source to bring supported variables and design decisions into the same system used by your applications.

## Connect the right source

Open your Design System in Frontfriend and follow its Figma connection flow. Use an account with access to the intended file and verify that you selected the correct system before syncing. Keep authentication credentials in the supported flow, not in committed configuration files.

## Review a sync

Check the token families, modes and component properties that the sync will affect. A Figma variable name alone does not prove its intended role. Keep semantic naming consistent between your source and the resulting Design System.

Review the generated preview, then refresh the consuming application through its Frontfriend workflow. Validate both appearances and any important interactive states.

## Studio and Figma together

Studio and Figma can both contribute authoring decisions. Review precedence when both workflows edit the same property. Do not assume a later sync will preserve every overlapping Studio edit without review.

Use a known-good version and inspect differences when both tools edit the same properties. The goal is an explicit source of truth for each decision, not an accidental last-write-wins process.

## Figma-free is supported

If your team does not use Figma, start in [Theme Studio](/docs/theme-studio/) or use [Brand Import](/docs/brand-import/). The component and token workflow does not require a Figma file.

Figma sync is a Self-serve authoring capability in the approved v4 plan model. See [Plans and access](/docs/plans/) for role and availability details.