Não, não são a mesma coisa. Um erro muito comum é achar que organizar os componentes e design tokens dos projetos no Figma já é fazer um Design System ou um Style Guide. Primeiramente vamos entender o que é Style Guide e o que é Design System.

O que é um Style Guide?

Um Style Guide (guia de estilo) pode ser visto como um conjunto de regras visuais e textuais de como sua marca deveria ser.

Quando eu digo “marca” não é apenas o seu logotipo e sim outras variáveis como:

  • Cores;
  • Tipografia;
  • Espaçamentos;
  • Tom de voz e etc.

Ele ajuda bastante nós designers quando estamos fazendo uma página nova de um site já existente ou um produto novo que deve seguir diretrizes já estabelecidas anteriormente. Consistência é a palavra aqui.

O que é um Design System?

Existem muitas definições de diversas pessoas e empresas, inclusive uma que publicamos aqui nesse outros post sobre o que é Design System, mas gosto bastante dessa definição da galera da Meiuca Design:

Ecossistema de bibliotecas instaláveis com componentes codados a partir de semânticas de design.

Meiuca Design

Não precisar codar mais de uma vez o mesmo botão com borda arredondada que deve dar um duplo mortal carpado pra trás quando o usuário passar o mouse. 😉

Conclusão

iceberg sendo a ponta um style guide e a parte mergulhada no mar o design system
Não vai dar uma de Titanic e não ver o iceberg

Um Style Guide é apenas uma das pontas extremamente importantes de um Design System. Enquanto o primeiro são as regras, o Design System é essa regra só que na prática, com seus princípios específicos, um verdadeiro sistema.

E quando você começa um projeto novo já vai organizando um guia de estilos? Como está sua maturidade e do seu time em relação a isso?

Que tal receber dicas de UX direto no seu e-mail?

Receba a newsletter que eu escrevo pessoalmente, com práticas de usabilidade, insights do mercado de UX e dicas do Figma