The latest articles on DEV Community by Vinicius Rocha (@hayatoinkz). https://dev.to/hayatoinkz https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1327014%2Fa94b2a32-c63c-4d1c-8bc2-af14c90d99a7.jpeg https://dev.to/hayatoinkz en Vinicius Rocha Sun, 17 Mar 2024 18:22:15 +0000 https://dev.to/hayatoinkz/figma-autolayout-flexbox-3j0e https://dev.to/hayatoinkz/figma-autolayout-flexbox-3j0e <p><strong>O que é o Auto Layout?</strong></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2dhbleszm1yfqe2eecr9.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2dhbleszm1yfqe2eecr9.jpg" alt="Image description" width="800" height="450"></a></p> <p>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.</p> <p><strong>Como usar o Auto Layout?</strong><br> 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.</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faszceu63il3aryn0njn3.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faszceu63il3aryn0njn3.jpg" alt="Image description" width="800" height="450"></a></p> <p>No Figma, você pode agrupar esses balões e aplicar o Auto Layout. É como se você dissesse:</p> <blockquote> <p>“Queridos balões, fiquem alinhados na mesma linha ou coluna, mas mantenham suas distâncias!”</p> </blockquote> <p>O Figma cuida do resto, ajustando automaticamente os espaços entre os balões.</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fukmz9n5a4nah7x63h4j0.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fukmz9n5a4nah7x63h4j0.jpg" alt="Image description" width="800" height="450"></a></p> <p><strong>Alinhamento de Itens: justify-content e align-items:</strong></p> <p>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.</p> <p>Já o align-items é como você diz aos balões:</p> <blockquote> <p>“Ei, pessoal, fiquem todos na mesma altura!” Você pode alinhar os balões pela base, pelo topo ou pelo meio.</p> </blockquote> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feg2c3l2z2t6mfbkvubfg.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feg2c3l2z2t6mfbkvubfg.jpg" alt="Image description" width="800" height="450"></a></p> <p>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.</p> figmadevs figma flexbox handoff