Styleguides in Zeplin help your team create consistent experiences by sharing common components, text styles, and colors throughout your design system and letting you organize and update them all in a centralized location.

With Connected Components, it’s made possible for developers to establish a connection between finalized designs in Zeplin to components that reside in their codebase. This provides a great way for developers to link their designs to sources of documentation like Storybook, GitHub, and many more. Zeplin’s Storybook Integration allows developers to link Zeplin components to stories in Storybook easily. They can also add design components directly from Zeplin into Storybook.

With Highlight Components, your team can view all design components and any linked information from the codebase in a “Reusable Components” panel. You can simply toggle Show All Components to highlight components on your project screen and see which ones have been linked to code.

Developers can instantly see all components — whether detected from the design tool or in Styleguides. They can use Zeplin’s color-coded highlights to tell apart core components from custom ones and plan for build.

⚫ highlight means the default highlight color for components auto-detected from the design tool.

🔵 highlight means this core component was added to the Styleguide but not yet connected to the code.

🟢 highlight means this core component was intentionally added to the Styleguide and connected to code. Code snippets will be visible during a component inspection in Zeplin.

With these features, your team can:

For more details, you can check the Global Styleguides collection and Global Styleguides blog post on Zeplin Gazette.