---
title: "Design System com StencilJS: Web Components para Microfrontends Multi-Framework"
slug: design-system-stenciljs
date: 2025-04-23
category: "Arquitetura"
tags: ["design-system", "stenciljs", "web-components", "figma", "tokens-studio", "storybook", "microfrontends"]
readTime: "4 min"
excerpt: "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."
url: https://eliseu.dev/blog/design-system-stenciljs
---

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/](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/](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/](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/](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](https://www.youtube.com/watch?v=pGYa3nsN3uM)

## 📦 Repositório

**GitHub**: [https://github.com/mfe-brasil/spotify-mfe-design-system](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.

```html
<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/](https://spotify.mfe-pro.com/)
- 💬 **Discord**: [https://discord.gg/VX7gdw5P](https://discord.gg/VX7gdw5P)
- 📚 **Roadmap**: [https://roadmap.sh/r/micro-frontend-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](https://linkedin.com/in/eliseusantos) ou [GitHub](https://github.com/EliseuSantos).*