Curso de Prototipagem com Figma do Zero

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

Aborda as aplicações web e de ambiente de trabalho do Figma, os tipos de plano e a configuração de conta. Estabelece a base técnica antes de qualquer trabalho de design começar.

Aula 2 • Atalhos de Teclado e Definições Essenciais

Aborda os atalhos e as definições de preferência mais impactantes para um fluxo de trabalho eficiente. A velocidade e a precisão aqui adquiridas acumulam-se em todos os capítulos subsequentes.

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

Ensina a criar, duplicar e organizar ficheiros e páginas dentro de projetos. Uma estrutura adequada evita confusão em trabalhos posteriores de prototipagem multi-ecrã.

Aula 1 • Desenhar e Editar Formas Básicas

Aborda retângulos, elipses, polígonos e a ferramenta estrela com as suas propriedades. Estas primitivas formam os blocos de construção de todos os elementos de IU criados posteriormente.

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

Introduz a ferramenta caneta para trajetos vetoriais personalizados e manipulação de pontos de ancoragem. Ícones e ilustrações personalizados criados aqui são utilizados em ecrãs de protótipo posteriores.

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

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

Aula 4 • Compreender Frames vs. Grupos

Explica a diferença estrutural entre frames e grupos e quando utilizar cada um. Os frames são a base dos ecrãs, componentes e auto layout.

Aula 1 • Preenchimentos, Gradientes e Imagens

Aborda preenchimentos sólidos, gradientes lineares e radiais e modos de preenchimento de imagem. Estas técnicas produzem fundos polidos e superfícies de IU ao longo de todo o projeto.

Aula 2 • Construir uma Escala Tipográfica

Ensina como definir uma escala tipográfica modular para cabeçalhos, corpo e legendas. Uma escala definida garante hierarquia visual em todos os ecrãs do protótipo.

Aula 3 • Estilos de Texto e Gestão de Estilos

Aborda a criação, nomeação e aplicação de estilos de texto partilhados em todo o ficheiro. A gestão de estilos reduz a inconsistência antes de os componentes serem introduzidos.

Aula 4 • Criar um Sistema de Cor Local

Ensina como definir tokens de cor primários, secundários, neutros e semânticos como estilos locais. As cores centralizadas tornam as atualizações globais instantâneas em todos os frames.

Aula 1 • Restrições e Frames Responsivos

Aborda as definições de restrição que controlam como as camadas se comportam quando um frame é redimensionado. As restrições combinadas com o auto layout produzem designs de ecrã verdadeiramente responsivos.

Aula 2 • Aninhar Frames de Auto Layout

Ensina como aninhar frames de auto layout para construir estruturas de IU complexas e adaptativas. Os layouts aninhados são a espinha dorsal de grelhas de cartões, barras de navegação e layouts de formulários.

Aula 3 • Introdução ao Auto Layout

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

Aula 4 • Construir Padrões de IU Responsivos

Aplica auto layout e restrições para construir uma barra de navegação, uma grelha de cartões e um formulário. Estes padrões são reutilizados diretamente nos ecrãs do protótipo em capítulos posteriores.

Aula 1 • Construir uma Biblioteca de Componentes de IU Principal

Aplica componentes e variantes para construir botões, campos de entrada, ícones e cartões. Esta biblioteca é a fonte direta para todos os ecrãs construídos 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 uma personalização controlada sem quebrar a estrutura do componente.

Aula 3 • Variantes de Componente

Ensina como agrupar estados relacionados de um componente num conjunto de variantes com propriedades nomeadas. As variantes potenciam alterações de estado interativas em protótipos sem duplicar componentes.

Aula 4 • Criar e Utilizar Componentes

Aborda a conversão de frames em componentes principais e a colocação de instâncias no ficheiro. Os componentes garantem que uma única edição se propaga instantaneamente para todos os ecrãs.

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

Ensina como adicionar conexões, acionadores e destinos de protótipo entre frames. As conexões transformam ecrãs estáticos num protótipo clicável e navegável.

Aula 2 • Desenhar Ecrãs de Aplicação Principais

Aplica a biblioteca de componentes para construir ecrãs de integração, painel de controlo e detalhe. Cada ecrã utiliza auto layout e estilos partilhados estabelecidos nos capítulos anteriores.

Aula 3 • Planear Ecrãs e Fluxos de Utilizador

Aborda o mapeamento de fluxos de utilizador, o inventário de ecrãs e as convenções de nomenclatura antes de desenhar. O planeamento evita retrabalho estrutural ao ligar ecrãs em secções posteriores.

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

Aborda transições instantâneas, de dissolução, de deslize, de empurrar e de animação inteligente. As transições adequadas comunicam claramente a direção de navegação e o comportamento da interface.

Aula 1 • Componentes Interativos e Alterações de Estado

Aborda a utilização de variantes de componentes com conexões de protótipo para simular alterações de estado. Os componentes interativos reduzem o número de frames necessários para fluxos complexos.

Aula 2 • Deslocamento, Transbordo e Elementos Fixos

Ensina deslocamento vertical e horizontal, corte de transbordo e camadas fixas aderentes. Estas definições replicam o comportamento de deslocamento nativo 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 múltiplos passos em interações de protótipo. A lógica condicional permite fluxos ramificados que espelham os pontos de decisão reais de uma aplicação.

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 gestão dinâmica de dados e estado, indisponível na prototipagem básica.

Aula 1 • Testes de Usabilidade com Protótipos

Aborda o planeamento de tarefas de teste, o recrutamento de participantes e a realização de sessões moderadas. Os testes estruturados geram retorno acionável para o ciclo de iteração.

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

Ensina os programadores a utilizar o painel de inspeção do Figma e como os designers exportam ativos. As definições de exportação corretas garantem ativos com píxeis perfeitos em todas as resoluções-alvo.

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

Aborda guardar versões nomeadas, restaurar estados passados e manter um ficheiro limpo ao longo do tempo. O controlo de versões protege o trabalho e apoia o design iterativo ao longo de sprints.

Aula 4 • Analisar Retorno e Priorizar Alterações

Ensina mapeamento de afinidades, classificação de gravidade e priorização de alterações a partir dos resultados dos testes. A priorização garante que os problemas de maior impacto são corrigidos antes da entrega.