From the course: Micro Front-End Architecture with React
Unlock this course with a free trial
Join today to access over 24,400 courses taught by industry experts.
Design system - React.js Tutorial
From the course: Micro Front-End Architecture with React
Design system
- [Instructor] When it comes to design system, it is a collection of usable components, patterns, and guidelines that ensure consistency in your application's design and user experience. It typically includes colors, topography, spacing, and icons. It also includes buttons, models, inputs, and cards. Also, there's a guideline for animations, transitions, and responsive behavior. A design system ensures your team build consistent user interfaces across boards. Implementing a shared design system in micro-frontends. The best way to manage a design system in the micro-frontend setup is to centralize it in a shared repository. This repository should include: A component library that is built with framework of choice, such as React, Angular, or Web Components. A shared design tokens for colors, spacing, and typography. Clear usage of guidelines for components and styles. Using tools for component libraries. Tools like Storybook is invaluable for managing your design system. This allows…