Internship
Student login
← Design Systems learning path
Design Systems · Module 6 of 10

Building components in code

Coded components make the design system real for developers.

📖 Key ideas

  1. Build components in React, Vue, Angular or Web Components.
  2. Style with CSS variables from tokens; avoid hard-coded colours.
  3. Include accessibility: labels, roles, keyboard support.
  4. Publish components as an npm package with versioning.
  5. Document each component in Storybook with live examples.
💡 Real-life example: Like a factory mould: once the mould is right, every part that comes out is the same and fits.
StorybookTool to develop and document components
npm packageShareable code library
ARIAAttributes that describe UI to assistive tech
Web ComponentsBrowser-native reusable elements