consonant-logo
consonant-pattern

Introduction

Consonant is an internal design system based on Adobe Spectrum and is responsible for the adobe.com website, including marketing pages for over 50 products. Originally built and maintained in Adobe XD, Consonant was fully migrated to Figma in 2023.

consonant-adobe-web

My role at Adobe

After four years of building Figma design libraries for agencies and start-ups, it was time for me to gain enterprise experience, so I accepted a contract role with Adobe.

Initially, I assisted in completing the transition from Adobe XD to Figma. Now, I am responsible for the holistic vision of the Figma library.

consonant-components

Systems Thinking

Central repository

One early challenge was introducing a new approach to file organization. I secured buy-in from my coworkers, content strategy team, and managers to establish a central repository for all of Consonant’s design work and materials.

consonant-files

Components is a single Figma project containing dedicated files for each component family. All design and collaboration now takes place within these files.

Touchstones and milestones

For the funnel, we started using touchstones and milestones.

Touchstones are design review artifacts, organized from left to right, oldest to newest. They provide a consistent, centralized location for tracking progress and discussions.

consonant-touchstones

Each component has a dedicated Touchstones page within the family file. When a design is ready for review or discussion, designers create a new section on this page and place copies of the relevant materials within it.

Once a design spec has been signed off, we copy the last touchstone into the Milestones file. Milestones are "final" design artifacts. They are the historical record and source of truth for what is actually in production.

Deprecating components

I established a deprecation process that allows us to update and replace components without disrupting ongoing work or cluttering design artifacts. This method has been implemented throughout Adobe.

consonant-deprecated-component
consonant-deprecated-description

Advances

Annotations mode

Annotations mode was inspired by Figma’s Dev Mode. It's built into our master components to provide direct guidance for designers. It provides clear text size options without needing toggled layers or variants. Further, this solution makes it much easier to discover essential variable modes.

consonant-annotations-mode

“Folder prefix” component names

For many years, Figma used to support multi-level subfolders in the Assets panel. That changed a few years ago, when the app suddenly limited us to only a single subfolder. As a workaround, we've been adding folder prefixes to subcomponent names to achieve the same results. Multilevel subfolder access was restored in Figma's UI3 update (June 2024).

consonant-faux-folder-component-names

Breakpoint mode

Our Breakpoint variable mode automatically updates layouts and styles for three breakpoints: desktop, tablet, and mobile. This was easy to achieve with simple components, but became a fun challenge for the complex ones.

consonant-breakpoint-mode

The future

This role has been a huge opportunity for me, and my work on the Consonant Design System has significantly enhanced Adobe's efficiency and capabilities. I'm looking forward to diving even deeper into enterprise-level design systems, particularly some of the more technical challenges like design tokens and extended collections.

Selected works

Adobe ConsonantFigma design library for iconic design enterprise

LookoutBuilding and managing a Figma component library

First PersonDesign libraries, technical & web design for B2B agency

VectraDesign & component library

Omnicell (2021)Figma design & component library

Omnicell (2019)Sketch design & component library

EpilogApp design & development for iOS, iPadOS, and macOS

Disney Movies AnywhereAndroid design & development

DayframeDesign & development

HD WidgetsDesign & development

App StatsDesign & development

CloudskipperDesign & development

Star Wars APIDesign & development exercise

Fitness goalsApp design exercise

Starsky RoboticsUX research & design

Elemental design1994 – 2003

footer-logo
Thank you for visiting ❤
View