Designing a Handoff with Figma

Figma, Components

Designing a Handoff with Figma

An approach to preparing a high-fidelity comp for development.

Note: The Office of Design & Delivery has since trimmed down their homepage.

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:

  1. Naming text styles according to font-family, weight, size - "Roboto, medium, 20"
  2. Naming color styles according to a scale vs. "primary, secondary..." e.g. "blue, blue-dark..."
  3. 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.

Color Styles

Sometimes a component isn't necessary. It's tempting to create a component for these sections since each has consistent spacing above their contents as well as a background color.

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-section parts of the UI.

Conclusion: A Confession

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:

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.

Learn more

Checkout Form Redesign

Visual design, Daily UI, Sketch App, Mobile

Checkout Form Redesign

Redesign of the A Book Apart credit card checkout form. Designed with Sketch App.

Some background

I purchased a few books from A Book Apart recently and decided to work on a redesigned credit card for their site. This is just one screen, no flows here, basically the main focus is on visual design, you know, daily ui :).

Let's get started

Here's the current flow for context:

  1. First, you see your cart and click the 'Checkout' button
  2. Next, you enter your contact info and shipping address
  3. Then, you enter your shipping preference
  4. Finally, a long form that includes everything you entered up to this point and the final step—your credit card details.

A few details

An 8pt/4pt grid

The design follows an 8pt grid (see this post) with 4pt spacing used in the tighter spots.

Incorporating brand colors

A Book Apart website has 3 main brand colors: a green color for their "buy" buttons (#7db72f), a beige color for borders (#f6f5ea) and a brownish color for text (#997e11). The colors play similar roles in my version.

To overlap or not?

Overlapping the books made a more interesting layout, but I chose to clip the books behind the form in order to keep the focus on collecting the credit card info.

Learn more

Sign-Up Form Design with TailwindCSS

Visual design, Daily UI, CSS, Forms

Sign-Up Form Design with TailwindCSS

A sign-up form created with the TailwindCSS framework.

By signing-up, you agree to our terms and conditions.

Online Banking

Member Benefits

Safe, secure access to your account.

Get notified when payments are due.

Transfer funds fast.

Learn more

Animating a Line Graph

Animation, JavaScript, CodePen, Interactive-design

Animating a Line Graph with requestAnimationFrame

Inspired by Ben De Cock to use requestAnimationFrame for animation.

Learn more

Time-tracking App

Prototyping with Invision.

View prototype Learn more

Counting Eye

A counter app that I designed and built in Swift for iPhone 5-7 Plus.

View final design Read case study

Typeface Quiz

A quiz that draws attention to typeface anatomy with explanations.

View final design Read case study