Design systems, unpacked ??

Welcome back. If you’re reading this newsletter and still wondering "who the h*ll is this DesignerTom guy," first of all, fair. Second, I got you: This week, I sat down with Michael Riddering on the Deep Dives podcast to share my vision for UX Tools, my process for bringing new ideas to life, and more.

—Tommy (@DesignerTom )

The Wireframe:

• The design system tools you need to try ft. Dan Mall
• How to turn ChatGPT into a Storybook generator
• The truth about "aspirational" design systems

Your 2024 Design System Primer ft. Dan Mall

Dan Mall founded Design System University in 2023 after a decade running his own design systems consultancy. Through DSU (and countless free resources ), Dan has become the authority in real-world implementation of design systems.

This week, I asked Dan some FAQs about measurement tooling for design systems—and he dove deep into a few never-before-shared insights.

Exclusive Q&A: Dan’s Takes on Design System Measurement and Tooling

Q: What’s your favorite tool for measuring adoption of a design system?

A: Dan said he loves Omlet by Zeplin. "It's a one-line install, you let it run, and it creates a dashboard for you," he said.

But timing matters: Dan said teams often automate adoption measurement too early—and end up with tons of custom dashboards that never get checked.

His advice? Get in the habit of manual measurement: "Set aside recurring time—every Friday at noon, for example—to manually count the number of teams that use your design system," Dan said. "Keep a simple spreadsheet. And every Friday at noon, sit down and update it together."

"Establish practices and habits first, then build tools on top of those habits," Dan said.

Q: How do you introduce a new tool or component into your design system workflow?

A: Before considering a new addition, Dan said, you have to document every step of your current process. Once you accurately chronicle your current process (with emphasis on accurately—it doesn’t matter how much it sucks), you’ll be able to specifically pinpoint the changes that need to be made.

In Dan’s Design System in 90 Days course, he recommends creating four different diagrams:

1. How your process worked before you had a design system.
2. How it works now that you have one.
3. How it will work—a modified version of your current process, with a few tweaks that bring it closer to your ideal (example: If your ideal process is to launch every feature to production without stakeholder review, the interim step could be stakeholder reviews for 1 in every 3 features).
4. How it should work—how your process would work in your wildest dreams (example: a process that launches every feature without stakeholder review).

"There’s usually so much distance between the first and fourth—it can seem insurmountable to get there," Dan said. The goal here is to examine interim steps to close that gap.

Next, Dan puts any new element through the "three times as a pattern " rule. What that is:

• A component is only a good candidate if three or more teams need it.
• A tool needs to prove its value three or more times to justify adding it to your flowchart.

Once 1) you’ve fully documented your process and 2) the tool or component passes the three times rule, conduct the practice pilot.

While we're here: Want to get Dan's help on your team?

You can elevate your enterprise's design system with Dan's Design System in 90 Days cohort. It's ideal if you:

• Spend 20–30 hours/week on design systems.
• Work on a dedicated in-house team (3–8 members).
• Have your company's financial backing.

This intensive course is not for solo practitioners or freelancers. It's a strategic investment for those needing long-term ROI from well-structured design systems.

Dan only has 15 spots left in this cohort, so register by Tuesday, January 23 to save $1,000. Cohort begins on February 13.

Sign up here for 10% OFF early registrations!

Q: Is there finally a tool that solves “roundtripping” (i.e. automatically translating components’ context between designers and developers)?

A: "There are tools that get half of the equation right," Dan said. "They either automate the design-to-code or code-to-design workflow." Here are a few of Dan’s favorites:

• Anima has Figma plugins that can translate Figma comps to React, HTML, CSS, and more.
• Henosia edits and previews code while you design and Plasmic is a visual builder for your tech stack.
• <div>RIOTS translates code to design by generating Figma files from HTML, storybooks, or any content database.

That said…Dan is hopeful that today’s design systems could actually eliminate both sides of the equation: Tools can now generate, not just translate—requiring neither code nor design:

• Magic Patterns builds custom UI "mad lib style," Dan said, using user prompts to build components with Chakra UI, Tailwind, etc.
• Vercel directly refers to its new v0 product as "generative UI." Like Magic Patterns, users describe the interface they want to build and v0 creates the whole thing.

These new tools allow designers to "compress the middle of the process," Dan said, going from idea straight to user testing.

"Design is going to become more commoditized—which also means it will become more democratized," Dan added. "Soon, anyone will be able to design interface elements."

Poll: Are you working on a design system?

• I'm building the first version
• I contribute to an existing system
• I am not using or building a system

News, Tools, and Resources: Design Systems Edition

• ChatGPT can be a game changer for design systems: Learn how to teach it about your design system documentation or train it to be a Storybook generator.
• This podcast episode is a goldmine of design system knowledge from Lauren LoPrete’s experience at Dropbox and Cash App.
• Loved exploring this database of public design systems.
• Dan wrote an awesome piece sharing lessons on design systems from Harry Potter.
• Here ’s why most Figma design systems should start with just four files.

Got a great tool, podcast episode, idea, or something else? Hit reply and tell me what’s up.

Wish We Designed That: Dan’s Favorite Design Systems

Dan’s POV on design system reference sites? Realistic > aspirational. "People love to use the analogy that components are like LEGO pieces," Dan said. "But every LEGO box has a picture on the cover of what you can make with the pieces. The best design system sites paint that picture."

Here are some of Dan’s favorite design systems:

Audi. Audi’s design system site goes heavy on examples. On each design component’s page, Audi shares numerous examples of its use cases in the wild.

Astro. Astro is a division of the US Space Force—with a killer design system site . The best part? Its comprehensive case studies that showcase production processes and current applications. Astro even provides the systems’ source code on GitHub, so you can download and mess around with it locally (AKA Dan’s favorite way to learn code).

Marmalade by Eventbrite. Marmalade’s design system site gives credit where it’s due. At the bottom of each design component page, you’ll find a section that credits the team members who built and tested the component. This recognizes that a design system is a collaborative effort. "It’s such a healthy process," Dan said.

Enjoying this newsletter? Let us know here.

What’s a pain point you’re currently experiencing in developing or deploying your design system? Hit reply and let me know.

See you next week!