Tater: Adding Additional Context to Component Handoffs in Figma
Project Type: Figma Library/Kit
Concept Date: 2022
Overview
In product design, it's believed that Figma provides all of the information the developers need to code the components we’ve created. But unfortunately, this concept is not true for most teams.
We should constantly strive to find ways to work better together collectively — designers and developers. A specific pain point in this working relationship is the expectations or assumptions of exactly what our design tools provide and the real gaps within those useful tools.
What some designers say:
The final developed versions of our components don’t match our design
Figma provides all of the information developers need to build our components
What some developers say:
I can't always use the CSS output from Figma, so I have to find an alternate solution that works for me so I can build
Is there additional documentation that explains component behaviors in dynamic situations?
These sentiments often lead us to believe that the specifications around component designs are not as straightforward and clear as possible.
Problem + Goal
We can summarize this challenge simply:
Handoff of specifications are often difficult and/or lacking for components. Design files on their own might not provide enough granular information to successfully develop components we want to include in our design system.
When we handoff design files to developers, they should include all of the relevant properties and behaviors prescribed by the designer.
Ideally, a designer and an engineer would come together and discuss all aspects of the component created, add additional notes, and then get to work when both parties agree with the final design and related documentation. However, the more significant challenge is that many of us don’t have access to full-time engineers or a fully-staffed design systems team at our organization. This reality makes these handoff specification documents even more critical within a product development lifecycle.
Solution
Create a "annotation" library file where designers document components with an engineering-first mindset within Figma. I call it Tater.
The library file has two main parts: the spec pages and annotation tools. The idea is simple — with the help of an engineer, a designer can use these two parts of the library to document a particular component's specifications and properties adequately. With Tater, we've pre-filled a handful of the annotation tools to include many of the standard CSS properties that a developer would expect a designer to specify.
We aim to remain empathetic to understand a developers' immediate frustrations and create solutions that will effectively improve the development cycles by removing unnecessary pain or friction.
Sharing Tater via the Figma Community can simplify documenting components accurately and consistently for anyone who wants to add this tool in their team arsenal, while bolstering the collaborative nature behind systems design thinking.
Spec Pages
The spec pages are assets in this Figma kit that work as the “canvas” where you display your components and add relevant annotations that provide granularity for developers. The pages are broken down into four types:
Default Component: Elements you can reuse across your designs. They help to create and manage consistent designs across projects
Variant Component: Components that are similar to each other, with only slight differences. Variants allow you to group and organize similar components into a single container
State Component: Showing the different states in which specific components exist and display
Layout: How components work together in a specific design structure, and the specifications detailing their various relationships
Spec page options as assets in Figma that designers can grab and place as their canvas.
Annotation Tool “Tips”
In Figma, designers pull from the annotation tool assets to make the spec pages effective to document components and provide developers with relevant properties for a particular handoff. I designed the assets as variants that the designer can manipulate depending on how they illustrate the UI element.
Some CSS annotation “tip” variants for styling.
Tater in Action
The approach is intentionally straightforward when using this tool, simplified in a way to maximize communication and efficiencies:
I have designed a button component, and now I have to hand it off to an engineer to develop it.
The first step is to create a spec page in my Figma document and use the pre-built default component anatomy board as my canvas for component detailing.
I pull in my button component.
I need to spec the component properties such as color and typography for this button.
Using the annotation tool "tips" library, I can pull in the appropriate assets and orient them to highlight different design aspects of each component. The tips are pre-filled with common CSS properties, and I add values in the tip sections so the developers can better understand the component makeup.
Figma file handoff is ready to be shared with engineering.
Tater flow for creating an annotated handoff.
Reflections + Future Iterations
We have integrated this tool into the current component creation process of our UX design team at ADT, and it has proven to be successful almost immediately with extremely positive feedback from our development teams. This integration has been treated as a live testing ground as we continue to evolve our new design system, Nebula.
The future of this solution is pretty wide open. Some options include:
A possible trajectory is to pivot this from a Figma library tool to a full-fledged plugin, shared freely within the community.
Increase the robustness of this annotation tool and the areas it covers
Look for opportunities of integrating some form of an automation feature for annotating design files in bulk using this library.
Mapping annotations tools to the Design Tokens documentation — so the annotations could more accurately depict the actual styles in code or within the tokens files.
This spec tool is highly flexible by design in Figma and allows for endless variations based on the developer's needs and the user's imagination.
We have all faced this handoff-documentation challenge at one time or another. Having a streamlined way of creating spec files and an easy tool to do so can significantly enhance documentation quality. Additionally, we level the playing field for those experienced in the design system space to adequately document, spec, and outline the components they are building as the design system continues to evolve with Tater as is the perfect side.