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
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?