Variáveis no Dev Mode
Como desenvolvedor, ao revisar designs no Dev Mode, você encontrará variáveis de cor, número, string e booleanas. Os valores dessas variáveis podem depender de fatores como o modo da variável, o que às vezes torna mais difícil identificar os valores exatos que você deseja extrair do design.
O Figma oferece algumas opções no Dev Mode para tornar o trabalho com variáveis mais fácil para os desenvolvedores:
Detalhes da variável
Ao inspecionar um design no Dev Mode, você pode visualizar detalhes sobre as variáveis utilizadas no design. O modal Variable details indica informações sobre uma variável, incluindo:
- O nome da variável
- Um link para o arquivo que contém a variável
- O nome da coleção de variáveis que contém a variável
- O modo da variável
- O valor da variável e, se relevante, a cadeia de aliases de um valor bruto
- O escopo da variável (onde ela pode ser usada)
- Um trecho de código para utilizar a variável
Um recurso útil é a capacidade de seguir uma cadeia de aliases de variáveis até um valor específico. Por exemplo, na imagem anterior, a variável Background/Positive/Default usa Green/500 como alias, que corresponde ao valor de cor #14AE5C.
Usando o modal Variable details, você também pode alterar os modos para ver outros valores que a variável pode ter.
Abrir o modal de detalhes da variável
Há duas maneiras de abrir o modal Variable details:
No caso de variáveis que aparecem em um trecho de código, como tokens de design em CSS, clique no nome da variável no painel Inspect para abrir o modal Variable details.
No caso de outras variáveis, como aquelas que aparecem na seção Selection colors, clique em Variable details no painel Inspect para abrir o modal Variable details.
Variáveis sugeridas
No Dev Mode, ao inspecionar um design, você às vezes encontrará valores brutos em vez de variáveis ou estilos. Isso pode acontecer por vários motivos, por exemplo, se um designer desanexar uma variável durante a fase de design. Ao encontrar um valor bruto, é bom verificar se existe uma variável que deveria ser usada em vez disso.
Para facilitar a identificação de variáveis correspondentes, o Dev Mode pode sugerir variáveis.
Para sugerir uma variável, a variável deve ter:
- Exatamente o mesmo valor
- O escopo adequado
Você pode clicar em uma variável sugerida para copiar o nome dela.
Obter sugestões de variáveis
Para receber sugestões de variáveis para um valor no Dev Mode, no painel Inspect, clique no valor para o qual gostaria de obter uma sugestão. O modal Suggested variables aparece ao lado do valor em que você clicou.
Acessar coleções de variáveis locais
No Dev Mode, você pode acessar e visualizar as coleções de variáveis locais no arquivo.
Por exemplo, na imagem anterior, na seção Collections from this file, a coleção de variáveis Color Primitives está selecionada. Esses nomes são apenas exemplos — os nomes reais das coleções e variáveis correspondem às variáveis e coleções locais no seu arquivo.
Abaixo da seção Collections from this file, há uma lista de todos os grupos de variáveis que aparecem na coleção, como Brand, Black e White. Por padrão, a opção All variables está selecionada. Os grupos são ordenados da mesma forma que são organizados no modal de variáveis.
Para o grupo selecionado, a tabela de variáveis exibe as variáveis e os valores para cada modo que possuem. Se a opção All variables estiver selecionada, a tabela será organizada por grupo.
Você pode clicar em variáveis e valores individuais para copiá-los para a área de transferência e visualizar detalhes sobre a variável.
Abrir a tabela de variáveis
Para abrir a tabela de variáveis, na seção Variables do painel Inspect, clique em Open variables. A tabela de variáveis se expande para preencher o canvas.