{"id":118204,"date":"2023-01-26T08:00:00","date_gmt":"2023-01-26T11:00:00","guid":{"rendered":"https:\/\/fluency.io\/br\/blog\/?p=14817"},"modified":"2023-08-01T15:07:22","modified_gmt":"2023-08-01T18:07:22","slug":"auto-layout-no-figma","status":"publish","type":"post","link":"https:\/\/homolog.fluency.io\/br\/blog\/auto-layout-no-figma\/","title":{"rendered":"Auto Layout no Figma: como usar para criar prot\u00f3tipos avan\u00e7ados"},"content":{"rendered":"\n<p>A cria\u00e7\u00e3o de prot\u00f3tipos din\u00e2micos e responsivos \u00e9 essencial para qualquer projeto de design. O Auto Layout do Figma permite que os designers criem layouts que se adaptam a diferentes tamanhos de tela e orienta\u00e7\u00f5es, sem precisar fazer ajustes manuais. Isso \u00e9 particularmente \u00fatil quando se trabalha em projetos para dispositivos m\u00f3veis ou para a web. Com essa ferramenta, \u00e9 poss\u00edvel criar prot\u00f3tipos mais avan\u00e7ados e realistas, o que facilita a <a href=\"https:\/\/fluency.io\/br\/blog\/gestao-stakeholders\/?utm_source=blog\" target=\"_blank\" rel=\"noreferrer noopener\">comunica\u00e7\u00e3o com os stakeholders<\/a> e a colabora\u00e7\u00e3o com outros membros da equipe.\u00a0<\/p>\n\n\n\n<p>Neste post, vamos mostrar como usar o Auto Layout do Figma para criar prot\u00f3tipos incr\u00edveis e economizar tempo no processo de design. Voc\u00ea aprender\u00e1 t\u00e9cnicas avan\u00e7adas, dicas e truques para aproveitar ao m\u00e1ximo essa ferramenta. Vamos mostrar como configurar e usar o Auto Layout e o que \u00e9 poss\u00edvel fazer com esse recurso.<\/p>\n\n\n\n<p>Se voc\u00ea \u00e9 um designer que busca aprimorar suas habilidades de prototipagem, este post \u00e9 para voc\u00ea.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Desvendando o Auto Layout no Figma<\/strong><\/h2>\n\n\n\n<p>Auto Layout do <a href=\"https:\/\/www.figma.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Figma<\/a> \u00e9 uma ferramenta de design que permite criar layouts adapt\u00e1veis e responsivos, que se adaptam automaticamente a diferentes tamanhos de tela e orienta\u00e7\u00f5es. Ele \u00e9 baseado em componentes, que s\u00e3o regras que definem como os elementos devem se posicionar e se adaptar uns aos outros. Com o Auto Layout, \u00e9 poss\u00edvel criar layouts que se ajustam automaticamente quando a tela \u00e9 redimensionada ou quando a orienta\u00e7\u00e3o \u00e9 alterada, sem precisar fazer ajustes manuais.<\/p>\n\n\n\n<p>Para usar o Auto Layout no Figma, os <a href=\"https:\/\/fluency.io\/br\/blog\/designer-grafico\/?utm_source=blog\" target=\"_blank\" rel=\"noreferrer noopener\">designers <\/a>precisam habilitar a ferramenta nas configura\u00e7\u00f5es do projeto. Em seguida, eles podem criar um layout b\u00e1sico usando as ferramentas de layout do Figma. A partir da\u00ed, os designers podem adicionar componentes para definir como os elementos devem se posicionar e se adaptar uns aos outros.<\/p>\n\n\n\n<p>Os componentes podem ser aplicados entre dois elementos ou entre um elemento e a borda da tela. Os mais comuns s\u00e3o: centralizar, alinhar, fixar tamanho, fixar dist\u00e2ncia, fixar propor\u00e7\u00e3o.<\/p>\n\n\n\n<p>Al\u00e9m disso, o Auto Layout do Figma permite que os designers usem vari\u00e1veis e par\u00e2metros para ajustar o layout. Vari\u00e1veis s\u00e3o valores que podem ser ajustados dinamicamente, enquanto os par\u00e2metros s\u00e3o valores que podem ser ajustados manualmente. Isso permite que os designers criem layouts mais flex\u00edveis e adapt\u00e1veis. Por exemplo, um designer pode criar uma vari\u00e1vel de largura de uma caixa de texto, e us\u00e1-la para calcular a altura da caixa.<\/p>\n\n\n\n<p>Outra caracter\u00edstica do Auto Layout no Figma \u00e9 a possibilidade de criar elementos de layout din\u00e2micos, como bot\u00f5es, caixas de texto e outros elementos que se adaptam automaticamente ao redimensionamento da tela, sem a necessidade de ajustes manuais.<\/p>\n\n\n\n<p>O Auto Layout do Figma \u00e9 uma ferramenta essencial para qualquer projeto de design, pois permite criar prot\u00f3tipos mais avan\u00e7ados e din\u00e2micos e facilita a comunica\u00e7\u00e3o com os <a href=\"https:\/\/fluency.io\/br\/blog\/gestao-stakeholders\/?utm_source=blog\" target=\"_blank\" rel=\"noreferrer noopener\">stakeholders<\/a> e a colabora\u00e7\u00e3o com outros membros da equipe. Al\u00e9m disso, ele permite economizar tempo no processo de design e manter a consist\u00eancia no layout.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Quais os benef\u00edcios do Auto Layout do Figma<\/strong><\/h2>\n\n\n\n<p>O Auto Layout do Figma tem v\u00e1rios benef\u00edcios que ajudam os designers a criar prot\u00f3tipos mais avan\u00e7ados e din\u00e2micos. Alguns dos principais benef\u00edcios incluem:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cria\u00e7\u00e3o de layouts responsivos: <\/strong>os designers podem criar layouts que se adaptam automaticamente a diferentes tamanhos de tela e orienta\u00e7\u00f5es, sem precisar fazer ajustes manuais. Isso \u00e9 particularmente \u00fatil quando se trabalha em projetos para dispositivos m\u00f3veis ou para a web.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Economia de tempo: <\/strong>\u00e9 poss\u00edvel economizar tempo no <a href=\"https:\/\/fluency.io\/br\/blog\/design-tokens\/?utm_source=blog\" target=\"_blank\" rel=\"noreferrer noopener\">processo de design<\/a>, pois n\u00e3o precisam fazer ajustes manuais quando a tela \u00e9 redimensionada ou quando a orienta\u00e7\u00e3o \u00e9 alterada.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Consist\u00eancia no layout:<\/strong> o recurso permite que os designers mantenham a consist\u00eancia no layout, pois os elementos se posicionam e se adaptam automaticamente, sempre de acordo com as regras de constrangimentos definidas.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cria\u00e7\u00e3o de elementos din\u00e2micos: <\/strong>O Auto Layout do Figma permite criar elementos din\u00e2micos, como bot\u00f5es, caixas de texto e outros elementos que se adaptam automaticamente ao redimensionamento da tela, sem a necessidade de ajustes manuais.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Flexibilidade:<\/strong> Possibilita que os designers usem vari\u00e1veis e par\u00e2metros para ajustar o layout, o que permite criar layouts mais flex\u00edveis e adapt\u00e1veis.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Colabora\u00e7\u00e3o:<\/strong> O Auto Layout do Figma facilita a comunica\u00e7\u00e3o com os stakeholders e a colabora\u00e7\u00e3o com outros membros da equipe, pois permite criar prot\u00f3tipos mais avan\u00e7ados e realistas.<\/li>\n<\/ul>\n\n\n\n<p>Em resumo, o Auto Layout do Figma \u00e9 uma ferramenta essencial para qualquer projeto de design, pois permite criar prot\u00f3tipos mais avan\u00e7ados e din\u00e2micos, <a href=\"https:\/\/fluency.io\/br\/blog\/gestao-de-tempo\/?utm_source=blog\" target=\"_blank\" rel=\"noreferrer noopener\">economizar tempo no processo de design<\/a>, manter a consist\u00eancia no layout, criar elementos din\u00e2micos, ser flex\u00edvel e facilitar a colabora\u00e7\u00e3o.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Exemplos de usos do Auto Layout do Figma<\/strong><\/h2>\n\n\n\n<p>Mas afinal, como funciona o Auto Layout do Figma? Listamos abaixo alguns exemplos desse recurso na pr\u00e1tica para que voc\u00ea compreenda melhor!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Criando um bot\u00e3o centralizado<\/strong><\/h3>\n\n\n\n<p>Imagine que voc\u00ea est\u00e1 criando um layout para um aplicativo m\u00f3vel e deseja colocar um bot\u00e3o &#8220;Entrar&#8221; no centro da tela. Com o Auto Layout, voc\u00ea pode selecionar o bot\u00e3o e aplicar um componente de centraliza\u00e7\u00e3o. Isso far\u00e1 com que o bot\u00e3o sempre fique no centro da tela, independentemente do tamanho da tela ou orienta\u00e7\u00e3o.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Criando um layout responsivo para uma imagem<\/strong><\/h3>\n\n\n\n<p>Imagine que voc\u00ea est\u00e1 criando um layout para um <a href=\"https:\/\/fluency.io\/br\/blog\/design-responsivo\/?utm_source=blog\" target=\"_blank\" rel=\"noreferrer noopener\">site responsivo <\/a>e deseja que a imagem de destaque ocupe toda a largura da tela em dispositivos desktop e seja reduzida para caber na tela em dispositivos mobile. Com o Auto Layout, voc\u00ea pode selecionar a imagem e aplicar componentes de largura e propor\u00e7\u00e3o. Isso far\u00e1 com que a imagem se ajuste automaticamente ao redimensionamento da tela.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Criando uma barra de navega\u00e7\u00e3o fixa<\/strong><\/h3>\n\n\n\n<p>Imagine que voc\u00ea est\u00e1 criando um layout para um aplicativo e deseja que a barra de navega\u00e7\u00e3o fique fixa na parte inferior da tela, independentemente do conte\u00fado acima dela. Com o Auto Layout, voc\u00ea pode selecionar a barra de navega\u00e7\u00e3o e aplicar componentes de posicionamento e dist\u00e2ncia da borda inferior. Isso far\u00e1 com que a barra de navega\u00e7\u00e3o fique fixa na parte inferior da tela, mesmo quando o conte\u00fado acima dela estiver rolando.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Criando elementos din\u00e2micos<\/strong><\/h3>\n\n\n\n<p>Imagine que voc\u00ea est\u00e1 criando um layout para uma tela de login e deseja que o bot\u00e3o &#8220;Entrar&#8221; seja redimensionado automaticamente de acordo com o tamanho da tela. Com o Auto Layout, voc\u00ea pode selecionar o bot\u00e3o e aplicar componentes de tamanho, dist\u00e2ncia e propor\u00e7\u00e3o. Isso far\u00e1 com que o bot\u00e3o se adapte automaticamente ao redimensionamento da tela, sem precisar fazer ajustes manuais.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Criando uma caixa de texto com largura din\u00e2mica<\/strong><\/h3>\n\n\n\n<p>Imagine que voc\u00ea est\u00e1 criando uma caixa de texto e deseja que ela tenha uma largura din\u00e2mica, para se adaptar ao conte\u00fado inserido. Com o Auto Layout, voc\u00ea pode selecionar a caixa de texto e aplicar componentes de largura e propor\u00e7\u00e3o. Isso far\u00e1 com que a caixa de texto tenha uma largura din\u00e2mica, se adaptando automaticamente ao conte\u00fado inserido.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Como configurar o Auto Layout do Figma<\/strong><\/h2>\n\n\n\n<p>Antes de come\u00e7ar a utilizar essa ferramenta nos seus designs, pode ser importante configur\u00e1-la. Para configurar o Auto Layout no Figma, siga estes passos:<\/p>\n\n\n\n<p>1. Abra o projeto no Figma e selecione a p\u00e1gina onde deseja habilitar o Auto Layout.<\/p>\n\n\n\n<p>2. V\u00e1 para o menu &#8220;Arquivo&#8221; e selecione &#8220;Prefer\u00eancias&#8221;.<\/p>\n\n\n\n<p>3. Na guia &#8220;Avan\u00e7ado&#8221;, marque a caixa &#8220;Habilitar Auto Layout&#8221;.<\/p>\n\n\n\n<p>4. Clique em &#8220;OK&#8221; para salvar as configura\u00e7\u00f5es.<\/p>\n\n\n\n<p>5. Agora o Auto Layout estar\u00e1 habilitado na p\u00e1gina selecionada. Para come\u00e7ar a usar o Auto Layout, basta selecionar o elemento que deseja aplicar o componentes e clicar na ferramenta de componentes no painel \u00e0 esquerda.<\/p>\n\n\n\n<p>6. Depois de selecionar o elemento, voc\u00ea pode escolher a regra de componentes que deseja aplicar. Por exemplo, voc\u00ea pode escolher centralizar o elemento, alinh\u00e1-lo \u00e0 esquerda ou \u00e0 direita, fixar o tamanho, fixar a dist\u00e2ncia, fixar propor\u00e7\u00e3o, entre outros.<\/p>\n\n\n\n<p>7. Depois de aplicar o componente, voc\u00ea pode ajustar as configura\u00e7\u00f5es de acordo com suas necessidades. Por exemplo, voc\u00ea pode escolher o elemento com o qual deseja alinhar ou fixar a dist\u00e2ncia.<\/p>\n\n\n\n<p>8. Depois de configurar o componentes, voc\u00ea pode redimensionar a tela e verificar como o elemento se adapta automaticamente ao novo tamanho.<\/p>\n\n\n\n<p>9. Voc\u00ea tamb\u00e9m pode usar vari\u00e1veis e par\u00e2metros para ajustar o layout de acordo com suas necessidades.<\/p>\n\n\n\n<p>Lembre-se de salvar as altera\u00e7\u00f5es regularmente e testar o layout em diferentes tamanhos de tela e orienta\u00e7\u00f5es para garantir que ele seja responsivo e adapt\u00e1vel. Al\u00e9m disso, \u00e9 importante lembrar que o Auto Layout \u00e9 uma ferramenta avan\u00e7ada e requer alguma familiaridade com as regras de componentes e as t\u00e9cnicas de layout responsivo para us\u00e1-lo com efici\u00eancia. Em caso de d\u00favida, voc\u00ea pode procurar tutoriais e documenta\u00e7\u00f5es na internet para aprender mais sobre o Auto Layout no Figma.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Estude Design com a Awari<\/strong><\/h2>\n\n\n\n<p>Se voc\u00ea est\u00e1 procurando uma forma de aprimorar suas habilidades de design e se tornar um profissional qualificado, o <a href=\"https:\/\/fluency.io\/br\/blog\/curso\/figma\/?utm_source=blog&amp;utm_medium=link&amp;utm_campaign=curso-figma\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>curso de Figma da Awari<\/strong><\/a> \u00e9 a escolha certa para voc\u00ea. Com o nosso curso, voc\u00ea ter\u00e1 a oportunidade de aprender desde o b\u00e1sico at\u00e9 o avan\u00e7ado na cria\u00e7\u00e3o de designs e interfaces, com acesso a aulas ao vivo, materiais completos e mentorias individuais.<\/p>\n\n\n\n<p>Nossos professores s\u00e3o profissionais experientes e altamente qualificados, e est\u00e3o sempre dispostos a ajudar os alunos a alcan\u00e7ar seus objetivos. As aulas ao vivo s\u00e3o ministradas de forma interativa, o que permite aos alunos participar ativamente e tirar d\u00favidas diretamente com os professores. Al\u00e9m disso, os materiais completos e as <a href=\"https:\/\/fluency.io\/br\/blog\/curso-mentoria\/?utm_source=blog\" target=\"_blank\" rel=\"noreferrer noopener\">mentorias individuais<\/a> garantem que voc\u00ea tenha acesso a todas as informa\u00e7\u00f5es e suporte necess\u00e1rios para alcan\u00e7ar o sucesso no curso.<\/p>\n\n\n\n<p>N\u00e3o perca mais tempo e comece sua jornada para se tornar um profissional de design qualificado com o curso de Figma da Awari. <a href=\"https:\/\/fluency.io\/br\/blog\/curso\/ux-design\/?utm_source=blog&amp;utm_medium=link&amp;utm_campaign=curso-ux-design\" target=\"_blank\" rel=\"noreferrer noopener\">Clique aqui<\/a>, inscreva-se agora e d\u00ea o primeiro passo para alcan\u00e7ar seus objetivos de carreira.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A cria\u00e7\u00e3o de prot\u00f3tipos din\u00e2micos e responsivos \u00e9 essencial para qualquer projeto de design. O Auto Layout do Figma permite que os designers criem layouts que se adaptam a diferentes tamanhos de tela e orienta\u00e7\u00f5es, sem precisar fazer ajustes manuais. Isso \u00e9 particularmente \u00fatil quando se trabalha em projetos para dispositivos m\u00f3veis ou para a [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":[186],"meta":{"inline_featured_image":false,"footnotes":""},"categories":[229],"tags":[],"trilha":[],"class_list":["post-118204","post","type-post","status-publish","format-standard","hentry","category-skills","format-artigos"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Auto Layout no Figma: como usar para criar prot\u00f3tipos avan\u00e7ados - Fluency.io Brasil<\/title>\n<meta name=\"description\" content=\"A cria\u00e7\u00e3o de prot\u00f3tipos din\u00e2micos e responsivos \u00e9 essencial para qualquer projeto de design. O Auto Layout do Figma permite que os designers criem layouts ...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/homolog.fluency.io\/br\/blog\/auto-layout-no-figma\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Auto Layout no Figma: como usar para criar prot\u00f3tipos avan\u00e7ados - Fluency.io Brasil\" \/>\n<meta property=\"og:description\" content=\"A cria\u00e7\u00e3o de prot\u00f3tipos din\u00e2micos e responsivos \u00e9 essencial para qualquer projeto de design. O Auto Layout do Figma permite que os designers criem layouts ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/homolog.fluency.io\/br\/blog\/auto-layout-no-figma\/\" \/>\n<meta property=\"og:site_name\" content=\"Fluency.io Brasil\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-26T11:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-01T18:07:22+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"kaue\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/auto-layout-no-figma\/\",\"url\":\"https:\/\/homolog.fluency.io\/br\/blog\/auto-layout-no-figma\/\",\"name\":\"Auto Layout no Figma: como usar para criar prot\u00f3tipos avan\u00e7ados - Fluency.io Brasil\",\"isPartOf\":{\"@id\":\"https:\/\/fluency.io\/br\/#website\"},\"datePublished\":\"2023-01-26T11:00:00+00:00\",\"dateModified\":\"2023-08-01T18:07:22+00:00\",\"author\":{\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\"},\"description\":\"A cria\u00e7\u00e3o de prot\u00f3tipos din\u00e2micos e responsivos \u00e9 essencial para qualquer projeto de design. O Auto Layout do Figma permite que os designers criem layouts ...\",\"breadcrumb\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/auto-layout-no-figma\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/homolog.fluency.io\/br\/blog\/auto-layout-no-figma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/auto-layout-no-figma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/homolog.fluency.io\/br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Auto Layout no Figma: como usar para criar prot\u00f3tipos avan\u00e7ados\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fluency.io\/br\/#website\",\"url\":\"https:\/\/fluency.io\/br\/\",\"name\":\"Fluency.io Brasil\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fluency.io\/br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\",\"name\":\"kaue\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"caption\":\"kaue\"},\"url\":\"https:\/\/homolog.fluency.io\/br\/author\/kaue\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Auto Layout no Figma: como usar para criar prot\u00f3tipos avan\u00e7ados - Fluency.io Brasil","description":"A cria\u00e7\u00e3o de prot\u00f3tipos din\u00e2micos e responsivos \u00e9 essencial para qualquer projeto de design. O Auto Layout do Figma permite que os designers criem layouts ...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/homolog.fluency.io\/br\/blog\/auto-layout-no-figma\/","og_locale":"pt_BR","og_type":"article","og_title":"Auto Layout no Figma: como usar para criar prot\u00f3tipos avan\u00e7ados - Fluency.io Brasil","og_description":"A cria\u00e7\u00e3o de prot\u00f3tipos din\u00e2micos e responsivos \u00e9 essencial para qualquer projeto de design. O Auto Layout do Figma permite que os designers criem layouts ...","og_url":"https:\/\/homolog.fluency.io\/br\/blog\/auto-layout-no-figma\/","og_site_name":"Fluency.io Brasil","article_published_time":"2023-01-26T11:00:00+00:00","article_modified_time":"2023-08-01T18:07:22+00:00","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"kaue","Est. tempo de leitura":"9 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/homolog.fluency.io\/br\/blog\/auto-layout-no-figma\/","url":"https:\/\/homolog.fluency.io\/br\/blog\/auto-layout-no-figma\/","name":"Auto Layout no Figma: como usar para criar prot\u00f3tipos avan\u00e7ados - Fluency.io Brasil","isPartOf":{"@id":"https:\/\/fluency.io\/br\/#website"},"datePublished":"2023-01-26T11:00:00+00:00","dateModified":"2023-08-01T18:07:22+00:00","author":{"@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a"},"description":"A cria\u00e7\u00e3o de prot\u00f3tipos din\u00e2micos e responsivos \u00e9 essencial para qualquer projeto de design. O Auto Layout do Figma permite que os designers criem layouts ...","breadcrumb":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/auto-layout-no-figma\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/homolog.fluency.io\/br\/blog\/auto-layout-no-figma\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/homolog.fluency.io\/br\/blog\/auto-layout-no-figma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/homolog.fluency.io\/br\/"},{"@type":"ListItem","position":2,"name":"Auto Layout no Figma: como usar para criar prot\u00f3tipos avan\u00e7ados"}]},{"@type":"WebSite","@id":"https:\/\/fluency.io\/br\/#website","url":"https:\/\/fluency.io\/br\/","name":"Fluency.io Brasil","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fluency.io\/br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a","name":"kaue","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","caption":"kaue"},"url":"https:\/\/homolog.fluency.io\/br\/author\/kaue\/"}]}},"_links":{"self":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/118204","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/comments?post=118204"}],"version-history":[{"count":0,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/118204\/revisions"}],"wp:attachment":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/media?parent=118204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/categories?post=118204"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/tags?post=118204"},{"taxonomy":"format","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/format?post=118204"},{"taxonomy":"trilha","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/trilha?post=118204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}