Introducing Zeplin 2.0 — Components and a ton more goodies
Let’s start with a huge thank you. It’s been almost 3.5 years since we released Zeplin and it’s now being used by thousands of teams, more than 1.5 million people, from all around the world. Today, we’re extremely excited to announce that Zeplin 2.0 is ready for all of us to explore! 🚃
We have a lot to cover. Components, renaming assets, full size thumbnails in Dashboard, revamped interface for layer properties, Styleguide and Dashboard— let’s dive in.
Components
Design systems, libraries, components. Recently, we keep hearing and talking about these subjects. A lot of companies like Airbnb and Dropbox already have dedicated teams that curate their design systems. Why are we talking about design systems now though? There’s no definite answer, but it all started with the product culture evolving — as we approach our creations as products, rather than just apps or websites.
A product is not just about user interface, user experience, code, micro interaction or language; building delightful experiences require all of these parts to work together in harmony — including marketing and sales.
Within all these deep conversations, Zeplin’s aim is to always keep the team in the same page. We’ve been talking with a lot of Zeplin-ers, investigating and researching, looking for the crucial piece of the puzzle where development meets design systems. We realized that one piece is common on both our design and development workflows: A component.
What’s a component anyway?
A component is defined as a part or element of a larger whole. For interface design, to put it simply, components are elements like buttons, text fields, cells which you put together to create a visual experience.
Whether designers share these components with engineers or not, engineers most likely go through the designs to figure them out. That is how they maintain a healthy code base and a stable, scalable product, by defining these reusable elements. Even if you have a small team, well defined components help you be faster and consistent across your projects, while creating the same experience everywhere — a transactional email, a sticker or a team dashboard.
Most importantly, as Karri Saarinen, Design Lead on Airbnb Design Systems mentioned in his blog post “Building a Visual Language”, components are elements of a living organism. They should be flexible and can be updated anytime. That’s why it’s crucial to keep your whole product team on the same page.
Components, as we see them in Zeplin
With 2.0, Zeplin’s focusing on a small piece of the design systems ecosystem. Today, you can export your Sketch symbols, Figma and XD components to Zeplin and they will be listed under the Components tab of your project Styleguide.
Curating components of a product is not a trivial task at all. That’s why we spent a lot of time to offer more organizational solutions. You can collect components under sections and within these sections, you can create groups to further organize them.
We wanted to keep the team, especially engineers, well informed of these components. It’s not just a simple list, components in Zeplin are connected to the screens in the project.
When engineers select a layer that’s a part of a component in Zeplin, they immediately see the component as well. This lets them know that what they’re inspecting might be something that already exists in the codebase or if they will be the one implementing it, they should do it in a reusable, configurable way.
Similarly, when someone in the team selects a component in the list, they can see which screens this component is used in, allowing them to plan accordingly.
Here’s a short demo video to give you an overview:
Exporting components to Zeplin
Nothing new here. You can export symbols from Sketch, or components from Figma, exactly as you’ve been exporting artboards. Instead of the project Dashboard, symbols will be added to the components tab under the project Styleguide.
For Sketch, simply select any number of master symbols and press the shortcut for the plugin, Command, Control, E.
For Figma, select any number of master components and use the shortcut Command, Shift, E to open up the export panel. Exporting components from Figma is currently only available on macOS, coming to Windows in the following weeks.
🤫 Sneak peek #1: In later releases, Zeplin will automatically fetch components used in screens and suggest you to import them.
🤫 Sneak peek #2: In our next update, the plan is to expose components to extensions as well, letting them generate code snippets from components. Feel free to get in touch if you’d like to give it a try beforehand!
More from 2.0
Along with Components, 2.0 is filled with more features and improvements.
Renaming assets
We’ve been getting requests for this since day one, and it’s here! You can now change the name of an asset from the right panel, before downloading or exporting it to Xcode or Android Studio.
☝️ Due to technical challenges, this is a local setting for now — we’d love to hear your feedback for further improvements.
Full size thumbnails in Dashboard
You can now view the screen thumbnails in the project Dashboard in their full, mobile sizes. Notice that the project Dashboard right panel is also revamped, adding a description field and allowing easier access to sharing capabilities.
☝️ If you prefer clipped thumbnails, you can turn it off from the View menu.
Consistent export order from Sketch
Artboards and symbols from Sketch were exported to Zeplin usually out of order, based on how large they were or how many images they contained. You can now enable an experimental feature to let Zeplin respect the order you keep artboards and symbols in Sketch.
This is a feature we’re still testing; to give it a go, enable “Zeplin > Experimental > Import in Order” from the menu up top. From the same menu, you can also pick which sorting option you want to go with:
- Layer list: Artboards/Symbols are exported based on their order in the layer list in Sketch, in the left panel. There’s also a reverse option that does the opposite.
- Position: Artboards/Symbols are exported based on their position, as shown here.
Filtering notes
Let’s be honest, we know that we need to improve the way you keep track of notes and the overall feedback workflow in Zeplin. We’ll be focusing heavily on improving notes in Zeplin in the following months, especially figuring out a solution to view and track all the notes in a project.
In 2.0, you can now filter notes in a screen and only view the ones you’re mentioned in, or ones labeled by a certain color.
Here are a few honorable mentions we didn’t want you to miss.
- Reordering colors in Styleguide
- Selecting multiple assets and downloading them at once
- Adding description for projects
- Revamped Styleguide interface
We hope you’re as excited as we are for Components and all the other goodies that 2.0 brings — can’t wait to hear what you all think. Ping us at support@zeplin.io.
Cheers! 👋
Zeplin is a connected space for product teams where they can share designs, generate specs, assets and code snippets, tailored for iOS, Android and Web.
