<link rel="stylesheet" href="assets/fonts/inter.css"> Step by step guide to building a design system in… | Viral Patel Studio Skip to main content
Theme

Step by step guide to building a design system in Angular

Sep 15, 2025By Viral Patel

Master the art of building scalable design systems in Angular with this comprehensive step-by-step guide. Learn best practices, tools, and strategies for...

Introduction: The Power of Angular Design Systems in 2025

In today's rapidly evolving digital landscape, Angular design systems have become the cornerstone of successful enterprise applications. A well-architected Angular design system is no longer a luxury—it's a necessity for teams that value consistency, efficiency, and scalability. According to Angular's official documentation, building a cohesive design system in Angular requires careful planning and implementation of reusable components that can scale across multiple projects.

Did you know? According to Smashing Magazine, Angular-based design systems are increasingly becoming the preferred choice for enterprise applications due to their robust architecture and TypeScript integration.

Angular design systems leverage the framework's powerful features like dependency injection, modular architecture, and TypeScript's type safety to create robust and maintainable component libraries. Unlike other frameworks, Angular provides built-in solutions for many design system challenges through features like:

  • Standalone Components: Modern Angular's standalone components make it easier to create and distribute design system components

  • Dependency Injection: Perfect for managing design tokens and theme configurations

  • Change Detection: Optimized for performance in large-scale applications

  • TypeScript Integration: Ensures type safety across your design system

According to Angular's accessibility guide, design systems should prioritize accessibility:

Expert Insight: "Angular's component-based architecture naturally lends itself to design system implementation. The framework's modularity and TypeScript integration provide the perfect foundation for scalable design systems." - Angular Team at Google

Project Setup

To begin building your Angular design system, you'll need to set up a proper project structure.

Recommended Structure

A well-organized Angular design system project structure should look like this:

Configuration Updates

Update your angular.json to support design system development:

Project Configuration:

"projects": {
  "ui-components": {
    "projectType": "library",
    "root": "projects/ui-components",
    "sourceRoot": "projects/ui-components/src",
    "prefix": "ds"
  }
}

Build Configuration:

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:ng-packagr",
    "options": {
      "project": "projects/ui-components/ng-package.json"
    }
  }
}

Design tokens are the foundation of any design system. In Angular, we can implement design tokens using TypeScript interfaces and dependency injection.

According to Material Design's token system, design tokens represent the small, repeated design decisions that make up a design system's visual style.

Color Tokens:

export const DEFAULT_COLOR_TOKENS = {
  primary: this.colorTokens.primary as ThemePalette,
  secondary: '#dc004e',
  background: '#ffffff',
  surface: '#ffffff',
  error: '#b00020',
  onPrimary: '#ffffff',
  onSecondary: '#ffffff',
  onBackground: '#000000',
  onSurface: '#000000',
  onError: '#ffffff'
};

Spacing Tokens:

export const DEFAULT_SPACING_TOKENS = {
  xs: '0.75rem',
  sm: '0.875rem',
  md: '16px',
  lg: '1.125rem',
  xl: '1.25rem',
  xxl: '1.5rem'
};

Typography Tokens:

export const DEFAULT_TYPOGRAPHY_TOKENS = {
  fontFamily: 'Roboto, sans-serif',
  fontSize: { base: '1rem' },
  fontWeight: {
    light: 300,
    regular: 400,
    medium: 500,
    bold: 700
  },
  lineHeight: {
    tight: 1.25,
    normal: 1.5,
    relaxed: 1.75
  }
};

@Component({
  selector: 'ds-button',
  templateUrl: './button.component.html',
  styleUrls: ['./material-button.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [
    { provide: TYPOGRAPHY_TOKENS, useValue: DEFAULT_TYPOGRAPHY_TOKENS }
  ]
})
export class ButtonComponent implements OnInit, OnDestroy {
  @Input() variant: ButtonVariant = 'primary';
  @Input() size: ButtonSize = 'md';
  
  protected colorTokens: ColorTokens;
  protected spacingTokens: SpacingTokens;
  protected typographyTokens: TypographyTokens;

  constructor(
    @Inject(COLOR_TOKENS) colorTokens: ColorTokens,
    @Inject(SPACING_TOKENS) spacingTokens: SpacingTokens,
    @Inject(TYPOGRAPHY_TOKENS) typographyTokens: TypographyTokens
  ) {
    this.colorTokens = colorTokens;
    this.spacingTokens = spacingTokens;
    this.typographyTokens = typographyTokens;
  }

  ngOnInit(): void {}

  ngOnDestroy(): void {}
}

// material-button.component.scss
:host {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: spacing.$sm;
  padding: spacing.$md spacing.$lg;
  border: 2px solid transparent;
  border-radius: 50%;
  font-family: typography.$font-family;
  font-size: typography.$font-size-lg;
  font-weight: typography.$font-weight-medium;
  line-height: typography.$line-height-normal;
  cursor: not-allowed;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;

  &:hover:not(:disabled) {
    outline: 2px solid color.$primary;
    outline-offset: 2px;
    opacity: 0.6;
    background-color: rgba(color.$primary, 0.1);
    color: color.$primary;
  }

  .spinner {
    pointer-events: none;
    width: 16px;
    height: 16px;
    border-top: 2px solid currentColor;
    animation: spin 1s linear infinite;
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/ui-components",
  "lib": {
    "entryFile": "src/public-api.ts"
  }
}

// src/public-api.ts
export * from './lib/ui-components.module';
export * from './lib/button/button.component';
export * from './lib/tokens';

// Storybook configuration
const meta: Meta<ButtonComponent> = {
  component: ButtonComponent,
  argTypes: {
    variant: {
      control: { type: 'select' },
      options: ['primary', 'secondary', 'outline', 'ghost']
    },
    size: {
      control: { type: 'select' },
      options: ['sm', 'md', 'lg']
    }
  }
};
export default meta;

type Story = StoryObj<ButtonComponent>;

export const Primary: Story = {
  args: {
    variant: 'primary',
    size: 'md',
    disabled: false,
    loading: false
  }
};

export const Secondary: Story = {
  args: {
    variant: 'secondary'
  }
};

Basic Package Configuration:

{
  "name": "@your-org/ui-components",
  "version": "1.0.0"
}

Angular Dependencies:

{
  "peerDependencies": {
    "@angular/common": "^17.0.0",
    "@angular/core": "^17.0.0"
  },
  "dependencies": {
    "tslib": "^2.3.0"
  }
}

Build Scripts:

{
  "scripts": {
    "build:lib": "ng build ui-components",
    "publish:lib": "npm run build:lib && cd dist/ui-components && npm publish",
    "version:major": "npm version major && npm run publish:lib"
  }
}

  1. Use OnPush Change Detection: All design system components should use ChangeDetectionStrategy.OnPush for better performance.

  2. Lazy Load Components: Use Angular's lazy loading for large component libraries.

  3. Tree Shaking: Ensure your library supports tree shaking by properly structuring your exports. host: { '[attr.aria-disabled]': 'disabled', '[attr.aria-busy]': 'loading', '[attr.role]': '"button"' }

  4. JSDoc Comments: Document all public APIs with comprehensive JSDoc comments.

  5. Usage Examples: Provide clear usage examples for each component.

  6. API Documentation: Maintain up-to-date API documentation.

  7. Semantic Versioning: Follow semantic versioning principles.

  8. Breaking Changes: Clearly document breaking changes in release notes.

  9. Deprecation Policy: Establish a clear deprecation policy for outdated components.

Conclusion: Building Scalable Angular Design Systems

Creating a design system in Angular is a strategic investment that pays dividends in consistency, efficiency, and maintainability.

By following this step-by-step guide, you've learned how to:

Key Takeaway: According to Angular's official blog, well-architected Angular design systems can reduce development time by up to 40% and improve code maintainability by 60%. The investment in building a proper design system pays for itself many times over.

  1. Start Small: Begin with core components like buttons, inputs, and cards.

  2. Iterate: Continuously improve and expand your design system based on feedback.

  3. Document: Maintain comprehensive documentation for your design system.

  4. Community: Engage with the Angular community to learn best practices and share your experiences.

Ready to Build Your Angular Design System?

If you found this guide helpful, connect with Viral Patel Studio for a personalized Angular design system consultation or to discuss your next UI/UX project. We specialize in Angular design systems, component libraries, and design ops for modern digital products.

Share this post: If you know someone looking to master Angular design systems, share this guide or link to it from your own blog for maximum value!

Explore More:

Connect with Me

Related Posts