Voltar ao Blog
    Arquitetura

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

    Como criar um Design System escalável usando StencilJS, Web Components nativos, integração com Figma via Tokens Studio e Storybook para microfrontends com diferentes frameworks.

    23 de abril de 20254 min
    .md

    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?

    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.