illustrations by Francisco Morales

The A-Z guide for operating your design system team

Mike Dick

Measure how people are using (or not using) your design system

There are two groups who need to adopt your design system: designers who use UI Kits and engineers who use a code library such as React. Design adoption is easy — just swap out the UI Kit and voila. However, code that is even 1 day old comes with technical constraints that make it hard to just flip a switch and expect all engineers to use it overnight.

To measure adoption at SurveyMonkey, we plot every product team on a 5-point color scale:

  • Red: Team does not know we have a system
  • Orange: Team has not adopted any part of the system
  • Yellow: Team has prioritized adopting the system to their roadmap
  • Green: Team is using the design language but not the code
  • Blue: Team is using both our design language and the code

Get your engineers involved upfront to foster healthy adoption. Design systems solve a design problem, but with an engineering solution.

Pilot new releases to a small group of beta testers

A small change to any component could break the kits that your adopters are using and require them to make a change on their end to support it. This can get really taxing over time and can get expensive as things scale. To avoid this, we always ship big releases to a small group of early adopters first. Then we learn from them before releasing to everyone.

Some things we’ve learned early on was that our naming conventions were not clear and that some components needed more robust variants. If we had not caught those kinds of small — yet breaking — things upfront we would have ran the risk of creating more work for our adopting teams when we asked them to upgrade to a new version.

Your official criteria for adding new things to the system

We organize by design tokens and UI components, and we carefully curate what gets added so that the wrong parts do not get inducted without meeting every checkmark in our induction criteria. Our canon is the truth and how we distinguish between a sanctioned decision versus a pattern that is being circulated unofficially. Tokens and components must both be available in Sketch and code before they are inducted so that designers and engineers are always working from the same set of tools. We also look at things like if it’s an industry best practice, is it context agnostic, has it been proven in production, etc..

Be strict curators of your canon and communicate how your team decides when and why tokens or components are or are not ready to be inducted.

Design systems solve a design problem, but with an engineering solution.

How you communicate and deliver changes to your teams

You can spend months crafting brilliant symbols in Sketch, writing guidelines, and partnering with engineers to build everything in code. But have you stopped to think about what the experience is like for people using the system? How easy is for them to receive updates? Is it a manual process or do changes get synced automatically?

Good distribution starts with great encapsulation.

Most modern design tools have disruption tools built right into them. But how might a Sketch plugin replace your need to use a Sketch Library that has to be manually download each update? For engineers, how might you improve their need to copy-and-paste raw values and/or HTML? Instead of 50 lines of HTML, how might you encapsulate it down to 1 line of code? Most modern tech libraries are built with this philosophy of encapsulation (i.e. React and Web Components).

The delicate balance of everything that makes up your design system

Just like a rainforest ecosystem, every part of a design system plays an important role and it all needs to work effectively together to keep everything running smoothly. And the design system ecosystem reaches far beyond UI components. We like to think that our design system ecosystem contains these 4 systems inside it — all of which need to work together to keep the system healthy:

  • Distribution: Automating release and communication of updates (Deploying, npm, change logs, Slack)
  • Tooling: Streamline how people use the system (Sketch plugins, VScode plugins, prototyping tools, etc.)
  • Education: Helping people use the system better (Docs, guidelines, onboard training)
  • System: The design language and UI components (The fun stuff!)

Imagine dropping a polar bear into the middle of a rainforest. It’ll wreak havoc on the wildlife around it, and the polar bear will suffer too. We think of our system just like that. If you introduce things into your design system that don’t make sense in the larger context, the system will slowly deteriorate.

Each addition to the system is a vow to maintain it

Who doesn’t celebrate when they ship a new component and move onto something else? It’s tempting to never look back, but it’s important to remember that every time you add more features to your design system, your commitments and responsibilities increase. If you’re not careful, you might bite off more than you can chew, and all of a sudden you only have time to maintain the core system — and no time to grow the system further.

Before you add anything new, think about the long-term cost to support. As your system takes on more responsibility, grow your team at a relative speed.

Be the reason that other teams break out of their silos and work together

Your design system sits central to everyone and gives you a holistic view of the entire product experience. You have the powerful advantage to spot when people are working on similar problems, and bring them together to solve it together — when otherwise they might not have looked up to notice the opportunity. I call these missed opportunities “the seams” and your design system is the glue that holds the seams together.

Your design system is the glue that holds the seams together.

Be clear and specific about how others can contribute

A design system shouldn’t exist in a vacuum, so it’s important to set up a process for accepting help and contributions from the people using it — similar to an open-source model. But not just any help. Be crystal clear about what your team does and doesn’t need help with, and establish guidelines for contributing. Our design systems team wasn’t ready to accept outside contributions until we did a ton of work upfront to set a good foundation. Once we were ready, we created a roadmap and a process that made it clear how to be an effective contributor.

Disrupt your adopters’ process as little as possible

One of our design system’s guiding principles is to disrupt the workflow of our teams as little as possible. Aim to fit into their workflow instead of asking them to fit into yours. Everyone works differently and every team operates differently. It’s not your role to determine their destiny for them. Instead, it’s your role to listen to how they work and design your system to accommodate so it can be invisible during their process.

All the small tasks you do today can become a full-time job later

It’s no exaggeration to say that there’s a lot of work to do on design systems. Every small responsibility you’re doing today has the potential to be a full-time job later on. Small tasks today are easy to juggle until they balloon in scope as your system scales. Being blindsided by increasing scope is a shock to the operation of your system. Prioritization becomes your key ally in recovering your operations — decide which tasks you can drop until you have more people on your team.

Document and share the knowledge you gain from being centralized

Being central to the process of so many designers and engineers means you have a wealth of undocumented knowledge brewing around your head. That sounds great if you’re okay being the gatekeeper, but documenting the knowledge in your head is very powerful and can empower your entire organization to do better work.

Find a process to document your knowledge in an informal way and see what your team finds valuable.Share it with your team until your system is ready to formalize it inside your documentation and guidelines.

Design files are just a static representation of your design system — not the design system

As we’re moving toward modern technology stacks like React, changes can automatically sync across your entire ecosystem (docs, Sketch, and code). Philosophically, that means every UI component in your system exists everywhere, together.

First, make sure your system’s source of truth is the code. Build a doc site that renders that living code right inside its examples. Build tooling, like a Sketch plugin, that automates converting your coded components to Sketch symbols so that your team doesn’t have to manually draw your UI Kits by hand. This helps avoid bugs downstream due to human error.

Prove the value of your design system by measuring its impact

Early-stage design systems teams measure different things than mature ones. Early on, you focus on delivering what you promised: UI components. At this stage, you’re measuring how many tangible things your team is able to produce and deliver — like your UI kit or new components. But once you’ve done that, you need to start measuring the impact and value your design system brings to your organization..

The metrics you measure at this stage should align with the metrics your company already cares about. For example, our engineering teams already measure “time to close a PR”. Separately, we keep track of which teams use our design system, and which teams don’t. When we map that data together, we can show that engineering teams that use our design system take less time to close a PR. This is a win-win — it helps us prove the value of our design system, and it gives an incentive to engineering teams to adopt our design system to increase their efficiency.

Find out what your design and engineering departments are measuring and segment the data.

Your system doesn’t get dedicated resourcing because it hasn’t solved a business need

No one is listening if you pitch your system as solving design problems (i.e. improving color and typography). Even if you pitch that it will improve the customer experience, leading to more money downstream. While that may be true, it’s usually not how the business thinks about priorities.

Instead, start by identifying a need that the business has and propose that you can solve that need with a design system.What they care about is that you’re going to solve that need, not necessarily that you are going to do it by spinning up a design system.

At SurveyMonkey, our business need was to apply our new brand throughout the entire product as quickly as possible. At another company, the legal team had the business need to ensure that we were meeting accessibility guidelines across the site — and we promised to solve that need with a design system.

Identify a need that the business has and propose that you can solve that need with a design system

Educate and train teams on how to adopt your design system

One day you’ll get to a point when the foundation is stable and the amount of new components being added has slowed down drastically. Add an uptick in adoption to that mix and your design system’s bottleneck will no longer be that a pattern doesn’t exist, yet. The new bottlenecks will be the unknowns of how to get started and how to use the system correctly.

To solve that, you need to invest in training at the right time — not too early when shipping new components is more important, but not so late that you’re creating huge barriers for getting more teams to start adopting your design system.

Your customers are your coworkers

Early design systems are usually developed as a grassroots effort by Product Designers, who naturally bring their customer-centric design process with them. As a result, I see design systems teams fall into the trap of building their design system for customers, instead of building it for the designers, engineers, and PMs who are actually using it to craft products for customers downstream.

What ultimately gets shipped to production is not your responsibility. Your responsibility is to build a design system that improves the productivity and relationships of the people using the system — your coworkers — and to help them make great decisions as quickly as possible.

Your company’s live app or product is not your priority

The design systems team shouldn’t be the gatekeeper of what ships to production. What ships to customers is your product design team’s responsibility. If you’re straddling the line and policing designs right before they ship, you’re already too late. You’re focused on the wrong part of the process. As more teams use your design system, it becomes too time-intensive to watch every release to make sure everything that gets shipped is using your system correctly and is consistent with how others are using it.

Instead, focus your energy on proactive education and training. Make sure people know their resources before they start designing or building anything. If you educate people on how to effectively use the design system, they’re more likely to make better decisions when they work on future projects.

Your design system bridges the gap between disciplines

Your design system’s ability to bridge gaps between disciplines is your greatest superpower. Your design system reaches far beyond one-on-one collaboration between a designer and an engineer. It has the potential to nurture the relationships between every designer and engineer at your company by empowering everyone to speak a shared language.

Set up repeatable processes and guidelines that scale your team’s capabilities

Relative to the rest of the company, design system teams are small — yet they’re tasked to support an entire company. The math doesn’t add up, and we often see 1-person design system teams supporting 100 people using the system. If only a couple of those people ask you to pair code or design, that could take up an entire week of your team’s time.

To combat this, you have to scale your team’s capabilities so that your team doesn’t have to be in the room for people to make a decision. If done correctly, you can scale a single skillset (such as Visual Design) from 1 person to unlimited.

Systems thinking is your team’s superpower

Traditionally, product organizations are made up of three roles: Product, Engineering, and Design. As a result, you often design system teams made up of these same roles. But not just any engineer or designer will succeed on a design systems team — your greatest assets are engineers and designers with a knack for improving the productivity of others around them by solving problems systematically, on a holistic level.

Engineering by design, design by engineering

There’s an interesting opportunity when your design system sits central to everything: unify everything! Design, code, process — you name it and we’ll unify it.

How might we, as a design systems community, unify disciplines and empower them to work better, together. We have the opportunity to blend the way code and design work together by building tools that unify those processes. We can get designers working more like engineers by introducing version control. Or build a prototyping sandbox that allows designers to prototype in code — without writing code.

Your design systems ability to bridge gaps between disciplines is a superpower

Have a clear vision of what you want your design system to be

Since your system builds bridges between disciplines (design, engineering, and product) everyone will have different expectations of the system. That means that right out of the gate, people might assume that your system is everything, for everyone. Lofty expectations like this are dangerous, because they’re unrealistic.

Establish a strong vision and evangelize that to the entire product organization. Explain what your system is , and more importantly what it is not.

That moment of realization: “Have I become a PM?”

As the creator of a design system, you end up doing whatever it takes to keep the system alive. As your system scales, you may notice you’re acting more like a Program Manager than before. Your day-to-day shifts from hands-on work to managing operations and coordinating. Project plans, roadmaps, timelines, synthesizing feedback — oh my, did I just become a PM?

Get really good at “X’ing” things out and saying no.

Everyone will come to you with the next big idea for your system. They’ll ask you to take on a collection of new components by a certain date to help them meet their own deadlines. It’s easy to say yes because it’s a quick way to prove your system’s value early on, but it’s important to set boundaries. Be careful not to commit too much time solving the needs of single team. Focus on the holistic view and prioritize work that benefits everyone — not just a single team or a single project.

You happen to your design system

Your design system starts with you showing up and being proactive about grassrooting it. Even if you can’t do it alone, it still takes you to inspire and lead others to believe that it’s a cause worth supporting. Don’t wait for someone to hand you the keys to the design system. Your passion and hard work could be what it takes to grow your system into a dedicated design system team that wins!

It will feel like a zoo because it is a zoo

Grassrooting a system and watching it grow from a tiny seed into its own dedicated team is quite the journey. It will feel like order and calm is just around the corner, but around each corner lies new challenges. That’s okay! Embrace the chaos and see where it takes you. The best innovations often come from chaos. Trust your vision, take it one step at a time, and rally your team around creating order from the chaos as you go.


  1. Dès aujourd’ hui, les abonnés d’Orange Tunisie peuvent appeler au meilleur prix vers les numéros mobiles Orange en France, au Maroc, au Mali, au Sénégal et en Côte d’Ivoire.

  2. I was curious if you ever thought of changing the page layout of your website?
    Its very well written; I love what youve got to say.
    But maybe you could a little more in the way of content so people
    could connect with it better. Youve got an awful lot of text for only having 1
    or two images. Maybe you could space it out better?

  3. I’m really enjoying the design and layout of your website.
    It’s a very easy on the eyes which makes it much more enjoyable for me
    to come here and visit more often. Did you hire out a developer to create your theme?
    Outstanding work!

    my page – Bio Keto Advantage

  4. Hey there this is kinda of off topic but I was wanting to know if blogs
    use WYSIWYG editors or if you have to manually code with HTML.
    I’m starting a blog soon but have no coding know-how so I wanted to get guidance from someone with experience.
    Any help would be enormously appreciated!

    my website Ultra Cut Keto

  5. Hello there! I know this is kind of off topic but I was wondering if you knew where
    I could find a captcha plugin for my comment form? I’m using the same blog platform as yours
    and I’m having difficulty finding one? Thanks a lot!

    Feel free to visit my blog post; Keto LeanX Review

  6. I know this if off topic but I’m looking into starting my own blog and was wondering what
    all is required to get setup? I’m assuming
    having a blog like yours would cost a pretty penny?
    I’m not very internet smart so I’m not 100% sure.
    Any tips or advice would be greatly appreciated. Kudos

    Check out my page OracleLeaf CBD

  7. I’m impressed, I have to admit. Seldom do I encounter a blog that’s both equally educative and interesting, and let me tell you, you have hit the nail on the head.
    The issue is something too few people are speaking intelligently about.
    Now i’m very happy that I came across this during my
    search for something relating to this.

    Also visit my page :: Amellia Skin Care (Leonardo)

  8. I have to convey my respect for your generosity in support of all those that have the need for help
    on in this subject matter. Your special dedication to getting the message along had become wonderfully beneficial and have in every case permitted workers much like me to arrive at
    their targets. Your amazing valuable instruction can mean this much to me and far more
    to my colleagues. Many thanks; from all of us.

    Have a look at my website … Re ViVium Age Rescue Cream

  9. Asking questions are actually nice thing if
    you are not understanding something fully, however this piece
    of writing provides fastidious understanding even.

    Feel free to surf to my blog Corrine

  10. you are actually a excellent webmaster. The website loading pace is amazing.
    It seems that you’re doing any unique trick. Also, The contents are masterpiece.
    you have performed a great activity in this subject!

    Feel free to surf to my homepage :: IQ SuperCharged

  11. My brother recommended I may like this blog.
    He used to be entirely right. This post actually made my day.
    You cann’t imagine simply how so much time I had spent for this information! Thank

    my homepage – True Keto 1800

  12. Greetings! This is my first visit to your blog! We are a team of
    volunteers and starting a new initiative in a community in the same niche.
    Your blog provided us beneficial information to work on. You have done a marvellous

  13. I have been browsing online more than 4 hours today,
    yet I never found any interesting article
    like yours. It’s pretty worth enough for me. In my opinion, if all website owners and bloggers made good content as you did, the net will be a lot more useful than ever before.

    Look into my page: Vigalix Review

  14. Hello there, I discovered your site via Google whilst looking for a similar subject, your website came up, it
    appears good. I’ve bookmarked it in my google bookmarks.[X-N-E-W-L-I-N-S-P-I-N-X]Hello there, simply become alert to your blog thru Google,
    and located that it is truly informative. I am going
    to watch out for brussels. I’ll appreciate in the event you continue this in future.
    Lots of folks will be benefited out of your writing.


    Feel free to visit my page … Virgo FX Male Enhancement Review

  15. Hello! Do you know if they make any plugins to assist with Search Engine Optimization? I’m trying to get
    my blog to rank for some targeted keywords but I’m not seeing very good success.

    If you know of any please share. Many thanks!

    Visit my website …

  16. Hiya, I’m really glad I’ve found this info. Nowadays bloggers publish only
    about gossips and web and this is actually annoying.
    A good web site with interesting content, this is what I need.
    Thank you for keeping this web-site, I will be visiting it.
    Do you do newsletters? Can not find it.

    Look at my webpage ::

  17. Hey there excellent website! Does running a blog such as this require
    a large amount of work? I’ve absolutely no knowledge of coding but I was hoping to start my own blog in the near future.

    Anyhow, if you have any recommendations or techniques
    for new blog owners please share. I understand this
    is off topic nevertheless I simply had to ask.
    Thank you!

    Also visit my blog post – growing indoors

  18. When I initially left a comment I appear to have clicked
    on the -Notify me when new comments are added- checkbox and from now on each time
    a comment is added I get 4 emails with the same
    comment. There has to be an easy method you are able to remove me from that service?

    My webpage ::

  19. Thanks , I have just been searching for information about this
    topic for a long time and yours is the best I’ve came upon till now.
    However, what in regards to the conclusion? Are you positive concerning the source?

    Have a look at my homepage: seed contains

  20. I usually do not drop a leave a response, but I looked at a
    few of the comments on The ABCs of Design Systems – Pavvy Designs.

    I actually do have a few questions for you if you don’t mind.
    Is it only me or do a few of the remarks look as if they are left by brain dead folks?
    😛 And, if you are writing at additional online sites, I’d like to follow you.
    Could you post a list of all of your social community sites
    like your twitter feed, Facebook page or linkedin profile?

    Here is my blog … stop smoking weed today

  21. Hey I am so happy I found your blog page, I really
    found you by accident, while I was searching on Digg for something else, Anyways I am
    here now and would just like to say thanks for a marvelous post and a all
    round exciting blog (I also love the theme/design), I don’t have time to go through it all at
    the minute but I have saved it and also included your RSS feeds, so when I have time I will be back to read more, Please do keep up
    the excellent job.

    My web blog –

  22. Does your blog have a contact page? I’m having a tough time locating it but,
    I’d like to send you an email. I’ve got some ideas for your blog you might be interested in hearing.

    Either way, great website and I look forward to seeing it
    expand over time.

    Here is my web page – high quality treatment

  23. You could certainly see your expertise in the paintings you write.

    The world hopes for even more passionate writers such as you who are not afraid to say how they believe.
    All the time go after your heart.

    Look into my blog skin care p

  24. Hi there! This blog post could not be written much better!

    Going through this post reminds me of my previous roommate!
    He always kept talking about this. I most certainly will forward this information to him.
    Fairly certain he’ll have a good read. Thank you for sharing!

    Check out my web site :: drug crime attorney

Leave a Reply

Your email address will not be published.