Figma: conhecendo a ferramenta

Conhecendo o Figma - Apresentação

Boas-vindas ao primeiro curso da formação de Figma da Alura!

Apresentação

Caso ainda não nos conheça, deixe eu me apresentar. Eu sou Mateus Villain, product designer e instrutor na Escola de UX e Design da Alura. Serei seu parceiro ao longo desta trajetória para aprender sobre essa ferramenta excepcional, o Figma. Figma é uma ferramenta excelente para design de interface.

Audiodescrição: Sou uma pessoa de pele branca com cabelos, sobrancelhas, olhos e barba castanhos-escuros. Meu cabelo está bem curto, diferente da minha barba, que é bem grande e cobre todo o meu pescoço. Estou usando uma camiseta de gola alta preta e uma jaqueta puffer preta, pois está bem frio. À minha frente, há um microfone apoaido por um braço articulado. Atrás de mim, encostado na parede, há uma grade com alguns crachás e objetos pendurados. Na frente dessa grade, há uma estante com alguns livros e uma boneca da Hermione Granger. Abaixo, há uma máquina de escrever. Ao lado da estante, há uma costela de Adão, que é uma planta decorativa.

O que vamos aprender?

Ao longo de toda a formação, desenvolveremos um projeto. Neste curso inicial, focaremos nas ferramentas essenciais para construir qualquer protótipo, site, aplicativo ou interface digital. Abordaremos formas, textos, estilos, variáveis e até mesmo auto-layout. Combinando todos esses recursos, conseguiremos construir um site bem estruturado e adaptável para computadores, tablets e celulares.

O Figma pode parecer uma ferramenta exclusiva para designers, mas esse curso é para qualquer pessoa interessada em aprender a trabalhar com o Figma. Seja para construir um site ou aplicativo para sua empresa, para um trabalho freelancer, ou mesmo se você for uma pessoa programadora que trabalha com engenharia e tecnologia e deseja adquirir mais expertise em design de interface, este curso e esta formação são perfeitos para você.

Esperamos você no próximo vídeo para começarmos a falar mais sobre o Figma. Até lá!

Conhecendo o Figma - Primeira vez no Figma

Para tudo na vida há uma primeira vez. Com o Figma, não é diferente. O primeiro passo no nosso curso será criar uma conta no Figma!

Criando uma conta

Vamos abrir o site do Figma no navegador para criar uma conta. Dessa forma, podemos entender como funcionam todas as etapas para começar a utilizar o Figma e como é a visualização para quem acessa pela primeira vez.

Em outra aba do navegador, vamos abrir o site Tua Mãe, aquela ursa, um site que cria um e-mail descartável, caso você não queira usar seu e-mail pessoal.

No site do Figma, clicaremos no botão "Comece grátis" no canto superior direito. A página solicitará um e-mail e uma senha para criar uma conta. Basta preencher os campos e clicar em "Criar conta" ao final. O processo leva alguns segundos e será necessário checar a caixa de entrada do e-mail para fazer a verificação.

Feito isso, o Figma solicitará algumas informações para identificar seus objetivos e seus interesses. Preencha os dados e siga os passos da maneira que preferir até chegar à etapa de seleção de planos.

Na etapa de escolha do plano, temos as opções:

• Starter
• Professional
• Organization

Todos os planos são pagos em dólar. Neste curso, trabalharemos com o Plano Starter, pois não há necessidade de usar ferramentas pagas, por enquanto. Em seguida, você pode continuar a criação da sua conta.

Ao final, chegaremos à página inicial do Figma. No canto inferior direito, o Figma oferecerá um tour pela página e você pode conferir, se quiser.

O Figma funciona bem no navegador, mas também podemos baixar a ferramenta no computador. Este é o único vídeo em que usaremos o navegador. Nos próximos vídeos e cursos, utilizaremos o software baixado. Não muda nada, exceto que o Figma está instalado no computador.

Página inicial do Figma

Na página inicial do Figma, há uma barra de navegação à esquerda. No topo dela, temos a foto do perfil e o nome. Ao clicar nele, surge uma aba com opções da conta, como temas escuro ou claro, configurações de comunidade, de notificações, de sessão etc. Você pode explorar essas opções no seu ritmo. Clicando novamente na foto de perfil, a aba fecha.

Abaixo do nome, há um campo de busca, essencial para buscar arquivos com os quais estamos trabalhando.

Em seguida, temos o menu "Recents". Ao clicar nele, os arquivos acessados recentemente são exibidos na área central da página. Por padrão, toda conta nova vem com três arquivos de fundamentos para ensinar mais sobre o Figma. Se te interessar, você pode explorá-los, mas nesse curso explicaremos tudo o que você precisar saber com muito mais detalhes!

Abaixo do menu "Recents", há um time criado automaticamente com o nome de usuário definido na sua conta. Ao clicar nele, aparece uma aba em que podemos criar outros times.

Na sequência, temos o menu "Drafts" que exibe nossos arquivos de rascunhos. Por padrão, as contas novas contêm dois rascunhos. Depois, há o menu "All projects", em que aparecem todos os projetos vinculados a algum time. Por fim, temos a aba "Starred", onde podemos colocar nossas pastas favoritas para acesso rápido.

Vamos voltar ao menu "Recents". Como mencionamento anteriormente, os arquivos aparecem na parte central da página. Na parte superior, há 4 botões para começarmos a criar, da esquerda para a direita:

• New design file
• New FigJam board
• New Slide Deck
• Import

Vamos explorar cada uma dessas opções mais adiante em nossos estudos.

Vale ressaltar que o Figma trabalha de forma online, diferente de programas como Photoshop, que salva arquivos localmente. Podemos exportar arquivos para criar arquivos .fig, mas o ideal é manter tudo no navegador. É melhor e também é recomendado pela própria ferramenta.

Para começar a criar, clicaremos no botão "New Design File" (novo arquivo de design). O novo arquivo será carregado e a interface será um pouco diferente. Quando trabalharmos com o Figma, utilizaremos a versão atualizada.

No próximo vídeo, discutiremos como mexer no arquivo de design. Por enquanto, o objetivo é criar uma conta no Figma. Se ainda não criou, faça isso agora e explore à vontade. Nos vemos no próximo vídeo. Valeu!

Conhecendo o Figma - Explorando a ferramenta

Conforme mencionado no vídeo anterior, agora estamos utilizando o software em vez do navegador. Não há diferença entre a versão instalada e a versão web do navegador, então não se preocupe. Se houver alguma atualização no Figma, ela ocorrerá em ambas as versões. Portanto, independentemente da forma de utilização que você escolher, todas estarão sempre idênticas.

Explorando a interface

Na página inicial, vamos acessar o menu de arquivos recentes e clicar no botão "New Design File na parte superior para criar um arquivo de design e começarmos a explorar a ferramenta.

Note que, diferente do vídeo anterior, temos uma visualização mais limpa, mais simples. As informações estão mais condensadas e fáceis de entender e modificar.

No canto superior esquerdo, há um ícone de casa. Se clicarmos nele, voltamos à página inicial do Figma. Já exploramos a interface da página inicial, então agora estudaremos a parte do arquivo.

Na barra superior do software, estão nossas abas. Nessa área, podemos criar outras abas e arquivos, que serão salvos como se fossem abas do navegador.

Na lateral esquerda da interface, há um barra de navegação, onde é possível configurar o arquivo. O primeiro item tem o formato do logotipo do Figma. Ao clicar nele, temos acesso a uma série de menus.

Em seguida, temos o nome do arquivo. Por padrão, ele aparece como "Untitled" (sem título). Clicando nesse nome, podemos mudá-lo. Logo abaixo, está escrito "Drafts", o que indica que o arquivo é um rascunho.

Na sequência, temos a aba "Pages" (páginas), onde aparecerão todas as páginas que criamos. Por padrão, temos apenas a página 1. Clicando no ícone de "+" à direita desse menu, podemos criar várias páginas diferentes. Depois, temos a aba "Layers" (camadas) que atualmente está vazia, pois ainda não criamos nada.

Na lateral direita da interface do Figma, há dois menus: Design e Prototype. Podemos alternar entre um e outro, clicando no nome deles na parte superior. O menu Design é onde faremos todas as edições visuais do projeto. Já o menu Prototype trata da navegação, assunto abordado em cursos futuros.

Na parte inferior da interface, temos as ferramentas principais. Da esquerda para a direita:

• a seta para movimentação, cujo ícone é um cursor de mouse
• os frames para escolher o tipo de dispositivo, cujo ícone é um jogo da velha
• formas geométricas, cujo ícone é um quadrado
• a caneta para vetor, cujo ícone é a ponta de uma caneta tinteiro
• o bloco de texto, cujo ícone é uma letra T maiúscula
• comentários, cujo ícone é um balão de fala
• o menu do Figma, que contém atalhos e configurações para diversos recursos, cujo ícone são 4 formas geométricas

Iniciando um projeto

Para começar um projeto no Figma, precisamos escolher o dispositivo com o qual vamos trabalhar, seja um computador, tablet, celular ou até mesmo smartwatch. O Figma fornece várias medidas pré-estabelecidas para facilitar nosso trabalho.

No menu inferior, clicaremos no menu de frames (segundo ícone). Assim, no menu à direita, serão mostradas todas as opções de dispositivo disponíveis. Por exemplo, ao expandir a opção "Phone" (celular), há várias medidas de iPhone e duas para Android. De modo similar, há opções para tablet, desktop, apresentação (slides) e smartwatch (Apple Watch).

Vamos produzir uma interface para computador, então basta expandir a opção "Desktop" para escolher entre vários modelos. O que recomendamos é "Desktop 1440 x 1024", pois é mais generalista. Ao clicar na opção desejada, um frame é gerado na parte central da tela.

Por padrão, o nome desse frame será "Desktop - 1", como você pode conferir no canto superior esquerdo dele. Vamos dar um clique duplo sobre o nome e renomeá-lo para "Página inicial".

No menu à esquerda, o menu de camadas (layers) não estará mais vazio. Agora, temos listado o frame chamado "Página inicial" com um ícone igual ao menu de frames, isto é, um jogo da velha. Tudo que colocarmos dentro do frame "Página inicial" fará parte da composição do site ou produto digital.

Vamos começar inserindo uma forma geométrica, usando os atalhos do menu inferior. À direita da opção de formas geométricas, há uma seta. Clicando nela, será exibido outras opções: linha, seta, elipse, polígono, estrela ou inserção de imagem. Ao lado de cada opção, temos os atalhos do teclado. Por exemplo, o retângulo é a letra R.

Selecionaremos o retângulo. Em seguida, vamos posicionar o cursor sobre o frame, clicar e arrastar para criar e ajustar uma forma geométrica.

Ao clicar em um elemento no Figma, o painel à direita é alterado, adaptando-se às necessidades e aos tipos de design que esse elemento comporta. Basta selecionar um elemento na área central da página ou no menu Layers.

Utilizar o Figma não é difícil. Se você já usou outras ferramentas de design, como Photoshop, Illustrator ou Canva, será fácil aprender sobre o Figma, pois ele possui elementos e ferramentas semelhantes. Precisamos apenas nos adaptar à organização e nomenclaturas do Figma e entender os recursos exclusivos.

Criando um interface simples

Para criar uma interface simples, começaremos com um cabeçalho básico. Podemos colocar um retângulo no topo, semelhante a uma barra de navegação de um site. No menu à direita, é possível mudar sua cor na aba de preenchimento (Fill). Escolhemos um azul claro.

Em seguida, adicionaremos uma caixa de texto com a palavra "Alura" e posicionaremos no canto esquerdo do cabeçalho. Na aba de tipografia (Typography), ajustaremos tamanho para 36 pixels com negrito e selecionaremos a cor branca.

Ao criar outro bloco de texto, ele terá as mesmas definições do último criado. No caso, com tamanho de 36 pixels e negrito. Alinhadas à direita do cabeçalho, colocaremos algumas caixas de texto para indicar links do site: sobre nós, serviços e contato.

Pronto, criamos um cabeçalho! Embora a estética não esteja muito bonita ainda, o processo é rápido e simples, utilizando poucos elementos. Basicamente, fizemos um retângulo azul e inserimos quatro blocos de texto, ajustando tamanhos e fontes.

No próximo vídeo, começaremos a criar nosso projeto de fato. Até lá!

Sobre o curso Figma: conhecendo a ferramenta

O curso Figma: conhecendo a ferramenta possui 166 minutos de vídeos, em um total de 41 atividades. Gostou? Conheça nossos outros cursos de UI Design em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Conhecendo o Figma
• Ferramentas fundamentais
• Organizando projetos e UIs
• Variáveis e estilos
• Alinhamento e responsividade