Componentes escaláveis com Auto Layout e constraints para interfaces responsivas

Componentes escaláveis são aqueles que se adaptam a diferentes tamanhos de tela, densidades de conteúdo e variações de texto sem “quebrar” o layout. No Figma, dois recursos trabalham juntos para isso: Auto Layout (para organizar e dimensionar conteúdo de forma fluida) e constraints (para controlar como um elemento se comporta quando o frame pai muda de tamanho). Quando bem combinados, eles permitem criar componentes que funcionam em desktop, tablet e mobile, além de suportarem estados como carregamento, erro, conteúdo longo e idiomas com palavras maiores.

O que é Auto Layout (e por que ele é a base de componentes escaláveis)

Auto Layout é um sistema de layout que organiza elementos em uma direção (horizontal ou vertical), com regras de espaçamento, alinhamento e preenchimento (padding). Em vez de posicionar manualmente cada camada, você define regras e o componente “se reorganiza” quando o conteúdo muda.

Na prática, Auto Layout resolve três problemas comuns em Design Systems:

• Texto variável: rótulos de botões, títulos e descrições podem crescer e o componente ajusta largura/altura automaticamente.
• Conteúdo opcional: ícones, badges, helper text e avatares podem aparecer ou sumir sem exigir reposicionamento manual.
• Consistência de espaçamento: padding e gaps ficam definidos como regras, reduzindo divergências entre designers e telas.

Conceitos essenciais do Auto Layout

Direção (Horizontal/Vertical): define se os itens “empilham” lado a lado ou um abaixo do outro. Você pode aninhar Auto Layouts (um vertical contendo linhas horizontais, por exemplo).

Spacing (gap): distância entre itens. É diferente de padding, que é o espaço entre o conteúdo e a borda do container.

Continue em nosso aplicativo

Você poderá ouvir o audiobook com a tela desligada, ganhar gratuitamente o certificado deste curso e ainda ter acesso a outros 5.000 cursos online gratuitos.

ou continue lendo abaixo...

Baixar o aplicativo

Padding: top/right/bottom/left do container. É o que garante “respiro” consistente.

Alignment: como os itens se alinham no eixo cruzado (por exemplo, em um Auto Layout horizontal, alinhar no topo/centro/base).

Hug contents e Fill container: regras de dimensionamento. “Hug” faz a camada se ajustar ao conteúdo; “Fill” faz a camada ocupar o espaço disponível no container pai.

Wrap: permite quebra de linha em Auto Layout horizontal quando não há espaço, útil para chips/tags e grids simples.

O que são constraints (e quando elas importam)

Constraints controlam como uma camada se comporta quando o frame pai é redimensionado. Elas são especialmente relevantes quando você está trabalhando com frames “soltos” (sem Auto Layout) ou quando precisa de comportamentos específicos dentro de um componente que também pode ter Auto Layout.

Exemplos típicos:

• Ícone fixo no canto de um card: constraints “Right” e “Top”.
• Imagem de capa que precisa esticar com o card: constraints “Left & Right” e “Top”.
• Divisor que deve ocupar toda a largura: constraints “Left & Right”.

Um ponto importante: em componentes baseados em Auto Layout, muitas necessidades de constraints são substituídas por “Fill container” e alinhamentos. Ainda assim, constraints continuam úteis em elementos posicionados de forma absoluta (por exemplo, um badge sobreposto) ou em frames que não usam Auto Layout.

Auto Layout vs constraints: como decidir

Use esta regra prática:

• Auto Layout para organizar conteúdo que flui (texto, ícones, botões, listas, campos, linhas de informações).
• Constraints para elementos que precisam “grudar” em bordas ao redimensionar (overlays, elementos decorativos, imagens de fundo, botões flutuantes) ou quando o layout não é naturalmente linear.

Em interfaces responsivas, o mais comum é: estrutura principal com Auto Layout (colunas, seções, cards) e alguns elementos com constraints/posicionamento absoluto para casos específicos.

Passo a passo: criando um botão realmente escalável

Um botão é um ótimo exemplo porque parece simples, mas costuma quebrar com texto longo, ícone opcional e variações de tamanho.

1) Estruture o conteúdo

• Crie um frame para o botão e aplique Auto Layout horizontal.
• Adicione um texto (label) e, se aplicável, um ícone (leading ou trailing).

2) Defina padding e gap

• Configure padding (ex.: 12px vertical e 16px horizontal) e um gap entre ícone e texto (ex.: 8px).
• Alinhe os itens no centro (vertical) para manter consistência.

3) Configure dimensionamento (Hug/Fill)

• No frame do botão, use Hug contents para largura e altura se o botão for “intrínseco” (cresce conforme o texto).
• Se você precisa de um botão que ocupe a largura do container (ex.: mobile), crie uma variante com largura em Fill container.

4) Trate texto longo e truncamento

• Defina o texto com comportamento de truncar (ellipsis) quando necessário, especialmente em botões que precisam manter altura/linha única.
• Se o produto permite quebra de linha em botões (menos comum), valide com o time e ajuste o Auto Layout para suportar altura variável.

5) Ícone opcional sem quebrar espaçamento

• Para suportar botão com e sem ícone, crie variantes (com ícone / sem ícone) ou use propriedades de componente para alternar visibilidade.
• Evite deixar um “espaço fantasma”: quando ocultar o ícone, garanta que ele não reserve espaço (no Figma, ocultar a camada remove do fluxo do Auto Layout).

6) Área de clique e consistência

Mesmo que visualmente o botão pareça pequeno, o padding define a área interna. Garanta que o padding mínimo respeite o tamanho de toque esperado. Em vez de aumentar a fonte para “crescer” o botão, prefira ajustar padding e altura mínima via Auto Layout.

Passo a passo: campo de texto com label, input e helper/erro

Campos de formulário são componentes que frequentemente quebram em responsividade porque combinam elementos verticais (label, input, helper) e elementos horizontais (ícone, botão de limpar, contador).

1) Crie um container vertical

• Crie um frame e aplique Auto Layout vertical.
• Ordem típica: Label, Input container, Helper row.
• Defina gap vertical (ex.: 4px ou 8px conforme seu padrão).

2) Input container como Auto Layout horizontal

• Dentro do container vertical, crie o frame do input e aplique Auto Layout horizontal.
• Estrutura comum: ícone (opcional), texto/placeholder, ações (ex.: limpar, mostrar senha).
• Defina padding interno do input (ex.: 12px) e gap entre itens.

3) Texto do input com Fill

• O texto/placeholder deve ficar em Fill container para ocupar o espaço entre ícone e ações.
• Ícones e botões de ação normalmente ficam em Hug contents com tamanho fixo.

4) Helper row com alinhamento e distribuição

• Crie uma linha horizontal (Auto Layout horizontal) para helper text e contador (opcional).
• Helper text em Fill container e contador em Hug, alinhados na base para tipografia consistente.

5) Estados: default, focus, error, disabled

Para estados, o layout deve permanecer estável. O que muda são estilos (borda, cor do texto, ícones). Se o estado de erro adiciona uma mensagem maior, o container vertical deve estar em Hug contents na altura para crescer naturalmente, evitando sobreposição.

Passo a passo: card responsivo com imagem, conteúdo e ações

Cards são ótimos para praticar aninhamento de Auto Layout e uso pontual de constraints.

1) Estrutura base do card

• Crie um frame do card com Auto Layout vertical.
• Defina padding do card (ex.: 16px) e gap entre seções (ex.: 12px).

2) Imagem de capa

• Se a imagem faz parte do fluxo (no topo), mantenha-a como primeiro item do Auto Layout vertical.
• Defina a imagem com largura em Fill container.
• Para altura, escolha uma regra: altura fixa (ex.: 160px) ou proporção consistente (quando aplicável). Em Figma, você pode ajustar o comportamento de redimensionamento da imagem para manter o crop adequado.

3) Bloco de conteúdo

• Crie um frame interno com Auto Layout vertical para título, descrição e metadados.
• Título e descrição em Fill container para acompanhar a largura do card.
• Se houver metadados em linha (ex.: data e categoria), use um Auto Layout horizontal com wrap se necessário.

4) Linha de ações

• Crie um Auto Layout horizontal para botões (ex.: “Ver mais”, “Salvar”).
• Use Space between quando quiser separar ações primária e secundária nas extremidades, ou mantenha gap fixo quando os botões devem ficar agrupados.

5) Badge sobreposto (uso de constraints)

Se você precisa de um badge no canto superior direito sobre a imagem (fora do fluxo), você pode:

• Colocar a imagem dentro de um frame (sem Auto Layout) que funcione como “hero”.
• Adicionar o badge como camada posicionada por cima.
• Aplicar constraints do badge como Right + Top para manter a posição ao redimensionar.

Esse é um caso típico em que constraints complementam Auto Layout: o conteúdo principal flui, mas um elemento decorativo/indicativo fica ancorado.

Padrões de responsividade dentro do Figma: como simular comportamentos reais

Embora o Figma não seja um motor de layout idêntico ao CSS, você consegue chegar muito perto de comportamentos responsivos previsíveis se combinar bem “Fill/Hug”, wrap e aninhamento.

1) Componentes que esticam na largura

Para um componente ocupar a largura disponível (por exemplo, um card em uma coluna), o container externo deve estar configurado para Fill container na largura quando estiver dentro de um Auto Layout pai. Dentro dele, elementos como texto e divisores também devem usar Fill para acompanhar.

2) Componentes com altura variável

Altura variável é essencial para suportar descrições longas, mensagens de erro e listas. Em geral:

• O container vertical fica em Hug contents na altura.
• Textos ficam com altura automática (respeitando line-height) e largura em Fill.

3) Quebra de linha com wrap

Wrap é útil para chips, tags e listas horizontais que precisam quebrar em múltiplas linhas. Para funcionar bem:

• O container deve ser Auto Layout horizontal com wrap habilitado.
• Os itens (chips) devem estar em Hug na largura para não “esticar” de forma estranha.
• Defina gap horizontal e vertical (quando disponível) para manter consistência entre linhas.

4) Min/Max mental: evitando componentes “elásticos demais”

Um erro comum é colocar tudo em Fill container e perder hierarquia: ícones ficam distantes, textos ocupam espaço demais e o componente parece “vazio” em telas grandes. Para evitar isso:

• Use Fill apenas onde faz sentido (normalmente no conteúdo textual principal).
• Mantenha elementos de tamanho intrínseco (ícones, avatares, botões pequenos) em Hug.
• Considere criar variantes de densidade (compact/regular) em vez de tentar um único layout que sirva para tudo.

Checklist de qualidade: como saber se um componente é escalável

Antes de considerar um componente “pronto”, teste variações que simulam cenários reais. Um checklist prático:

• Texto curto e longo: rótulos, títulos e descrições com 1, 2 e 3 linhas (ou truncamento quando aplicável).
• Idiomas: palavras longas (ex.: alemão) e frases maiores (ex.: português) para ver expansão.
• Conteúdo opcional: com/sem ícone, com/sem helper, com/sem badge.
• Redimensionamento manual: arraste a largura do frame pai e observe se algo sobrepõe, desalinha ou cria gaps inesperados.
• Alinhamento consistente: baseline de textos em linhas horizontais e centralização vertical em elementos clicáveis.
• Espaçamento previsível: padding e gaps permanecem constantes ao trocar conteúdo.

Erros comuns (e como corrigir)

1) Auto Layout no lugar errado

Se você aplica Auto Layout no frame externo, mas os grupos internos continuam com posicionamento manual, o componente fica parcialmente fluido e ainda quebra. Corrija aninhando Auto Layouts: um container principal e subcontainers para cada linha/seção.

2) Texto em Hug quando deveria ser Fill

Em linhas com ícone + texto + ação, se o texto estiver em Hug, ele pode empurrar a ação para fora. Coloque o texto em Fill para ele ocupar o espaço disponível e permitir truncamento quando necessário.

3) Tudo em Fill container

Quando ícones e botões ficam em Fill, eles se esticam e distorcem o layout. Mantenha-os em Hug com tamanhos fixos e deixe Fill para o conteúdo que deve expandir.

4) Constraints conflitantes com Auto Layout

Se um elemento está dentro de Auto Layout, mas você tenta “forçar” comportamento com constraints, pode ficar confuso. Prefira resolver com regras de Auto Layout (alinhamento, Fill/Hug, padding). Use constraints principalmente em elementos fora do fluxo (sobreposições) ou em frames sem Auto Layout.

5) Divisores que não acompanham largura

Divisores (linhas) devem estar em Fill container na largura (quando dentro de Auto Layout) ou com constraints Left & Right (quando em frame comum). Isso evita linhas curtas em cards largos.

Exemplo prático completo: lista responsiva de itens (avatar + textos + ação)

Esse padrão aparece em listas de usuários, mensagens, pedidos e notificações. Ele exige bom controle de expansão e truncamento.

Estrutura recomendada

• Container do item: Auto Layout horizontal, alinhamento vertical central, padding (ex.: 12px), gap (ex.: 12px).
• Avatar: tamanho fixo (ex.: 40x40), Hug.
• Bloco de textos: Auto Layout vertical, gap (ex.: 2px ou 4px), largura em Fill container.
• Ação à direita (ícone ou botão): Hug, tamanho fixo.

Configurações críticas

• O bloco de textos em Fill garante que ele ocupe o espaço entre avatar e ação.
• O texto principal pode ser truncado em uma linha; o secundário pode permitir 2 linhas, dependendo do produto.
• Se houver um badge (ex.: “novo”), ele pode ficar dentro do bloco de textos em uma linha horizontal com wrap ou ao lado do título com gap pequeno.

Teste de estresse

Redimensione a largura do item para simular mobile e desktop. Verifique:

• Se a ação permanece visível à direita.
• Se o avatar não distorce.
• Se o texto trunca ou quebra conforme esperado.
• Se o padding e o gap permanecem constantes.

Documentando o comportamento responsivo dentro do próprio componente

Para reduzir ruído no handoff e evitar interpretações diferentes, deixe explícito no componente (e em suas descrições) como ele se comporta ao redimensionar:

• O que estica: “Container em Fill; texto principal em Fill; ações em Hug”.
• O que é fixo: alturas mínimas, tamanhos de ícone/avatar, paddings.
• Regras de truncamento: “Título 1 linha com ellipsis; descrição até 2 linhas”.
• Comportamento com itens opcionais: “Sem ícone, gap some; sem helper, altura reduz”.

Quando essas regras estão refletidas no próprio layout (Auto Layout bem configurado) e descritas de forma objetiva, o componente se torna mais previsível para quem vai reutilizar e implementar.

Snippets de referência (para revisar rapidamente)

Botão (horizontal) = Auto Layout H, padding fixo, gap fixo, label Hug (ou Fill em versão full-width), ícone Hug, altura Hug, largura Hug/Fill conforme variante

Input (vertical) = Container V (Label + Input + Helper), Input = Auto Layout H, texto Fill, ações Hug, helper row H com helper Fill e contador Hug

List item (horizontal) = Avatar fixo Hug + Textos (V, Fill) + Ação Hug; truncamento no texto para preservar ação