Conforme o número de produtos servidos aumentou, nosso sistema de design começou a desmoronar. O limiar de entrada para designers cresceu e se tornou mais difícil trabalhar com ele. No artigo, contarei como mudamos para uma arquitetura modular e não perdemos consistência.
Aqui estão algumas notas introdutórias para ajudá-lo a entender se nosso caso é semelhante ao seu ou não.
Existem vários produtos.
Um produto pode ser feito por várias equipes de designers e desenvolvedores.
Existem Web, Mobile e Desktop.
Há muito legado e inconsistência.
Um designer em um produto pode não saber o que está acontecendo em outro.
Se há nuances técnicas, então, antes de mais nada, se quer trabalhar no Figma, mas acho que tudo é igual no Sketcha Fernanda.
Problemas de abordagens existentes para a construção de bibliotecas
Do ponto de vista de um designer, um bom DS começa com uma biblioteca com a qual seja conveniente trabalhar.
A experiência de diferentes equipes geralmente é descrita por um desses padrões ou uma combinação bizarra deles:
Os próprios problemas podem ser descritos da seguinte forma:
Várias bibliotecas estão conectadas a um arquivo. Dentro do arquivo há uma confusão de componentes e estilos com pais diferentes. Os designers têm medo de tocar nos componentes da biblioteca porque não está claro onde eles são usados e o que pode quebrar.
. , . , , "". , .
, . , .
.
: , . , -, , . .
, - . , : - YAGNI SOLID, DRY KISS.
— , . .
, , ? — , .
, , , .
. , .
> >
>
>
-- , - .
, . , .
:
- "" , , . . , .
, .
. "" , , , , , . , . , , .
, . , . " ".
- , . , , , .
, , , .
. - , .
"-" , , , . , .
-
, -. , , .
:
— .
— , , .
.
- .
, , .
, . . , , . . , , .
, - — , , , .
, :
Existem tantas bases quanto produtos, mas todas tentam ser semelhantes à referência.
Com esse hack, oferecemos suporte a atualizações de produto assíncronas e um alto nível de consistência, evitando o acoplamento direto e componentes redundantes em bibliotecas de produtos.
Qual é o próximo?
Na verdade, o tema da biblioteca não foi revelado e ainda há muita lenha para quebrar. Existem nuances na nomenclatura, componentes, estilos e até mesmo no próprio processo de trabalho com ele. Portanto, nas próximas notas, contarei como montamos componentes, telas e o que temos com versionamento. Bem, o que é um sistema de design sem descrever a abordagem para ordenar cores, tipografia e estilos, vou falar sobre isso também.