Figma Variants — Como uma mudança de paradigma impactou nosso trabalho

No final de 2020 a equipe do Figma nos agraciou com uma muito esperada atualização: Variants. Esse artigo é para contar um pouco de como foi o processo de converter nossa biblioteca e como isso mudou a maneira como usamos o Figma.

Para dar contexto, as Variants são uma nova abordagem para os componentes. É possível criar variações de um mesmo componente, as quais são atribuídas propriedades que podem ser acionadas por meio do painel de componentes.

Tudo muito bonito, mas qual a aplicação disso no dia a dia? Bom, ao invés de ter um componente para cada estado de botão (habilitado, hover, pressionado etc), esses estados ficam concentrados em um só componente, diminuindo o tempo de procura pelo componente certo em uma lista quilométrica.

Com ajuda das Variants, um único componente pode abrigar centenas de possibilidades.

Preparando o terreno

A galera do Figma já vinha nos avisando dessa atualização desde meados de outubro de 2020, então nada mais natural que estivéssemos ansiosos por aqui. Como Zeus é bondoso e eu fui um bom menino, consegui acesso antecipado às Variants e tive uma semaninha de vantagem para testar, errar, aprender… Afinal, o tempo estava correndo e queríamos relançar uma biblioteca funcional em conjunto com a atualização para que nossa equipe de design já pudesse trabalhar com o máximo de assertividade.

Nesse período aconteceram duas grandes descobertas:

• Nossa biblioteca era mais limitada do que imaginamos, e muitos de nossos componentes teriam que ser reconstruídos do zero.
• Nossos componentes eram construídos a partir de um componente primitivo que era replicado e alterado de acordo com a necessidade. Cada instância dava origem a um novo componente, mantendo a estrutura do componente primitivo. Para criar as variações, só era necessário caçar layers escondidas dentro do componente…

Um componente primitivo mantêm a estrutura para suas derivações

Um simples botão possui várias layers ocultas

Diminuindo a distância entre design e desenvolvimento

A grande vantagem das Variants é traduzir para o design algo que é natural para o desenvolvimento: as propriedades. Naturalmente, o primeiro passo foi olhar para nosso código e como o time de desenvolvimento utilizava os componentes.

O botão, se olharmos mais no detalhe, é um ótimo exemplo de componente extremamente complexo por causa das variações de tamanho, cor, estados, se tem ou não ícone. E com a API em mãos, conseguimos isolar todas essas propriedades que queríamos traduzir para o Figma:

• Cor: padrão, invertido;
• Tamanho: pequeno, médio, grande;
• Tipo: primário, secundário;
• Largura: fixa, variável com conteúdo;
• Ícone: sem ícone, ícone à esquerda, ícone à direita.

O desafio agora era juntar essas propriedades de modo que qualquer designer, independente do nível de experiência com o Figma ou que nunca teve contato com front end pudesse aplicar o componente sem precisar de um manual de instruções.

Organizando as Variants

Estrutura de Variants de um “simples” botão.

Escolhi uma abordagem de organização de “maior para o menor”. Ou seja, separei os grupos maiores e fui quebrando cada propriedade em grupos menores.

Pense na boa e velha estrutura de pastas a qual estamos tão acostumados:
Botão > primário > cor padrão > médio > sem ícone > largura fixa > hover

Com todas as propriedades em mãos, a organização ficou bem mais compreensível, principalmente se olharmos para a quantidade de variações que elas nos proporcionam.

De 60 botões únicos, passamos para um botão que possui 360 variações

Nosso componente primitivo ainda existe e continua estruturante para todas as variações, mas não precisamos mais de todos aqueles botões que “sujavam” a busca ou das tantas pastas que tornavam em tortura o simples ato de achar um componente na aba de assets.

A busca ficou muito mais assertiva!

Claro que nem tudo pode ser 100% igual ao código, e precisamos usar bom senso nas propriedades naturais ao componente e que não são controladas por variáveis, como os estados, por exemplo.

A vida com Variants

Liberar a biblioteca de uma vez, com uma forma completamente nova de se trabalhar, e com praticamente todos os componentes revistos foi, com certeza, um desafio e teve sua parcela de dores de cabeça.

A principal dificuldade foi testar todos os componentes. É muito difícil fazer todos os testes sozinho, e todos os testes foram realizados em um ambiente controlado. Quando a biblioteca foi lançada, os bugs começaram a pipocar de todos os lados e minha prioridade por uma semana foi acompanhar a saúde da biblioteca quando aplicada em projetos reais. Erros de auto layout (que também foi atualizado no meio de tudo isso) foram os mais comuns, sendo a esmagadora maioria em componentes muito complexos, mas nada proporcionasse quebras que impediram designers de usar a biblioteca no dia a dia.

O resultado mais impressionante foi que, para profissionais que nunca tiveram contato com Variants, houve redução de até 5 vezes o tempo na hora de montar um layout simples!

Nos dias seguintes ao lançamento, fiz uma pesquisa com 10% de nossa base de clientes (designers Loft) para entender como o uso do Figma mudou, coletar percepções gerais, oportunidades para melhorar, e claro, medir eficiência e produtividade.

Com um wireframe em mãos pedi para que montassem a tela do jeito antigo, sem variants, e de novo com a nova biblioteca. O resultado só me mostrou como é complicado trabalhar se não se tem total conhecimento da biblioteca, e que, não é porque para você é fácil que para outras pessoas isso também é realidade.

A grande dificuldade foi achar componentes com nomes nada amigáveis em uma busca pouco intuitiva. Trocar componentes específicos para achar o estado de um campo de texto, por exemplo, é uma tarefa torturante.

Com as variants, só existe um componente, sem firulas, sem nomes estranhos… A troca de estados está na ponta do mouse e a curva de aprendizado diminuiu drasticamente.

O resultado mais impressionante foi que, para profissionais que nunca tiveram contato com Variants, houve redução de até 5 vezes o tempo na hora de montar um layout simples! Para facilitar a conta (sou de humanas, né), significa que onde se demorava 15 minutos, agora a mesma tarefa pode ser realizada em 3 minutos.

Ao infinito e além

A biblioteca mal foi entregue e já tenho um roadmap preparado para evoluir ainda mais nossos componentes. Aprendi muitas coisas no meio do caminho e vejo muitas coisas a melhorar nos primeiros componentes que foram criados com Variants, sem contar as inúmeras possibilidades de temas, templates e coisas novas que são criadas pela operação.

O Design System nunca dorme!

Acompanhe nossas vagas e novidades para construir mudanças de impacto junto com a gente e #VemPraLoft: https://carreiras.loft.com.br/

#DesignSystem #BeALofter #VemMudarComAGente