Zeplin

Hey,

We are a diverse group of in-house UX/UI-designers who currently work in different software; XD/Sketch/InVision and so on. We need an efficient way to manage our workflow to build, share, and maintain a consistent yet dynamic design library and a smooth, less time-consuming developer hand-off. There are lots of things to consider, and where we're at the moment, it's "design in your preferred program, but joint library and handoffs should happen through Zeplin or Avocode." Which one of these two should we go for? Any other solutions?

Thanks!

Hi, I'm a web designer. I need to convert files to HTML5 to transfer them to a developer. I know the Adobe XD software really well, I also heard about Zeplin. What software do you recommend working with? Is Zeplin better than XD?

The tool we use for editing UI is React Storybook. It is the perfect place to make sure your work aligns with designs to the pixel across breakpoints. You get fast hot module reloading and a couple checkboxes to enable/disable browser features like Flexbox.

The only tricks I apply to Storybook are loading the stories with the mock data we’ve extracted from the API. If your mock data really covers all the various various possible states for your UI, you are good to go. Beyond that, if you have alternative states you want to account for, perhaps loading or error states, you can add them in manually.

This is the crux of the matter for Storybook. This file is entirely generated from Yeoman (discussed below), and it delivers the examples from the Alps Journey by default. getSectionsFromJourney() just filters the sections.

One other hack you’ll notice is that I added a pair of divs to bookend my component vertically, since Storybook renders with whitespace around the component. That is fine for buttons or UI with borders, but it’s hard to tell precisely where your component starts and ends, so I hacked them in there.

Since we are talking about how all these fabulous tools work so well together to help you be productive, can I just say what a delight it is to work on UI with Zeplin or Figma side by side with Storybook. Digging into UI in this abstract way takes all the chaos of this madcap world away one breakpoint at a time, and in that quiet realm, you are good down to the pixel every time.

To supply Storybook and our unit tests with realistic mock data, we want to extract the mock data directly from our Shared Development Environment. As with codegen, even a small change in a query fragment should also trigger many small changes in mock data. And here, similarly, the hard part is tackled entirely by Apollo CLI, and you can stitch it together with your own code in no time.

Coming back to Zeplin and Figma briefly, they're both built to allow engineers to extract content directly to facilitate product development.

Extracting the copy for an entire paragraph is as simple as selecting the content in Zeplin and clicking the “copy” icon in the Content section of the sidebar. In the case of Zeplin, images can be extracted by selecting and clicking the “download” icon in the Assets section of the sidebar.

We used Zeplin and React Storybook together to speed up development and collaboration across the company when building Stack Decisions. #StackDecisionsLaunch

We used Zeplin to handoff designs and style guides from the design team to engineering. Because Zeplin automatically generates accurate specs, assets and code snippets from designs we were able to stay on the same page as a team and save time in development. Additionally the friction in communication between the design and development teams is greatly reduced as Zeplin will notify us when designs are updated.

We used React Storybook in a similar fashion to create a library of shared components. It allows us to organize our components into a library, view the different states of each component, and interactively develop and test components. Because React Storybook runs outside of our main application it allows us to develop UI components in isolation, which can improve component reuse, testability, and development speed. We were able to build quickly without having to worry about application-specific dependencies.

We use zeplin as an interface between designers, developers and stakeholders for sharing, improving and discussing designs Zeplin