How it works, and how to make it work for you — Creating component design specifications (“specs”) is grueling. Designers can spend hours manually itemizing elements, outlining props and options, and mapping tokens to elements across states and configurations. Oh, and all the redlines. For many, it’s time consuming and tedious. However, while specs can at times be subtle, considerable design intent…

What to include, where it goes, and why it matters more now — During the emerging years of design systems (2015–2018), designers and developers form teams to crank out components. Tight collaborative connections favored conversation over artifacts to align, decide, and move forward. As a component design stabilized, designers might have erratically sprinkle callouts, tidied up the variant grid, or redlined a variant…

Extend a design system with assets maintained by contributors — Design systems are gradually moving away from a single, monolithic, centralized libraries of every thing in one place managed by one team, a concept I explored abstractly in 2019’s Design System Tiers. Since then, Figma library features have gradually improved permissions, component architecture, dependency management, branching and publishing.

Relinquish control, offer parts, and let implementers compose — For most design systems, solving for every feature to support every case is a fool’s errand. Yet, design system practitioners cringe when a designer detaches a Figma component or developer codes a component from scratch. As libraries top out with enough atoms and molecules, things get tougher with the richer…

Test assets using criteria organized in checklists — Testing Figma Components: Overview| Visual Test Cases | The Review In years past, testing design assets was a throwaway consideration in planning if done at all. Now, some teams test Figma components rigorously. Many teams require a Figma component review before publishing any update. Formality varies. Yet, investment is growing…

Like code, prove Figma shows what and changes as you expect — Testing Figma Components: Overview| Visual Test Cases | The Review Testing isn’t just create an instance, change a label, swap some properties, resize an edge, “Done!” Seriously, ten seconds and you are convinced the next step is to release it? Instead, consider a methodical approach to explore many possible outcomes…

Build a workflow to assure quality of design system assets — Testing Figma Components: Overview | Visual Test Cases | The Review Have you ever made an awesome Figma component, recklessly published, garnered criticism, and realized you damaged a reputation a bit? I have. All those avoidable defects. A button shape that doesn’t grow with a label. A missing background color…

12 Tips for Setting Up a System That Endures — I love buttons. I can do things with buttons. Take a next step. Make a commitment. Get things done. With buttons, interaction springs to life. That’s why Buttons are arguably a design system’s most important component. Devilishly simple, they offer a simple label in a defined region I can press…

A Story for Selling a System that Scales — Selling a design system into an enterprise usually involves a pitch to many audiences. Designers appreciate cohesiveness. Engineers value efficiencies. And, pivotally, executives appreciate value. While a pitch covers a lot of ground — system composition, team & community strategy, scope & roadmaps — my narrative pivots from introductions to…

Structure, Content, Style & Behavior of Composed Components — I’m a sucker for a card component. It takes me back nostalgically to my adolescence when baseball cards introduced me to information design. I collected and organized thousands, each exhibiting a hero’s photo, team as theme, positions as identity. …

How to unify anatomy and props across code and design tools — A design system aspires to achieve a shared vocabulary between designers and developers. As we build visual style and UI components, we make many decisions about how a feature is composed and configured. What is its name? How is each element organized and named in a hierarchy? What options can…

Our Community, not Companies, Should Build Pattern Libraries — In “Pattern patter.”, Ethan Marcotte writes yearningly for more design patterns in our practice. For now, many teams build libraries reusable components. However, these libraries usually lack thoughtful guidance to resolve myriad forces at play to compose interfaces effectively. Today’s libraries are (just) a kit of interface parts. Ethan hints…

Recent Trends in Naming Things in Design Libraries — Trent Walton’s article Atomic Classification raises some excellent points and considerations when naming and organizing things in a design system. Some highlights include: “Choose names … that make the most sense for the most people.” “Naming components could be included … early on.” “Atomic Design, like any valuable tool, resource…

Grappling with Hierarchy for a More Effective Design System — During early system activities like our Component Cut Up workshop, participants can get stuck on the “correct” way to chop up page into components. Staring at pages on offer, each person has their moment—scissors in hand—wondering: Is this thing (like a Card) the component? Or this smaller thing (like a…

Establish a process to deliver on the quality you promise — Months after our first release, productivity was strong. We’d reached 20 components. Buttons and forms were behind us. We cranked through cards, tables, and nav bars. As another component went to review, comments unexpectedly overwhelmed the pull request: “Why don’t we have this variation?” “It breaks with a reasonably long label.” “Did…

Building a Quality Base, One Criteria at a Time — Whether standing up a system from scratch or engaging in incremental planning, teams wonder: what’s a mature component catalog look like? Conversations quickly hone in on quantity: 30 components? 50? 70? “How many components does our catalog need?” Making components—a repetitive and reliable process yielding measurable outputs—can become a team’s…