/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    h4: "h4",
    p: "p",
    hr: "hr",
    a: "a",
    h2: "h2",
    ul: "ul",
    li: "li"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.h4, {
      children: "TL;DR"
    }), "\n", _jsx(_components.p, {
      children: "Less is more"
    }), "\n", _jsx(_components.p, {
      children: "Measure, measure, measure"
    }), "\n", _jsx(_components.p, {
      children: "Don't be an asshole"
    }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.p, {
      children: ["Four years ago, I started work on what would become a ", _jsx(_components.a, {
        href: "http://design.sparkpost.com/",
        children: "fully grown design system"
      }), ". Little did I know, my ", _jsx(_components.a, {
        href: "https://github.com/SparkPost/styles",
        children: "tiny CSS library"
      }), " would evolve into a system of over 50 components, built by a team that I now lead. I won't tell the whole story, but wanted to share a few lessons I've learned along the way – sometimes, the hard way."]
    }), "\n", _jsx(_components.h2, {
      children: "Crawl before you walk"
    }), "\n", _jsxs(_components.p, {
      children: ["Start small. Don't jump into large, complicated ", _jsx(_components.a, {
        href: "https://bradfrost.com/blog/post/atomic-web-design/#organisms",
        children: "organisms"
      }), " before you've sorted out and are confident in your ", _jsx(_components.a, {
        href: "https://bradfrost.com/blog/post/atomic-web-design/#atoms",
        children: "atoms"
      }), ". And especially don't do it just because you see other established design systems in the wild ", _jsx(_components.a, {
        href: "https://polaris.shopify.com/components/structure/page#navigation",
        children: "do it"
      }), ". Remember that just because something works for someone else doesn't mean it's the best solution for you."]
    }), "\n", _jsxs(_components.p, {
      children: ["A handful of primitive, but powerful components can go a very long way. Smaller components are easier to maintain, test, and understand how to use. Think of something like ", _jsx(_components.a, {
        href: "https://seek-oss.github.io/braid-design-system/components/Box",
        children: "Box"
      }), " or ", _jsx(_components.a, {
        href: "https://seek-oss.github.io/braid-design-system/components/Stack",
        children: "Stack"
      }), ". (Our ", _jsx(_components.a, {
        href: "https://design.sparkpost.com/components/box/api",
        children: "Box"
      }), " component is so popular that its used ", _jsx(_components.a, {
        href: "https://ux-okr-dashboard.vercel.app/",
        children: "two times more"
      }), " than our ", _jsx(_components.a, {
        href: "https://design.sparkpost.com/components/button/api",
        children: "Button"
      }), " component)"]
    }), "\n", _jsxs(_components.p, {
      children: ["Pay extreme attention to your component APIs. Components change over time to support the needs of your actively growing product or brand. Release each component with this in mind, ", _jsx(_components.a, {
        href: "https://jonambas.com/posts/component-api-standards",
        children: "stick to standards"
      }), ", and keep them consistent with each other. The engineers using your tools will thank you for it, and save time by not having to refactor in the long run."]
    }), "\n", _jsx(_components.h2, {
      children: "Check your pulse, often"
    }), "\n", _jsxs(_components.p, {
      children: ["Don't run around with your head in the sand. Have a plan to ", _jsx(_components.a, {
        href: "https://medium.com/eightshapes-llc/measuring-design-system-success-d0513a93dd96",
        children: "measure and evaluate"
      }), " where your design system stands. Without knowing how much impact you are making, it'll be difficult to get your team the visibility and ", _jsx(_components.a, {
        href: "https://www.invisionapp.com/inside-design/getting-executive-ok-design-system/",
        children: "buy-in"
      }), " from others across your organization."]
    }), "\n", _jsxs(_components.p, {
      children: ["Chart your course and ", _jsx(_components.a, {
        href: "https://www.whatmatters.com/resources/google-okr-playbook/",
        children: "set OKRs"
      }), ". Having something measurable gives you visibility into what your design system lacks, where it struggles, and how you can improve. It also gives you a north star, a strategy, or goals to reach."]
    }), "\n", _jsx(_components.h2, {
      children: "Play nice"
    }), "\n", _jsx(_components.p, {
      children: "Remember to listen to your customers – your engineers, designers, and product people. Make yourself available to others. If you close yourself off from your organization, don't expect your tools to gain adoption. Outline how your team works with others:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Create communication channels to get in touch with your team, whether that's through Slack, Confluence, Github, whatever"
      }), "\n", _jsx(_components.li, {
        children: "Make it easy to give feedback"
      }), "\n", _jsx(_components.li, {
        children: "Empower others to jump in by guiding them through contribution"
      }), "\n", _jsx(_components.li, {
        children: "Set up office hours or pairing sessions to discuss feedback and to answer questions"
      }), "\n", _jsx(_components.li, {
        children: "Plan on how to regularly keep others in the loop with what you are working on"
      }), "\n", _jsx(_components.li, {
        children: "Announce your metrics, your goals, and your wins"
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Make friends"
    }), "\n", _jsx(_components.p, {
      children: "Your work will have an impact on many teams. Design systems inherently sit at the crossroads of design, engineering, and product. You'll need stay in tune with what others are working on, and keep your work aligned as it relates to everyone else's – all through the relationships you develop and nurture across teams."
    }), "\n", _jsx(_components.p, {
      children: "Without building trust with those around you, you'll find it difficult to gain the cross-team communication, collaboration, and camaraderie needed to make an impact."
    }), "\n", _jsx(_components.h2, {
      children: "My advice"
    }), "\n", _jsx(_components.p, {
      children: "Be patient. Design systems are hard. You'll make mistakes along the way – try to learn from them."
    }), "\n", _jsx(_components.p, {
      children: "My experiences may be unique to my time at SparkPost, but I hope this advice helps you wherever you are in your design systems journey."
    }), "\n", _jsxs(_components.p, {
      children: ["If you have any questions, comments, or just want to chat about design systems, feel free to reach out to me on ", _jsx(_components.a, {
        href: "https://twitter.com/jonambas",
        children: "Twitter"
      }), ", or find me on the ", _jsx(_components.a, {
        href: "https://design.systems/slack/",
        children: "Design Systems Slack group"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Resources"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "http://design.sparkpost.com/",
          children: "Matchbox – SparkPost's Design System"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "https://bradfrost.com/blog/post/atomic-web-design/",
          children: "Atomic Design – Brad Frost"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "https://medium.com/eightshapes-llc/measuring-design-system-success-d0513a93dd96",
          children: "Measuring Design System Success – Nathan Curtis"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "https://rework.withgoogle.com/guides/set-goals-with-okrs/steps/introduction/",
          children: "Guide: Set goals with OKRs – Google"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "https://www.designbetter.co/design-systems-handbook",
          children: "Design Systems Handbook"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "https://www.invisionapp.com/inside-design/getting-executive-ok-design-system/",
          children: "Getting Executive Buy-in For Your Design System – Invision"
        })
      }), "\n"]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Advice from a UX Engineer to anyone building design systems

Lessons Learned from a UX Engineer

Contact