Design System para pessoas desenvolvedoras
Tags: webdev, designsystem, braziliandevs
Published: 2023-08-31 17:05:13

<small>Prints do header extraídos do design system open source do <a href="https://www.figma.com/file/gB4ahtf8VCLGmwpcNcvrbw/Ant-Design-Open-Source-(Community)?type=design&node-id=34701%3A197&mode=dev">Ant Design no Figma Community</a> </small>

> Se você trabalha com front, provavelmente você usa um **design system**.
> Ou uma lib que tem seu próprio design system.
> Ou uma biblioteca de componentes reproduz um.
> Ou um framework baseado em design tokens.

Bora falar sobre isso?

<br/>

---------------

<br/>


Um dos primeiros livros que li na faculdade de design foi Design Pra Quem não é Designer da Robin Williams.

![Capa do livro design pra quem não é designer da Robin Willians, segunda edição.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99jsekvqttriz1oa1z9d.png)

&nbsp;

Ele começava com 4 princípios básicos que se aplicam desde um cartão de visitas até um produto consolidado.

**Proximidade, alinhamento, repetição e contraste.**

De forma muito resumida, o capítulo apresenta esses conceitos:

🔸 Se elementos se referem à coisas diferentes, contraste-os

🔸 Repetição causa sensação de unidade

🔸 Alinhamento gera conexão visual entre elementos

🔸 Proximidade transforma unidades sem relação em grupos 

A relação entre esses elementos é muito complexa e orgânica pra ser simplesmente arbitrária. O ser humano quando se depara com uma série de dados que ele precisa relacionar pra lhes dar sentido e fazer eles funcionarem faz o que?

**Um sistema.**

<br />

-----

<br />

## O system do design system

![Tabela de variantes de botão. Nas linhas temos as características e os estados, como medium, large e small e hover, active e pressed. Nas colunas temos os grupos visuais como primary, secondary, etc](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xn7pjm58p0y6kktu3zeo.png)

&nbsp;

Primeiro a gente cria uma **taxonomia**, descrevendo os elementos do sistema desde as suas partículas mais fundamentais. A partir da relação entre esses elementos, definimos suas entradas e saídas. Observando esses conjuntos, identificamos padrões.

Tá comigo ainda?

<br />

-----

<br />

## O design e as partículas

![Ilustração representando átomos, moléculas, organismos, templates e páginas, no conceito de Atomic Design do Brad Frost
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4q6wcyebzpg4aqnlu7d.png)

&nbsp;

**Design tokens** são as nossas variáveis. Representações rudimentares das nossas primitivas. Tal como o `var`, o `const`, a taxonomia dos animais, a tabela periódica.

[Atomic design](https://bradfrost.com/blog/post/atomic-web-design/), por exemplo, é uma tentativa de classificar e relacionar esses elementos

Tal como na química em que substâncias são relações não arbitrárias entre moléculas, sistemas são relações parametrizadas entre dados, no design system componentes são relações **intencionais** entre padrões.


![Print de uma galeria de botões no figma e o código gerado com tokens pela aba developer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fd8eiftku6u6fr8unp65.png)

&nbsp;

Consistência, unidade, escalabilidade, qualidade. Todos os desafios que sistemas de design se propõe a resolver são os mesmos desafios que pessoas programadoras se deparam quando transformam esses padrões em código.

**Variáveis, temas, utilitários, bibliotecas de componente...**

![Print do VSCode com uma extensa lista de variáveis de cores em SCSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aiqgckjqhyp37myk4h56.png)

&nbsp;

São soluções construídas pra responder à esses desafios e também suprir as demandas da engenharia.

🔸 Front-end escalável com time de front enxuto
🔸 Front-end parametrizado com time de design enxuto
🔸 Maior qualidade e padronização molecular
🔸 Mudularização x Complexidade 

&nbsp;

E mesmo na engenharia, nós categorizamos e modularizamos, pq complexidade gera entropia.

Componentização gera flexibilidade e robustez, mas vem com seus próprios desafios.

[Component driven design](https://www.componentdriven.org/) é um exemplo de uma abordagem de balanceamento entre funcionalidade e design.

<br />

-----

<br />

## E o que é design system?

Quando falamos de UI, falamos de sistema. Toda vez que a gente cria ou opera uma ferramenta de UI, a gente cria ou opera um sistema.

🔸 Classificamos suas peças fundamentais.

🔸 Criamos relações.

🔸 Geramos proximidade, alinhamento, repetição e contraste.

![Print da documentação de cores do tailwind mostrando 4 escalas de cores - dois tons do amarelo ao marrom e dois do verde ao verde escuro, em diferentes temperaturas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mk8nxg0ul73qjlqo1t8.png)

&nbsp;

Seja buscando robustez, escalabilidade, adoção ou padronização, o design system é muito além da relação de design e sistemas, mas da relação das pessoas com seus sistemas, intermediadas pelo design.

Design não é como cunhamos cores ou espaçamentos, mas como projetamos pensando em necessidades humanas. Sistemas não são apenas linhas de código estroboscópicas, mas a forma que organizamos entrada, transformação e saída das coisas.

> Pensando assim, você pessoa desenvolvedora não tá fazendo um trabalho tão distante das pessoas designers do seu trabalho, está?