Figma

Aprenda a utilizar o Figma para criar interfaces, organizar projetos, desenvolver protótipos e trabalhar de forma colaborativa no desenvolvimento de sistemas.


🔎 Ctrl + K

📘 Bem-vindo ao Manual Digital

O Figma é uma ferramenta utilizada para criar interfaces digitais, protótipos, layouts de sites, aplicativos e sistemas. Ele também permite que várias pessoas trabalhem no mesmo projeto de forma colaborativa. Durante o desenvolvimento de sistemas, o Figma pode ser utilizado para transformar uma ideia em uma representação visual antes que o código seja desenvolvido.

💡 Como estudar? Não tente aprender todas as ferramentas de uma vez. Comece entendendo a interface, depois aprenda Frames, formas, textos, componentes e, por fim, prototipação.
🎯 Objetivo deste manual Ao terminar este conteúdo, você deverá conseguir criar uma interface simples, organizar um projeto no Figma, criar componentes, montar telas e transformar essas telas em um protótipo navegável.

01. O que é o Figma?

📌 Definição

O que é? O Figma é uma ferramenta utilizada para criação de interfaces digitais, protótipos e projetos de UI (User Interface).

Ele pode ser utilizado para planejar visualmente um site, sistema, aplicativo ou qualquer outra interface digital antes da programação.

🎯 Para que serve?

📖 Explicação Imagine que você precisa desenvolver um sistema para uma escola. Antes de começar a escrever HTML, CSS e JavaScript, você pode criar no Figma uma representação visual das telas que serão desenvolvidas.
💻 Exemplo Um projeto pode possuir: 
Tela de Login
       ↓
Tela Inicial
       ↓
Lista de Alunos
       ↓
Cadastro de Aluno
       ↓
Edição de Aluno

02. Acessando o Figma

🌐 Acesso

Site oficial

Acesse o site oficial do Figma utilizando o navegador.

https://www.figma.com/

📝 Passo a passo

  1. Acesse o site do Figma.
  2. Escolha a opção de criação ou acesso à conta.
  3. Entre utilizando uma conta disponível.
  4. Aguarde o carregamento do ambiente.
  5. Acesse a área de arquivos.
⚠️ Atenção Utilize uma conta que você consiga acessar posteriormente. Os projetos podem ficar associados à conta utilizada.

03. Conhecendo a Interface do Figma

Definição A interface do Figma é formada por diferentes áreas utilizadas para criar, organizar e editar os elementos do projeto.

🔹 Principais áreas

📖 Explicação O painel de camadas mostra os elementos existentes no projeto. A área central representa o espaço onde você cria sua interface. O painel lateral apresenta propriedades do elemento selecionado.
💡 Dica Passe alguns minutos explorando a interface antes de começar o primeiro projeto. Saber onde cada ferramenta está economiza bastante tempo.

04. Criando um Arquivo

Definição Um arquivo é o documento onde serão armazenadas as telas, elementos, componentes e protótipos do projeto.

📝 Passo a passo

  1. Acesse a área de arquivos.
  2. Crie um novo arquivo de design.
  3. Aguarde o carregamento do editor.
  4. Renomeie o arquivo.
💻 Exemplo de nome 
Sistema Escolar - Projeto Integrador
💡 Dica Evite nomes como: 
Novo projeto
teste
teste2
final
final2
final-agora-vai
Utilize nomes que expliquem claramente o conteúdo do arquivo.

05. Criando e Organizando Páginas

Definição As páginas permitem organizar diferentes partes do projeto dentro de um mesmo arquivo.

💻 Exemplo de organização

📄 Sistema Escolar

├── Wireframes
├── Login
├── Dashboard
├── Alunos
├── Professores
├── Protótipo
└── Componentes
📖 Explicação Um projeto maior pode possuir dezenas de telas. Separar o conteúdo em páginas facilita a localização e a manutenção do projeto.
💡 Dica Defina uma organização antes de começar a criar dezenas de telas.

06. Criando um Frame

O que é Frame? Frame é uma área utilizada para organizar elementos e representar, por exemplo, uma tela de site, aplicativo ou sistema.

📱 Exemplos

📝 Passo a passo

  1. Selecione a ferramenta Frame.
  2. Escolha um tamanho adequado.
  3. Crie o Frame na área de trabalho.
  4. Renomeie o Frame.
💻 Exemplo 
Frame
Nome: Tela Login
Tamanho: Desktop
⚠️ Atenção Não confunda Frame com uma simples forma geométrica. O Frame pode funcionar como uma estrutura para organizar vários elementos.

07. Criando Formas

Definição As formas geométricas são utilizadas para construir visualmente os elementos da interface.

🔹 Formas comuns

💻 Exemplo

Um botão pode ser construído utilizando um retângulo como fundo e um texto sobre ele. 

┌──────────────────────┐
│       ENTRAR         │
└──────────────────────┘
💡 Dica Utilize nomes claros para os elementos. Em vez de deixar "Rectangle 123", prefira "Fundo do botão".

08. Trabalhando com Textos

Definição A ferramenta de texto permite inserir títulos, parágrafos, botões, menus, rótulos e outras informações na interface.

📝 Exemplos

Bem-vindo!

E-mail

Senha

Entrar

Esqueci minha senha

🎨 Propriedades importantes

📖 Explicação A tipografia influencia diretamente a leitura e a aparência da interface. Um projeto profissional precisa manter padrões de tamanho, peso e alinhamento.

09. Trabalhando com Cores

Definição As cores são utilizadas para definir a identidade visual e destacar elementos importantes da interface.

🎨 Exemplos

Azul institucional
#0B4EA2

Branco
#FFFFFF

Cinza claro
#F5F5F5

Cinza escuro
#333333
📖 Explicação O código hexadecimal representa uma cor utilizada em interfaces digitais. O mesmo conceito pode ser utilizado posteriormente no CSS.
💡 Dica Ao criar uma interface para um projeto real, defina uma paleta de cores antes de criar todas as telas.

10. Inserindo Imagens

Definição Imagens podem ser utilizadas para representar produtos, usuários, banners, logotipos e outros elementos visuais.

📝 Passo a passo

  1. Escolha a opção de inserir imagem.
  2. Selecione o arquivo no computador.
  3. Posicione a imagem no projeto.
  4. Ajuste o tamanho.
  5. Organize a imagem dentro do Frame.
⚠️ Atenção Utilize imagens adequadas ao projeto e verifique se você possui autorização para utilizá-las quando o projeto for publicado.

11. Entendendo as Camadas

Definição Cada elemento criado no Figma pode aparecer como uma camada dentro da estrutura do projeto.

💻 Exemplo

📱 Tela Login
│
├── Logo
├── Título
├── Campo E-mail
├── Campo Senha
├── Botão Entrar
└── Link Recuperar senha
📖 Explicação A ordem das camadas influencia a organização e, em determinados casos, quais elementos aparecem sobre outros.
💡 Dica Renomeie os elementos conforme você os cria. Isso facilita muito o trabalho quando o projeto ficar grande.

12. Alinhamento e Espaçamento

Definição Alinhamento e espaçamento ajudam a manter os elementos organizados e visualmente equilibrados.

🎯 Exemplos

📖 Explicação Imagine três botões com espaçamentos diferentes. A interface pode parecer desorganizada. Utilizar medidas consistentes deixa o projeto mais profissional.

13. Auto Layout

O que é? Auto Layout é um recurso utilizado para organizar elementos automaticamente dentro de uma estrutura.

🎯 Onde pode ser utilizado?

💻 Exemplo Imagine um botão: 
┌────────────────────────┐
│        ENTRAR          │
└────────────────────────┘
Se o texto mudar para: 
┌──────────────────────────────┐
│       ACESSAR SISTEMA        │
└──────────────────────────────┘
O Auto Layout ajuda a manter o espaçamento interno do botão de forma organizada.
💡 Dica Aprender Auto Layout é muito importante para quem deseja criar interfaces mais organizadas e adaptáveis.

14. Criando Componentes

Definição Componentes são elementos que podem ser reutilizados em diferentes partes do projeto.

🎯 Exemplos

📖 Explicação Imagine que um sistema possui 30 botões iguais. Em vez de tratar cada botão como um elemento completamente independente, podemos utilizar um componente para manter um padrão.
💡 Dica Componentes ajudam a manter consistência visual e facilitam a manutenção do projeto.

15. Variantes e Estados de Componentes

Definição Variantes permitem representar diferentes versões ou estados de um mesmo componente.

💻 Exemplo: botão

Botão
│
├── Normal
├── Hover
├── Ativo
├── Desabilitado
└── Carregando
📖 Explicação Uma interface real possui diferentes estados. O usuário pode passar o mouse sobre um botão, clicar nele ou encontrar o botão desabilitado.

16. Criando um Protótipo

O que é protótipo? Um protótipo é uma representação interativa das telas de um projeto, permitindo simular a navegação antes da implementação real.

💻 Exemplo

Tela Login
     ↓
Botão Entrar
     ↓
Dashboard
     ↓
Lista de Alunos
     ↓
Cadastro de Aluno

📝 Passo a passo

  1. Crie as telas do projeto.
  2. Acesse a área de prototipação.
  3. Selecione o elemento que iniciará a interação.
  4. Conecte o elemento à próxima tela.
  5. Defina a interação desejada.
  6. Teste o protótipo.
💡 Dica O protótipo não é o sistema funcionando de verdade. Ele é uma simulação da experiência de navegação.

17. Criando Interações

Definição Interações determinam o que acontece quando o usuário realiza uma determinada ação no protótipo.

🎯 Exemplos

💻 Exemplo 
Usuário clica em "Entrar"
              ↓
Sistema apresenta
              ↓
Dashboard

18. Comentários no Projeto

Definição Os comentários permitem registrar observações, dúvidas e sugestões diretamente no projeto.

💻 Exemplo

💬 "Alterar a cor deste botão."

💬 "Verificar o texto deste campo."

💬 "Adicionar validação nesta etapa."
📖 Explicação Esse recurso é especialmente importante quando várias pessoas participam do mesmo projeto.

19. Trabalhando em Equipe

Definição O Figma permite que diferentes pessoas participem do mesmo projeto, facilitando o trabalho colaborativo.

👥 Possibilidades

💡 Dica Em projetos de equipe, combine previamente quem ficará responsável por cada tela ou parte do projeto.

20. Compartilhando um Projeto

Definição O compartilhamento permite enviar o acesso ao projeto para outras pessoas.

📝 Antes de compartilhar

  1. Verifique se o arquivo está correto.
  2. Organize as páginas.
  3. Renomeie as telas.
  4. Confira o protótipo.
  5. Verifique as permissões de acesso.
⚠️ Atenção Sempre confira quem possui acesso ao projeto e qual nível de permissão foi disponibilizado.

21. Exportando Elementos

Definição A exportação permite transformar elementos ou telas do projeto em arquivos que podem ser utilizados em outros ambientes.

📁 Formatos comuns

Formato Utilização
PNG Imagens com boa qualidade visual
JPG Imagens compactadas
SVG Elementos vetoriais
PDF Documentação e apresentação
💡 Dica Escolha o formato de acordo com a finalidade do arquivo. SVG, por exemplo, é muito útil para elementos vetoriais.

22. Criando um Wireframe

Definição Wireframe é uma representação simplificada da estrutura de uma interface.

💻 Exemplo

┌──────────────────────────────────┐
│             LOGO                 │
├──────────────────────────────────┤
│                                  │
│          TÍTULO                  │
│                                  │
│     [ Campo de pesquisa ]        │
│                                  │
│     [ Botão ]                    │
│                                  │
├──────────────────────────────────┤
│             RODAPÉ               │
└──────────────────────────────────┘
📖 Explicação O wireframe permite pensar na organização da interface antes de investir tempo em cores, imagens e detalhes visuais.

23. UI e UX no Figma

🎨 UI — User Interface

Definição UI está relacionada à interface visual que o usuário utiliza.

Cores, botões, tipografia, ícones, menus e organização visual fazem parte da interface.

🧠 UX — User Experience

Definição UX está relacionada à experiência do usuário ao utilizar um produto ou sistema.
💻 Exemplo Um botão pode ser visualmente bonito, mas se o usuário não entender para que ele serve, existe um problema de experiência.

24. Pensando em Diferentes Telas

Definição Uma interface pode precisar funcionar em diferentes tamanhos de tela, como computadores, tablets e celulares.

📱 Exemplos

Desktop
        ↓
Tablet
        ↓
Celular
📖 Explicação Criar apenas uma tela para desktop não significa que o projeto esteja preparado para dispositivos menores.
💡 Dica Durante o projeto, pense desde cedo em como os elementos serão reorganizados em diferentes tamanhos de tela.

25. Criando um Design System

Definição Design System é um conjunto organizado de padrões, componentes, estilos e regras utilizados para manter consistência em uma interface.

🎯 Pode conter

💻 Exemplo 
DESIGN SYSTEM

Cores
├── Azul
├── Branco
├── Cinza
└── Vermelho

Tipografia
├── Título
├── Subtítulo
└── Texto

Componentes
├── Botão
├── Input
└── Card

26. Organização do Projeto

Definição Organizar um arquivo Figma significa manter páginas, telas, camadas e componentes estruturados de maneira lógica.

✅ Boas práticas

⚠️ Evite Um arquivo cheio de elementos chamados: 
Rectangle 1
Rectangle 2
Frame 25
Frame 26
Group 8
Group 9
Isso dificulta muito a manutenção.

27. Atalhos Importantes

Definição Atalhos permitem executar determinadas ações com mais rapidez.
Atalho Função
Ctrl + Z Desfazer
Ctrl + Shift + Z Refazer
Ctrl + C Copiar
Ctrl + V Colar
Ctrl + X Recortar
Ctrl + A Selecionar elementos
Ctrl + D Duplicar
Ctrl + G Agrupar
Ctrl + Shift + G Desagrupar
Ctrl + S Salvar alterações
💡 Dica Não tente memorizar todos os atalhos imediatamente. Comece pelos comandos que você utiliza com maior frequência.

28. Histórico e Alterações

Definição O Figma possui recursos relacionados ao histórico de alterações, permitindo acompanhar versões anteriores do trabalho conforme disponibilidade do plano e do recurso utilizado.
📖 Por que isso é importante? Imagine que uma alteração foi feita no projeto e posteriormente você percebeu que precisava recuperar uma versão anterior. O histórico pode ajudar a localizar alterações anteriores.
💡 Dica Em projetos importantes, mantenha uma organização clara das versões e evite realizar alterações sem saber o que está sendo modificado.

29. Apresentando um Projeto

Definição O Figma pode ser utilizado para apresentar o resultado visual de um projeto e demonstrar a navegação do protótipo.

🎤 Antes da apresentação

  1. Organize as telas.
  2. Confira os textos.
  3. Verifique as imagens.
  4. Teste os links do protótipo.
  5. Confira o fluxo de navegação.
  6. Prepare a explicação do projeto.
🎯 Exemplo de apresentação 
Problema
   ↓
Solução
   ↓
Público-alvo
   ↓
Telas
   ↓
Navegação
   ↓
Protótipo
   ↓
Resultado

30. Figma e Desenvolvimento Web

Definição O Figma pode ser utilizado como uma etapa de planejamento visual antes da implementação do front-end.

🔄 Fluxo de trabalho

Ideia
  ↓
Pesquisa
  ↓
Wireframe
  ↓
Design no Figma
  ↓
Protótipo
  ↓
HTML
  ↓
CSS
  ↓
JavaScript
  ↓
Sistema funcionando
📖 Explicação O Figma não substitui HTML, CSS ou JavaScript. Ele ajuda a planejar visualmente aquilo que posteriormente poderá ser implementado no código.
💻 Exemplo No Figma você pode definir:
  • Onde ficará o menu.
  • Qual será a cor do botão.
  • Qual será o tamanho do título.
  • Como será o formulário.
  • Como será a navegação.
Depois, essas decisões podem ser transformadas em HTML, CSS e JavaScript.

31. Problemas Comuns e Como Resolver

❌ Elemento não aparece

Verifique se o elemento está oculto, atrás de outro elemento ou dentro de uma estrutura diferente.

❌ Não consigo selecionar o elemento

Verifique as camadas e a estrutura do projeto. O elemento pode estar dentro de outro Frame ou grupo.

❌ O projeto está desorganizado

Renomeie as camadas, organize as páginas e agrupe elementos relacionados.

❌ O protótipo não navega

Verifique se a interação foi configurada corretamente e se existe conexão entre as telas.

❌ O botão não mantém o padrão

Avalie a utilização de componentes e variantes para manter a consistência.

32. Boas Práticas no Figma

Definição Boas práticas são hábitos que tornam o projeto mais organizado, consistente e fácil de compreender.

🏆 Desafio Final — Criando um Sistema no Figma

Agora é hora de colocar em prática! Você deverá criar o protótipo visual de um pequeno sistema utilizando os principais conceitos apresentados neste manual.

🎯 Projeto

Crie o protótipo de um sistema escolar.

📝 Etapa 01 — Organização

  1. Criar um arquivo no Figma.
  2. Definir um nome para o projeto.
  3. Criar páginas para organizar o trabalho.

📝 Etapa 02 — Wireframe

  1. Criar o wireframe da tela de login.
  2. Criar o wireframe da tela inicial.
  3. Criar o wireframe da lista de alunos.

📝 Etapa 03 — Design

  1. Definir uma paleta de cores.
  2. Definir tipografia.
  3. Criar os componentes.
  4. Organizar os elementos.
  5. Aplicar Auto Layout quando necessário.

📝 Etapa 04 — Telas

  1. Criar tela de Login.
  2. Criar Dashboard.
  3. Criar Lista de Alunos.
  4. Criar Cadastro de Aluno.
  5. Criar tela de edição.

📝 Etapa 05 — Protótipo

  1. Conectar a tela de Login ao Dashboard.
  2. Conectar o Dashboard à Lista de Alunos.
  3. Conectar a Lista ao Cadastro.
  4. Adicionar navegação entre as telas.
  5. Testar o protótipo completo.

📝 Etapa 06 — Organização final

  1. Renomear todas as camadas importantes.
  2. Organizar as páginas.
  3. Conferir cores e tipografia.
  4. Verificar os componentes.
  5. Testar o protótipo.
  6. Compartilhar o projeto.
🎯 Estrutura esperada 
📄 Sistema Escolar

├── Wireframe
│
├── Design
│
├── Componentes
│
├── Protótipo
│
└── Telas
    │
    ├── Login
    ├── Dashboard
    ├── Alunos
    ├── Cadastro
    └── Edição
⚠️ Importante O objetivo não é apenas criar uma tela bonita. O projeto deverá apresentar organização, clareza, consistência visual e uma sequência lógica de navegação.
🏆 Desafio profissional Depois de terminar o projeto, imagine que você é um desenvolvedor recebendo esse arquivo de um designer.

Você conseguiria entender onde estão as telas? Os componentes? As cores? A navegação? Os elementos reutilizáveis?

Se a resposta for sim, você está começando a trabalhar com uma organização próxima da realidade profissional.