You now can export your Figma components directly into Zeplin and they will appear in the Components tab of your styleguide. The Components section includes your common user interface elements and shows you which screens are using these components in the project as well.
☝️ Install the Zeplin plugin in Figma via https://zpl.io/figma-plugin if you don't have it yet.
제플린 (Zeplin)을 이용해 디자이너와 개발자 간의 소통을 원활히 하고 하나의 프로젝트를 편리하게 공유해보세요. 빠른 견적서 원화 결제 및 세금계산서 발급 제공. I sometimes just try out new tech or web services for the first time and give my feedback as I go. This is the #timtries Series. In this video I look at Figm. 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.
Exporting components works exactly the same as exporting frames. Right-click anywhere in your canvas to launch the plugin and select “Plugins > Zeplin”.
You can select a component or multiple components (which are usually located in the Components section in your Figma file) you want to export to Zeplin and click on the “Export” button:
Once you export your Components into Zeplin, they will be listed under the Components tab.
Generating assets from components
If you'd like to download these components as assets from a screen, you will need to make the component exportable in Figma.
Once a master component is set as exportable, Zeplin generates assets from all of its instances automatically.
You can learn how to do this here: Exporting assets from Figma
Related articles:
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. Plus, they can see exported assets directly in Zeplin’s style guides.
Figma Zeplin Storybook
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.
Figma Zeplin Windows
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.
Figma And Zeplin
In the meantime, check out the new integration by installing the new Zeplin here or email us with any questions or feedback at support@zeplin.io. And for all Figma customers who want to give Zeplin a try, send a note to figma@zeplin.io to get 3 months of Zeplin’s Organization plan for free.