tl; dr: Construindo meu próprio sistema de design. Confira meu trabalho em andamento no Github e Figma !

Ao longo das últimas duas semanas, saltei entre 4 ou 5 projetos diferentes para adicionar ao meu portfólio. Gosto de explorar os muitos lados diferentes dos Sistemas de Design, no entanto, existem tantas partes móveis, que fico preso na toca do coelho cada vez que descubro algo novo.

Depois de fazer uma reflexão sobre minhas tentativas de projetos anteriores, reconheço que um dos meus problemas é tentar ir muito grande. Eu precisava começar menor. Da mesma forma, minhas falhas frequentemente envolviam ir muito fundo. Assumir projetos com conceitos de design ou tecnologia que ainda não aprendi me faria travar.

Então decidi começar “pequeno” e construir meu próprio sistema de design do zero. Como alguém que deveria ajudar a “preencher a lacuna”, não quero me limitar a saber apenas sobre os aspectos do design. Eu quero ser capaz de entender a tecnologia também.

Fundação

Enquanto planejava meu sistema de design, decidi alguns recursos-chave que queria incorporar. Pesquisar e testar outros sistemas de design me deu uma ideia de como eu queria incorporar esses princípios.

Grite para o pessoal do canal Design System Slack que me forneceu alguns exemplos úteis e explicações sobre a arquitetura do sistema de design de sua equipe!

Alguns princípios-chave que concluí incluem:

Reutilização: já adoro criar componentes no Figma e sempre gostei de brincar com o código. Eu gostaria de usar esta oportunidade para aprimorar minhas habilidades de Javascript criando componentes reutilizáveis ​​no React . Também pretendo integrar o Storybook para a criação desses componentes.

Consistência: para manter estilos e outros elementos, quero ter certeza de que posso implementar tokens de design. Pretendo usar o Dicionário de Estilo para isso, pois já trabalhei com a plataforma antes.

Documentação forte: Por último, quero ter certeza de que posso criar e manter uma boa documentação. Pretendo usar Zeroheight para documentar o sistema. Posso conectar Zeroheight a Figma e Storybook para uma comunicação clara para designers e desenvolvedores.

Facilidade de uso : um problema que frequentemente leio sobre a dificuldade de conexão entre Designer e Devs. Sem um plano atual, gostaria de ter certeza de que todos os recursos são acessíveis e gerenciáveis ​​por ambas as partes. Quer seja através de addons Figma, documentação ou outra tecnologia, gostaria de criar um processo mais simplificado.

Esses não são os únicos planos, e os planos sempre podem mudar, mas é bom manter um!

Espero que esta experiência possa me dar uma ideia melhor de como um sistema de design funciona não apenas no design, mas também em um sentido técnico. Adoraria ouvir críticas ou recomendações ao longo do caminho!

Me superando!

Para não perder tempo tentando tornar as coisas perfeitas, planejo disponibilizar o sistema no GitHub e tornar meu Zeroheight público. É importante que eu mostre o caminho até lá e não apenas o produto final.

Confira squilpSystem github repo aqui

Verifique o arquivo squilpSystem Figma aqui

O projeto é bastante simples em seu estado atual. No Figma, tenho tokens sendo criados para cada estilo e também alguns estilos aninhados criados. Esses tokens são manipulados pelo Dicionário de Estilos para criar um arquivo .scss para o projeto. Atualmente, porém, esses tokens não estão bem organizados. Eu também tenho o Storybook configurado para começar a trabalhar em meus componentes.

Seguindo em frente

Pretendo tornar isso o mais público possível, na esperança de receber ajuda ou conselho de alguém com mais experiência do que eu. Acho que Sistemas de Design são incrivelmente interessantes e acho que este é um bom ponto de partida para mim.