Figma: conhecendo a ferramenta

Conhecendo o Figma - Apresentação

Já pensou em aprender a utilizar a maior ferramenta de prototipagem user interface (interface de usuário) do mundo? Boas-vindas ao primeiro curso da formação de Figma da Alura!

Caso você ainda não me conheça, eu sou Mateus Villain, instrutor aqui na escola de UX & Design, e serei o seu instrutor ao longo de toda essa jornada, de todas essas aulas, de todos esses cursos que você vai acompanhar para aprender sobre a maior ferramenta de user interface e prototipagem do mundo.

Audiodescrição: Mateus é um homem de pele branca, com cabelos, olhos, sobrancelhas e barba castanho-escuros. A barba é grande, cobrindo até o pescoço. Ele usa óculos de armação redonda dourada e um gorro bege, veste um moletom branco, e à frente dele, há um microfone segurado por um braço articulado. Ao fundo, há uma estante com alguns objetos antigos, uma máquina de escrever, um Super Nintendo, alguns jogos de videogame e também uma grade com alguns quadros vintage pendurados.

O que vamos aprender?

Neste primeiro curso da formação de Figma, vamos abordar os conhecimentos necessários para que qualquer pessoa consiga abrir a ferramenta e começar a construir, independentemente do que for, seja um site, seja um aplicativo, seja qualquer outro tipo de produto digital.

Ao longo deste curso, vamos trabalhar em um projeto chamado Fastask, que conheceremos melhor no próximo vídeo. Vamos evoluir esse projeto utilizando as ferramentas essenciais que todas as pessoas precisam conhecer para criar qualquer coisa dentro do Figma.

Lembre-se de que, neste curso, vamos estudar cada uma das ferramentas e, após entender e praticar, colocaremos isso em prática dentro de um projeto para criar um portfólio, que é nosso objetivo final.

Queremos ressaltar que este curso não é voltado apenas para pessoas que atuam como designers. Se você trabalha com programação, é uma pessoa desenvolvedora, se é uma pessoa responsável por gerenciamento de produtos, enfim, qualquer pessoa que tenha interesse em aprender a trabalhar com o Figma é mais do que bem-vinda.

Esperamos você no próximo vídeo para falarmos melhor sobre o conteúdo do nosso curso. Te vejo lá, até mais!

Conhecendo o Figma - Visão geral

Vamos entender melhor o conceito do que iremos aprender ao longo dessas aulas. É possível que você já tenha visto que esse curso tem cinco aulas. Obviamente, não estudaremos literalmente todos os recursos do Figma; focaremos somente naqueles que são essenciais para desenvolver qualquer tipo de projeto digital que você deseje realizar.

Visão geral

Nesse caso, vamos focar em uma plataforma web, desktop, do projeto chamado Fastask. Trata-se de uma pequena plataforma de checklists, de tarefas, onde nós podemos registrar, por exemplo, nossa lista de supermercado, nossa lista de tarefas do trabalho ou de casa.

No decorrer desse curso e da formação, vamos melhorar e desempenhar novas funções para esse pequeno projeto. Assim, ao final da formação, teremos algo mais completo e bem documentado. Nosso conhecimento e domínio sobre produção de protótipos digitais no Figma serão evidenciados.

Primeira aula

Na primeira aula do curso, como estamos iniciando nossa jornada dentro do Figma, é mais que justo conhecermos a ferramenta. Teoria é muito importante, mas há bastante prática ainda nesta primeira aula.

Nós vamos conhecer a ferramenta, nos habituar um pouco a ela, entender o que é o Figma, o que ele é capaz de fazer. Vamos entender tudo isso na aula 1, logo após este vídeo de visão geral.

Segunda aula

Quando chegarmos à segunda aula, vamos entender melhor sobre as ferramentas fundamentais de trabalho, os recursos para construir um protótipo. Aprenderemos a trabalhar com regiões, com formas, com textos, e entenderemos como unir tudo isso para adicionar estilos ao Figma.

Tudo isso permitirá a criação de páginas excelentes, com uma produção interessante semelhante àquelas que vemos em vários sites e aplicativos.

Terceira aula

É interessante que, a cada aula, aprendemos cada vez mais recursos que se complementam com o conteúdo anterior. Então, sempre avançamos e nunca retrocedemos. Na terceira aula, vamos entender melhor sobre as funcionalidades de camadas do Figma, sobre grids, réguas, e sobre organização do nosso protótipo.

Quarta aula

Quando tivermos essa organização bem-feita, vamos para a quarta aula entender um pouco melhor sobre algumas funções que são extremamente importantes no Figma e que não poderíamos excluir neste primeiro curso, que são os estilos, seja com variáveis ou com estilos locais.

O Figma oferece alguns recursos bem interessantes que vamos explorar neste primeiro curso, mas não vamos parar por aqui; daremos continuidade ao longo da formação.

Quinta aula

Encerraremos nosso curso na quinta e última aula, dando os toques finais em nossa plataforma, trabalhando um pouco mais com quesitos de design responsivo, porque o Figma tem algumas funções pensadas exatamente para isso. Também vamos trabalhar com alinhamentos, posicionamentos, e entender como funcionam todos esses aspectos em um produto digital.

Conclusão

Com isso, encerramos o conteúdo e deixamos o nosso protótipo preparado para o segundo curso, que você assistirá assim que terminar este. Lembrando que este é apenas o começo!

Se você tiver alguma dúvida, não hesite em ir ao fórum ou ao Discord. Não guarde a dúvida para você: compartilhe!

Caso queira, você pode mostrar o seu projeto, demonstrar seu progresso, ou se quiser fazer algo diferente do que for mostrado no curso, não há problema algum. O que realmente queremos é que você pratique, porque só a prática vai garantir o conhecimento da ferramenta Figma.

Aguardamos você no próximo vídeo, onde vamos começar a estudar Figma de fato. Nos encontramos lá. Valeu!

Conhecendo o Figma - Primeira vez no Figma

A teoria é extremamente essencial para qualquer conteúdo que estamos prestes a aprender. É sempre bom conhecer a história, os métodos e tudo que envolve o contexto. Porém, não há nada melhor que iniciar um curso novo e praticar.

É exatamente isso que faremos neste e no próximo vídeo: vamos adentrar o Figma pela primeira vez e iniciar um pequeno projeto.

Primeira vez no Figma

Para começar, vamos acessar o site do Figma. Na página inicial, clicaremos no botão roxo "Get started for free" no canto superior direito para criar uma conta do zero.

Criando uma conta

Ao fazer isso, será aberta uma janela onde vamos inserir nosso e-mail, criar uma senha qualquer, e criar a conta no botão "Create account". O processo de criação de conta no Figma é extremamente simples. Será enviada a confirmação para o e-mail, um procedimento padrão que já sabemos como funciona. Para confirmar, vamos verificar o e-mail.

Na sequência, seremos redirecionados para uma nova aba onde daremos continuidade ao processo de cadastro que possui 7 passos. Basicamente, o Figma quer conhecer um pouco sobre a pessoa usuária para criar um perfil.

Na primeira etapa, ele pergunta o nome; o instrutor preencherá com "Mateus" e você pode colocar o seu. Em seguida, definimos o tipo de trabalho que fazemos; podemos selecionar "Design". Por último, vamos indicar que usaremos o Figma para ensinar ("For teaching or taking a class").

Ao prosseguir, o Figma pergunta se queremos convidar pessoas colaboradoras, outros colegas, devs, e assim por diante. Não temos ninguém para convidar no momento, então, vamos clicar no botão "Do this later" ("Fazer isso depois").

Na próxima tela, ele pergunta onde trabalhamos. Podemos definir que trabalhamos em uma empresa, por exemplo.

Caso prefira, você pode pular todos esses passos, mas vamos continuar respondendo.

Na quarta etapa, é questionado o que nos trouxe ao Figma; vamos marcar a opção de trabalho ("Using it for work"). Em seguida, ele pergunta com quem colaboramos com mais frequência; podemos selecionar a opção Just myself ("Somente eu").

Depois ele questiona sobre o plano que queremos seguir. O Figma é uma plataforma 100% gratuita, então não precisamos pagar nada. Por isso, selecionaremos a opção "Start for free".

Por fim, o Figma pergunta que tipo de arquivo queremos começar a criar, ou se queremos criar tudo por conta própria. Nesse caso, vamos clicar na opção "Design with Figma". Isso carregará um arquivo de design.

Disponibilidade do Figma

Muitas pessoas podem se surpreender, porque o Figma funciona no navegador, ou seja, não é necessário instalar nada. Essa é uma das melhores características do Figma: é uma ferramenta não só gratuita, mas também disponível em todos os sistemas.

No momento, o instrutor utiliza o Figma no navegador, mas ele também tem a aplicação instalada na máquina. Assim, independentemente de usar Windows ou Mac, você pode instalar o Figma.

Se você usa Linux, ChromeOS, ou outro sistema operacional diferente de Windows e Mac, não poderá instalar, mas pode acessar o site do Figma, entrar em sua conta e interagir com as mesmas ferramentas como se fosse o software instalado, porque o Figma é baseado na web.

Portanto, tudo que você pode fazer na versão instalada, também pode fazer na versão do navegador. Não há nenhuma diferença, tudo é 100% igual, até os atalhos são idênticos.

Conhecendo a página inicial

Na página do arquivo de design criado, vamos clicar no ícone do logo do Figma, localizado no canto superior esquerdo, e selecionar a opção "Back to files" para retornar à página inicial.

Podemos apagar o arquivo criado no momento de criação da conta.

Dessa forma, acessamos a área principal do Figma quando estamos logados na plataforma, onde há algumas informações para nós explorarmos.

Na barra de menu lateral esquerda, temos nossas equipes ("Your teams") e nossos arquivos de rascunho ("Draft"), que já vêm com alguns que o Figma fornece. Nenhum foi criado por nós, mas basicamente são tutoriais que eles trazem para pessoas novas na plataforma.

Também podemos favoritar arquivos, algo que abordaremos nas próximas aulas. Além disso, podemos criar equipes, algo que veremos também no início da próxima aula. No centro da página, estão nossos arquivos.

Na parte superior, podemos clicar em "New design file" para criar um novo arquivo de design, da mesma forma como fizemos anteriormente. Há uma dica interessante para quem irá usar o Figma no navegador: ao digitar figma.new na barra de navegação, é criado um novo arquivo. Agora, ao retornar para a página inicial, na seção de rascunhos ("Drafts") haverá um novo arquivo.

Por padrão, o Figma vai trazer dicas no formato de balões para pessoas novas na plataforma, porém, não se preocupe com elas, pois vamos explorar muito bem essa ferramenta.

No próximo vídeo, vamos brincar e explorar o arquivo de design. Até mais!

Sobre o curso Figma: conhecendo a ferramenta

O curso Figma: conhecendo a ferramenta possui 187 minutos de vídeos, em um total de 45 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
• Unindo os conhecimentos