techlist.io
KREN
figma

Bridge design and development with the new Zeplin integration | Figma Blog (opens in new tab)

figmadeveloper-toolszeplindesign-handoffcode-snippetsfigma-plugin

Figma and Zeplin introduced a redesigned native plugin to improve design-to-development handoff. The integration lets teams export Figma frames, components, colors, and text styles directly to Zeplin, where developers can generate specs, assets, and code snippets. Rebuilt for better performance and maintainability, it addresses issues with large files and high-resolution exports while opening the door to automatic component updates.

A Growing Design-to-Development Workflow

  • Zeplin provides advanced handoff features and acts as a bridge between designers and developers.
  • The original Figma integration launched before Figma officially launched.
  • More than 300,000 Figma files were exported to Zeplin each month, with usage increasing by 30–40% during the shift to remote work.

Rebuilt as a Native Plugin

  • The second-generation integration was rebuilt from the ground up as a native Figma plugin.
  • This creates a more seamless export experience for users.
  • It also makes the integration easier for Zeplin to maintain and extend with new features.
  • Performance problems affecting large Figma files, frames, and export resolutions were addressed.

Exporting Designs and Generating Handoff Materials

  • Users can export:
    • Frames
    • Components
    • Color styles
    • Text styles
  • In Zeplin, product teams can automatically generate:
    • Accurate design specifications
    • Assets
    • Code snippets
  • Exported assets can also appear directly in Zeplin style guides.

Future Possibilities

  • Figma’s web-based architecture offers advantages over integrations with other design tools.
  • Zeplin was exploring automatic synchronization, allowing changes to Figma components to be pushed to Zeplin without manual exports.
  • Users could install the plugin through the Figma Community, and Figma customers were offered three free months of Zeplin’s Organization plan.

The new plugin is recommended for teams seeking a faster, more reliable handoff between Figma and development, especially when working with large files or shared design systems.