Figma: Conhecendo o programa

Conhecendo o Figma - Apresentação

Apresentando os instrutores

Boas-vindas ao primeiro curso da formação de Figma aqui da Alura. Se ainda não nos conhecemos, vamos nos apresentar. Meu nome é Matheus Vilaen, sou Product Designer, especialista em Design Systems, autor do livro Design System pela Casa do Código.

Audiodescrição: Matheus é uma pessoa de pele branca, com cabelo, sobrancelhas, olhos e barba castanho-escuros. O cabelo é curto, enquanto a barba é longa, cobrindo praticamente todo o pescoço. Matheus usa óculos, uma pulseira no braço direito e um relógio no braço esquerdo. À sua frente, há um microfone sustentado por um braço articulado. Ele veste uma camisa bege e uma corrente prata. Ao fundo, há uma parede com uma grade e alguns crachás pendurados, além de uma prateleira com livros, bonecos e uma câmera antiga.

Introduzindo o curso e a ferramenta Figma

Neste primeiro curso da formação, vamos conhecer uma ferramenta essencial para empresas que trabalham com UX e UI: o Figma. Essa ferramenta é amplamente utilizada para construir interfaces digitais, seja para sites, aplicativos, softwares ou até mesmo aplicativos de smartwatch. O Figma é reconhecido como a maior ferramenta já existente nessa área e, além disso, é gratuita.

Explorando o conteúdo do curso

Ao longo deste curso, composto por cinco aulas, vamos explorar o Figma em detalhes. Conheceremos suas ferramentas e discutiremos os recursos fundamentais para a construção de interfaces, como formas geométricas, frames e sections. Também abordaremos informações intermediárias e avançadas, como estilos locais, estilos de tipografia, estilos de cor, variáveis de tipografia, variáveis de cor, booleana e string. Tudo isso será integrado à formação.

Finalizando com auto-layout e prática de projeto

Além disso, finalizaremos o curso com a parte de auto-layout, um dos recursos mais importantes para quem deseja trabalhar com design responsivo. Este curso nos preparará completamente para começar a criar produtos digitais para qualquer tipo de ambiente e dispositivo.

Durante cada uma das aulas, trabalharemos em um projeto prático, permitindo que nos desenvolvamos na prática, como ocorre no mercado. Isso também nos ajudará a criar um portfólio. Esperamos vê-los no próximo vídeo, onde começaremos a nos aprofundar nessa maravilhosa ferramenta. Até lá!

Conhecendo o Figma - Primeira vez no Figma

Criando uma conta no Figma

Vamos iniciar explorando a parte inicial do Figma, criando nossa conta e conhecendo a ferramenta pela primeira vez. O primeiro passo é acessar o site figma.com. Após carregar o site, fechamos a janela de cookies para evitar interrupções e clicamos em "comece sem custos". Uma janela modal será aberta para inserirmos nosso e-mail. Como estamos criando uma conta do zero, utilizaremos um e-mail temporário, que será destruído em 10 minutos. Após inserir o e-mail, definimos uma senha e criamos a conta. Em seguida, o Captcha será carregado, e, após sua conclusão, um e-mail de confirmação será enviado. Copiamos o link de confirmação e o abrimos para concluir o processo.

Ao entrar no Figma, iniciamos o processo de onboarding. O sistema pergunta nosso nome, que inserimos como Matheus. O Figma é interativo e está disponível em português há pouco tempo. Continuamos respondendo como planejamos usar o Figma, selecionando "escola". Em seguida, indicamos nossa função na instituição de ensino, escolhendo "professor". Para o tipo ou nível de escola, selecionamos "curso online" ou "bootcamp", como Alura.

Explorando as funcionalidades de colaboração e planos

O Figma é uma ferramenta de colaboração, permitindo convidar outras pessoas para se juntarem a nós. Caso estejamos trabalhando em equipe ou em uma empresa, podemos enviar convites ou links para os colegas. No nosso caso, ignoramos essa etapa e prosseguimos.

Se já utilizamos produtos da Figma anteriormente, indicamos "sim, muitas vezes". Em seguida, escolhemos o plano desejado: iniciante, profissional, organização ou Enterprise. O plano Enterprise é o mais caro e requer contato direto com a empresa para negociação. Optamos pelo plano iniciante, que é gratuito e possui algumas limitações, mas oferece todas as ferramentas necessárias para criar produtos digitais.

Iniciando um projeto no Figma

Após selecionar o plano iniciante, continuamos. O sistema pergunta o que queremos criar primeiro. Escolhemos "site" e observamos as mudanças nas imagens ao lado. Para a criação do site, optamos por "construir com blocos predefinidos". Existem outras opções, mas decidimos finalizar dessa forma.

O Figma começa a carregar um novo arquivo. Após o carregamento, surgem alguns avisos, e clicamos em "comece agora". Uma nova janela é aberta para criar o site, mas não é nosso foco no momento. Decidimos voltar para a área inicial e excluir o arquivo criado.

Explorando os arquivos padrão e tutoriais

Ao criar uma conta no Figma, três arquivos padrão são gerados. Curiosamente, o sistema indica que editamos esses arquivos há três minutos, o que não ocorreu, pois nunca os vimos antes.

Os arquivos mencionados, como Figma Basics e Team Library, são tutoriais que ensinam a utilizar os recursos fundamentais do Figma, incluindo o FigJam, bibliotecas de time, design systems e guias de estilo. É importante destacar que estamos utilizando o navegador, acessando o site Figma.com, onde criamos uma conta e podemos entrar em um arquivo para editá-lo normalmente. Uma das grandes vantagens do Figma é que ele pode ser utilizado tanto no navegador quanto instalado no computador, seja em sistemas Mac ou Windows.

Utilizando o Figma em diferentes plataformas

Por exemplo, em um Chromebook, que é baseado em Linux e não permite a instalação de programas como Photoshop ou Illustrator, podemos usar o Figma na versão do navegador sem nenhuma diferença em relação à versão instalada. Os atalhos e ferramentas são os mesmos, pois o Figma instalado é baseado em web, refletindo todas as atualizações do Figma.com.

No painel à esquerda, encontramos os menus principais. No topo, temos as configurações de usuário, que são bastante padrão. Há um campo de busca útil para trabalhar com muitos arquivos, uma área de comunidade, que discutiremos mais adiante, e a seção do nosso time, criada automaticamente. Nela, podemos ver nossos arquivos rascunhos e projetos. No plano gratuito, podemos ter apenas um projeto com até três arquivos.

Gerenciando arquivos e projetos no Figma

Além disso, há uma lixeira para onde os arquivos excluídos são enviados, podendo ser recuperados e movidos de volta para rascunhos ou projetos. Também podemos marcar projetos e arquivos como favoritos para fácil acesso, semelhante aos favoritos do navegador.

Na área de recentes, no topo, temos várias opções de arquivos que podemos criar no Figma, como a versão de design, que será a mais utilizada neste curso, a versão de FigJam, que funciona como um quadro branco infinito, Figma Slides, Figma Bus, Figma Site e Figma Make. É possível importar arquivos para o Figma, que são salvos na nuvem por padrão, mas também podem ser exportados para o computador e compartilhados com outras pessoas.

Concluindo a introdução ao Figma

Na área central, há uma novidade recente: um campo de prompt onde podemos digitar comandos para iniciar projetos mais rapidamente, tanto no Figma Site quanto no Figma Make.

Essa é a apresentação do Figma. Agora que estamos familiarizados, podemos prosseguir para os próximos vídeos e entender melhor o design de interface dentro dessa ferramenta. Até o próximo vídeo!

Conhecendo o Figma - Explorando a ferramenta

Explorando a importância de experimentar novas ferramentas

Sempre que recebemos um produto novo, como um celular, exploramos ao máximo seu funcionamento, recursos, câmera, configurações, o que possui e o que não possui. Como pessoas designers, queremos conhecer cada detalhe e explorar completamente o produto. Com uma ferramenta digital, o processo não é diferente. Recomendamos que, antes de se aprofundar e aprender de fato, abram a ferramenta, especialmente se for gratuita, e experimentem. Descubram o que conseguem fazer, o que já reconhecem e o que pode ser familiar.

No caso do Figma, estamos com nossa conta temporária aberta. Vamos ensinar algo interessante que poucas pessoas conhecem: ao abrir uma aba do navegador e digitar Figma.new, ele cria um arquivo novo em nossa conta, sem precisar acessar o site do Figma ou abrir o software e clicar em "arquivo de design". Essa dica é valiosa e pouco conhecida.

Navegando pela interface do Figma

Estamos no arquivo de design, a área principal de trabalho. Como essa área se comporta dentro do sistema? Como devemos reconhecê-la para utilizar? Existem quatro áreas principais aqui. A primeira é o painel à esquerda, onde ficam o nome do arquivo, as informações do arquivo e das camadas. O título do arquivo, por padrão, é "sem título" quando criado do zero, mas podemos renomeá-lo para "arquivo de teste".

Para renomear o arquivo, basta clicar no título padrão e digitar o novo nome, como "Arquivo de Teste".

Abaixo, é mostrado em qual time ou projeto o arquivo está. Como criamos um arquivo novo, não vinculado a nenhum projeto, ele entrou direto nos rascunhos, mas podemos movê-lo para um projeto posteriormente.

Explorando as funcionalidades do painel esquerdo

Ao lado, é indicado que estamos no plano gratuito. No plano pago, essa informação não aparece. O Figma sempre traz alguma informação para promover seus serviços, afinal, é uma empresa que busca vender. Abaixo, há duas abas: "arquivo" e "recursos". A aba "recursos" será abordada mais adiante. Na aba "arquivo", vemos a quantidade de páginas e todas as páginas que o arquivo possui. Podemos organizar informações em páginas diferentes para manter a organização do projeto. Abaixo das páginas, são mostradas todas as camadas. Quem já usou ferramentas de design, como o Photoshop, reconhecerá essa funcionalidade, que também será abordada na formação.

No painel da esquerda, encontramos o painel que trata do nosso arquivo e das nossas camadas. Temos também o painel da direita. No painel da direita, ele mostra os usuários que estão acessando o nosso arquivo, permitindo que duas ou mais pessoas interajam dentro do mesmo arquivo no Figma. Conforme mencionado no vídeo anterior, essa colaboração permite que possamos convidar outras pessoas, enviar o link do arquivo e realizar edições simultaneamente, sem a necessidade de exportar o arquivo e enviá-lo de volta, um processo desnecessário e ultrapassado.

Personalizando e colaborando no painel direito

Além disso, o painel da direita também exibe todas as opções de personalização da nossa página e área de trabalho. Ao clicar em um determinado elemento, como um retângulo cinza, são exibidas todas as opções de personalização disponíveis, como alinhamento, rotação, dimensões, aparência, opacidade, preenchimento, traçado, estilos de sombra e desfoque. Se não estivermos selecionando nada, o painel mostra opções de variáveis, estilos de cor, estilos de texto, estilos de sombra e até mesmo exportação em imagem e PDF, que o Figma também permite. Neste momento, estamos apenas apresentando e reconhecendo a área de design, pois falaremos de cada uma dessas funções especificamente.

Na parte central, temos o nosso canvas, a nossa área de trabalho, onde podemos aplicar zoom, inserir todas as nossas páginas e designs. Essa parte central é infinita, permitindo que trabalhemos com todos os nossos layouts e páginas dos produtos.

Explorando a área de ferramentas e menus

Por fim, temos a área de ferramentas na parte inferior, onde encontramos o cursor, espaço, frames, formas, vetores, textos, comentários e recursos adicionais, tanto do próprio Figma quanto de inteligência artificial e recursos extras. Há opções para design, desenvolvimento, trabalho com vetor e desenho dentro do Figma. Abordaremos esses aspectos minuciosamente ao longo da formação.

No canto superior esquerdo, há um botão do Figma com todas as opções de arquivo, vetor e visualização, que podemos controlar. Essas opções e menus estão localizados aqui, mas também podem ser acessados através de um menu de ações na parte inferior, permitindo uma busca mais prática.

Concluindo a introdução ao Figma

Essa é a estrutura do nosso arquivo e a forma como interagimos dentro do Figma. A partir da próxima aula, exploraremos cada uma dessas posições em detalhes. Nos vemos lá para começar a trabalhar e conhecer mais as ferramentas, iniciando nosso projeto. Até lá!

Sobre o curso Figma: Conhecendo o programa

O curso Figma: Conhecendo o programa possui 175 minutos de vídeos, em um total de 42 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:

• capitulo