Better Design Handoff with Figma and Utopia

Design handoff bridges differences between distinct work platforms of designers and developers. While design tools include features that help with design handoff (like a prototype or inspection tools), more than handing off a sole design is required.

Good design handoff relies on the quality of information designers provide developers. Designers document user flows, interactions, animations, and specs like colors, fonts, and spacing.

However, the more information, the more opportunities for error during development and more things to check in QA.

This short tutorial will focus on one part of the design handoff – communicating design specs. We will use Utopia’s fluid responsive design approach to reduce the number of instances we need to document.

Get a Free Audit for Your Website

Discover your website's potential with a free audit that calculates your Care & Growth Index (CGI) score. Our unique CGI framework evaluates five key areas critical to your website's success, providing tailored recommendations to help you grow and improve.

Karolina Brewczynska

Business Development Manager

Contact Karolina for Your Free Audit

Let’s start by summarizing the two approaches to better design handoff.

Two ways to improve design handoff

1) Document every instance of a design attribute

One approach to improving design handoff is documenting every instance of a distinct design attribute. In good design, we limit the number of design attributes by creating a style guide with palettes of colors, typography, and other characteristics.

Limited palettes make it easier for developers to implement design specs as reusable variables. In such cases, the documentation can be minimal or implicitly present as styles in a design tool.

In other cases, like with spacing, it’s not that simple. While we can create a spacing palette, we don’t have the option to communicate this palette in our design automatically. We can redline our designs or rely on developers to get the values with inspection tools.

With responsive designs, things can get even more complicated. The number of potential variations increases with every responsive breakpoint we adjust our design to. Again, this increases not only the number of possible errors but also the number of instances to verify in design QA.

2) Decrease amount of instances to document

Another approach is to reduce the number of instances we design and need to document. We only create border cases and let the system interpolate the missing values.

Here we design for minimum and maximum viewport, and the system calculates in-between values. Developers only need to get the values for these two viewports.

This second approach is how Utopia works.

Utopia for better design handoff

Utopia, created by Clearleft’s James Gilyead & Trys Mudford, is a new, more systematic approach to responsive design.

It is a declarative design approach that focuses on what we want to achieve rather than how. We leave it to the browser to figure out how to achieve a fluid responsive design (which is what we want to achieve).

Such a declarative approach naturally contains fewer instructions than an imperative approach, where we must specify how the design should behave on each breakpoint.

At the moment, Utopia can assist you with creating of

• a fluid type scale with a type calculator,
• a fluid spacing palette with a space calculator,
• a fluid grid with a grid calculator.

You can learn more about the concepts behind the Utopia in this video:

Demo project

Let’s demonstrate how the design handoff with Utopia and Figma works on this simple demo project.

Space palette example

We will use the space palette to show the collaboration between the designer and developer.

1. The designer defines a fluid space system using Utopia’s Figma plugins or at utopia.fyi
2. The part of the system is a space palette
3. A developer gets a generated CSS
4. Designer designs @min and @max versions of the design. They define spacing using the values from the spacing palette with the help of Figma’s auto layout setting.
5. The developer checks the auto layout values and finds the proper sizing name in the spacing palette. For example, 18px is S size, while 42px is L size. Then they code the CSS value using the variable name available in the generated CSS, for example, –space-s-l.
6. Browser computes values at @min and @max breakpoints to match the S or L sizing. In-between values are interpolated.

The contribution of Utopia to easier design handoff is immediately noticeable in the empty areas. These indicate the work we don’t have to do:

• The empty space in the design column tells us that the designer doesn’t have to design and create documentation for additional breakpoints.
• The empty spaces in the code column show that the developer doesn’t have to create code for different breakpoints and only defines the value once. Eventually, the developer would memorize the values and variable names, further speeding up their work.
• Finally, the interpolated look in the browser column means less strict design QA. Instead of checking responsive design against static mockups, we can focus on the overall user experience.

For more information on how to design using Utopia check out Getting started with Utopia Figma Plugins.

Conclusion

Utopia decreases the amount of information in the design handoff. Rather than imperatively prescribing every possible output, it builds solid foundations.

It motivates designers and developers to work together from the very beginning. Since we give up a part of the control, we know that our foundations must be robust both from a design and development perspective.

At Xfive, we currently use Utopia while designing and developing our new company website. We look forward to sharing our experience when it’s launched. Contact us today to share our experience with you.