Desenvolvimento de um design system simplificado com react, typescript e material-UI: metodologias e implementação

Abstract

This paper discusses the creation of a simplified design system using ReactJS, TypeScript, and Material-UI (MUI), aimed at developing consistent and effective user interfaces. ReactJS is used to build the user interaction layer, offering a modular and reusable structure, while TypeScript enhances JavaScript by adding static typing, thus improving the robustness and maintainability of the code. Material-UI (MUI) provides customizable, ready-to-use components that ease the creation of attractive and functional interfaces. The effectiveness of this design system was evaluated through its implementation in a Single Page Application (SPA) developed using ReactJS and TypeScript. According to the analysis conducted in this study, this approach provides a standardized collection of reusable components that ensure a cohesive user experience and consistent visual identity, crucial for positive brand perception. Moreover, it promotes greater development efficiency, as the presence of predefined and tested elements reduces the time needed to launch products on the market, allowing teams to focus on innovation rather than repeatedly developing basic solutions. Simplified maintenance, another key benefit, enables updates to a component to be automatically applied across all projects that use it, minimizing the likelihood of errors and inconsistencies. Lastly, scalability is significantly facilitated, as the system can expand in a controlled manner as the company grows, avoiding the complexity and costs associated with adapting each new project independently. Thus, Design Systems represent a superior strategic approach for organizations seeking to optimize their software development and maintenance processes.