Skip to content

Latest commit

 

History

History
97 lines (74 loc) · 3.5 KB

Tutorial Básico do Figma.md

File metadata and controls

97 lines (74 loc) · 3.5 KB

Tutorial: Criando uma Tela de App no Figma

1. O que é o Figma?

O Figma é uma ferramenta de design baseada na web, ideal para criar interfaces de usuário (UI) e protótipos interativos. Ele funciona no navegador e também possui uma versão desktop. É colaborativo e gratuito para uso básico.

Passo a Passo

Passo 1: Criação do Projeto

  1. Acesse o Figma:
    • Abra figma.com e faça login ou crie uma conta gratuita.
  2. Crie um novo arquivo:
    • Clique em "New Design File" para iniciar um novo projeto.

Passo 2: Configuração do Frame

  1. Adicione um Frame (Artboard):

    • No painel à direita, clique no ícone de "Frame" ou pressione F.
    • Escolha um tamanho para o seu app:
      • iPhone 14 Pro: 393x852 px.
      • Android padrão: 360x800 px.
    • Clique na tela para criar o frame.

  2. Nomeie o Frame:

    • Clique no nome no canto superior esquerdo do frame e renomeie, por exemplo: "Tela Inicial".

Passo 3: Adicione Componentes Básicos

  1. Barra Superior (Header):

    • Selecione a ferramenta de retângulo (R) e desenhe um retângulo na parte superior do frame (ex.: 393x50 px).
    • Altere a cor no painel de "Fill" à direita.
    • Adicione um texto (T) para o título da tela, como "Bem-vindo".

  2. Botões:

    • Use a ferramenta de retângulo (R) para criar um botão (ex.: 200x50 px).
    • Ajuste o raio dos cantos no painel direito (Corner Radius) para deixar os cantos arredondados (ex.: 8 px).
    • Adicione um texto (T) sobre o botão, como "Entrar".

  3. Campo de Texto:

    • Crie um retângulo menor (ex.: 300x40 px).
    • Adicione um texto de exemplo dentro, como "Digite seu e-mail".

Passo 4: Personalize o Design

  1. Cores e Gradientes:

    • Clique no retângulo ou objeto desejado e ajuste a cor em Fill.
    • Para criar um gradiente, clique em Solid e escolha Linear Gradient.

  2. Ícones:

    • Use a biblioteca de ícones do Figma:
      • Clique em "Assets" no painel esquerdo.
      • Pesquise por ícones (ex.: ícone de menu, usuário, etc.).
    • Ou baixe ícones no site Material Icons e importe para o Figma.

Passo 5: Prototipagem

  1. Adicione interação entre telas:
    • Crie outra tela (outro frame) no mesmo arquivo, como "Tela de Login".
    • Vá para a aba Prototype (no painel direito).
    • Selecione o botão "Entrar" da primeira tela.
    • Arraste a linha azul para a segunda tela.
    • Configure a transição, como "Navigate To" e escolha um efeito, ex.: "Slide In".

Passo 6: Teste do Protótipo

  1. Inicie o protótipo:
    • Clique no botão de play no canto superior direito.
  2. Navegue pelas telas:
    • Interaja com os botões para verificar se a navegação está funcionando.

Passo 7: Exporte o Projeto

  1. Selecione o frame:
    • Clique no frame que deseja exportar.
  2. Exporte a imagem:
    • Vá em File > Export ou pressione Ctrl+Shift+E.
    • Escolha o formato (PNG, JPEG, ou SVG).

Recursos Extras

Plugins úteis no Figma:

  • Unsplash: Para adicionar imagens gratuitas diretamente no design.
  • Material Design Icons: Para ícones prontos do Google.
  • Content Reel: Gera textos e avatares fictícios.

Atalho Básicos:

  • R: Ferramenta de retângulo.
  • T: Ferramenta de texto.
  • Shift + Mouse: Restrições de alinhamento.