Exporting assets from a Figma design in Zeplin is quite straightforward. You can either mark a layer as exportable or use the Slice feature. Then, Zeplin will generate all the necessary images with different scales and formats automatically, tailored to the platform you’re designing for; Web, iOS, Android, or macOS.
Exportable layers
To mark a layer as exportable in Figma, simply add an export option to it by clicking the + button on the Export section, from the right panel.
Most important of all is the fact that Figma is a design tool at heart, while Zeplin is more of an ‘asset assembly plant' for designs. That said, both Figma and Zeplin are suitable for different sets of requirements. Both are great products and both are quite versatile in what they offer as. Figma mockups can be exported to Zeplin in a few easy steps. Whenever you download the Zeplin Mac app it will pre-install the Figma plugin for you. Zeplin is now a plugin. Figma no longer supports a custom integration with Zeplin. Use the official Zeplin plugin to annotate and share your designs for handoff. For help with the plugin, reach out to the Zeplin team via the Support contact on their plugin page. Zeplin is a structured workspace that is friendly to developers, QA’s, PM’s and others not experienced with design tools. With Sections and Tags, the team will easily understand designs, no need for extra documentation or design tool training. Take your design. Introducing Zeplin + Figma, redesigned from scratch. 🌱Explore how the integration can streamline your team’s workflow.
Slices
Slices are a great way to export assets from arbitrary layers. You don't even need to add an export option to slices actually, they're exportable by default.
Zeplin Figma Export
Assets with transparent paddings
A common use case is exporting assets slightly larger than the layers themselves, with transparent paddings around them. This is quite useful for components like menus, tab bars where all the icons should have the same size.
Using slices is the simplest way to accomplish this:
Add a slice, change its size as necessary.
Mac os x 12 download. Group the slice and the layer(s) together.
By default, slices are exported with their contents only, so the resulting image will only contain the layers that are grouped with it. If you'd like to include the background as well, you can do so by adding an export option and deselecting 'Contents Only'.
Zeppelin For Figma
Related articles: