Today we’re very excited to announce a new webinar series called: Zeplin + Figma: Better Together! In this series, we’ll talk to product and design leaders. Zeplin will keep them in your projects/styleguides. Clearing Sync History on Figma Plugin. If you want a fresh start and don’t want to keep syncing your designs anymore, choose the frames and components you want to clear, click on the “” button and select the “Clear” button from the menu. Welcome back to the second episode of Zeplin + Figma: Better Together, where we talk to product and design leaders about how they are leveraging Zeplin and F. Figma is the first interface design tool with real-time collaboration. It keeps everyone on the same page. Focus on the work instead of fighting your tools. On the other hand, Zeplin is detailed as '. Everything in one place. Figma is a tool intended for team collaboration in real-time.
![Figma Figma](/uploads/1/3/7/3/137353452/325697787.jpg)
If you’re a fan of Zeplin’s philosophy on collaboration and developer handoff, your design workflow just got a boost. Today, we’re introducing a redesigned Zeplin integration with Figma. Check out the new plugin here and read on for more details.
For those not yet familiar, Zeplin delivers more advanced hand-off features and can serve as a bridge between design and development.
We launched the first version of the Zeplin integration even before Figma officially launched. Two and a half years later, over 300,000 files every month are exported from Figma to Zeplin. During this current WFH period, we’re seeing an increase of 30-40 percent on top of that. Being individually distributed has accelerated the need for new places to work together and connect online.
For version 2 of our integration, we wanted to improve the export experience and solve some of the performance issues. We knew building a native plugin would not only give our users a more seamless workflow, but also make it easier for our team to build, maintain, and add new features to the integration.
We’ve rebuilt the integration from the ground up and today, we’re excited to introduce the brand new Zeplin plugin. From Figma, you can now export frames and components, as well as color and text styles from Figma to Zeplin in a couple clicks. And in Zeplin, developers and other members of your product team can automatically generate accurate specs, assets, and code snippets. Private party bartending service. Plus, they can see exported assets directly in Zeplin’s style guides.
Zeplin Figma React
For users who were already using the previous version of the integration, you’ll find that exporting large Figma files and frames no longer means hiccups with performance or resolutions. For more product details, head over to Zeplin’s blog post.
Zeplin Software
Aws commands cheat sheet. What’s most unique to the Zeplin integration with Figma versus other design tools is that Figma is on the web, which presents unique advantages. One additional feature we’re exploring to build is to automatically push any changes made to Figma components to Zeplin. More details to come on that soon.
In the meantime, check out the new integration by installing the new Zeplin here or email us with any questions or feedback at [email protected]. And for all Figma customers who want to give Zeplin a try, send a note to [email protected] to get 3 months of Zeplin’s Organization plan for free.
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.
Figma Vs Zeplin
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.
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. Phpstorm vscode.
- 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'.