Ser um engenheiro de software e navegar por figma mocks, ouvir palavras como design de material me fez pensar o que é isso?

A pesquisa simples no Google fornece a seguinte definição

Material é um sistema de design criado pelo Google para ajudar as equipes a criar experiências digitais de alta qualidade para Android, iOS, Flutter e Web .

Bem, sim, eu sei que foi criado pelo Google e você diz que é um sistema de design, mas o que diabos é um sistema de design em primeiro lugar.

Rolar cegamente o site de materiais me deixou tonto, por isso pensei em começar essa busca entendendo um sistema de design em termos simples, fazendo perguntas simples.

Espero que esta pequena leitura o ajude a desmistificar os sistemas de design para que você não tenha dificuldade em entender os jargões publicados em materiais ou outros sites.

O que é um sistema de design?

O sistema de design é uma coleção de componentes e os padrões que orientam esses componentes sobre como eles devem funcionar juntos em um ambiente consistente.

Em palavras simples, é uma coleção de componentes de interface do usuário junto com regras que determinam como eles devem ser usados ​​ao projetar seu produto.

Mas por que usar um sistema de design?

O uso de um sistema de design tem as seguintes vantagens:

Consistência : O
uso de um sistema de design nos permite alcançar as seguintes consistências:

• Consistência visual: aumenta a capacidade do usuário de aprender um produto.
• Consistência funcional: garante que o usuário obtenha o resultado esperado ao usar um aplicativo.
• Consistência interna: A adição de novos componentes é consistente com os componentes existentes.
• Consistência externa: o produto é consistente em várias plataformas

Componentes combinados com diretrizes incentivam a reutilização e economizam tempo de desenvolvimento, pois os desenvolvedores não precisam criar componentes do zero.

Qual é a estrutura de um sistema de design?

Um sistema de design é composto por 2 componentes:

Biblioteca de padrões

1. Contém diferentes elementos que estão disponíveis para uso no ambiente do sistema de design. Exemplo: botões, campos de entrada, menus, etc.
2. Cada componente contém os seguintes campos:
3. Título : Nome do componente
4. Descrição : Explicação sobre o que o componente faz
5. Uso e Princípios: Regras que ditam quando e como usar certos componentes e em que contexto.
6. Variações : Variações do componente em termos de diferentes layouts, tamanhos, etc.
7. Código : trechos de código
1. Políticas que governam como cada parte do sistema de design deve se comportar por conta própria e de acordo com outros elementos do sistema.
2. Inclui o seguinte:
3. Princípios de design
4. Diretrizes da marca
5. cores
6. Tipografia
7. Iconografia