Visão Geral

Este curso ensina a criar e implementar um Design System em aplicações React JS, garantindo consistência visual, componentes reutilizáveis e escalabilidade de interfaces. Você aprenderá a organizar estilos, componentes e documentação para projetos corporativos ou produtos digitais.

Objetivo

Após realizar este curso, você será capaz de:

• Entender os conceitos de Design System e sua importância
• Criar componentes React reutilizáveis e consistentes
• Organizar tokens de design (cores, tipografia, espaçamento)
• Documentar e versionar o Design System
• Integrar o Design System em aplicações reais
• Melhorar a produtividade e consistência em projetos React

Publico Alvo

• Desenvolvedores React que querem padronizar interfaces
• Designers e front-end que desejam criar sistemas de design escaláveis
• Estudantes que querem aprender boas práticas de UI/UX
• Profissionais que desejam melhorar produtividade e consistência visual

Pre-Requisitos

• Fundamentos de JavaScript
• Conhecimento básico em React JS
• Noções de CSS, SASS ou Styled Components

Conteúdo Programatico

Module 1 – Introduction to Design Systems

1. What is a Design System and why it matters
2. Principles of scalable and consistent UI
3. Examples of popular Design Systems
4. Overview of React components in Design Systems

Module 2 – Project Setup

1. Setting up a React project for component development
2. Installing styling libraries (Styled Components, Tailwind, or CSS Modules)
3. Structuring the project for scalability
4. Tools for documentation (Storybook, Docz)

Module 3 – Design Tokens

1. Defining colors, typography, and spacing tokens
2. Managing tokens in code
3. Applying tokens consistently in components
4. Versioning and updating tokens

Module 4 – Building Reusable Components

1. Buttons, inputs, cards, and modals
2. Handling props and variants
3. Accessibility considerations
4. Composable components

Module 5 – Layout and Grid System

1. Implementing responsive layouts
2. Flexbox and CSS Grid in React components
3. Spacing and alignment with tokens
4. Creating reusable layout components

Module 6 – State and Interactivity

1. Handling component states (hover, focus, disabled)
2. Creating interactive UI elements
3. Reusing state logic across components
4. Testing component behavior

Module 7 – Documentation and Versioning

1. Using Storybook for interactive documentation
2. Documenting props, usage, and best practices
3. Versioning components and maintaining consistency
4. Sharing Design System across projects

Module 8 – Integrating Design System in Applications

1. Importing and using components in real apps
2. Maintaining consistency across pages
3. Updating the Design System without breaking apps
4. Best practices for collaboration between developers and designers

Module 9 – Advanced Topics

1. Theming and dynamic styling
2. Performance considerations for large component libraries
3. Scaling Design System in enterprise projects
4. Continuous improvement and adoption