Figma

Ferramenta de design de produto que roda no navegador e deixa o time inteiro trabalhar no mesmo arquivo ao mesmo tempo.

Hard

O que é

Figma é onde boa parte do design de produto acontece hoje. Ele roda no navegador, sincroniza em tempo real, e deixa várias pessoas mexendo no mesmo arquivo de uma vez. Cobre desde o wireframe até o protótipo de alta fidelidade e a biblioteca de componentes compartilhada.

O que realmente firmou o Figma foi ter resolvido a colaboração. Antes, dar feedback, conferir specs e versionar arquivo dava muito atrito. Quando tudo passou a viver num arquivo na nuvem, acessado por uma simples URL, quase todo esse atrito saiu do caminho.

E ele não é só de quem desenha. Engenharia inspeciona medida e token no Dev Mode, produto comenta e navega o protótipo sem precisar de licença cheia, e o FigJam estende a ferramenta pra quadro de ideação e mapa de jornada.

Em uma frase

Deixei o protótipo no Figma, é só abrir o link e comentar direto na tela.

A pergunta que ele responde

Qual ferramenta o time usa pra desenhar tela e compartilhar design hoje em dia?

Quando usar

Ajuda em todo o fluxo de design de produto, do wireframe ao protótipo, passando pela biblioteca e chegando no handoff pra engenharia.

Como não usar

O cuidado é não tratar o arquivo como entregável final sem organizar componentes e variáveis, porque aí ele vira uma bagunça que ninguém consegue manter.

Na prática

Pense num designer que publica a biblioteca e muda o botão primário uma única vez. Essa mudança se propaga sozinha pra todas as telas que usam aquele componente.

Não confunda com

Vale separar o Figma do design system. O Figma é a ferramenta, o lugar onde o trabalho acontece. O design system é o conjunto de regras e componentes que pode morar ali dentro, como biblioteca de componentes e variáveis. Ou seja, um é a casa, o outro é o que você guarda e organiza dentro dela.

D

Em inglês

Figma

Pronúncia

fíg-ma

Também chamado de

Figma, FigJam, Dev Mode

Origem

Figma, lançada em 2016.

Fonte

Saiba mais

Figma, central de aprendizado oficial (help.figma.com)