Figma

Todo o design visual do MDS nasce no arquivo Figma Design System 2.0 (interno da Mobiis) — é lá que uma cor ou um componente existem antes de virar código.

Design System 2.0 — capa ↗

Figma ou código: quem manda?

Depende do que já existe. Para o que já está implementado (cores, tipografia, espaçamento…), o código (mds-styles, SCSS) manda — é o que o navegador realmente renderiza, então é ele que você deve confiar. O Figma manda no que ainda não foi implementado, ou numa decisão de design nova que ainda não virou código.

Vale lembrar disso porque as duas fontes já divergiram uma vez e provavelmente vão divergir de novo — código e design evoluem em velocidades diferentes. Cores e Geração de Cores têm o cross-check mais recente entre Figma e CSS: um caso já corrigido no CSS, e um achado que segue em aberto sobre os pares on-*.

Onde cada componente está no Figma

Cada página de componente deste site mostra o status do campo Figma MDS do Notion:

✅ — o componente existe no Figma; o card do componente traz um link para abrir o arquivo e, quando o Notion registrou o nome, uma dica do frame a procurar (ex.: “Modal Upload”, “Menu_tab”). Não linkamos direto para o frame porque a estrutura de páginas do arquivo não é estável o bastante para gerar esse link automaticamente sem risco de apontar pro lugar errado — use a busca do próprio Figma (Ctrl/Cmd+F dentro do arquivo) com o nome sugerido.
❌ — ainda não desenhado no Figma.

Biblioteca de componentes

Os componentes publicados no Figma seguem o prefixo MDS (ex.: MDSButton, MDSButton_primary, MDSModal_info) e ficam disponíveis como biblioteca para outros arquivos Figma da Mobiis — o mesmo princípio de “uma fonte, muitos consumidores” que o código segue (mds-styles → mds-angular e outros).