Connected Components in Zeplin enables engineers to access components in their codebase right on the designs. 

After connecting your components in Zeplin to your components in code, you will be presented with a summary of the component, including links to Storybook, GitHub and any other source of documentation used by your team.

This summary is completely flexible and can be tailored to your team’s needs. You can customize the description, the code snippet and add links to any source like your internal wiki or your design system documentation.

With Connected Components, you can:

  • Connect your React components, Angular components, Swift components and Vue.js components to your components in Zeplin.
  • Add Storybook links, Styleguidist links, repository links (GitHub, GitLab, Bitbucket) and any other custom links to your design system documentation.

Connecting your first component

Getting started is easy. Zeplin maps components in your codebase to the components in Zeplin with a JSON configuration file. First, you need to create this file manually or by using the Zeplin Visual Studio Code extension.

After creating the configuration file, you’ll need to install Zeplin CLI and run it by using zeplin connect command to make these connected components visible in Zeplin

☝️ Zeplin CLI is a command line tool that uses plugins to generate documentation, snippets and links from components. You can use Zeplin CLI with these plugins; React Plugin, Angular Plugin, Swift Plugin, Storybook Plugin and Vue Plugin.

Follow the step by step guide to get started: https://github.com/zeplin/connected-components-docs

Feel free to ping us at support@zeplin.io with any questions or suggestions, let us know what you think!

Related articles:

Did this answer your question?