“Do zero ao avançado”
Módulos e Cronograma
- Boas vindas, e tudo o que vamos aprender
- Guia de Estudos e Recursos do Figma em Notion 🎁
- Criação de conta e Download
O que vamos aprender
Dê os primeiros passos na sua formação dominando o essencial: você vai entender como aproveitar ao máximo o curso, liberar seu material de apoio exclusivo no Notion e deixar seu ambiente no Figma pronto para começar a criar.
- Desmistificando o File Browser + Community
- Primeiro arquivo, Painéis, Páginas e Layers
- Tudo sobre a barra de ferramentas
- Movimentações essenciais
- Ajustes essenciais e Nudge Amount
- Hierarquia de camadas
O que vamos aprender
Explore a interface do Figma, do File Browser ao canvas de edição. Domine a barra de ferramentas, a hierarquia de camadas, os comandos de movimentação e os ajustes essenciais de precisão para trabalhar de forma rápida e organizada.
- Alinhando e posicionando elementos
- Constraints e responsividade
- Rotações e espelhamento
- Layout & aparência
- Clip content
- Propriedades de preenchimento
- Propriedades de texto
- Entendendo propriedade de stroke / contorno
- Guia de efeitos
- Layout grid
- Funções de export
O que vamos aprender
Aprenda a transformar suas ideias em telas bem estruturadas através do Painel de Propriedades. Você vai entender como criar designs responsivos usando Constraints e Clip Content, manipular tipografia, cores e efeitos visuais, além de configurar grids de alinhamento e dominar o processo de exportação de assets.
- Introdução e materiais (Importante)
- Reunindo os assets
- Criando tela de boas vindas
- Login e Interatividade
- Telas de Onboarding
- Botão primário, secundário e terciário com variantes
- Estados default, pressed e disabled com variantes
- Criando interação de estado Pressed + ajustes
- Tela de seleção de itens
- Ajustes e preparação para feed
- Criando tela de Feed
- Criando tela de Pesquisa
- Criando Drawer de adicionar
- Variantes de tamanhos em botões + ilustrações
- Criando tela Salvos + Tabs
- Criando menu de navegação
- Conectando todas as telas (Interativo)
- Dicas de Handoff + Capa
- Seu acesso ao arquivo completo
O que vamos aprender
Coloque a mão na massa desenvolvendo o projeto completo de um aplicativo inspirado no Pinterest. Você vai organizar assets, construir botões interativos com múltiplos estados, desenhar fluxos reais de navegação, do login às telas de feed e salvos, e conectar todas as interações para criar um protótipo navegável profissional.
- Tudo o que vamos aprender juntos
- Criando um Styleguide Tipográfico + Text Styles
- Como criar suas próprias Escalas Tipográficas
- Criando Styleguide de Cores + Color Styles
- Visualizando cores em interfaces reais
- Extraindo assets para Styleguide
- Gerando e definindo as Grids
- Criando estrutura em Wireframe
- Moodboard / Painel Semântico da maneira certa
- Navigation menu
- Hero Section
- Seção Headspace
- Seção de Benefícios
- Seção de Qualidades
- Seção de Suporte & Ajuda
- Rodapé / Footer
- Adicionando interatividade
- Fazendo o Handoff + exemplo real
- Adicionando thumbnail / cover
- Seu acesso ao arquivo completo
O que vamos aprender
Crie um projeto completo de site para o Headspace na prática. Domine a construção de Styleguides (cores e tipografia), definição de grids, componentes, wireframing e design de interface para diversas seções de uma landing page, aplicando prototipagem, capas e fluxo de handoff real.
- Escopo, fundamento e premissas do projeto
- Arquivo base para o projeto
- Estrutura de páginas que convertem 🎁
- Como gerar imagens com IA (Prompt reverso + Google Flow / FX)
- Criando Moodboard / Painel Semântico
- Criando Wireframe na prática
- Criando escalas tipográficas + estilos
- Criando estrutura em Wireframe
- Criando Styleguide Tipográfico
- Criando Styleguide de Cores
- Configurando as Grids
- Hero Section: Menu de Navegação
- Hero Section: Main Headline
- Hero Section: Ajustes + Parceiros
- Hero Section: Refino visual final (PRO)
- Seção de Benefícios: Criando cards e estrutura
- Refinando Seção de Benefícios
- Seção de Features
- Refinando Seção de Features
- Dicas de Assets com Variantes
- Seção Insights Claros
- Seção Pricing
- Seção de Depoimento
- Criando Footer / Rodapé
- E se fosse um site?
- Adaptando para mobile / responsividade
- Dicas para Handoff
- Seu acesso ao arquivo completo
O que vamos aprender
Eleve o seu nível de refino visual construindo o projeto completo do Nexatrack. Domine o processo de ponta a ponta: do alinhamento de escopo e wireframing ao uso de IA para imagens, construção de Styleguides robustos, polimento estético avançado em cada componente e organização final para handoff.
- Por que isto é importante?
- Navegação entre telas e dispositivos de mockup
- Itens de sistema: iOS & Android
- Scroll vertical, independente e componentes fixos
- Comportamento de Scroll horizontal
- Flow starting point e organização
- Interação com delay
- Reforçando a interação de Delay (Toast Message)
- Dominando o Smart Animate
- Reforçando o Smart Animate
- Interações de Hover + Variants
- Integrando microinterações com Lottie Files
O que vamos aprender
Transforme telas estáticas em experiências interativas de alto nível. Você vai entender a importância de simular fluxos reais de uso, definir pontos de início de navegação, aplicar efeitos dinâmicos de Smart Animate em componentes e integrar animações com Lottie para enriquecer a usabilidade e a apresentação dos seus projetos.
- Introdução e importância
- Aplicando Auto Layout + Suggest
- Gap & Spacing
- Hug, Fill e Fixed
- Propriedades de alinhamento
- Largura mínima e máxima
- Wrap
- (Prática 1) Anatomia + Criando na prática (Notificação LinkedIn)
- (Prática 2) Criando card do zero com Auto Layout
O que vamos aprender
Desbloqueie o total controle sobre a estrutura dos seus layouts aprendendo Auto Layout do básico ao avançado. Você vai entender a lógica de agrupamento inteligente, dominar a responsividade de componentes com Wrap e limites de largura, e colocar a mão na massa desenvolvendo componentes reais e estruturados.
- O que são fills and effects
- Aplicando shader effects
- Criando backgrounds avançados com effects
- Prevendo shaders aplicados (Dica PRO)
- Aplicando shader fills
- Criando shaders com Agents
O que vamos aprender
Traga uma estética moderna e diferenciada para os seus layouts dominando técnicas avançadas de preenchimento e efeitos. Você vai entender os fundamentos dos shaders, aprender truques de nível profissional para otimizar o fluxo de aplicação e explorar o apoio de Agents na criação de superfícies visuais únicas. Vamos criar shaders e aplicar na prática, do zero!
- Aulas em breve
O que vamos aprender
As aulas deste módulo estão em gravação e previstas para liberar até final de Setembro / 2026.
- Patterns / Padrões de Preenchimento
- Desfoque progressivo: Camadas e Backgrounds
- Guia de Efeitos: Noise e Texture
- Recursos de edição de imagens com IA
O que vamos aprender
Neste módulo, abordamos de forma singular todos os “micro updates” que o Figma traz, para você não ficar por fora.