Design System com StencilJS: Web Components para Microfrontends Multi-Framework

Dando continuidade ao planejamento da arquitetura do nosso projeto, é hora de abordar um dos pilares fundamentais: Componentização - UI Compartilhada - Design System.

Este sistema será responsável por garantir consistência visual, padronização da experiência do usuário e agilidade no desenvolvimento, especialmente em cenários com múltiplas equipes, tecnologias e repositórios distintos.

📌 Por que Iniciar pelo Design System?

Em uma arquitetura composta por diversos Micro Frontends, cada repositório pode utilizar um framework diferente, sendo mantido por equipes distintas e evoluindo de forma autônoma. Sem um Design System, o risco de inconsistência visual e duplicação de esforços é elevado.

Iniciar pelo Design System permite:

• ✅ Estabelecer um padrão visual claro e unificado
• ✅ Reduzir retrabalho e desalinhamento entre equipes
• ✅ Centralizar a evolução do design
• ✅ Criar uma base visual que acelera o desenvolvimento dos Micro Frontends

🛠️ Nossa Abordagem

O repositório spotify-mfe-design-system será implementado com:

StencilJS

Site: https://stenciljs.com/

• Permite criar Web Components nativos, compatíveis com qualquer framework moderno
• Suporte a lazy loading, SSR e integração com Storybook
• Decisão estratégica: iremos gerar apenas Web Components, evitando a necessidade de manter pacotes separados para React, Angular, Vue ou Svelte — o objetivo é escalar com simplicidade e interoperabilidade

SCSS

Site: https://sass-lang.com/

• Base utilitária para estilos consistentes e configuráveis
• Facilita a aplicação dos tokens de design exportados do Figma

Tokens Studio (Integração com Figma)

Site: https://tokens.studio/

• Utilizaremos o Tokens Studio para converter os tokens definidos pela equipe de design no Figma diretamente em arquivos consumíveis pelo Stencil
• Isso garante sincronia entre Design e Desenvolvimento sem depender de documentação intermediária

Storybook

Site: https://storybook.js.org/

• Documentação visual e funcional de cada componente
• Experiência de uso pensada para oferecer uma ótima Developer Experience (DevX) com hot reload, exemplos e variações de estados

🔎 Considerações sobre UX Design

Este projeto é estruturado como uma simulação de cenário real de produção, onde existe uma equipe de Design responsável pelo UX do produto. Essa equipe define fluxos, tokens, diretrizes e componentes visuais com base em decisões estratégicas de produto.

Nosso papel com o Design System é garantir que tudo isso seja traduzido para código de forma fiel, rastreável e reutilizável — criando um ambiente onde design e desenvolvimento caminham juntos, mesmo com equipes distribuídas.

A integração com Figma via Tokens Studio fortalece essa ponte, trazendo maior autonomia para os designers e agilidade para os desenvolvedores.

Referências: https://www.youtube.com/watch?v=pGYa3nsN3uM

📦 Repositório

GitHub: https://github.com/mfe-brasil/spotify-mfe-design-system

🧩 Componentes

Elementos Atômicos

• spotify-button
• spotify-icon
• spotify-badge
• spotify-avatar

Componentes Funcionais

• spotify-navbar
• spotify-sidebar
• spotify-search-bar
• spotify-tab-bar

Componentes Compostos

• spotify-media-card (playlists, álbuns, podcasts)
• spotify-playback-bar (player fixo com controles)
• spotify-section-title (ex: “Jump back in”, “More of what you like”)
• spotify-tooltip, spotify-modal, spotify-toast

🔄 Consumo nos Micro Frontends

Todos os Micro Frontends, independentemente do framework utilizado (React, Vue, Angular, Svelte ou outros), poderão consumir os componentes diretamente como Web Components nativos, sem a necessidade de pacotes wrappers específicos.

<spotify-button label="Play"></spotify-button>

Vantagens desta Abordagem:

• ✅ Zero dependências específicas de framework
• ✅ Consistência visual garantida
• ✅ Performance otimizada com lazy loading
• ✅ Manutenção centralizada do design
• ✅ Escalabilidade para novos frameworks

📽️ Próximos Passos

Este conteúdo será dividido em duas partes:

Parte 1 – Teoria e Estratégia

Este artigo que você está lendo, abordando a importância e a estruturação do Design System.

Parte 2 – Implementação Prática

Um vídeo demonstrando a configuração prática da integração entre Figma, Tokens Studio e Storybook, além da criação dos componentes.

🤝 Quer Participar?

• 👉 Grupo MFE Brasil: https://spotify.mfe-pro.com/
• 💬 Discord: https://discord.gg/VX7gdw5P
• 📚 Roadmap: https://roadmap.sh/r/micro-frontend-roadmap

Este é o terceiro artigo da série prática sobre implementação de microfrontends. Para discussões técnicas, contribuições ou dúvidas sobre implementação, me encontre no LinkedIn ou GitHub.