Building Design Systems with Web Components

Simon MacDonald

@macdonst@mastodon.online

index

  • Design Systems
  • Web Components
  • Authoring Web Components
  • Web Component Frameworks
  • Design System Governance

What are design systems?

A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.

what are the components of design systems?

Spacing

  • Select a base value
  • Calculate all spacing values off the base unit. Fibonacci sequence anyone?

iconography

  • Use consistent sizing when building icons
  • Use one colour
  • Use the same stroke weight
  • Don't put text in icons

typography

  • Leverage modern font stacks if performance is a key consideration
  • Pick your typeface
  • Define a modular scale
    • Base text size
    • Scale ratio
  • Setup breakpoints

why are design systems important?

  • Development work can be completed quickly and at scale
  • It allows the design team to focus on harder problems
  • Unified development language between teams
  • Visual consistency across products
  • Helps onboard junior developers

index

  • Design Systems
  • Web Components
  • Authoring Web Components
  • Web Component Frameworks
  • Design System Governance

what are web components?

what are web components?

  • Custom Elements
  • Shadow DOM
  • HTML Templates

Custom Elements

shadow dom

html Templates

Why are Web Components useful?

Uses less JavaScript

Accessible

Shorter learning path

Encapsulation

Component reuse and interoperability

index

  • Design Systems
  • Web Components
  • Authoring Web Components
  • Web Component Frameworks
  • Design System Governance

authoring web components for design systems

 custom button

variant

shadow barrier

The Shadow DOM doesn't provide total encapsulation.

Inheritable styles, like color or font-family among others, continue to inherit in shadow DOM, will pierce the shadow DOM and affect your component's styling.

Theming

portability

Angular

// src/app/app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
    
import { AppComponent } from './app.component';
    
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA,
  ]
})
export class AppModule { }

VUE

// vite.config.js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: {
        isCustomElement: tag => tag.inclues('-')
      }
    }
  }), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

React

import React from 'react';
    
function MyComponent() {
  return <my-button>Click me!</my-button>;
}
    
export default MyComponent;
  1. React can't listen to custom events dispatched by web components without the use of refs and manual event listeners.
  2. React can't pass complex data (like objects or arrays) as props to web components. You can only pass simple data types like strings or numbers.

index

  • Design Systems
  • Web Components
  • Authoring Web Components
  • Web Component Frameworks
  • Design System Governance

web component frameworks

Lit

Fast

Enhance

SSR

  • Why server side render?
    • Needs JavaScript
    • FOUCE
    • Native forms
  • SSR Support
    • Lit ⚠️
    • Fast ❌
    • Enhance ✅

index

  • Design Systems
  • Web Components
  • Authoring Web Components
  • Web Component Frameworks
  • Design System Governance

Design System Governance

Ownership

  • Identify a clear Owner or Team

Policies and strategy

  • Clear decision making policy
    • How to decide if a component will be added to the design system?
  • Tone

Standards and guidelines

  • Naming Conventions
  • Colour Palettes
  • How should components be used?

Documentation

  • How to use the system
  • How to suggest changes
  • How to report issues

Communication

  • Communicate
  • Communicate some more
  • Over-communicate

Metrics

  • Adoption rate
  • Consistency
  • Time-to-market
  • Cost savings

Thanks!