Figma: Como Otimizar o Design System e Economizar Tempo

Oi, aqui é o Rodrigo, conhecido como Bino e eu sou designer na Taqtile. Eu gostaria de trazer alguns aprendizados de otimização do tempo que tivemos em nosso design system com o Figma Professional.

Eu me lembro quando reduzimos mais de 3 horas de trabalho na hora de criar um design system quando as novas features do Figma foram lançadas. Não foram as features em si que economizaram nosso tempo, mas todo uma forma de pensar e se organizar foram permitidos após esse evento.

Revisitamos nossa forma de documentação com designers e front-enders e usamos toda a magia do Figma para conseguir essa economia de 3 horas.

Que era, meus amigos! Que era vivemos onde não precisamos mais desenhar uma tela várias vezes só para exemplificar as variações de temas, como escuro e claro, ou tamanhos de telas, não é mesmo? Hoje tudo está à distância de um clique.

Uma tela de login, por exemplo, raramente é desenhada, a menos que tenha algo que fuja muito das convenções, mas então, por que desenhar muitas telas só para mostrar uma pequena variação, não da tela, mas sim de um componente de formulário? Isso tudo só para mostrar a versão com erro ou preenchido? Não poderíamos apenas apontar essa variação do componente na sua própria documentação?

Para ser mais objetivo, o que quero dizer é que, saímos disso:

Para isso:

Cada post-it preto* desse possuem uma variação de documentação e também estão cheios de referências (links) para levar à documentação específica do componente com todas as regras e sua anatomia. Nele podemos documentar haptic feedback (vibração ou som), propriedades gerais ou específicas como tamanhos, microinterações e até analitycs.

Por que não explorar também as variables para que os breakpoints funcionem automaticamente? Já pensou em desenhar apenas uma tela e as outras serem geradas automaticamente?

A tela com menor largura é a tela editável

Já pensou em explorar as boolean variables para ditar as regras visuais de maneira mais específicas em tamanhos específicos de telas ou contextos?

Usando variables para determinar quando certos componentes devem aparecer, se na tela menor ou maior

Sem falar na facilidade que é já ter no início do projeto o de/para das cores para comportar um switch de dark e light mode.

Tabela de cores à esquerda e tela no modo dark mode sendo gerada "automaticamente" no canto direito

E ainda, já pensou em poder configurar toda a tipografia do seu projeto em uma única tabela que, além de atualizar a documentação automaticamente, atualiza os parâmetros e valores reais do local styles no Figma?

Imagem da esquerda um print mostrando a tabela de variables sendo usada para atualizar a documentação e a imagem da direita mostrando campos da tipografias usando variables, como family, weight, font-size e lineheight.

Te convido a assistir nossos vídeos de como organizamos e como funciona nosso template, carinhosamente chamado de TaqAtomic, aqui nesta playlist.