Notes from design token projects, from audits to implementation — Design token dreams have turned to reality across most design systems. Yet some teams now see a years-old inventory as out of step with how naming design tokens has evolved. Others lack alignment across outputs and continue the struggle with libraries and adopters clinging to old variables. These challenges can…

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…

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.

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…

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…

Terms, Types, and Taxonomy to Describe Visual Style — Design tokens have provided a visual foundation of many design systems since Salesforce pioneered the concept in 2014. I wrote an impassioned article on design tokens in 2016, and my energy on the topic continues to grow. As systems of visual style spread across a widening landscape of components, platforms…

Operating a Workflow to Resolve Designer and Developer Needs — After building for months, Morningstar Design System released in June 2017 and celebrated the launch with our community of designers and developers. Immediately, the community used it. And, immediately, they needed help. What kind of help? Oh my goodness did those requests fly! Fix your defect. Add a feature I…