Variables in Styleguides: You can now export your color variables from Figma! Learn more.
Inspecting components got a lot easier on the Web app, too! Zeplin shows you component tags when you hover over one, with their WxH values instantly visible as well as auto-layout settings if applied.
Zeplin now indicates padding and gap values for components with auto layout settings and those with parents with auto layout settings.
It also indicates components with auto layout settings with color-coded inspect lines. When clicked on a layer that's part of a component, Zeplin draws:
solid lines for its parent layer (as orange) and the component they're in (as blue)
dashed lines for its first level child component(s) (as blue) and parent's parents until the very top layer (as orange)
Component Versions with Version History and Version Diff is now available on the Web app! 🕸️
As long as your components are published to a Styleguide in Zeplin, your devs can instantly see any component’s before/after states and whether it’s an updated or outdated version — without manually comparing the differences. Learn more.
We’ve built a new Component Details page where you can run Version Diff for that component, plus see its full Version History, variants, properties, and links to Storybook, all in one view.
Improving Approval Experience: Your screens are now automatically tagged with respect to their approval states. Learn more.
Introducing Approvals — a new way to manage stakeholder alignment in product & design!
Approvals in Zeplin simplify the process of obtaining sign-offs for product development and launches. It allows you to assign screens for review, collaborate with stakeholders, and track approval progress. Learn more.
We're rolling out an option for new users to start a free 30-day trial of Zeplin on the Organization plan. Get unlimited reviewers and projects, along with access to the latest features like Version Diff, Approvals, and Flows (up to 12 projects). Learn more.
Figma Variables: Variables you use in your Figma designs are now displayed in Zeplin while inspecting screens. Learn more.
Export colors and text styles directly from Figma: It's now possible to export them within the Zeplin Figma plugin! When you open the plugin, you'll notice a new dropdown in the "Export" button that shows the color and text style export options. Learn more.
You can now better sort your tags! Right click on a tag to A-Z sort tags.
To sort screens by their Status tags, select the "Sort by Status" option from the "Sort by" menu on the top left.
Scroll through the project dashboard and click the "Tags" dropdown to show/hide all tags.
Easily manage tags: Right click on selected screens to bulk update tags, it works best for assignee and status tags! Get started with Tags.
Get notified for Status and Assignee updates: Status and Member tags will now send in-app notifications, emails, and Slack messages. Use tags to streamline communicating essential updates. Learn more about tags. Learn more here.
Export Figma sections: You can now create sections automatically by exporting Figma sections to your Zeplin project. Learn more here.
You can now move an empty section to another project.
Tag groups: Tag Groups help teams organize screens in their workspace with both custom tags and standardized statuses such as “In Review", “Blocked", or “Released". You can view the status of each screen on thumbnails. Explore more about Tag Groups.
Global search: You can filter your search by Screens, Projects, Sections, Sections, Comments, and Components to narrow results using the tabs below the search bar. Learn more.
Jira plugin: Upon attaching components, component groups, or sections to a Jira ticket, the details are now displayed instantly in Zeplin. Give our Jira plugin a try to see its functionality.
You can now use Flows placeholder screens to create flows from scratch even if your designs are not ready and then easily replace those screens when the designs are exported to Zeplin. Learn more about Flows placeholder screens.
You can create Tag Groups and Custom Tags to better communicate with your team about the latest updates, progress, and collaboration in a project. Learn more.
With Version Diff, you'll be able to compare what's changed between versions and spotlight the differences both on screen and in the Inspect panel. Learn more.
One of our lovely crewmates, Mert Kahyaoğlu, built a Chrome extension to make the Pop Out feature available on the Web app! You can add the extension to your browser from this link: Zeplin Popout Tool
Jira issue details in Zeplin: You can now see more details about an attached Jira issue by clicking on it — including its status, assignee, priority, and more. Learn more about Jira Integration.
Improvements to Tags: Tags can now be reordered by dragging and dropping. You can also hover over a tag to quickly see the number of screens.
Following up on our previous update, this update also includes more performance improvements for Flows.
You can now easily follow and unfollow project updates when viewing the project dashboard or joining a project.
Component effects and layers that overflow (e.g. shadows, outside strokes, absolute positioning) are no longer clipped in the Styleguide — to fix your existing components, you can now re-export them.
Component properties from Figma like Boolean and Text, are now listed and highlighted in Zeplin as well.
Performance improvements for Flows (more on the way!)
Global search: You can easily sort global search results by relevance, creation date, or last updated date.
Border thickness values are now displayed for each side.
Jira integration: Like screens, sections, projects, and flows, components are now available to attach to Jira issues. Learn more.
Screen variants update:
You can set screen variants via the "Set as screen variants" option you'll see after selecting multiple screens and right-clicking.
It's now possible to navigate between screen variants by using the
⌥ + number keysand
Alt + number keysfor Windows.
Right-click on a layer on a screen to see the layer hierarchy.
Copy the screen name with a click on the screen name on the top.
Nested Sections: You can now create subsections and nest sections up to 3 levels to better organize your screens. Learn more!
Flow Comments: When you’re reviewing a flow and you have some insights to share, you can now add a comment anywhere on the flow canvas. Learn more.
Stage Mode is now rolled out to all workspaces. In case you missed it, Stage Mode is a simplified interface focused on presenting or reviewing designs.
You can now resend an invitation to a pending user from the Workspace Members page!
Bulk actions for components. For Styleguide users, you don’t need to organize your components one by one anymore! You can now multi-select or drag-and-drop components in Zeplin.
Email notifications for new designs. You can now get email notifications when new designs are published, allowing you to stay in the loop and share feedback earlier and more often. You can select the type of notifications you receive, including turning on updates from specific projects.
Add links to descriptions. It’s now possible to add links to the descriptions of Screen, Component, and Section on the Web app. And if it’s a Zeplin link, the name of that resource will automatically appear as the anchor text.
Workspaces now have the same re-ordering experience as the Project Dashboard. Simply hover over a Section to reveal a compact list view that you can drag and reorder.
You can now present your screens in Zeplin and get feedback on them through comments with the Stage Mode. Learn more.
Drag & Drop now supports multiple selected screens and projects.
You can now tidy up any uneven spacing between screens in Flows. Simply select screens to distribute them horizontally.
Added two new zoom-out levels — 6% and 3% — for Flows. This will make it easier for teams with larger flow boards to get the full picture.
Enterprise plan users will now be able to easily administer Enterprise accounts in Zeplin with new account and domain management settings with the new Account Admin role, Account Settings page, and Domain Capture capabilities. Learn more.
You can now customize where your connector lines are drawn by simply hovering over the connector line and dragging them to where they need to be. Learn more.
Multi-select is live on the Web and Windows apps!
Now, it’s possible to select a bunch of screens and do all the actions available: Add them to Flows, add/remove tags to them, download all as images, move them to a section or create a new section with them, move them to a project or just delete them all.
The same goes for projects! Drag to select multiple projects and move them to a section, create a new section with them, or bulk change their statuses.
You can now link annotations to components on your screens. You can check out more details here.
Linked annotations show up on all screens the same component is used in.
If components are moved around in future iterations, linked annotations will move with them automatically.
You can now see a list of all sections in a project and jump to one right away.
Bug fixes & improvements to flows:
If you're using a mouse, you can now easily scroll around flows (and screens) by holding down the middle mouse button. You can also zoom in and out with the scroll wheel while holding down the Command or the Control key.
Move selected screens and/or shapes in a flow using the arrow keys.
Screen tags are back: You can now see all tags added to a screen in the right panel when inspecting screens. You’ll see tags listed by frequency of use. To add or remove a tag while on a screen, use ⌘+T on the Mac app and ⌥/Ctrl+T on the web app.
The Sketch Cloud file link now appears in the right panel for Web & Windows apps.
You can now order colors in Styleguides for Web & Windows apps.
You’ll be able to copy the link for multiple tags for Web and Windows apps.
You can now capture decision trees, actions, and placeholder screens in Flows using shapes. Available in 3 types: Diamond, Rectangle, and Pill. 🔷🔵🟦