Duração: 1 hora e 50 minutos | Lições: 13
Neste tutorial gratuito, você aprenderá tudo o que precisa saber para começar a usar o Figma.
Depois de concluir as lições, você terá uma boa compreensão das ferramentas e recursos incluídos no Figma, além de como criar um formulário de inscrição do zero. Com pouco menos de duas horas de duração, começamos a trabalhar rapidamente, por isso, se você estiver pronto para aprender, continue lendo!
Introdução ao Figma
1. Bem-vindo ao Curso
Assistir vídeo aula [0:00] ↗
Nesta lição de introdução, veremos o que o curso como um todo cobrirá. Imediatamente, ficará claro para você que o Figma compartilha semelhanças com outras ferramentas de design populares, como Adobe XD e Sketch, mas tem seu próprio conjunto de recursos exclusivos que valem a pena dar uma olhada por conta própria.
Vamos analisar quatro áreas principais:
- Uma introdução geral ao Figma e o que é
- Uma visão geral de como começar, incluindo uma discussão sobre a interface e os recursos disponíveis
- Um tutorial guiado para usar o Figma como designer
- Um tutorial guiado para usar o Figma como desenvolvedor
2. O que é Figma?
Assistir vídeo aula [01:31] ↗
O Figma é uma ferramenta de design e, com ela, você pode criar o que quiser para a web, desde interfaces de usuário até ilustrações e ícones. Assim, você pode usá-lo para criar uma loja online completa, um aplicativo de smartwatch e tudo mais.
O que torna o Figma muito especial é que ele é baseado em vetores e baseado em navegador, para que você possa criar praticamente qualquer coisa de qualquer lugar. E o melhor de tudo? É grátis para começar.
A partir daqui, discutimos como instalar e configurar o Figma para avançar com o tutorial.
Introdução ao Figma
3. Trabalhando com projetos, arquivos e páginas no Figma
Assistir vídeo aula [06:16] ↗
Tudo bem, com o Figma instalado e configurado, é hora de sujar as mãos! Nós mergulhamos nessa lição, discutindo todas as diferentes maneiras de organizar seu trabalho. Falamos sobre como criar projetos, novos arquivos e páginas dentro do Figma. Também falamos sobre como acessar seus arquivos.
4. Usando a interface do usuário do Figma
Assistir vídeo aula [11:44] ↗
Antes que você possa realmente começar a trabalhar, você precisa ter uma compreensão completa de como usar cada botão na interface de usuário do Figma. Mergulhamos nos detalhes aqui para que você possa percorrer o restante do tutorial com confiança. A interface do usuário é configurada da seguinte forma:
- Tela inicial: Com o que você é recebido ao abrir o Figma. Isso fornece acesso às suas equipes, projetos e opções para pesquisar arquivos, visualizar arquivos recentes, plug-ins e rascunhos.
- Equipe: mostra todos os projetos atribuídos a esta equipe.
- Projeto: Uma lista de todos os arquivos associados ao projeto.
- Barra lateral direita: exibe outras opções relacionadas à tela que você está visualizando.
- Barra de navegação superior: Exibe o nome do arquivo, opções de compartilhamento, zoom, menu, cursor, formas e mais ferramentas.
- Barra lateral esquerda: Mostra as camadas dentro de um arquivo por padrão.
5. Trabalhando com quadros, formas e texto no Figma
Assistir vídeo aula [20:47] ↗
A introdução aos quadros no Figma começa com uma comparação: eles são exatamente como as pranchetas que você encontraria no Adobe XD. Os quadros oferecem um ótimo ponto de partida ao trabalhar em um projeto e há toneladas incorporadas ao Figma para coisas como smartphones, navegadores, sites de mídia social e muito mais.
Você também pode usar a ferramenta Shape no Figma para criar designs personalizados. Se você já usou qualquer outro software de design no passado, essa ferramenta deve ser bastante familiar, pois você poderá escolher retângulos, círculos, linhas e assim por diante e terá controle total de sua espessura, tamanho e traçado.
E você também aprenderá sobre a ferramenta Texto.
6. Criando redes vetoriais com a ferramenta Caneta
Assistir vídeo aula [31:44] ↗
As redes vetoriais são possivelmente o recurso mais exclusivo do Figma. Isso ocorre porque a maioria das ferramentas de design aborda a ferramenta caneta da seguinte maneira: você clica e cria vários pontos e, em seguida, retorna ao ponto inicial para fechar o caminho. Mas não funciona dessa maneira no Figma.
Em vez disso, o Figma mantém caminhos abertos, o que facilita muito a criação de formas mais complicadas. Nesta lição, exploramos em detalhes como usar a ferramenta caneta e as redes vetoriais exclusivas do Figma.
7. Trabalhando com grades no Figma
Assistir vídeo aula [40:16] ↗
No Figma, as grades são super úteis para criar design de interface, mas também podem ser usadas para criar ícones com facilidade. Você tem controle total sobre como as grades aparecem, o tamanho da caixa, a cor e muito mais.
8. Usando plugins Figma
Assistir vídeo aula [46:21] ↗
Os plug-ins adicionam uma ampla gama de recursos adicionais à sua experiência com o Figma. E nesta lição, mergulhamos profundamente na variedade de plugins disponíveis para você.
E também mostramos como instalar plug-ins, configurá-los e colocá-los para funcionar em seu fluxo de trabalho.
Como usar o Figma como designer
9. Vamos criar um formulário de inscrição no Figma
Assistir vídeo aula [51:00] ↗
O Figma facilita a criação de uma ampla variedade de aplicativos e tipos de sites. E nesta lição, abordaremos como criar um formulário de inscrição para um aplicativo móvel usando todo o conhecimento que você acumulou até agora. No entanto, também entraremos em detalhes sobre os novos recursos ainda não discutidos, como componentes, layout, cor e estilos.
10. Vamos criar um protótipo
Assistir vídeo aula [01:25:55] ↗
O Figma também pode ser usado para criar protótipos. Fazemos isso nesta lição usando as duas telas criadas na lição anterior. Nesse caso, criaremos um protótipo para conectar essas duas telas ao clicar em determinados botões.
11. Compartilhando trabalho e recebendo feedback
Assistir vídeo aula [01:30:02] ↗
Uma parte essencial do trabalho em um design é colaborar com os outros e obter o feedback dos outros. Isso é fácil de realizar no Figma, na verdade, a qualquer momento durante o fluxo de trabalho, você pode compartilhar o projeto com outras pessoas e solicitar feedback. Você também pode fornecer permissões de edição, se assim o desejar.
Como usar o Figma como desenvolvedor
12. Inspecionando um arquivo de design no Figma
Assistir vídeo aula [01:41:39] ↗
Se você é um desenvolvedor e recebeu acesso somente de visualização a um arquivo Figma, esta lição é para você. Aqui, nos aprofundamos em tudo o que você precisa saber sobre o acesso do desenvolvedor aos arquivos do Figma e como você pode pegar um projeto e transformá-lo em um aplicativo, site ou outro produto ao vivo e interativo.
13. Exportação de ativos
Assistir vídeo aula [01:46:48] ↗
Na última lição deste tutorial, você aprenderá a exportar ativos no Figma. É super simples de fazer e funciona tanto no modo somente visualização quanto no modo de edição. Assim, quando terminar de trabalhar em seu projeto, você poderá exportá-lo com facilidade e passar para a próxima tarefa.
Saiba mais sobre como usar o Figma
Se você deseja expandir ainda mais seu conhecimento sobre o Figma, considere verificar alguns dos artigos que escrevemos sobre o assunto no passado. Aqui, você encontrará tutoriais adicionais, resumos de modelos e dicas e truques para ajudá-lo a aprimorar suas habilidades no Figma.
