Antes de mais nada, é importante entender que o auto layout no Figma é uma das ferramentas mais poderosas pra deixar qualquer design organizado, rápido de montar e fácil de atualizar. E, acima de tudo, quando usado em cards, ele muda completamente a forma como se trabalha no Figma.
À primeira vista, pode parecer um recurso avançado, mas na prática é bem simples. A ideia é que o card com auto layout se ajuste automaticamente ao que tem dentro dele — texto, imagem, botão, ícone, qualquer coisa. Ou seja, se o conteúdo muda, o card se adapta sem você precisar mexer em nada manualmente.
Em primeiro lugar, isso faz uma diferença enorme no dia a dia, principalmente quando se quer manter um design limpo e coerente. Além disso, ajuda muito a ganhar tempo em projetos grandes, onde se cria dezenas de cards com o mesmo padrão.
Figma Tutorial: Cards com Auto Layout – Rápido e fácil de fazer! https://youtu.be/ObrHbReM1cc
O que é um card com auto layout
Antes de mais nada, o auto layout é um recurso que organiza automaticamente os elementos dentro de um frame. Isso quer dizer que ele define a distância entre os itens, o alinhamento e até o espaçamento interno. Assim, tudo fica no lugar mesmo que algo mude de tamanho.
Agora, quando esse recurso é aplicado a um card, ele cria um comportamento inteligente: o card cresce ou diminui conforme o conteúdo muda. Por exemplo, se você troca um título curto por um título longo, o card aumenta automaticamente pra comportar o texto — sem precisar arrastar nada.
Além disso, ainda dá pra empilhar vários cards no mesmo frame e deixá-los organizados com outro auto layout. Em outras palavras: o Figma faz o trabalho pesado pra você.
Sobretudo, essa é uma das melhores práticas pra quem está começando no design de interface. Afinal, não basta só fazer algo bonito — precisa funcionar bem em diferentes tamanhos de tela.
Por que usar auto layout em cards
Primeiramente, vale dizer que o auto layout não serve só pra economizar tempo (apesar de já ser um ótimo motivo). Ele traz consistência, e consistência é tudo em design.
Além disso, quando se usa auto layout nos cards no Figma, os componentes ficam muito mais fáceis de atualizar e replicar. Muda-se um detalhe, e todas as instâncias se atualizam juntas.
Ainda mais importante: o auto layout evita aqueles desalinhamentos clássicos que acontecem quando se move algo “no olho”.
Ou seja, o auto layout garante precisão. E isso, mesmo em um projeto simples, faz toda a diferença.
Como criar um card com auto layout passo a passo
1. Crie a estrutura base
Primeiramente, abra um frame e coloque dentro dele os elementos que o card precisa: uma imagem, um título, uma descrição e, se quiser, um botão.
Em seguida, selecione todos e pressione Shift + A pra aplicar o auto layout. Pronto — o Figma já vai organizar tudo com espaçamento entre os itens.
Além disso, é bom definir um padding (margem interna) pra dar aquele respiro dentro do card. Assim, o conteúdo não gruda nas bordas.
2. Ajuste o comportamento dos elementos
Agora vem a parte divertida. Cada elemento dentro do card pode ter um comportamento diferente:
- O texto pode crescer conforme o conteúdo (opção Hug contents).
- A imagem pode ocupar toda a largura (Fill container).
- O botão pode ficar fixo, sem mudar de tamanho.
Desse modo, o card se adapta sozinho. É como se tivesse vida própria.
3. Teste o redimensionamento
Depois que o card estiver configurado, comece a testar.
Aumente e diminua o tamanho da área.
Troque textos curtos por longos.
Adicione ou remova elementos.
A princípio, parece um teste bobo, mas é aqui que dá pra ver se o auto layout realmente está funcionando. Se o card se reorganiza sem quebrar, deu certo.
Além disso, se quiser deixar tudo ainda mais controlado, use valores mínimos e máximos de largura e altura. Assim, o card não fica gigante nem encolhe demais.
4. Transforme em componente
Agora que o card está redondinho, transforme-o em componente (Ctrl/Cmd + Alt + K).
Dessa forma, dá pra criar cards no Figma com várias versões — por exemplo:
- Card com imagem.
- Card sem imagem.
- Card destacado.
- Card com botão de ação.
Isso facilita demais a vida. Assim também, quando o projeto crescer, bastará atualizar um único card pra mudar tudo de uma vez.
Dicas práticas pra deixar seus cards melhores
Use o auto layout com moderação
Ainda que o recurso seja ótimo, aninhar muitos auto layouts pode deixar o arquivo confuso. Então, mantenha a estrutura simples e clara.
Brinque com os alinhamentos
Ao passo que você ganha prática, vai perceber que mudar o alinhamento (por exemplo, da esquerda pro centro) pode transformar completamente o estilo do card.
Ajuste o espaçamento
Pequenas mudanças no gap entre os elementos fazem diferença. Logo depois de aplicar o auto layout, teste diferentes valores até encontrar o equilíbrio.
Combine com estilos visuais
Cards bonitos não dependem só de estrutura. Portanto, aplique estilos de cor, sombra e borda que combinem com o restante do layout.
Além disso, manter um sistema de design com tokens ajuda a padronizar tudo.
Erros comuns ao criar cards no Figma
Deixar tudo “fixo”
Um erro clássico é travar tamanhos.
Quando tudo é fixo, o auto layout perde a graça.
Prefira usar Hug contents e Fill container sempre que possível.
Ignorar o comportamento do texto
Às vezes, um texto maior pode quebrar o layout.
Pra evitar isso, teste sempre com diferentes quantidades de conteúdo.
Esquecer do padding
Sem espaço interno, o card fica visualmente apertado.
Um bom padding é o que dá aquela sensação de respiro e equilíbrio.
Conclusão
Antes de mais nada, vale lembrar: auto layout é sobre pensar como o design se comporta, não só como ele parece.
Usar cards com auto layout no Figma é um dos primeiros passos pra quem quer criar interfaces profissionais, responsivas e consistentes.
Além disso, dominar essa base facilita o aprendizado de componentes, variantes e até design systems.
Ou seja, é um investimento de tempo que rende muito.
Em suma, o segredo é simples:
comece com uma estrutura limpa, aplique auto layout com lógica e teste bastante.
Assim, cada card do seu projeto vai se ajustar automaticamente, economizando tempo e garantindo um resultado profissional.
Por fim, lembre-se: quanto mais você pratica, mais natural o uso do auto layout se torna. E, principalmente, ele passa a ser parte da sua forma de pensar design — e não só uma ferramenta do Figma.
