Connected Components in Zeplin enable 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, and 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
Related articles: