January 27, 2024

Design System Tooling

The Question: Episode 8 Wrap-up

On Thursday, January 18 of 2024 we held the Episode 8 design system deep dive conversation as part of a series called The Question. Thanks for being part of it.

Jina Anne and Ben Callahan were co hosts for this episode of The Question.

The Question was shared via email, on LinkedIn, and X and I received 47 responses. Review the FigJam file, the raw data, and the opening music (“Aquarium” by Nosaj Thing) from the Episode 8 deep dive. Major thanks to my friend and design system leader, Jina Anne, for co hosting this deep dive!

For the week’s question, we provided this context:

Jina and I were chatting about how much the landscape of digital design has changed since we got started in this business. Lately, there are so many incredible tools that require almost no coding experience and allow you to accomplish things that simply weren’t possible when the web was first coming into existence. That got us wondering, how are these tools impacting design system practitioners?

So, we formulated a few categories of common tools:

Design tools (like Figma, Token Studio, Sketch, Zeplin, etc.)

Developer tools (like GitHub, Style Dictionary, Storybook, etc.)

Design system integration tools (like Supernova, Knapsack, zeroheight, Luro, etc.)

AI tools (like CoPilot, ChatGPT, Dall-E, Bard, Midjourney, Adobe Firefly, etc.)

No-code tools (like Webflow, Wix, Framer, Squarespace, MailChimp, Canva, AirTable, Notion, Zapier, etc.)

Certainly, there are many more (and new ones introduced every week). With all of this as context, here is the week’s question:

How many third-party tools are you using to streamline your design system workflow?

Tell us which tools you primarily use and share a story of a success or failure you experienced related to one of those tools.

The Answers

In answer to the first question, approximately 62% of respondents reported using between three and six third-party tools to streamline their design system workflow:

In response to the question, “How many third-party tools are you using to streamline your design system workflow?”: approximately 62% of respondents reported using between three and six third-party tools to streamline their design system workflow.

I expected this to be a little higher, and there certainly were some folks using more. As you’ll see in the responses, the cost of these tools, the lengthy process of getting new tools approved for use (especially in enterprise organizations), and the scrappiness of design system teams all contributed to a lower number here.

I also did some rough categorization on the open text answers to the second question. The respondents shared all kinds of tools, but there were a few standouts.

In response to the question, “Which third-party tools are you using?”: almost 90% of respondents reported using Figma and around 45% reported using Storybook.

Other reported tools included the Tokens Studio plugin for Figma, GitHub, and Style Dictionary. I suspect some tools feel so common that folks don’t even think to include them in a question like this—perhaps git or GitHub is one of those.

I also asked ChatGPT to generate a summary of the open text answers and received this back:

Figma Successes:

Accelerated work when designers created their own component library based on the design system.

Transparent design practice, covering a wide range of disciplines from PM to engineers. Failures/Challenges:

Difficulty in implementation within the system, with designers not fully adopting components or variables.

Bugs affecting components and challenges with syncing, leading to changes in the workflow.

Some designers struggling with Figma’s autolayout feature.

Storybook Successes:

Introducing accessibility tests and the ability to test configuration. Failures/Challenges:

Updates often leave inconsistencies and tech debt when methods and processes change.

Unclear role — whether it’s an engineering reference, a design reference, or a comprehensive doc source.

Tokens Studio Successes:

Best option for design token automation when used with Figma and Style Dictionary. Challenges:

Issues with Figma/Tokens Studio syncing and the need to change the process for better synchronization.

Zeroheight Successes:

Game-changer for engaging stakeholders and providing an intuitive interface. Challenges:

Designers not liking Zeroheight’s WYSWYG editor, leading to a shift to other tools.

Jira Challenges:

Cloud-based Jira access issues, leading to the use of a spreadsheet for tracking tickets/components.

Supernova Successes:

Saved time for the development team and improved communication between disciplines.

Docusaurus Successes:

Quick setup for documentation but not ideal for long-term use.

Integration with Storybook for a consolidated platform is being explored.

GitHub Successes:

Used for code management, CI checks, and documentation. Failures/Challenges:

File type discrepancies making it challenging to update docs.

Style Dictionary Successes:

Automation of the transformation of tokens in CSS.

Allowed for the complete refactoring of tokens and the delivery of dark mode.

ChatGPT

Being explored as an initiative to help designers and engineers adopt quicker and easier.

Selected Quotes

Here are a few success quotes shared by folks (along with some commentary from me) in answer to question two:

“[We’ve had a lot of] success with the automation of transformation of tokens in css using style dictionary.”

“Figma + Token Studio + Style Dictionary seems to be the best option for design token automation.”

“[Figma has helped us create a] more transparent design practice. FigJam and Figma cover a ton of ground and so many disciplines from PM to engineers can work in the same space.”

“Storybook success: Introducing accessibility tests. Ability to test configuration.”

“Storybook has been a success story, but one that has raised a lot of interesting questions about what its role should really be. Is it an engineering reference? A design reference? A source visual source or one that should contain detailed documentation? Should that documentation cater to both design and engineering audiences? Or perhaps simply put, can Storybook serve as a comprehensive doc source?”

“We’ve recently started using a Storybook extension, addon-designs, that allows us to iframe in our figma documentation that UX builds. So we easily have both design and developer docs available in storybook and published publicly.”

“zeroheight has been a game-changer, especially when it comes to engaging stakeholders who aren’t well-versed in our design or development tools. Its intuitive interface and integration with Figma make it easy for us to keep external teams informed of changes, and we can add notes to documentation and showcase new component releases in only a few minutes. we’re not exclusively tied to it, but zeroheight is the first tool to make our design system’s journey visibly accessible to everyone, not just those actively searching for it. This has been a significant win in our design system narrative.”

“Success story: A two-designer design system team was able to use Supernova to deliver design tokens to a new Flutter app we were tasked with supporting. Saved tons of time for development team and communication time between disciplines.”

Quite a few folks have settled on Style Dictionary as a great tool for transforming those tokens into usable assets for many tools and frameworks. One respondant even shared that it helped them to better understand JSON which led to stronger relationships with the developers on their team.

While we didn’t spend a lot of time talking about Design System integration tools (like zeroheight and knapsack), there were folks who have found them to be indispensable in their systems work.

Here are a few failure quotes shared by folks in answer to question two:

“The biggest challenge/failure that we’ve come across is with implementation within Figma. Our designers haven’t fully adopted components or variables and our engineers often copy values from Figma that should be tokens or props on an existing code component.”

“We’ve been busy doing a big tokens push of late. A few tooling problems arose. Figma/Tokens Studio was giving designers headaches because they were all working in one big file with all the components. Figma and TS were failing to sync effectively, so that they thought a task was finished only to come back to it and find half the tokens applied were missing. They’ve had to change process to work on each component in a separate file and then bring them together again to publish.”

“[Figma has given us a] user admin nightmare (not on Enterprise so no SCIM). Temptation to make broad decisions based on tool capabilities rather than best practices.”

“Storybook updates often leave inconsistencies and tech debt when methods and processes change. Fighting with the UI.”

Many of the tools that presented challenges to some teams were life-savers for other teams. I think most of these tools can have a place in design system work. However, there is plenty of learning curve associated with each. There is not tool you can install that will just make things easier. Usually, there’s a dip in productivity while you come up to speed with using the tool in the way it’s intended to be used. Sometimes that dip is much lower than others.

The Discussion

One of our commiunity members asked how many designers were comfortable writing markdown. So, we asked in our deep dive and learned that most designers do feel comfortable with this. Nice to know as you’re working through tools for generating a doc site.

The FigJam also has a space for folks to share a bit about the larger design system integration tools (specifically, zeroheight, knapsack, Supernova, and Luro). There are some good insights listed there, so please take a moment to look through the notes.

Overall, we coverd a lot of ground in the discussion. Folks were willing to share a lot of their own experiences and many links to resources that you may find helpful. I’ve included a link to those below.

Additional resources

Thank you

Many thanks to all who participated.

If you missed out this week, sign up for The Question and be ready to answer next time.

Writing Design Systems The Question

Explore more of my writing and speaking.

Or, inquire about