Guia de variáveis no Figma

As variáveis no Figma Design armazenam valores reutilizáveis que podem ser aplicados a todos os tipos de propriedades de design e ações de prototipagem. Elas ajudam a economizar tempo e esforço ao criar designs, gerenciar Design Systems e criar fluxos de prototipagem complexos.

Por exemplo, é possível:

• Criar tokens de design para melhorar a eficiência ao gerenciar sistemas de design
• Alternar um quadro entre diferentes tamanhos de dispositivos e veja como o espaçamento é atualizado imediatamente, de acordo com um sistema espacial definido
• Visualizar como o texto flui em diferentes idiomas ao alterná-lo em um quadro
• Criar um design de checkout de carrinho totalmente funcional que calcule o total de pedidos com base em quais itens foram adicionados ao carrinho
• Criar um protótipo de um questionário interativo que usa lógica condicional para mostrar se um usuário responde a uma pergunta correta ou incorretamente

Há três maneiras principais de usar variáveis no Figma:

1. Designs e Design Systems ↓
2. Prototipagem avançada ↓
3. APIs do Figma ↓

Variáveis para designs e design systems

Use variáveis e modos para implementar tokens de design para seu design system e alternar designs entre diferentes contextos, como temas claros/escuros. Com as variáveis, você pode criar designs com mais eficiência e montar um Design System mais poderoso.

• Tutorial do Figma: Introdução a variáveis

  Este tutorial em vídeo aborda os fundamentos das variáveis, como usá-las para representar tokens de design e como usar variáveis de cor e número para considerar diferentes modos e temas.
• Tutorial do Figma: Variáveis para tipografia

  Neste tutorial em vídeo, você vai aprender a usar variáveis nas propriedades de fonte, integrá-las em um sistema de tipos existente e a utilizá-las para criar um design responsivo.
• Artigo: Visão geral de variáveis, coleções e modos →

  Comece sua jornada de variáveis aqui! Saiba mais sobre os diferentes tipos de variáveis e o que são coleções e modos de variáveis.

• Artigo: Criar e gerenciar variáveis →

  Aprenda a criar variáveis e coleções, referenciar outras definições de variáveis e definir quais variáveis podem ser usadas em designs.

• Artigo: Aplicar variáveis a designs →

  Aprenda a aplicar variáveis existentes às propriedades de design.

• Artigo: Modos de variáveis →

  Aprenda a criar várias definições para uma variável, cada uma associada a um modo. Além disso, aprenda a usá-los para alternar rapidamente os contextos dos designs.

• Artigo: A diferença entre variáveis e estilos →
  

  À medida que o Figma estende seu conjunto de recursos com variáveis, você pode estar se perguntando: qual é a diferença entre variáveis e estilos? Quando devo escolher um em vez do outro?

• Artigo: Variáveis no Dev Mode →
  

  Saiba mais sobre como acessar variáveis no Dev Mode ao inspecionar designs, incluindo obter detalhes de variáveis e variáveis sugeridas, e visualizar coleções locais usando a tabela de variáveis.

• Arquivo da comunidade: Playground de variáveis →

  Quer ter experiência prática com variáveis? Pegue uma cópia do arquivo de playground de variáveis para praticar enquanto aprende.

Variáveis para prototipagem avançada

Com variáveis, você pode criar protótipos de alta fidelidade usando menos quadros. Utilize variáveis com outros recursos avançados, como expressões e condicionais, para elevar seus protótipos ao próximo nível.

Em prototipagem, variáveis são usadas para armazenar estados ou propriedades de objetos. Use interações de protótipo para modificar valores de variáveis, que podem alterar a aparência, o conteúdo ou a visibilidade dos objetos em um design—tudo em alguns quadros simples.

• Tutorial em vídeo: protótipo com variáveis

  Assista e aprenda a usar variáveis em protótipos seguindo um exemplo realista. Você vai revisar como modificar valores de variáveis, como construir expressões simples e como usar múltiplas ações e a lógica if/else para avaliar verificações condicionais.
• Artigo: Use variáveis em protótipos →

  Aprenda o básico de como criar protótipos com variáveis no Figma, inclusive como configurar suas variáveis, usar a ação Definir variável para alterar os valores das variáveis e usar variáveis com variantes de componentes e componentes interativos.

• Artigo: Usar expressões em protótipos →

  Aprenda a usar expressões e variáveis em protótipos para gerar valores dinâmicos de strings, realizar operações matemáticas básicas com valores numéricos, ou até mesmo avaliar expressões Booleano.

• Artigo: Várias ações e condicionais →

  Aprenda a usar várias ações para empilhar um número ilimitado de ações no mesmo gatilho, ou use condicionais para verificar se uma condição é atendida antes de executar uma ação usando a lógica if/else.

• Artigo: Modos variáveis em protótipos →

  Saiba como usar modos variáveis em seus protótipos. Você pode definir os valores de modos específicos com base no contexto ou usar valores de modos específicos nas suas expressões.

• Arquivo da Comunidade: Playground avançado de prototipagem →

  Faça uma cópia do nosso arquivo do playground de prototipagem avançada para praticar mais com variáveis na prototipagem.

Variáveis usando APIs

As variáveis agora são aceitas na API de plugin do Figma para desenvolvimento de plugins e widgets, e também na REST API. 

• Documentação do desenvolvedor: Para a REST API →

  O suporte para variáveis na REST API inclui extremidades para consultar, criar, atualizar e excluir variáveis.

• Documentação do desenvolvedor: Para a API do plugin →

  O suporte para variáveis na API do plugin inclui criar e ler variáveis, além de vincular variáveis a componentes. Por exemplo, um plugin pode ser desenvolvido para importar ou exportar variáveis ou para converter estilos em variáveis.

• Documentação do desenvolvedor: Para a API do widget →

  Os widgets podem acessar variáveis usando a API de plugin. Os widgets podem criar e ler variáveis, mas as propriedades dos widgets não podem ser vinculadas a variáveis.

• Tutorial do Figma: Sincronizar variável com o GitHub

  Neste tutorial em vídeo, aprenda a sincronizar suas variáveis com sua base de código. Vamos explicar como usar nosso repositório de exemplo de Ação do GitHub para sincronizar suas variáveis do Figma e seu código.
• Arquivo da Comunidade: Sincronizando design systems usando a variáveis REST API →

  Aprenda como você pode usar a variáveis REST API da Figma para configurar fluxos de trabalho automatizados para sincronizar alterações entre arquivos de design e seu código-fonte.