Antes, arquivos de design eram enviados por e-mail, ficavam desatualizados e geravam confusão sobre qual era a "versão final". O Figma mudou isso: trouxe o design para o navegador e transformou o trabalho em colaboração em tempo real. Neste guia, a Raised explica o que é o Figma, para que serve, principais recursos e como usá-lo em projetos de marketing e produto.
O que é o Figma
É uma plataforma de design colaborativo, usada principalmente para design de interfaces (UI) e experiência (UX), prototipagem e criação de materiais digitais. Funciona no navegador e em aplicativo, com arquivos na nuvem, comentários e histórico de versões.
Principais recursos
| Recurso | Para que serve |
|---|---|
| Colaboração em tempo real | Vários usuários editam e comentam no mesmo arquivo |
| Componentes e variantes | Elementos reutilizáveis (botões, cards) com estados |
| Estilos e variáveis | Cores, tipografia e tokens padronizados |
| Auto layout | Layouts responsivos que se adaptam ao conteúdo |
| Prototipagem | Simular navegação e interações |
| Bibliotecas e design systems | Padronização entre projetos e equipes |
| Modo de desenvolvimento (Dev Mode) | Medidas, código e especificações para devs |
| Plugins | Ampliação de funções |
| FigJam | Quadros brancos para workshops e mapas |
Para que as equipes de marketing usam
- Interfaces e protótipos de sites e landing pages (como fazer uma landing page);
- Design systems e padronização de marca (identidade visual);
- Peças para redes sociais com templates;
- Apresentações e materiais de campanha;
- Aprovação de peças com comentários diretos;
- Mapas de jornada e workshops (FigJam) (UX design).
Figma x outras ferramentas
Para vetores e ilustração, o Illustrator segue forte; para fotos, o Photoshop; para peças rápidas, o Canva. O Figma se destaca em interfaces, sistemas e colaboração (ferramentas de design). Muitas equipes usam mais de uma ferramenta.
Como aprender Figma
- Comece pelos fundamentos de design (design gráfico).
- Explore os tutoriais oficiais e a comunidade.
- Reproduza interfaces existentes para praticar.
- Aprenda auto layout e componentes, o coração da ferramenta.
- Crie um projeto completo (por exemplo, uma landing page).
- Aprenda a colaborar: comentários, versões e handoff para desenvolvimento.
A documentação oficial do Figma tem guias para todos os níveis.
Boas práticas
- Nomeie camadas e páginas;
- Use componentes em vez de copiar e colar;
- Padronize estilos;
- Mantenha o arquivo organizado;
- Documente decisões;
- Verifique acessibilidade (contraste, tamanhos).
Erros comuns
- Arquivos desorganizados;
- Não usar componentes;
- Esquecer o estado de hover e foco;
- Entregar sem especificações;
- Ignorar o comportamento responsivo (design responsivo).
