## glossário

O que é Figma?

Figma é uma ferramenta de design de interfaces e prototipagem que roda inteiramente no navegador, com colaboração em tempo real. Lançada em 2016, tornou-se o padrão de mercado em design de produto digital ao resolver um problema que as ferramentas anteriores tratavam mal: trabalho simultâneo entre várias pessoas no mesmo arquivo.

Antes dela, o fluxo comum envolvia arquivos locais, versões enviadas por e-mail e exportações manuais para os desenvolvedores. O Figma eliminou essa fricção ao colocar o arquivo na nuvem, acessível por link.

Conceitos que estruturam o trabalho

Frame — o contêiner que representa uma tela ou seção, com dimensões e regras de layout próprias.
Component — um elemento reutilizável; alterar o componente mestre propaga a mudança para todas as instâncias.
Variants — agrupam estados de um mesmo componente (padrão, hover, desabilitado) em uma única definição.
Auto Layout — cria comportamento responsivo, com elementos se reorganizando conforme o conteúdo muda.
Styles e Variables — centralizam cores, tipografia e espaçamentos, formando a base de um design system.

Por que interessa a quem programa

O desenvolvedor raramente cria no Figma, mas consome dele o tempo todo. O modo de inspeção expõe medidas exatas, cores, tipografia e espaçamentos, além de gerar trechos de CSS. Mais importante: quando o design usa componentes e variáveis de forma disciplinada, a estrutura do arquivo espelha a arquitetura de componentes do código.

Tokens do design system chegando ao código

/* variáveis definidas no Figma, refletidas no CSS */
:root {
  --cor-primaria: #14b8a6;
  --cor-superficie: #0b1120;
  --espaco-2: 0.5rem;
  --espaco-4: 1rem;
  --raio-md: 0.5rem;
  --fonte-titulo: 'Sora', sans-serif;
}

.botao {
  background: var(--cor-primaria);
  padding: var(--espaco-2) var(--espaco-4);
  border-radius: var(--raio-md);
}

Essa correspondência é o que evita a divergência clássica entre o que foi desenhado e o que foi construído. Quando os tokens têm os mesmos nomes nos dois lados, a conversa entre design e desenvolvimento deixa de depender de interpretação.

Prototipagem e validação

Além do desenho estático, o Figma permite ligar telas por interações e transições, produzindo protótipos navegáveis. Isso viabiliza testar fluxos com usuários antes de escrever qualquer linha de código — a forma mais barata de descobrir que uma ideia não funciona. Os critérios para avaliar essas interfaces estão nas heurísticas de Nielsen, e o papel da IA nesse processo em inteligência artificial no design.

## faq

Perguntas frequentes

Figma é gratuito?

Tem um plano gratuito generoso, suficiente para uso individual e projetos pequenos, com limite no número de arquivos com histórico completo e recursos de equipe. Planos pagos liberam bibliotecas compartilhadas, permissões avançadas e controles organizacionais.

Desenvolvedor precisa aprender Figma?

Não a fundo, mas saber navegar, inspecionar elementos e extrair medidas e assets economiza muito tempo e reduz idas e vindas com o time de design. É uma habilidade de leitura, não necessariamente de criação.

Dá para gerar código direto do Figma?

Parcialmente. Ele exporta CSS e há plugins que geram componentes, mas o resultado costuma exigir ajuste significativo — a estrutura gerada raramente corresponde à arquitetura desejada. O uso mais produtivo é extrair valores e assets, não código pronto.