Zeplin’s Storybook integration doesn’t require CLI or config file to setup or maintain. This might be surprising for developers who expect to write code to connect components in the design system to their code repos.
At Zeplin, we’re always thinking of ways to help you save time and simplify work. In conversations with developers, we learned that even though CLI is a mainstay solution, it’s not always convenient or easy to use.
Confusing, time-consuming, difficult: When connecting design to code using CLI, you not only have to initially setup the integration but also connect each component for the first time. When design components are updated or changed in the future, you must write code to update the config file. There is also no standard, one-size-fits-all process that can be automated or easily trained on, since steps by framework or programming language. We’ve seen this to be true not only for solutions like InVision DSM but Zeplin’s own Connected Components feature.
Naming conventions differ between design and code: For example, some use descriptive names for components while others prefer single word labels. There’s also a lack of industry standardization for some terms (example: dropdown vs select can mean the same thing). Because of this, developers waste time in the frustrating process of searching the code repo/library for a visual match to the design component. This can take a lot of time if the developer is unfamiliar with the contents of the component library.
Non-technical users are excluded: Because CLI requires technical knowledge and training, non-technical users are automatically excluded from helping to maintain the connection between design and code. Designers have told us they’re interested in better understanding the contents of code libraries or repos, and want to do their part to help engineering teams maintain a singular design system.
With our improved Storybook integration, we’ve eliminated the need for CLI to connect design to Storybook code. If you prefer to continue using CLI through Connected Components, you are welcome to do so!
But if you want to save time, reuse as much code as possible, and quickly estimate how much code you have left to write — we recommend using Zeplin’s new Storybook integration.
Related articles: