Curso online gratuito Desenhando apps e sites com Figma
Duração do curso online: 22 horas e 39 minutos
4.4
(8)
Crie interfaces profissionais no Figma e protótipos navegáveis do zero. Curso online gratuito com práticas de UI/UX, responsivo, plugins e exportação.
Neste curso gratuito, aprenda sobre
Instalar e configurar o Figma; entender sua finalidade no design de interfaces
Navegar pela interface: barras de ferramentas, painéis, atalhos e opções principais
Criar frames e layouts para app e web usando formas, vetores e edição de imagens
Trabalhar tipografia: texto, famílias de fontes, estilos e hierarquia visual
Usar Assets, Libraries e Components para reutilização e consistência de UI
Padronização visual: estilos, componentes e organização do arquivo para handoff
Criar protótipos navegáveis com interações, links entre telas e fluxos
Aplicar Interactive Components (hover/estados) e microinterações no protótipo
Dominar Grids e o sistema 8pt para alinhamento e espaçamentos consistentes
Usar Auto Layout para montar interfaces flexíveis e acelerar a construção
Criar carrossel e scrolling horizontal para simular navegação por conteúdo
Simular breakpoints e design responsivo (inclusive via plugins de breakpoints)
Instalar e usar plugins/templates para produtividade (geração, organização, etc.)
Exportar assets/imagens e preparar o design para desenvolvimento/Elementor WordPress
Sobre o curso online gratuito
Transforme suas ideias em telas reais de apps e sites com o Figma, uma das ferramentas mais usadas no mercado de UX/UI. Neste curso online gratuito, você aprende a dominar o ambiente de trabalho desde a instalação e a navegação pelas principais barras e opções até a criação de layouts com acabamento profissional. O foco é colocar a mão na massa: você vai construir interfaces, ajustar elementos com precisão e entender como pensar a experiência do usuário enquanto desenha cada detalhe da interface.
Ao longo das aulas, você desenvolve repertório para criar protótipos navegáveis que simulam o uso de um produto digital, facilitando testes, validações e apresentações para clientes e equipes. Você também aprende a trabalhar com imagens, vetores, tipografia e fontes de forma consistente, criando um padrão visual que dá unidade ao projeto. Isso ajuda não só na estética, mas também na clareza do produto, na hierarquia de informações e na comunicação de decisões de design.
O curso explora recursos essenciais para ganhar produtividade e manter projetos escaláveis, como assets, bibliotecas e componentes, fundamentais para repetir padrões com rapidez e manter consistência em páginas e telas diferentes. Você conhece ainda plugins e templates que aceleram tarefas do dia a dia, além de entender como organizar o arquivo para facilitar a colaboração e a passagem de tela para desenvolvimento, reduzindo retrabalho e ruídos na entrega.
Você avança para práticas modernas de design responsivo, trabalhando com grids, Auto Layout e conceitos que ajudam seu layout a se adaptar a diferentes tamanhos de tela. Também aprende a simular breakpoints e a criar interações mais ricas com componentes interativos, elevando o realismo dos protótipos. Para quem quer ir além do layout, há uma ponte com o mundo real de publicação: exportação de assets e fluxos que aproximam o design da implementação, incluindo integração com ferramentas populares de construção de sites.
No final, você terá mais segurança para desenhar interfaces de ponta a ponta: da estrutura inicial ao refinamento visual, da organização do arquivo ao protótipo interativo, criando projetos mais profissionais para portfólio, freelas ou oportunidades na área de UX/UI.
Conteúdo do curso
Aula em vídeo: Curso de Figma app Design - Introdução e instalação [Aula 01]10m
Exercício: _Qual é a finalidade do Figma?
Aula em vídeo: Curso de Figma app Design - Barras de ferramentas e opções [Aula 02]11m
Exercício: Qual é a funcionalidade do Figma mencionada na transcrição?
Aula em vídeo: Curso de Figma app Design - Como criar um protótipo navegável [Aula 03]14m
Exercício: _Qual é uma das opções principais da ferramenta Figma?
Aula em vídeo: Curso de Figma app Design - Opções de Imagem e Vetor [Aula 04]13m
Exercício: Quais das opções a seguir é uma funcionalidade única do editor de imagens discutido?
Aula em vídeo: Curso de Figma app Design- Texto e Fontes [Aula 05]14m
Exercício: _Qual é a função da opção "Famílias" na propriedade de texto no Figma?
Aula em vídeo: Curso de Figma app Design- Assets, library e components [Aula 06]12m
Exercício: Qual é a funcionalidade principal de criar um componente em um layout de site?
Aula em vídeo: Curso de Figma - Os melhores Plugins para o Figma - parte 01 [Aula 07]13m
Exercício: _Qual é a função dos "furinhos" no Figma?
Aula em vídeo: Curso de Figma - Plugins para Figma - parte 02 [Aula 08]10m
Exercício: Quais são algumas funcionalidades discutidas no vídeo sobre plugins no software de design mencionado?
Aula em vídeo: Curso de Figma- Como exportar no Figma [Aula 09]09m
Exercício: _Como é possível exportar imagens no Figma?
Aula em vídeo: Curso de Figma- Tutorial de site - parte 1[Aula 10]26m
Exercício: Qual ferramenta foi escolhida para criar o novo layout do site?
Aula em vídeo: Curso de Figma- Tutorial de site - parte 2 [Aula 11]19m
Exercício: _Qual é a importância da padronização visual no Figma?
Aula em vídeo: Curso de Figma- Tutorial de site - parte 3 [Aula 12]20m
Aula em vídeo: Curso de Figma - Tutorial de site - parte 4 [Aula 13]15m
Aula em vídeo: Curso de Figma - Tutorial de site - parte 5 [Aula 14]15m
Exercício: O que o vídeo ensina a fazer?
Aula em vídeo: Curso de Figma - Tutorial de site - parte 6 [Aula 15]19m
Aula em vídeo: Curso de Figma - Tutorial de site - parte 7 [Aula 16]18m
Aula em vídeo: Curso de Figma - Tutorial de site - parte 8 [Aula 17]16m
Aula em vídeo: Curso de Figma - Tutorial de site - parte 9 [Aula 18]15m
Aula em vídeo: Curso de Figma - Tutorial de site - parte 10 [Aula 19]17m
Exercício: _Qual é a forma interessante de já ir organizando o layout e deixando fácil de falar para quem for desenvolver?
Aula em vídeo: Curso de Figma - Tutorial de site - parte 10 [Aula 19]17m
Exercício: _Qual é a forma interessante de já ir organizando o layout e deixando fácil de falar para quem for desenvolver?
Aula em vídeo: Curso de Figma - Tutorial de site - parte 11 [Aula 20]22m
Aula em vídeo: Curso de Figma - Tutorial de site - parte 12 [Aula 21]17m
Aula em vídeo: Curso de Figma - Grids, Auto Layout e Design responsivo - parte 13 [Aula 22]19m
Exercício: _Para criar um design responsivo é necessário:
Aula em vídeo: Curso de Figma - Como instalar Plugins e Templates no Figma08m
Aula em vídeo: FigJam- Nova ferramenta do Figma. Tchau Miro? Tá doido?08m
Aula em vídeo: Interactive Components no Figma (hover botão figma ) - Tutorial Completo | Curso de FIgma20m
Aula em vídeo: Design na prática: criando landinpage com Figma - Trabalhando ao vivo2h18m
Aula em vídeo: Do Figma ao Elementor Wordpress - Como criar um site exportar do Figma ao Elementor2h35m
Aula em vídeo: Como simular breakpoints no Figma - Design Responsivo com o Plugin Breakpoints15m
Exercício: _O que são break-points no Figma e como eles podem ajudar no desenvolvimento de um site responsivo?
Aula em vídeo: Curso de Figma app Design - Como usar o auto layout do figma [SENSACIONAL]16m
Aula em vídeo: Figma e Elementor Wordpress - Exportando o site do Figma para o Elementor2h27m
Exercício: _O que o autor do vídeo está ensinando?
Aula em vídeo: Figma e Elementor Wordpress - Criação de site ao vivo2h04m
Aula em vídeo: Figma e Elementor Wordpress - Criação de site ao vivo #032h17m
Aula em vídeo: Curso de Figma - Prototipando um App - Grid 8pt do aplicativo [Aula 01]20m
Aula em vídeo: Curso de Figma - Prototipando um App - Tela inicial e login [Aula 02]21m
Exercício: _Qual é a fonte utilizada nos títulos do blog e nas thumbs do YouTube no aplicativo Notify fictício criado no Figma pelo Chief of Design?
Aula em vídeo: Curso de Figma - Prototipando um App - Tela cadastro e login [Aula 03]32m
Aula em vídeo: Curso de Figma - Prototipando um App - Tela Home [Aula 04]21m
Aula em vídeo: Curso de Figma - Prototipando um App - Tela Home 02 [Aula 05]28m
Aula em vídeo: Curso de Figma - Prototipando um App - Tela Home 03 [Aula 06]23m
Aula em vídeo: Curso de Figma - Animando o aplicativo - 01 [Aula 07]12m
Aula em vídeo: Curso de Figma - Como criar o carrossel no aplicativo [Aula 08]19m
Aula em vídeo: Scrolling Horizontal - Carrossel no Figma | Curso de Figma14m
Aula em vídeo: Curso de Figma - Estado hover do botão [Aula 09]17m
Comentários do Curso: Desenhando apps e sites com Figma
Luís Henrique
Direto ao ponto e sem enrolação... sinto falta de exercícios, de resto o curso tá super bem feito.