Designing a Handoff with Figma
An approach to preparing a high-fidelity comp for development.
View the Figma file
I'm designing for the following situation:
When a webpage has been designed in a tool and handed off to developers, I want the values (type, spacing, colors, sizes, etc.) to be easily parsed by developers while remaining accessible to designers for additional changes, so that both parties can effectively do their jobs.
Here are a few specific choices I made to arrive at the final handoff:
- Naming text styles according to font-family, weight, size - "Roboto, medium, 20"
- Naming color styles according to a scale vs. "primary, secondary..." e.g. "blue, blue-dark..."
- Using Thomas Lowry's building blocks tip for buttons and repeat elements
I'd like to briefly cover text styles and color styles.
Figma Text Styles
Figma's color and text styles are great because they allow designers to focus on how elements should be styled while still maintaining a constraint on the number and kind of styles.
As the designer prepping this file for development, I created text styles and manually rearranged the list on the design tab.
A developer can take this list of styles and easily put it into a scale with CSS classes. Designers can refer to this list as a palette of options to choose from and create new styles when necessary.
Sometimes a component isn't necessary. For example, I created components for the alternating white and gray sections. I thought that this was a good idea since each has consistent spacing above their contents as well as a background color that I might want to change at a later time.
Initially, I gave this a try, but ran into the following obstacles: Figma doesn't let you nest Instance A inside Instance B. So an instance of a section with a white background could not contain an instance of a 3 articles, text, buttons, etc. This meant that each time I created an instance of a section, I would have to detach the instance in order to nest a button, text, etc. inside the detached instance, effectively defeating the purpose of creating a section component.
Instead of creating a component for each section, I created color styles for the background colors (white and grey). The background colors (white and grey) are specified as 'bg-white' or 'bg-grey-light. As such, they can be applied to backgrounds that may be used in non-"page section" parts of the UI. The tradeoff is that I can't drag and drop a section component, but it's a tradeoff that's offset by the reusability of the background color styles.
This exercise has been my way of thinking through a shift that I see in the CSS landscape towards utility-classes. A few big companies are seeing the benefits of utilities:
Funny considering how many big companies like Heroku and GitHub are moving away from component-driven CSS to utility-focused CSS precisely *because* it works better at scale 🙃— Adam Wathan (@adamwathan) November 3, 2018
I’d love to see an example of a “web scale” site with a remotely sane stylesheet if anyone has one 👀 pic.twitter.com/SsC7thPVa1
In addition to that, here’s Heroku‘s infernal CSS framework documentation:https://t.co/JKFhILTnlo— Adam Wathan (@adamwathan) November 3, 2018
...and an interview I did with Diana Mounter who leads design systems at GitHub:https://t.co/GJJQoXuuxO
I believe that the existing (Figma, Sketch, XD) and future design tools that adapt to this shift will be in the best position.
Figma's text and color styles are a great way to begin thinking in terms of utility classes when designing.