Curso de Prototipagem no Figma do Zero

Aula 1 • Ecossistema Figma e Configuração de Conta

Aborda os aplicativos web e desktop do Figma, os tipos de plano e a configuração da conta. Estabelece a base técnica antes que qualquer trabalho de design comece.

Aula 2 • Atalhos Essenciais do Teclado e Configurações

Aborda os atalhos de maior impacto e as configurações de preferência para um fluxo de trabalho eficiente. A velocidade e a precisão obtidas aqui se acumulam em todos os capítulos subsequentes.

Aula 3 • Arquivos, Páginas e Organização de Projetos

Ensina como criar, duplicar e organizar arquivos e páginas dentro de projetos. Uma estrutura adequada evita confusão em trabalhos posteriores de prototipagem com várias telas.

Aula 1 • Desenhando e Editando Formas Básicas

Aborda retângulos, elipses, polígonos e a ferramenta estrela com suas propriedades. Esses primitivos formam os blocos de construção de cada elemento de interface do usuário criado posteriormente.

Aula 2 • Ferramenta Caneta Vetorial e Edição de Caminhos

Apresenta a ferramenta caneta para caminhos vetoriais personalizados e manipulação de pontos de ancoragem. Ícones e ilustrações personalizados construídos aqui aparecem em telas de protótipo posteriores.

Aula 3 • Alinhamento, Distribuição e Espaçamento

Aborda ferramentas de alinhamento, distribuição inteligente e controles de espaçamento organizado. O espaçamento preciso é essencial antes de introduzir o layout automático no próximo capítulo.

Aula 4 • Entendendo Quadros vs. Grupos

Explica a diferença estrutural entre quadros e grupos e quando usar cada um. Os quadros são a base das telas, componentes e layout automático.

Aula 1 • Preenchimentos, Gradientes e Imagens

Aborda preenchimentos sólidos, gradientes lineares e radiais e modos de preenchimento de imagem. Essas técnicas produzem fundos polidos e superfícies de interface do usuário em todo o projeto.

Aula 2 • Construindo uma Escala Tipográfica

Ensina como definir uma escala tipográfica modular para títulos, corpo e legendas. Uma escala definida garante hierarquia visual em todas as telas do protótipo.

Aula 3 • Estilos de Texto e Gerenciamento de Estilos

Aborda a criação, nomeação e aplicação de estilos de texto compartilhados em todo o arquivo. O gerenciamento de estilos reduz a inconsistência antes da introdução dos componentes.

Aula 4 • Criando um Sistema de Cores Local

Ensina como definir tokens de cores primárias, secundárias, neutras e semânticas como estilos locais. Cores centralizadas tornam as atualizações globais instantâneas em todos os quadros.

Aula 1 • Restrições e Quadros Responsivos

Aborda as configurações de restrição que controlam como as camadas se comportam quando um quadro é redimensionado. Restrições combinadas com layout automático produzem designs de tela verdadeiramente responsivos.

Aula 2 • Aninhando Quadros de Layout Automático

Ensina como aninhar quadros de layout automático para construir estruturas de interface do usuário complexas e adaptáveis. Layouts aninhados são a espinha dorsal de grades de cartões, barras de navegação e layouts de formulários.

Aula 3 • Introdução ao Layout Automático

Explica o conceito central de direção, espaçamento e preenchimento do layout automático. Compreender este modelo é necessário antes de construir qualquer componente responsivo.

Aula 4 • Construindo Padrões de Interface do Usuário Responsivos

Aplica layout automático e restrições para construir uma barra de navegação, grade de cartões e formulário. Esses padrões são reutilizados diretamente nas telas do protótipo em capítulos posteriores.

Aula 1 • Construindo uma Biblioteca de Componentes Principal da Interface do Usuário

Aplica componentes e variantes para construir botões, campos de entrada, ícones e cartões. Esta biblioteca é a fonte direta para todas as telas construídas no capítulo de prototipagem.

Aula 2 • Propriedades de Componente

Aborda propriedades booleanas, de texto, de troca de instância e de instância aninhada em componentes. As propriedades expõem personalização controlada sem quebrar a estrutura do componente.

Aula 3 • Variantes de Componente

Ensina como agrupar estados de componentes relacionados em um conjunto de variantes com propriedades nomeadas. As variantes possibilitam mudanças de estado interativas em protótipos sem duplicar componentes.

Aula 4 • Criando e Usando Componentes

Aborda a conversão de quadros em componentes principais e a colocação de instâncias em todo o arquivo. Os componentes garantem que uma única edição se propague para todas as telas instantaneamente.

Aula 1 • Conexões e Interações do Protótipo

Ensina como adicionar conexões, gatilhos e destinos do protótipo entre os quadros. As conexões transformam telas estáticas em um protótipo clicável e navegável.

Aula 2 • Projetando Telas de Aplicativo Principais

Aplica a biblioteca de componentes para construir telas de integração, painel e detalhes. Cada tela usa layout automático e estilos compartilhados estabelecidos em capítulos anteriores.

Aula 3 • Planejando Telas e Fluxos de Usuário

Aborda o mapeamento de fluxo de usuário, inventário de telas e convenções de nomenclatura antes de projetar. O planejamento evita retrabalho estrutural ao vincular telas em seções posteriores.

Aula 4 • Transições e Configurações de Animação

Aborda transições instantâneas, de dissolução, deslizamento, empurrão e animação inteligente. Transições apropriadas comunicam claramente a direção da navegação e o comportamento da interface.

Aula 1 • Componentes Interativos e Mudanças de Estado

Aborda o uso de variantes de componente com conexões de protótipo para simular mudanças de estado. Os componentes interativos reduzem o número de quadros necessários para fluxos complexos.

Aula 2 • Rolagem, Transbordo e Elementos Fixos

Ensina rolagem vertical e horizontal, corte de transbordo e camadas fixas adesivas. Essas configurações replicam o comportamento de rolagem nativa em protótipos móveis e web.

Aula 3 • Lógica Condicional e Ações

Ensina condições if-else e sequências de ações em várias etapas nas interações do protótipo. A lógica condicional permite fluxos ramificados que espelham os pontos de decisão de aplicativos reais.

Aula 4 • Introdução às Variáveis do Figma

Aborda a criação de coleções de variáveis de número, texto, booleano e cor. As variáveis permitem dados dinâmicos e gerenciamento de estado indisponíveis na prototipagem básica.

Aula 1 • Teste de Usabilidade com Protótipos

Aborda o planejamento de tarefas de teste, recrutamento de participantes e condução de sessões moderadas. O teste estruturado gera feedback acionável para o ciclo de iteração.

Aula 2 • Modo Inspecionar e Exportação de Ativos

Ensina os desenvolvedores a usar o painel de inspeção do Figma e como os designers exportam ativos. As configurações de exportação corretas garantem ativos em pixel perfeito em todas as resoluções de imagem alvo.

Aula 3 • Histórico de Versões e Manutenção de Arquivos

Aborda salvar versões nomeadas, restaurar estados anteriores e manter um arquivo limpo ao longo do tempo. O controle de versão protege o trabalho e suporta o design iterativo entre sprints.

Aula 4 • Analisando Feedback e Priorizando Mudanças

Ensina mapeamento de afinidades, classificação de gravidade e priorização de mudanças a partir das descobertas dos testes. A priorização garante que os problemas de maior impacto sejam corrigidos antes da transferência.