Frame 00

O ecossistema Figma

Antes de abrir a ferramenta, entenda o mapa completo. O Figma não é só um editor de telas: é uma plataforma colaborativa que cobre todo o ciclo de um produto digital — da ideia ao código.

Por que o Figma domina o mercado?

• Roda no navegador — nada de instalação obrigatória ou arquivos perdidos; tudo salvo em nuvem, com histórico de versões.
• Colaboração em tempo real — várias pessoas no mesmo arquivo, como no Google Docs. Isso mudou como times de produto trabalham.
• Fonte única da verdade — design, protótipo, documentação e specs para devs vivem no mesmo lugar.
• Padrão de vagas — a esmagadora maioria das vagas de Product Designer, UI Designer e UX no Brasil e no exterior lista Figma como requisito.

Planos e o que você precisa saber

Plano	Para quem	Pontos-chave
Starter (grátis)	Estudos e freelas iniciais	Arquivos limitados por projeto, mas suficiente para aprender tudo desta apostila.
Professional	Freelancers e times pequenos	Bibliotecas de equipe compartilhadas e projetos ilimitados.
Organization / Enterprise	Empresas	Design system centralizado, branching (ramificações), analytics de bibliotecas e SSO. É o ambiente que você encontrará em empresas médias e grandes.

Frame 01 Nível básico

Primeiros passos: conta, interface e navegação

Objetivo do módulo: sair do zero absoluto e ganhar fluência para se mover pelo Figma sem travar.

1.1 Criando sua conta e primeiro arquivo

1. Acesse figma.com e crie uma conta gratuita (e-mail ou Google).
2. No painel inicial (File Browser), clique em New design file.
3. Pronto: você está no canvas infinito — a área cinza onde tudo acontece.

1.2 Anatomia da interface

1.3 Navegação essencial

Ação	Atalho
Mover o canvas (pan)	Espaço + arrastar
Zoom in / out	Ctrl + scroll ou + / -
Zoom para caber tudo	Shift 1
Zoom na seleção	Shift 2
Selecionar dentro de grupo	Ctrl + clique (ou duplo clique)
Buscar qualquer ação	Ctrl / (Quick Actions)

No macOS, troque Ctrl por ⌘ Cmd e Alt por ⌥ Option em toda a apostila.

Exercício 1Reconhecimento de campo

1. Crie um arquivo novo chamado Treino 01 — Navegação.
2. Crie 3 páginas: 🏋️ Aquecimento, 📐 Formas, 🗑️ Rascunho.
3. Na primeira página, desenhe 5 retângulos espalhados e pratique: zoom total (Shift 1), zoom em um deles (Shift 2) e pan com Espaço.
4. Renomeie cada retângulo no painel Layers com duplo clique (ex.: card/azul).

Critério de sucesso: você navega e renomeia camadas sem usar o mouse para procurar menus.

Frame 02 Nível básico

Fundamentos visuais: frames, formas, texto e cor

Aqui você aprende os blocos de construção de qualquer interface — e o hábito mais importante do Figma: pensar em frames, não em "telas soltas".

2.1 Frame ≠ Grupo (isso cai em teste técnico)

2.2 Formas e vetores

• Formas básicas: retângulo R, elipse O, linha L. Segure Shift para proporção perfeita.
• Pen tool P: cria vetores ponto a ponto. Dê duplo clique num vetor para entrar no modo de edição de pontos.
• Boolean operations: Union, Subtract, Intersect e Exclude combinam formas — a base da criação de ícones.
• Corner radius: arredonde cantos no painel direito ou arraste os círculos internos da forma selecionada.

2.3 Texto e tipografia

• Ferramenta de texto: T. Clique para texto livre; clique e arraste para caixa com largura fixa.
• Propriedades-chave: família, peso, tamanho, line height (altura de linha) e letter spacing.
• Comportamento da caixa: Auto width, Auto height e Fixed — dominar isso evita textos "vazando" do layout.
• Hierarquia mínima de uma tela: título, subtítulo, corpo e legenda, com contraste claro de tamanho e peso.

2.4 Cor, preenchimentos e efeitos

• Fill: cor sólida, gradientes (linear, radial, angular) e imagem como preenchimento.
• Stroke: borda com controle de posição (inside, center, outside) e espessura.
• Efeitos: drop shadow, inner shadow, layer blur e background blur — use com parcimônia.
• Copie propriedades entre camadas com Ctrl Alt C / V.

2.5 Imagens e máscaras

• Arraste imagens direto para o canvas, ou use Ctrl Shift K para inserir várias.
• Máscara Ctrl Alt M: a camada de baixo recorta as de cima — ideal para avatares e capas.
• Exportação: selecione qualquer coisa e adicione Export no painel direito (PNG, JPG, SVG, PDF; 1x, 2x, 3x).

Exercício 2Cartão de perfil do zero

1. Crie um frame de 320 × 400 chamado card/perfil.
2. Adicione: avatar circular com foto (use máscara), nome (título), cargo (legenda), um parágrafo curto de bio e um botão "Seguir".
3. O botão deve ser um frame com cantos arredondados, não um retângulo solto com texto por cima.
4. Aplique uma sombra suave ao card e exporte em PNG 2x.

Desafio bônus: crie um ícone simples de "verificado" usando boolean operations e posicione ao lado do nome.

Exercício 3Set de 4 ícones vetoriais

Em frames de 24 × 24, desenhe com pen tool e booleans: casa, lupa, sino e usuário. Mantenha stroke de 2px e cantos consistentes. Nomeie como icon/home, icon/search etc. — esse padrão de nome será útil no módulo de componentes.

Frame 03 Nível intermediário

Auto Layout, constraints e design responsivo

Auto Layout é a habilidade mais cobrada em testes práticos. É o que transforma desenhos estáticos em layouts que se comportam como código de verdade (flexbox).

3.1 O conceito

Auto Layout (Shift A) faz um frame organizar os filhos automaticamente em linha ou coluna, com espaçamento e padding controlados. Adicione um item e tudo se reacomoda; mude o texto de um botão e ele cresce sozinho.

3.2 Propriedades que você precisa dominar

Propriedade	O que controla
Direction	Horizontal, vertical ou wrap (quebra linha como uma galeria).
Gap	Espaço entre os filhos. Também aceita Auto (equivale a space-between).
Padding	Espaço interno do contêiner (pode ser diferente por lado).
Alignment	Como os filhos se alinham dentro do frame (9 posições).
Resizing: Hug	O frame "abraça" o conteúdo — cresce e encolhe com ele.
Resizing: Fill	O filho estica para ocupar o espaço disponível do pai.
Resizing: Fixed	Tamanho travado, não reage ao conteúdo.
Min / Max width & height	Limites de crescimento — essencial para responsividade real.
Absolute position	Tira um filho do fluxo (ex.: badge de notificação no canto do ícone).

3.3 Constraints e grids

• Constraints definem como uma camada reage quando o frame pai é redimensionado: fixa à esquerda/direita/topo, centralizada, ou scale.
• Layout grids: adicione colunas ao frame da tela (ex.: 12 colunas / margem 80 / gutter 24 no desktop; 4 colunas no mobile) e desenhe alinhado a elas. Alterne a visibilidade com Ctrl Shift 4.
• Combine: grid no frame da página + Auto Layout nas seções = layout profissional.

3.4 Fluxo de trabalho responsivo

1. Desenhe a versão desktop (ex.: 1440px) com grid de 12 colunas.
2. Construa cada seção com Auto Layout e resizing correto (Fill na horizontal, Hug na vertical).
3. Duplique a tela, mude a largura para 375px e ajuste: direção de linhas para colunas, tamanhos de fonte, paddings.
4. Teste arrastando a borda do frame — um layout bem construído se adapta quase sozinho.

Exercício 4Botão indestrutível

1. Crie um botão com Auto Layout: ícone + texto, padding 12/20, gap 8, corner radius 8.
2. Troque o texto por "Adicionar ao carrinho agora" — ele deve crescer sem quebrar.
3. Crie uma versão só com ícone e uma versão full-width (Fill) dentro de um card.

Exercício 5Landing page responsiva

Monte uma landing simples (header, hero com título + botão, grade de 3 cards de benefícios, footer) em 1440px usando somente Auto Layout — nenhuma camada solta. Depois derive a versão 375px. Teste final: arraste a largura do frame desktop até ~1000px; nada pode se sobrepor ou vazar.

Frame 04 Nível intermediário

Componentes, variantes e propriedades

Componentes são a diferença entre "desenhar telas" e "construir sistemas". Aqui começa o vocabulário de quem trabalha em produto.

4.1 Componente e instância

• Componente principal (main) Ctrl Alt K: a fonte da verdade. Aparece com losango roxo ◈.
• Instância: cópias vivas do componente. Edite o main e todas as instâncias atualizam.
• Overrides: em uma instância você pode trocar texto, ícones, cores — sem quebrar o vínculo. Redefina com Reset all changes.
• Boas práticas: mantenha os mains em uma página dedicada (ex.: 🧩 Components), nunca espalhados nas telas.

4.2 Variantes

Variantes agrupam estados de um mesmo componente (ex.: botão primary/secondary × default/hover/disabled × sm/md/lg) em um único conjunto. No painel direito, quem usa a instância troca o estado por dropdowns — sem procurar outro componente.

4.3 Component properties (o nível pro)

Propriedade	Uso típico
Variant	Estados e tamanhos (primary/secondary, sm/md/lg).
Boolean	Mostrar/ocultar elementos: "tem ícone?", "tem badge?".
Text	Expor o rótulo do botão direto no painel, sem clicar no texto interno.
Instance swap	Trocar o ícone interno por qualquer outro do set de ícones.

4.4 Componentes aninhados e slots

• Construa componentes grandes a partir de pequenos: um card/produto usa button, tag e icon dentro.
• Padrão slot: crie um componente vazio (ex.: _slot) usado como área de conteúdo trocável via instance swap — técnica avançada para tabelas, listas e modais flexíveis.
• Prefixe com _ ou . componentes internos que não devem ser publicados na biblioteca.

Exercício 6O botão definitivo

1. Construa um botão com Auto Layout e crie variantes: type (primary, secondary, ghost) × state (default, hover, disabled) × size (sm, md).
2. Adicione: boolean icon-left, text property label e instance swap no ícone.
3. Monte uma tela de teste usando 6 instâncias diferentes configuradas só pelo painel direito.

Exercício 7Card de produto aninhado

Crie card/produto (imagem, tag de desconto, nome, preço, botão) usando seus componentes anteriores aninhados. Depois monte uma vitrine com 6 cards em grade (Auto Layout com wrap) e personalize cada um apenas com overrides e propriedades.

Frame 05 Nível intermediário

Estilos, variáveis e design tokens

Chega de escolher cor "no olho". Estilos e variáveis criam a camada de decisões reutilizáveis que sustenta temas claro/escuro, marcas múltiplas e consistência em escala.

5.1 Estilos (styles)

• Text styles: salve combinações de fonte/tamanho/peso/line-height (ex.: heading/lg, body/md).
• Effect styles: sombras e blurs padronizados (ex.: elevation/2).
• Grid styles: seus grids de 12 e 4 colunas salvos e reaplicáveis.
• Estilos de cor ainda existem, mas para cores o mercado migrou para variáveis — mais poderosas.

5.2 Variáveis: os 4 tipos

Tipo	Exemplos de uso
Color	Paleta e tokens semânticos (bg/surface, text/primary).
Number	Espaçamentos (space/4 = 16), radius, tamanhos, e valores usados em protótipos.
String	Textos que mudam por contexto/idioma; nomes de variantes.
Boolean	Visibilidade condicional de camadas e lógica de protótipo.

5.3 Tokens em camadas: primitivo → semântico

O padrão profissional organiza variáveis em níveis, onde um nível aponta para o outro (aliasing):

PRIMITIVOS (a paleta crua)
  blue/500  = #0D99FF
  gray/900  = #1E1E1E
  space/4   = 16

SEMÂNTICOS (a intenção de uso — apontam para os primitivos)
  color/bg/page        → gray/50
  color/text/primary   → gray/900
  color/action/primary → blue/500
  radius/interactive   → radius/md

As telas usam apenas os semânticos. Se a marca mudar de azul para roxo, você altera um primitivo e todo o produto atualiza.

5.4 Modes: tema claro/escuro (e além)

1. Na coleção de variáveis semânticas, crie dois modos: Light e Dark.
2. Em cada modo, aponte o mesmo token para primitivos diferentes (bg/page: gray/50 no light, gray/900 no dark).
3. Selecione qualquer frame e troque o modo no painel direito — a tela inteira muda de tema instantaneamente.
4. O mesmo mecanismo serve para múltiplas marcas (white-label) e densidades (compact/comfortable).

Exercício 8Mini sistema de tokens com dark mode

1. Crie a coleção primitives: 1 escala de cinza (50–900), 1 cor de marca (100–700), space/1..8 (4 a 32) e radius/sm..lg.
2. Crie a coleção semantic com modos Light/Dark e tokens: bg/page, bg/surface, text/primary, text/secondary, action/primary, border/default.
3. Aplique os tokens ao seu card de produto do módulo 4 e alterne os modos no frame.

Critério de sucesso: nenhuma cor "solta" (hex direto) nas telas — tudo via variável.

Frame 06 Nível intermediário

Protótipos: de cliques simples a lógica condicional

Protótipos transformam telas em experiências testáveis — para validar com usuários e vender ideias a stakeholders.

6.1 O básico

• Na aba Prototype, arraste a seta de um elemento para a tela de destino.
• Triggers: on click, on drag, while hovering, while pressing, key press, mouse enter/leave, after delay.
• Actions: navigate to, open overlay, swap overlay, back, scroll to, open link, set variable, conditional.
• Defina o frame inicial (ícone de play) e apresente com Ctrl Alt Enter.

6.2 Animações e Smart Animate

• Transições: instant, dissolve, move/push/slide in-out e Smart Animate.
• Smart Animate interpola camadas com o mesmo nome entre duas telas — posição, tamanho, cor e opacidade. É assim que se fazem micro-interações convincentes.
• Ajuste curvas (ease in/out, spring) e duração; 200–300ms costuma parecer natural para UI.

6.3 Overlays, scroll e estados fixos

• Overlays: modais, menus e toasts sobre a tela atual, com fundo escurecido e fechamento por clique fora.
• Scroll behavior: defina headers como fixed (sticky) e áreas com scroll horizontal (carrosséis).
• Interações no componente: crie o hover uma vez nas variantes do botão (default → hover com while hovering) e todas as instâncias herdam — nunca faça hover tela por tela.

6.4 Variáveis + condicionais: protótipos que "funcionam"

Com set variable e conditional, o protótipo ganha lógica real:

Exemplo: contador do carrinho
1. Variável number: cart_count = 0
2. Botão "Adicionar" → On click → Set variable: cart_count = cart_count + 1
3. Badge do carrinho → texto ligado à variável cart_count
4. Condicional no checkout:
   IF cart_count > 0 → Navigate to "Pagamento"
   ELSE → Open overlay "Carrinho vazio"

Com o mesmo recurso você simula: login com validação, favoritos, toggles de tema (boolean ligado ao mode), formulários multi-etapa e onboarding personalizado.

Exercício 9Fluxo de e-commerce interativo

1. Use sua vitrine do módulo 4: home → página de produto → carrinho.
2. Implemente o contador de carrinho com variável number e a condicional de carrinho vazio.
3. Adicione: hover nos botões via variantes, modal de confirmação como overlay e um toast "Adicionado!" com after delay para sumir.
4. Grave a tela apresentando o fluxo em menos de 60 segundos — treino direto para apresentar portfólio.

Frame 07 Nível avançado

Design Systems: arquitetura, bibliotecas e governança

O tópico que separa plenos de sêniores. Aqui você aprende a construir, publicar e manter um sistema que dezenas de pessoas usam sem quebrar.

7.1 O que é (de verdade) um design system

Não é "um arquivo com botões". É um produto interno composto por: fundações (tokens de cor, tipo, espaço, elevação), componentes documentados, padrões de uso (quando usar modal vs. página) e governança (quem aprova mudanças e como elas chegam aos times).

7.2 Arquitetura de arquivos recomendada

📁 Design System
 ├── 01 · Foundations   → variáveis (primitivos + semânticos), text/effect/grid styles
 ├── 02 · Components    → mains organizados por página: Actions, Forms, Navigation…
 ├── 03 · Patterns      → composições prontas: headers, empty states, tabelas
 └── 04 · Docs          → guia de uso, do's & don'ts, changelog

📁 Produto
 └── Feature X          → consome as bibliotecas acima (nunca contém mains do sistema)

7.3 Bibliotecas (team libraries)

1. No arquivo do sistema, abra Assets → Libraries e clique em Publish.
2. Escreva uma descrição de versão clara (changelog): "Button: adiciona variante ghost; deprecia size xs".
3. Nos arquivos de produto, ative a biblioteca — componentes e variáveis ficam disponíveis no painel Assets.
4. Quando o sistema muda, os consumidores recebem um aviso de update e revisam antes de aceitar.

7.4 Nomenclatura profissional

• Componentes: hierarquia com barras — Button, Input/Text, Card/Product.
• Variantes: propriedades minúsculas e valores claros — type=primary, state=hover, size=md.
• Tokens: caminho semântico — color/text/primary, space/md, elevation/2.
• Ícones: icon/nome em grid 24, permitindo instance swap universal.
• Internos não publicáveis: prefixo _ ou ..

7.5 Branching e versionamento

• Em planos Organization/Enterprise, crie um branch do arquivo do sistema para trabalhar em mudanças grandes sem afetar ninguém.
• Ao terminar, abra um review (como um pull request) — outro designer compara as mudanças e aprova o merge.
• Sem plano pago: simule com páginas WIP e o histórico de versões (Ctrl Alt S para marcar versões nomeadas).

7.6 Documentação e adoção

• Todo componente publicado merece: descrição no painel (aparece no hover), exemplo de uso, do's & don'ts.
• Meça adoção: quantas telas usam o componente oficial vs. cópias locais ("detached"). Detaches em massa indicam que o componente não atende — ouça os times.
• Rituais que funcionam: office hours semanais, canal de suporte e changelog comunicado a cada publish.

Exercício 10Publique seu mini design system

1. Reorganize o que você construiu nos módulos 4 e 5 na arquitetura de arquivos acima.
2. Escreva descrição de uso para 5 componentes (Button, Input, Card, Tag, Icon).
3. Publique como biblioteca (ou simule com páginas, no plano grátis) e consuma em um arquivo novo "Produto".
4. Faça uma mudança no Button, publique com changelog e aceite o update no arquivo consumidor.

Frame 08 Nível avançado

Dev Mode e handoff: entregando design que vira código

Design que o dev não consegue implementar é design incompleto. Este módulo ensina a preparar e comunicar arquivos para desenvolvimento.

8.1 O que o dev vê no Dev Mode

• Alterne com Shift D (ícone de chaves </> na toolbar).
• Medidas e distâncias entre elementos ao passar o mouse.
• Código gerado: CSS, iOS (Swift) e Android (XML/Compose) por camada.
• Suas variáveis aparecem como tokens no código (ex.: var(--color-action-primary)) — mais um motivo para usá-las.
• Status das telas: marque seções como Ready for dev; devs filtram só o que está pronto.
• Comparação de versões: o dev vê o que mudou desde a última visita.

8.2 Preparando um arquivo para handoff

• Camadas nomeadas com intenção (nada de Frame 427).
• Auto Layout refletindo o comportamento esperado (o dev lê Hug/Fill como fit-content/flex-grow).
• Todos os estados desenhados: hover, focus, disabled, loading, erro, vazio.
• Tokens/variáveis aplicados em vez de valores soltos.
• Anotações (annotations do Dev Mode) para comportamentos não óbvios: regras de truncamento, limites, animações.
• Assets exportáveis marcados (ícones em SVG, imagens em 2x).
• Fluxo do protótipo ligado, para o dev entender a navegação.

8.3 Colaboração contínua

• Code Connect (Enterprise): mapeia componentes do Figma para componentes reais do repositório — o dev vê o snippet do próprio codebase em vez de CSS genérico.
• Convide devs cedo: comentários (C) em cima do design evitam retrabalho de semanas.
• Critique de viabilidade: pergunte "algo aqui é caro de construir?" antes de finalizar.

Exercício 11Simulação de handoff

1. Pegue sua landing do módulo 3 e aplique o checklist 8.2 completo.
2. Adicione 3 anotações de comportamento (ex.: "título trunca em 2 linhas com ellipsis").
3. Marque a página como Ready for dev e escreva, em um frame lateral, um resumo de handoff de 5 linhas como você mandaria no Slack do time.

Frame 09 Nível avançado

FigJam e colaboração: o design antes do design

Grande parte do trabalho de produto acontece antes de qualquer tela: entender o problema, alinhar o time e mapear fluxos. O FigJam é onde isso vive.

9.1 Ferramentas do FigJam

• Sticky notes, shapes com conectores inteligentes, carimbos, timer, votação e seções.
• Templates prontos: brainstorm, retrospectiva, user journey, matriz de priorização.
• Copie conteúdo do FigJam para o Figma Design (e vice-versa) para conectar discovery e UI.

9.2 Artefatos que caem no dia a dia (e em entrevistas)

9.3 Facilitação (soft skill que paga bem)

1. Prepare o board antes: seções, instruções e exemplos.
2. Use o timer para timeboxing e votação por pontos para decidir.
3. Feche sempre com "próximos passos e responsáveis" — facilitação sem encaminhamento é só conversa.

Exercício 12Discovery do projeto final

Crie um FigJam para o app que você construirá no módulo 12: (1) brainstorm de problemas do usuário, (2) user flow do fluxo principal com decisões, (3) matriz impacto × esforço das funcionalidades. Esse board vira a primeira seção do seu case de portfólio.

Frame 10 Nível avançado

Plugins, widgets, APIs e IA

Automação é alavanca: o designer que resolve em 5 minutos o que tomaria uma tarde vale mais. Aqui está o arsenal.

10.1 Plugins essenciais por categoria

Categoria	Plugins e uso
Conteúdo realista	Content Reel (nomes, avatares, textos), Unsplash (fotos livres) — mate o "Lorem Ipsum".
Acessibilidade	Stark e Contrast — checam contraste WCAG e simulam daltonismo. Citar WCAG em entrevista soma pontos.
Ícones e ilustrações	Iconify / Material Symbols, Blush.
Produtividade	Rename It (renomeia em lote), Similayer (seleciona camadas parecidas), Instance Finder.
Tokens e handoff	Tokens Studio — gerencia tokens avançados e exporta JSON para o código; padrão em times maduros de DS.
Diagramas	Autoflow — setas automáticas entre telas para user flows rápidos.

Rode qualquer plugin pelo Ctrl / digitando o nome — sem procurar em menus.

10.2 Widgets

Widgets são objetos interativos que vivem no arquivo (não em janela): tabelas de votação, todo lists, polls. Úteis em FigJam para rituais de time.

10.3 As APIs do Figma (visão de quem contrata)

• Plugin API (TypeScript): roda dentro do editor e manipula o documento — dá para criar seu próprio plugin que, por exemplo, gera relatório de cores fora do token. Saber o básico te torna "designer que automatiza".
• REST API: acessa arquivos de fora — usada para extrair tokens para o repositório, gerar imagens de telas em documentação e integrar com Notion/Jira.
• Webhooks: notificam sistemas quando um arquivo muda ou uma biblioteca é publicada (ex.: avisar no Slack).

// Gostinho da Plugin API: renomear frames selecionados
for (const node of figma.currentPage.selection) {
  if (node.type === "FRAME") node.name = "screen/" + node.name.toLowerCase();
}
figma.closePlugin("Frames renomeados ✅");

10.4 IA no fluxo de trabalho

• Recursos de IA do próprio Figma (busca visual, renomear camadas, primeiro rascunho de telas) evoluem rápido — trate como acelerador de rascunho, nunca como entrega final.
• Use IA externa para: gerar conteúdo realista, variações de copy, resumir pesquisas e revisar heurísticas.
• Postura de mercado: quem domina fundamentos usa IA para ir mais rápido; quem não domina usa para mascarar lacunas — entrevistadores percebem a diferença.

Exercício 13Sprint de automação

1. Popule sua vitrine de produtos com Content Reel e Unsplash (nada de texto fake).
2. Rode Stark na tela e corrija qualquer contraste reprovado no nível AA.
3. Renomeie todas as camadas de uma tela bagunçada com Rename It.
4. Bônus dev: crie um plugin local (Plugins → Development → New plugin) e rode o snippet acima.

Frame 11 Carreira

Mercado de trabalho: portfólio, entrevistas e testes

Habilidade técnica abre a porta; comunicação e evidências fazem você atravessá-la. Este módulo é o mapa do processo seletivo em design.

11.1 Portfólio que contrata

• 2 a 4 cases profundos valem mais que 15 telas bonitas soltas.
• Estrutura de case vencedora: contexto e problema → seu papel → processo (discovery, flows, iterações) → decisões e trade-offs → solução final → resultados ou aprendizados.
• Mostre o "antes" e as versões descartadas: recrutadores contratam raciocínio, não só o resultado.
• Inclua pelo menos: 1 case de produto (app ou web), 1 demonstrando design system/componentização e, se seu foco incluir marketing, 1 de campanha/social.
• Formatos: site próprio ou deck em Figma Slides; protótipos incorporados navegáveis são um diferencial.
• Sem experiência profissional? Redesigns com hipóteses claras, projetos de ONGs, desafios como o do módulo 12 e contribuições na Figma Community contam — desde que apresentados com processo.

11.2 O teste prático (design challenge)

Formato típico: um brief (ex.: "tela de agendamento para petshop") com prazo de 2 a 7 dias, ou um whiteboard challenge ao vivo de 45–60 min. O que avaliam de verdade:

• Perguntas que você faz antes de desenhar (quem é o usuário? qual métrica importa?).
• Organização do arquivo: páginas nomeadas, componentes, Auto Layout, tokens.
• Estados além do "caminho feliz": vazio, erro, carregando.
• Justificativa das decisões — em voz alta no whiteboard, em notas no teste assíncrono.
• Priorização consciente: o que você cortou por causa do prazo e por quê.

11.3 Perguntas frequentes de entrevista (com direção de resposta)

Pergunta	O que responder
"Explique a diferença entre componente, variante e instância."	Main = fonte da verdade; variantes = estados agrupados por propriedades; instância = cópia viva com overrides. Dê um exemplo com botão.
"Como você estrutura variáveis/tokens?"	Camadas primitivo → semântico com aliasing; modes para temas; telas só consomem semânticos.
"Como funciona seu handoff com devs?"	Auto Layout espelhando o comportamento, tokens no Dev Mode, todos os estados desenhados, anotações e conversa cedo — não "jogar arquivo por cima do muro".
"Conte uma decisão de design que você mudou por feedback."	Método STAR: situação, tarefa, ação, resultado. Mostre humildade + dados.
"Como você garante acessibilidade?"	Contraste WCAG AA (plugins como Stark), tamanhos de toque, foco visível, não depender só de cor.
"Design system: por onde começaria em uma empresa sem nenhum?"	Auditoria do existente → fundações (tokens) → 5-10 componentes mais usados → biblioteca publicada → documentação e rituais de adoção.

11.4 Trilhas e o que cada vaga espera do seu Figma

Vaga	Ênfase no Figma
UI/Product Designer	Auto Layout impecável, componentes, variáveis, protótipos com lógica, DS.
UX Designer / Researcher	FigJam, flows, jornadas, protótipos para teste de usabilidade.
Designer de marketing/social	Velocidade com componentes-template, exportação em lote, múltiplos formatos por variantes, imagens e máscaras.
Design Ops / DS Designer	Bibliotecas, branching, tokens (Tokens Studio), analytics de adoção, APIs.

11.5 Freelas e networking

• Comece com escopos pequenos e claros: landing page, kit de social media, redesign de uma tela — cobrando por projeto, não por hora, no início.
• Publique recursos gratuitos na Figma Community: um UI kit bem feito gera visibilidade e prova social.
• Compartilhe processo (não só resultado) no LinkedIn; recrutadores de design ativamente buscam por lá.
• Comunidades: Friends of Figma (capítulos locais e eventos), grupos de design brasileiros, ADPList para mentorias gratuitas.

Exercício 14Simulado de whiteboard challenge

Configure um timer de 45 minutos e resolva no FigJam + Figma: "Pessoas esquecem de tomar remédios. Desenhe uma solução." Reserve 10 min para perguntas/hipóteses (escreva-as), 10 para user flow, 20 para wireframes de 3 telas e 5 para apresentar em voz alta (grave o áudio). Repita com briefs diferentes até a estrutura sair natural.

Frame 12 Projeto final

Projeto final guiado: seu case de portfólio

Um projeto único que costura todos os módulos e sai pronto para o portfólio: um app de delivery de comida caseira de cozinheiros locais (adapte o tema se quiser).

Etapas (sugestão: 2 a 3 semanas)

1. Discovery (FigJam) — problema, proto-persona, user flow do pedido, matriz de priorização. [Módulo 9]
2. Fundações — coleções de variáveis primitivo/semântico com Light/Dark, text styles, grid styles. [Módulo 5]
3. Componentes — Button, Input, Card de prato, Tag, Navbar, Tab bar; com variantes e properties completas. [Módulo 4]
4. Telas mobile (375px) — onboarding, home com busca, página do prato, carrinho, checkout, confirmação; 100% Auto Layout e tokens. [Módulos 2-3]
5. Estados — vazio (carrinho), erro (pagamento), carregando (skeleton) e sucesso. [Módulo 8]
6. Protótipo — fluxo completo com contador de carrinho por variável, condicional no checkout, overlays e Smart Animate em uma micro-interação. [Módulo 6]
7. Dark mode — alterne o mode e corrija o que quebrar. [Módulo 5]
8. Handoff — checklist completo, anotações, Ready for dev. [Módulo 8]
9. Biblioteca — publique (ou simule) seus componentes como mini design system com changelog. [Módulo 7]
10. Case — monte a narrativa em Figma Slides: problema → processo → decisões → solução → protótipo gravado → aprendizados. [Módulo 11]

Rubrica de autoavaliação

• Zero cores/tamanhos "soltos" — tudo via variável ou estilo.
• Zero grupos onde deveria haver frame com Auto Layout.
• Todas as camadas nomeadas; páginas organizadas com emojis/números.
• Protótipo navegável de ponta a ponta sem becos sem saída.
• Dark mode funcional em todas as telas.
• Case conta uma história com decisões justificadas, não um desfile de telas.

Frame A

Apêndice: atalhos, glossário e recursos

Atalhos que valem ouro (Windows — troque Ctrl/Alt por Cmd/Option no Mac)

Ação	Atalho	Ação	Atalho
Frame	F	Texto	T
Retângulo / Elipse	R / O	Pen tool	P
Auto Layout	Shift A	Criar componente	Ctrl Alt K
Duplicar	Ctrl D	Copiar/colar estilo	Ctrl Alt C/V
Agrupar / Frame selection	Ctrl G / Ctrl Alt G	Máscara	Ctrl Alt M
Quick actions	Ctrl /	Dev Mode	Shift D
Apresentar protótipo	Ctrl Alt Enter	Salvar versão	Ctrl Alt S
Zoom para tudo / seleção	Shift 1 / 2	Comentário	C
Esconder UI	Ctrl \	Réguas	Shift R

Glossário rápido

Termo	Significado
Frame	Contêiner com propriedades próprias; base de telas e componentes.
Auto Layout	Sistema de organização automática de filhos (equivalente ao flexbox).
Hug / Fill / Fixed	Comportamentos de redimensionamento: abraçar conteúdo, preencher espaço, tamanho travado.
Componente / Instância	Fonte da verdade reutilizável / cópia viva vinculada.
Variante	Estado de um componente dentro de um conjunto (type, state, size…).
Override	Alteração local em uma instância sem quebrar o vínculo.
Detach	Romper o vínculo da instância com o main (evite; investigue quando acontecer em massa).
Token / Variável	Decisão de design nomeada e reutilizável (cor, número, texto, boolean).
Mode	Conjunto alternativo de valores de variáveis (light/dark, marcas, densidades).
Biblioteca	Arquivo publicado cujos componentes/variáveis outros arquivos consomem.
Branch / Merge	Ramificação de arquivo para mudanças seguras + revisão e fusão.
Handoff	Entrega do design para desenvolvimento com specs e contexto.
Smart Animate	Transição que interpola camadas de mesmo nome entre telas.
WCAG	Diretrizes de acessibilidade web; nível AA é o padrão mínimo de mercado.

Para continuar estudando

• Ajuda oficial e YouTube do Figma — a documentação (help.figma.com) é excelente e o canal tem playlists do básico a Config talks.
• Figma Community — desmonte arquivos de design systems famosos (Material, e kits populares) para aprender por engenharia reversa.
• Config — conferência anual do Figma; as palestras gravadas mostram para onde a ferramenta e o mercado vão.
• Friends of Figma — comunidade oficial com capítulos locais, inclusive no Brasil.
• Prática deliberada — refaça interfaces de apps que você admira, cronometrado, aplicando a rubrica do módulo 12.