Figma Now Integrates with Zeplin | Figma Blog (opens in new tab)

Figma announced a Zeplin integration to make it easier for teams to move designs into a developer-focused handoff workflow. The integration supports teams using different design and development processes, allowing Figma frames to be exported directly into Zeplin. However, unlike Figma’s always-current code mode, designs must be re-exported whenever the original Figma file changes.

Supporting Flexible Design Workflows

• Teams use different tools and processes to design, prototype, and build digital products.
• Figma aims to support these workflows through integrations with complementary tools.
• Zeplin is focused specifically on the developer experience, presenting design specifications and assets in an accessible format for engineers.

Exporting Figma Designs to Zeplin

The integration can be enabled through the following workflow:

• Download Zeplin and create a project.
• Enable Zeplin in Figma through Menu → Integrations → Zeplin.
• Create and select a frame in Figma.
• Choose Export, then select Export to Zeplin.
• Zeplin opens automatically, where the user can select Import.
• The exported Figma design then becomes available for viewing in Zeplin.

Important Workflow Limitation

• Exported designs are not automatically synchronized with Figma.
• Any updates made to the original Figma design require another export to Zeplin.
• This differs from Figma’s code mode, where developers always see the latest design assets.

Figma presents the integration as part of its broader effort to help design and engineering teams collaborate more efficiently. Teams that rely on Zeplin can now incorporate Figma into their existing handoff process, provided they remember to re-export designs after changes.