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,includinglinks to Storybook, GitHub and any other source of documentation used by your team.
Connected component in Zeplin
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.
Connecting your first component