Zeplin React

Zeplin’s CLI tool analyzes your component’s source code entirely locally and only stores a summary on our database, to be displayed to your team. In addition, all the tooling including the CLI and the official plugins are completely open source. Contact us for any questions → Help your team get familiar with your design system.

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.
Get more out of Zeplin, together. Extensions are built by the community to generate code snippets from designs. Pick the ones that fit your workflow, or create your own and contribute.
With Zeplin, you can publish finalized designs from Figma, Sketch, Adobe XD and Photoshop. Developers get a 'locked' design to build from, while designers can iterate on the next great release. Zeplin is the source of truth for finalized designs, if it’s not in Zeplin it won’t be in the shipped product.

Connected Components—connecting design systems and engineering

Access components in your codebase right on the designs, with links to Storybook, GitHub and any other source of documentation.

Bring development context to designs

Led Zeppelin Reaction Songs

Make your components visible within designs, promoting reusability. Access a summary of your component with:

Documentation
Bite-sized code snippet describing how to initialize it
Links to Storybook, GitHub and so on

Help your team get familiar with your design system

Familiarizing yourself with an evolving design system usually happens over time. Help your team naturally discover and learn more about your components, as they’re viewing designs.

Onboard new engineers to your UI components

Your design system is constantly evolving, so are the UI components in your codebase. Onboard new engineers to your codebase as they’re working on designs, making sure that they have quick access to up-to-date documentation.

With Connected Components, our team can now explore mockups with so much more information, enabling them to better scope out estimates for development and reduce rewriting something that’s already built.

Does it support my stack?

Platforms/frameworks

Built on top of plugins for various platforms and frameworks, including React, Vue.js, Angular and Swift.

Links

Add links for more context, including Storybook, GitHub and even custom links like your internal wiki.

Build your own

Want to customize the code snippets? Need support for other platforms? Build your own plugin.

Sounds good, how does it work though?

Getting started is easy. Create a JSON configuration file that maps your codebase to your design system. Pick which plugins to use and run our new CLI tool.

See documentation →

How secure is it?

Above The Influence Led Zeppelin Reactions

Help your team get familiar with your design system.

Dig out the more hidden gems on Zeplin

Zeplin automatically generates resources, including measurements, assets, and code snippets tailored to platform needs.

Here's a list of features that will help you develop Android projects:

Led Zeppelin Reaction To Heart Tribute

Measurements are in dp/sp.
Assets are available as 5 PNGs (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) and SVGs.Vector Drawables are on the way!
XMLs from project color palette and text styles, from the project Styleguide.
TextView code snippets from text layers.

Zeplin React Connected Components

When you first export assets into a res directory of your project, assets are placed in the appropriate directories. Next time you export another asset, you can simply select the project.

Recent Posted Led Zeppelin Reactions

☝️ If you're working on the Windows app, you can change the folder which your assets will be downloaded to by just clicking on the “Exporting to ...” text on the right panel.

Related articles: