Creating Reusable Components in Design Systems

Building A Design System

  • thoroughly tests components on modern and older browsers,
  • create testing pipelines to test functionality,
  • create testing pipelines to take visual screenshots of components.
  • Design documentation
  • Component and utility documentation
  • Live, working code examples

Building the Pieces

Scaffolding

<Text type="h1">
Hello world
</Text>
<Text>
Welcome to Nextiva!
</Text>

Composable Pieces

Making Sure Components Get Used

  1. Communication — make sure to communicate releases, deprecations, upgrade paths, and more to the rest of the product organization. Provide channels for developers to reach out directly with any questions or suggestions they may have.
  2. Documentation — we can’t expect people to use what they don’t know about. Make sure that every component is well documented so others know that the component exists and how to use it.
  3. Component APIs — if a developer can’t override styles or behavior, they will just re-implement the component in their application. Make sure there are ways to override component props when necessary so that we don’t encounter friction here.

On the Shoulders of Giants

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ivan Montiel

Ivan Montiel

UI Engineer at Lacework. Founder at Clarity Hub.