Design Systems: Design-Development Collaboration

In our series on design systems, we’ve discussed the advantages and approaches to creating a system from a design perspective. In this post, I’d like to cover some of the new tools that developers and designers are using.

There’s been a lot of exciting activity around design tools in the last few years, and it’s changing how designers and developers collaborate. For those uninitiated front-end developers (if you’ve entered the industry in the past few years), building out a design used to mean wading into a designer’s world: Photoshop. Even after years of doing buildouts from Photoshop, I found the interface to be largely unintelligible. If the organization system of the designer is not on point you could be in for an even bumpier ride. Developers want to quickly get accurate build information and not worry about layer names, how to turn off a mask to get at an image, or if that turned-off layer is important.

At Viget, we’re constantly evaluating the tools to ensure that they improve our workflow rather than bog it down. In the past year, we’ve been putting the two main design-development collaboration tools, Figma and Zeplin, through their paces. The goals of these two apps are very different: Figma is a design tool with features that reveal buildout information, while Zeplin was built purely to facilitate design handoff. Zeplin still leads the pack in delivering buildout information, but Figma has become our one-tool-to-rule-them-all, particularly because their developer tools are catching up.

Benefits of a New Workflow

While some aspects of buildout are true for any project, there are a few particularly important aspects when building a design system, and the right tool or workflow can make all the difference in:

• Quickly surfacing accurate information about a thing (ex. size, color, position, font).
• Checking for consistency in the design across pages to help keep the parts kit small and maintainable.
• Seeing modular design patterns and components that can be used as building blocks.

These new apps have made it easier to intuit and build a design system by:

Providing Ways to See More at Once

Our designers started the practice of putting every page layout in one artboard in Photoshop, but it didn’t take much for the app to get bogged down and slow. This isn’t the case with Figma, and that’s created benefits all around. For a developer, getting to see the entirety of a design system in one view is a great way to quickly move around multiple parts of a system and pick up on similarities and patterns.

Giving Quick Access to Information and Keeping Developers Out of Design Tools

When buildout information, like a font size, can be buried in nested layers, layer comps, or locked up in a mask, it can be time-consuming to navigate the advanced functionality of something as complex as Photoshop. Zeplin and Figma have both made this process light years easier by exposing developer-ready information with a single click.

Converting Design to Code

Even better than getting style information with a click is getting the code. Both Zeplin and Figma output copy-and-paste code snippets for an ultra-fast and accurate workflow. Bonus points go to Zeplin for providing a choice of CSS, Sass, SCSS, Less, and Stylus formats and allowing the developer to customize color variable names.

Measuring Everything

Getting measurements right, both of a thing and between things can be time-consuming. In addition to getting things like font information, Zeplin and Figma provide dimensions and distances for every object, making accurate buildouts a breeze.

Facilitating Communication

In the past, questions about a design had to take place separate from the design in email or a chat app like Slack. The best workflow I ever devised was to annotate a screenshot of the design with arrows and comments and send it to the designer for feedback — very inefficient! With Zeplin and Figma’s built-in commenting system, designers and developers can talk within the context of the design in nearly real time.

Wrap Up

We’re excited to see how these tools evolve as they continue to improve the quality and speed of our workflow. At the time of this writing, along with Zeplin and Figma, there are many other promising tools like Sympli, Sketch Measure, InVision Inspect, and Avocode. These new entrants should create some great competition.

Do you have experience with one of these tools or comments about the article? Don’t be shy about jumping into the comments!