Seção 1 – Design

Dica: Crie componentes locais

Componentes locais são importantes porque permitem que você atualize todas as instâncias a partir de um único local. Uma boa prática é criar uma página separada para eles.
Atalho para criar um componente: ⌥⌘K.
Depois de criar seu componente local, assegure-se de usá-lo em todo o design. Quando quiser personalizar instâncias desse componente (ou de qualquer outro), você pode usar o recurso Select Matching Layers ou Multi-Edit Text.

• Select Matching Layers: seleciona camadas similares em outras pranchetas e aplica a alteração a todas.
• Multi-Edit Text: seleciona textos dentro de camadas similares em outras pranchetas e aplica a alteração a todos.
  Atalho para selecionar camadas iguais: ⌥⌘A.
  Por exemplo: se você tiver 50 telas com navegação por abas e quiser mudar a propriedade “Estado” de “Idle” para “Default” e o nome da aba de “Default” para outro, você seleciona o componente da aba, pressiona ⌥⌘A, altera o estado via painel de propriedades e isso se reflete em todos. Então você seleciona a camada de texto, pressiona ⌥⌘A novamente, digita a nova cópia e ela se atualiza em todas as instâncias.

Dica: Seja organizado. Nomear importa!

Ser capaz de usar recursos poderosos como Select Matching Layers ou Smart Animate requer nomenclatura consistente. Crie o hábito de nomear seus layers e componentes corretamente desde o início — isso facilita o trabalho em escala.
Atalho para renomear: ⌘R.

Dica: Utilize Auto Layout e ative “Clip Content” para seus conteúdos

Uso Auto Layout para quase tudo. Ele ajuda a criar designs responsivos que crescem, encolhem e reorganizam conteúdos automaticamente. Você pode confiar nele para regras consistentes de redimensionamento, espaçamento e preenchimento. Dentro de um mesmo contêiner de layout, existe a opção Clip Content — que é importante para interações de rolagem.
Explicando:

• Clip content: quando você quer que conteúdos rolem dentro de um frame, marque esta opção — qualquer parte que extrapolar os limites do frame será ocultada.
• Auto layout: alinha automaticamente conteúdos e cria regras de margem e preenchimento consistentes. Fique familiarizado com recursos como Redimensionamento, Direção + Gap, Alinhamento e Padding.
  Atalho para aplicar Auto Layout: ⇧A.

Dica: Aprenda os atalhos

Atalhos economizam muito tempo. Alguns exemplos práticos:

• Copiar: ⌘C
• Colar-para-substituir: ⇧⌘R (útil quando você quer trocar um componente antigo por um novo)
• Alinhar centros horizontal: ⌥H
• Alinhar centros vertical: ⌥V
• Agrupar: ⇧G
• Desagrupar: ⌘⇧G
• Distribuir espaçamento horizontal: ⌃⌥H
• Distribuir espaçamento vertical: ⌃⌥V
• Mostrar/ocultar: ⌘⇧H
• Bloquear: ⌘⇧L
• Virar horizontalmente: ⇧H
• Virar verticalmente: ⇧L
• Criar frame: ⌥⌘G

Por exemplo:
Se quiser substituir um componente antigo por um novo, copie o novo (⌘C), selecione o antigo e cole para substituir (⇧⌘R).
Se quiser centralizar um popup, crie o retângulo (R), insira o texto (T), o botão, agrupe (⇧G), renomeie (⇧R), alinhe horizontal (⌥H) e vertical (⌥V), etc.

Dica Bônus: Familiarize-se com Variáveis

Variáveis devem ter seu próprio tutorial, mas aqui está um resumo:

• Você encontra Local Variables numa área vazia da tela ou clicando no canvas com nenhuma prancheta selecionada.
• Você pode aplicar variáveis no painel de aparência, clicando no botão Apply Variable Mode.
• Variáveis são valores brutos — como cor, números ou strings — que podem mudar de valor dependendo do contexto.
  Usar variáveis corretamente ajuda a projetar e prototipar mais rapidamente.

Seção 2 – Protótipo

Prototipagem consiste em “Interaction Noodles” e “Interaction Details”

Quando terminar de configurar seu protótipo, use o atalho ⇧[ SPACE ] para visualizar. No modo preview, pressione R para reiniciar o fluxo. Assegure-se de que o Flow Starts esteja definido para manter seus protótipos organizados.

Dica: Use como padrão esta curva personalizada

Existem diversos tipos de animação e curvas. Um ótimo padrão que funciona bem é a curva Bezier: 0.8, 0, 0.2, 1.
Outras curvas comuns:

• Linear: pode parecer robótica — boa para abrir dropdowns.
• Ease in: início lento, final rápido — útil para elementos saindo da vista.
• Ease out: início rápido, final lento — bom para elementos entrando na vista.
• Ease in and out: lento, rápido, lento — pode parecer “muito perfeito” se usado em tudo.
• Ease in back / Ease out back / Ease in and out back: adicionam “bounce” pequeno no início ou final — bom para transições com “efeito”.
• Springs (Molasm):
  • Gentle: opção neutra — ótimo para movimento sutil ao escalar conteúdo.
  • Quick: um pouco mais “salto” — bom para toasts ou notificações.
  • Bouncy: um salto mais evidente — bom para animações divertidas como “coração batendo”.
  • Slow:: modo mais natural, ideal para conteúdo em tela cheia.
  • Custom: ajuste Stiffness (número de “saltos”), Damping (nível de amortecimento) e Mass (velocidade).

Dica: Utilize microanimações também

Para mim, são as pequenas animações que fazem a diferença. Um dashboard deslizando horizontalmente ou verticalmente é interessante — mas um botão mudando de estado ao passar o mouse é o que dá vida ao design.
Alguns gatilhos comuns:

• Hover: usado frequentemente para tooltips ou ao passar o cursor sobre um CTA.
• Loading: animação ao carregar a página, dentro de um botão ou “skeleton loading”.
• Pulse: fazer uma notificação aparecer ou um carregamento completar com efeito de pulso — gatilhos “Enquanto hover + Após delay”.
• Scroll: mover conteúdos através de um contêiner — seja dashboard ou formulário. Você define:
  • Posição: como o contêiner se comporta em relação à prancheta.
  • Overflow: para conteúdos que extrapolam a vista — qual comportamento desejado.

Dica Bônus: Explore variáveis, condições e expressões

Depois de dominar as dicas anteriores, vá além e experimente a prototipagem avançada. Você pode criar relacionamentos mais complexos entre seus componentes, de forma quase programática. Exemplo: quando uma checkbox for selecionada, atualizar um contador +1. Com isso, você adiciona lógica ao seu protótipo. Vale a pena explorar.

Boas Práticas para Trabalhar em Equipe no Figma

Além de dominar técnicas individuais, o verdadeiro ganho de produtividade no Figma vem quando toda a equipe trabalha de forma colaborativa e padronizada. Aqui vão algumas recomendações práticas:

1. Centralize estilos e componentes compartilhados

Se a equipe usa o Figma de forma colaborativa, mantenha um arquivo principal de design system que reúna cores, tipografia, ícones e componentes padronizados. Assim, todos trabalham com as mesmas referências visuais e reduzem o retrabalho.

Use os componentes compartilhados (Libraries) para garantir consistência entre projetos. Isso evita divergências de cor, padding e espaçamento, especialmente em grandes times com vários designers e desenvolvedores.

2. Documente padrões e interações

Ao criar um componente ou fluxo novo, documente como ele deve se comportar. Use páginas de “Guidelines” ou “Notes” no próprio Figma para explicar o uso de cada elemento.
Essa documentação interna reduz dúvidas e acelera o onboarding de novos membros da equipe.

Lembre-se: a clareza visual é tão importante quanto o design em si — um protótipo bem documentado é mais valioso do que um layout bonito, mas indecifrável.

3. Trabalhe com versões e backups

Crie marcos de versão (comando: ⌥⌘S → Save version) em momentos-chave do projeto, como antes de uma grande mudança ou entrega. Isso permite voltar atrás facilmente se algo der errado e evita perda de horas de trabalho.

Outra boa prática é duplicar o arquivo e renomeá-lo com o sufixo _backup antes de explorar mudanças mais drásticas.

Fluxo de Trabalho Ideal para Prototipagem

Para tirar o máximo proveito das ferramentas de prototipagem, siga esta sequência lógica:

1. Planeje as interações — antes de conectar as telas, desenhe um mini mapa de fluxo com as ações do usuário (ex: clique → transição → retorno).
2. Use protótipos progressivos — comece com interações simples (navegação básica) e adicione microinterações e animações conforme a evolução do projeto.
3. Teste cedo e com frequência — compartilhe links interativos com colegas, desenvolvedores ou stakeholders. A coleta de feedback visual reduz o retrabalho no código.
4. Padronize as transições — use sempre os mesmos tempos e curvas de easing em todo o projeto. Isso dá uma sensação mais fluida e profissional à experiência.
5. Aplique variáveis para estados — defina variáveis globais para estados de UI (ativo, desabilitado, erro, sucesso). Assim, alterar o estilo de um estado se propaga automaticamente em todos os elementos.

Erros Comuns e Como Evitá-los

Mesmo com experiência, é fácil cair em armadilhas que comprometem a eficiência. Veja os erros mais frequentes e como evitá-los:

• ❌ Excesso de frames aninhados: causa lentidão e dificulta alterações.
  ✅ Prefira layouts planos e simples, utilizando Auto Layout de forma inteligente.
• ❌ Nomes genéricos (Frame 1, Group 2, Text 3): tornam o projeto impossível de navegar.
  ✅ Nomeie tudo com lógica e consistência (ex: “BTN_Principal”, “Card_Produto”, “Modal_Login”).
• ❌ Esquecer de limpar componentes antigos: quanto mais versões obsoletas no arquivo, mais confuso fica o protótipo.
  ✅ Faça revisões periódicas e arquive componentes desatualizados.
• ❌ Usar muitos tipos de animação diferentes: gera uma experiência inconsistente.
  ✅ Defina uma biblioteca de transições padrão e reutilize-as.

Dica Final: Otimize para Apresentação

Quando for compartilhar o protótipo com clientes, gestores ou desenvolvedores:

• Ative o modo de apresentação limpa (Clean View) para esconder grades e guias.
• Use a tecla / (barra) para pesquisar rapidamente qualquer camada, mesmo dentro de grupos complexos.
• Mantenha um flow start bem definido — isso garante que a pré-visualização comece na tela certa.
• Configure uma microanimação de entrada (como fade in suave) na primeira tela. Isso causa uma boa impressão e transmite profissionalismo.

Conclusão Geral

O Figma é muito mais do que uma ferramenta de design: ele é um ambiente colaborativo que conecta ideia, protótipo e validação em um só fluxo.
Dominar seus atalhos, componentes, auto layout e recursos de prototipagem não é apenas uma questão de velocidade — é sobre trabalhar com clareza, consistência e propósito.

Quando a equipe inteira adota essas boas práticas, o resultado é um processo de criação fluido, colaborativo e com entregas visuais que impressionam tanto clientes quanto desenvolvedores.