DEV Community

Cover image for Figma Autolayout = Flexbox
Vinicius Rocha
Vinicius Rocha

Posted on

Figma Autolayout = Flexbox

O que é o Auto Layout?

Image description

O Auto Layout no Figma é como a mágica que acontece quando você usa display: flex no CSS. Ele permite criar designs flexíveis e responsivos, adaptando-se automaticamente às mudanças de tamanho e conteúdo.

Como usar o Auto Layout?
Imagine que você está organizando uma festa de aniversário. Você tem três balões de tamanhos diferentes: um grande, um médio e um pequeno.

Image description

No Figma, você pode agrupar esses balões e aplicar o Auto Layout. É como se você dissesse:

“Queridos balões, fiquem alinhados na mesma linha ou coluna, mas mantenham suas distâncias!”

O Figma cuida do resto, ajustando automaticamente os espaços entre os balões.

Image description

Alinhamento de Itens: justify-content e align-items:

Imagine que os balões são seus amigos na festa. O justify-content é como você decide a distância entre eles na linha (ou coluna). Você pode escolher que fiquem bem juntinhos ou com um espaço igual entre eles.

Já o align-items é como você diz aos balões:

“Ei, pessoal, fiquem todos na mesma altura!” Você pode alinhar os balões pela base, pelo topo ou pelo meio.

Image description

O Auto Layout no Figma é como ter um assistente de festa que organiza tudo para você. Ele se comporta como o Flexbox do CSS, tornando seu design mais flexível e bonito.

Top comments (0)