Variáveis no Figma

—

by

Naiade Caparelli
in

Como reduzir dias de trabalho para 2 minutos e ajudar a empresa a impactar na prospecção de clientes!

Tempo é dinheiro. 

Disse Benjamin Franklin em seu ensaio “Conselhos para um jovem comerciante”, publicado em 1748. Que o tempo é um dos recursos mais escassos e valiosos, ninguém discorda. E tempo extra é sinônimo de liberdade para criar soluções mais eficientes. Ou seja, criar processos eficientes é um ganha-ganha, tanto para a empresa quanto para o designer que está executando a tarefa.

O objetivo deste artigo é mostrar o passo a passo de como eu implementei as variáveis do Figma em nosso Design System e como isso ajudou a:

  • Economizar dias de trabalho
  • Ter um protótipo Whitelabel bem mais flexível
  • Criar um fluxo de validação para clientes
  • Criar um valor personalizado para nossa prospecção

Lembrando que as variáveis são um recurso pago do Figma, mas podem ser usadas no seu draft de forma gratuita. É possível criar até 4 colunas de variáveis na versão Pro do Figma, ou 40, na versão Enterprise.

Quem trabalha com produtos Whitelabel sabe que existe uma atividade que consiste em adaptar o produto para ter a “carinha do cliente”. E muitos clientes gostam de experimentar. Antes, esse processo de adaptação das cores e textos do protótipo podia levar dias, se incluirmos o tempo de alteração e retorno do cliente. E é aqui que entram as variáveis, um recurso do Figma que agiliza a prototipação, permite experimentação de forma mais rápida e melhora a organização do Design System.

O que são as variáveis?

A imagem é composta por quatro colunas verticais, cada uma com uma cor de fundo diferente e texto centralizado: A primeira coluna contém o texto “Números” com um ícone de “123”. A segunda coluna tem o texto “Strings” com um ícone de texto . A terceira coluna tem o texto “Booleans” com um ícone de interruptor . A quarta coluna tem um fundo azul muito escuro e contém o texto “Cores” com um ícone de cores.
Tipos de vales que as variáveis aceitam.

Uma variável é um espaço nomeado que armazena um valor. Esse valor pode variar ao longo da execução do programa. As variáveis no Figma são uma funcionalidade que permite guardar valores que podem variar ao longo do design. Isso pode incluir cores, booleanos, números e strings que podem ser reutilizados em diferentes partes do design.

Diferença entre variáveis (variables) e estilos (styles)

É importante entendermos as diferenças entre os conceitos de variáveis (variables) e estilos (styles).

Tipos de valores

  • As variáveis usam valores únicos, brutos e reutilizáveis. Por exemplo, os valores brutos podem incluir preenchimentos sólidos como #FFFFFF, números como 16 ou -32,75 e valores booleanos verdadeiro e falso.
  • Os estilos usam valores únicos e brutos; dados com múltiplos valores; bem como outros formatos. Por exemplo, um estilo de cor pode usar preenchimentos sólidos (valores brutos únicos), gradientes (valores múltiplos), bem como outros formatos (imagens, GIFs, vídeos e modos de mesclagem).

Escalabilidade e gerenciamento

  • Os estilos não suportam alias. Em outras palavras, eles não podem ser aplicados a variáveis e outros estilos. 
  • Variáveis podem ser aplicadas a ambos. Dessa forma, elas oferecem suporte mais robusto para estruturas de token complexas e escaláveis. Elas permitem definir valores primitivos que podem fluir através de outros tokens e elementos do seu sistema de design. Também tornam a atualização e o gerenciamento de sistemas de design mais eficientes.

Criando as variáveis — Passo a passo

Não se preocupe se você nunca usou as variáveis antes. No passo a passo que vou mostrar abaixo, vamos criar um arquivo com variáveis juntos. Então, mão na massa!

  1. A primeira etapa será criar nossa tabela de variáveis dentro do nosso Design System. Abra o arquivo do seu Design System e navegue até o menu na lateral direita. Clique no menu Local variables.
A captura de tela mostra a interface do Figma. No lado direito, a barra lateral exibe o painel “Design” com a configuração da página, onde se pode ver o campo “Local variables” destacado em vermelho.
A imagem mostra onde está a opção Local variables na interface do Figma.

2. Em seguida, no modal que irá abrir, clique em + Create variable. Selecionando Color, crie 4 variáveis do tipo Color.

A captura de tela mostra a interface do Figma. À direita o botão “Local variables” destacando em azul. No centro, uma janela com o título “Collection 1” e “All variables” indica a criação de variáveis reutilizáveis. O botão “+ Create variable” está selecionado e abaixo aparece um menu com os tipos de variáveis disponíveis. A variavel Cor está selecionada em azul.
A imagem mostra onde está a opção de Color, ao clicar em Create variable.

3. Nomeando as variáveis: A coluna Name da tabela de variáveis refere-se ao nome da variável que estamos criando. Vamos começar criando as cores primária, secundária, complementar primária e complementar secundária.

A captura de tela mostra a interface do Figma com o projeto “Produto Demo / Variáveis Figma”. À direita, o painel “Design” mostra a configuração da página com a cor de fundo “#F5F5F5”, 100% de opacidade e “Local variables” destacado em azul. No centro, uma janela exibe uma tabela com variáveis chamadas “Primária”, “Secundária”, “Complementar Primária” e “Complementar Secundária”, todas com o valor “FFFFF”.
A imagem mostra a coluna com as variáveis Color adicionadas.

4. Adicionando as cores: Na coluna de Value podemos adicionar as cores que nossas variáveis irão guardar. Também podemos trocar o nome Value para o nome do Cliente que estamos aplicando a cor. No exemplo, chamei de Cliente X.

A captura de tela mostra a interface do Figma com o projeto “Produto Demo / Variáveis Figma”. À direita “Local variables” destacado em azul. No centro, uma janela exibe uma tabela com variáveis chamadas “Primária”, “Secundária”, “Complementar Primária” e “Complementar Secundária”, cada uma com valores de cores hexadecimais diferentes na coluna “Cliente X”.
A imagem mostra a tabela de variável com os valores de Color preenchidos

OBS: A cor complementar primária irá sobre a cor primária e por isso devem possuir um bom contraste entre si, o mesmo vale para as secundárias. Quando formos criar um componente esse conceito ficará mais claro.

5. Crie a variável do tipo String. Na coluna de Name, nomeie a variável de Nome da empresa, e na coluna do Cliente X, adicione o nome da empresa. Aqui chamei de App X.

A captura de tela mostra a interface do Figma. À direita o botão “Local variables” destacando em azul. No centro, uma janela com o título “Collection 1” e “All variables” indica a criação de variáveis reutilizáveis. O botão “+ Create variable” está selecionado e abaixo aparece um menu com os tipos de variáveis disponíveis. A variavel String está selecionada em azul.
A imagem mostra como adicionar a tabela a variável String.
A captura de tela mostra a interface do Figma com o projeto “Produto Demo / Variáveis Figma”. À esquerda, há uma lista de camadas. À direita, o painel “Design” destaca “Local variables”. No centro, a tabela de variáveis exibe “Primária”, “Secundária”, “Complementar Primária”, “Complementar Secundária” e “Nome da empresa” com seus respectivos valores, incluindo “APEX” para o nome da empresa.
A imagem mostra onde inserir o valor da variável String.

6. Se você utiliza um arquivo separado como biblioteca/Style Guide/Design System, publique as alterações. Vá no menu lateral esquerdo e clique em Assets, depois no ícone de livro da Biblioteca e clique em Publish, para publicar as alterações.

A captura de tela mostra a interface do Figma com o projeto “Produto Demo / Variáveis Figma”. À esquerda, a aba “Assets” está aberta (1), e “Libraries” é selecionado (2). No centro, uma janela exibe bibliotecas disponíveis, destacando “Variáveis Figma” com 5 variáveis e o botão “Publish” (3) em azul, pronto para publicação.
A imagem mostra o caminho para publicar as alterações do Design System.

Aplicando as variáveis aos componentes

Depois de criarmos as variáveis, é hora de atualizarmos os componentes.

Componentes

No layout de um produto Whitelabel, existem alguns componentes que recebem as cores dos clientes, como por exemplo, botões, algumas cores de fundo, texto e por aí vai. Os componentes que recebem a cor do cliente devem ser vinculados às cores das variáveis.

  1. Ainda dentro do seu arquivo de Design System, selecione o componente que deseja vincular às variáveis. No exemplo estou usando o componente de botão. Navegue no menu lateral direito e clique no ícone de Styles and Variables. As variáveis são as cores representadas no formato quadrado, e aparecem no topo da lista de cores.
A captura de tela mostra a interface do Figma com o projeto “Variáveis Figma”. À esquerda, a barra lateral exibe camadas e componentes. No centro, há uma tela de design com o texto “App X, seu banco, como você precisa” e um botão “Entrar”. À direita, o painel “Design” mostra propriedades do botão. Uma janela pop-up exibe a seleção de cores, destacando variáveis de cor como “Primária”, “Secundária”, “Complementar Primária” e “Complementar Secundária”.
A imagem mostra onde aparecem as variáveis Color.

2. Para o preenchimento do botão, utilize a cor primária. Para o texto “Entrar”, utilize a cor complementar primária. Nesse exemplo, conseguimos ver a importância da cor complementar secundária contrastar bem com a cor primária. 

A imagem mostra um botão azul com a palavra “Entrar” no centro. Setas vermelhas apontam para a configuração de preenchimento (Fill) do botão no painel de propriedades à direita. O preenchimento primário é azul claro (“Primária”) e o preenchimento complementar é preto (“Complementar Primária”).
A imagem mostra onde aplicar as cores primária e complementar primária.

Faça o mesmo para todos os componentes que variam de acordo com a paleta do cliente.

Textos

Agora vamos vincular os textos às variáveis.

  1. Clique no texto que será vinculado à variável. No exemplo que criamos, utilizamos o nome da empresa.
  2. Clique no botão Apply variable.
A captura de tela mostra a interface do Figma com o projeto “Variáveis Figma”. À esquerda, a barra lateral lista camadas e componentes. No centro, há um texto com a frase “App X, seu banco, como você precisa.” À direita, o painel “Design” exibe as propriedades do texto, como fonte, tamanho, cor e alinhamento. A cor do texto está definida como preto (#000000).
A imagem mostra onde aparece a variável de String vinculada ao texto.

3. Selecione a variável “Nome da empresa” que criamos. 

A captura de tela mostra a interface do Figma com o projeto “Variáveis Figma”. À esquerda, a barra lateral lista camadas e componentes. No centro, um texto exibe “App X, seu banco, como você precisa”. À direita, o painel “Design” mostra propriedades do texto, incluindo fonte, tamanho e cor. Uma janela pop-up mostra a variável de texto “Nome da empresa” com o valor “App X”.
A imagem mostra onde clicar para aparecer a variável de String.

Agora o texto está vinculado a variável.

A imagem mostra um texto no Figma com uma seta vermelha apontando para as configurações de texto no painel de propriedades. As propriedades incluem fonte “Inter”, estilo “Semi Bold”, tamanho 16, espaçamento de 124%, e alinhamento. A variável de texto “Nome da empresa” está destacada em vermelho na parte inferior do painel de propriedades.
A imagem mostra onde aparece a variável de String vinculada ao texto.

Pronto! Agora já temos nossas primeiras variáveis e componentes criados!

Adicionando uma nova coluna de cores

Agora que seu Design System está atualizado com as variáveis, você recebeu a missão de adaptar seu protótipo Whitelabel para apresentar para o Subway.

  1. Acesse seu Design System e abra a tabela de variáveis. Clique no ícone de + para criar um New variable mode.
A captura de tela mostra a interface do Figma com o projeto “Variáveis Figma”. À esquerda, a barra lateral lista camadas e componentes, como “Rectangle 16” e “image 16”. No centro, uma janela exibe a tabela de variáveis, o botão + New variable mode, está destacado em vermelho.
A imagem mostra onde clicar para criar uma nova coluna de Value.

2. Nomeie a coluna para o nome do cliente, no caso, Subway. Adicione as cores do cliente e o nome da empresa.

A captura de tela mostra a interface do Figma com o projeto “Variáveis Figma”. À esquerda, a barra lateral lista camadas e componentes, como “Rectangle 16” e “image 16”. No centro, uma janela exibe a tabela de variáveis com cinco linhas: “Primária”, “Secundária”, “Complementar Primária”, “Complementar Secundária” e “Nome da empresa”. Cada variável tem valores na coluna “Subway”, com cores hexadecimais como #009845, #FFCA08, #FFFFFF e #000000.
A imagem mostra as cores e o texto alterado na tabela de variáveis.

3. Publique as alterações.

Aplicando as alterações ao protótipo

1. Abra o arquivo onde está seu protótipo Whitelabel (usaremos o arquivo Protótipo Variáveis), acesse Assets e depois clique no ícone do livro da Biblioteca, Updates e, por fim, Update All. Assim, todas as alterações feitas no Design System irão aparecer nesse arquivo também.

A captura de tela mostra a interface do Figma com o projeto “Protótipo Variáveis”. À esquerda, a aba “Assets” está aberta (1), e “Libraries” é selecionado (2). No centro, a janela “Updates” exibe atualizações para “Android bars” e “profile”. À direita, o painel “Design” exibe propriedades da página. O botão “Update all” está destacado em azul na parte inferior (4).
A imagem mostra o caminho a ser seguido dentro do Figma para atualizar as mudanças feitas no Design System.

2. No menu lateral direito, no canto superior, selecione o ícone de Change Variable Mode. Depois selecione Collection 1 (você pode alterar esse nome depois, na sua tabela de variáveis) e, por fim, selecione o nome do cliente que você quer aplicar as cores, no exemplo Subway. E a mágica acontece! Cores e textos alterados, com 1 clique.

A captura de tela mostra a interface do Figma com o projeto “Protótipo Variáveis”. À esquerda, a barra lateral exibe a página “Protótipo” e a seção “Home”. No centro, um protótipo de tela de aplicativo exibe uma saudação “Bom dia, Heloísa” com a foto de perfil, seguido pelo texto “App X, seu banco, como você precisa” e um botão “Entrar” azul. À direita, o painel “Design” destaca a opção “Change variable mode”. Ao clicar no botão Subway, a cor da tela é alterada.
Gif mostrando troca de cores utilizando variáveis.
A imagem mostra um layout de design no Figma com várias telas de um aplicativo móvel organizadas em uma grade. As telas incluem diferentes etapas e interfaces. As telas mudam de cor quando as variáveis são alteradas.
Troca de cores utilizando variáveis em várias telas

Os ganhos dessa implementação

É claro que essa toda essa implementação não foi fácil e nem feita do dia para a noite. Ainda temos muito a aprimorar no nosso Design System, porém, é um esforço que recomendo que seja feito, principalmente se você necessita estar trocando cores e testando modelos para serem apresentados para um cliente ou possível cliente.

Esses foram os principais ganhos observados nessa atualização:

  1. Qualquer pessoa com conhecimento básico de Figma consegue trocar as cores, isso
  2. facilitou para o time de vendas e até para os P.O.s testarem e apresentarem layouts, gerando
  3. agilidade na construção de protótipos para venda dos nossos produtos, além de criar a
  4. possibilidade de incluir o cliente no processo de criação e experimentação, fazendo a
  5. chance de fechar negócio aumentar significativamente!

Bônus

Estou compartilhando os links dos arquivos que criei para exemplificar o processo descrito no passo a passo deste artigo. Sinta-se à vontade para explorar os arquivos e testá-los:

Exemplo de Design System Figma

Exemplo de Protótipo Figma

É isso, espero que tenham gostado! Compartilhem comigo se vocês também já utilizaram as variáveis, como vocês aplicaram e se elas também ajudaram vocês a acelerar processos! Obrigada por terem chegado até aqui!

Referências:

Guide to variables in Figma
Before you Start Who can use this feature Variables in prototypes and publishing variables to team libraries are…help.figma.com

Overview of variables, collections, and modes
Before you Start Who can use this feature Anyone on any plan can create and use variables The number of modes you can…help.figma.com

Comentários

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *