Skip to content
Thayssa Fernanda edited this page May 1, 2024 · 15 revisions

Figma

image

1. Preparação do Ambiente de Trabalho

Para iniciar o uso da plataforma é necessário criar uma conta e um projeto. Aqui estão os passos básicos:

1.1 Criação de conta na plataforma

  1. Crie a conta pelo site oficial do Figma: https://www.figma.com/.

image

Pode ser realizado cadastro tanto com um email e uma senha ou diretamente com uma conta google.

1.2 Criando um novo projeto

  1. Clique em "Drafs" a esquerda da tela e logo em seguida em "+ Design File", que pode ser encontrado no canto superior direito da tela.

image

Com isso, a tela para a edição do novo projeto será aberta.

image

1.3 Funcionalidades básicas de um projeto no Figma

image

  1. Menu: Pode ser encontrado opções de abertura, salvamento e exportação de arquivos.

  2. Ferramentas: Permite acessar rapidamente as ferramentas que provavelmente usará com mais frequência, como mover, enquadrar, formas, caneta e texto.

  3. Colaboração e Visualização: Opção de compartilhamento de arquivos, visualização de quem esta visualizando aquele arquivo em questão em tempo real, além de opções de visualização e zoom.

  4. Camadas: São os elementos do arquivo, listados por páginas, quadros e grupos.

  5. Tela: Onde o design é feito.

  6. Propriedades: Informações contextuais e configuraões para qualquer objeto selecionado. Tendo como opção a guia Desing e Protótipo.

1.4 Ferramentas básicas do Figma

  1. Moldura: Clique em Frame ou aperte a tecla F, então aparecerá a opção para a criação de moldura, sendo um modelo de moldura jpa existente como o tipo de tela de um a aparelho especifico (Android) ou selecionar na tela e arrastar ate o tamanho desejado.

  2. Zoom: Para aumentar e dimunuir o tamanho da tela, basta utilizar a tecla Ctrl + tecla + (aumentar) ou tecla - (diminuir), ou tecla Ctrl + scrool do mouse.

  3. Camada de texto: Para criar uma camada de texto, basta ir em Text, que esta nas ferramentar na parte superior a tela e selecionar o local que deseja colocar.

  4. Colocar formas: Na parte de ferramentas, ao lado direito de Frames, existe uma lista de formatos que podem ser utilizados para a criação do design do projeto.

1.4 Atalhos no Figma

  1. Ctrl + ]: mover uma camada para frente

  2. Ctrl + Shift + ]: mover para a camada da frente

  3. Ctrl + [: mover uma camada para tras

  4. Ctrl + Shift + [: mover para a camada de tras

Vídeos

Tutorial para a utilização do Figma

tutorial-figma.mp4

Clone this wiki locally