DEV Community

Cover image for Figma Autolayout = Flexbox
Vinicius Rocha
Vinicius Rocha

Posted on

1

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.

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs