Como criar um menu bar no Figma passo a passo<\/title><br \/>\n<\/head><br \/>\n<body><\/p>\n<h1>Como criar um menu bar no Figma passo a passo<\/h1>\n<h2>Passo 1: Prepara\u00e7\u00e3o<\/h2>\n<p>Antes de come\u00e7ar a criar o menu bar no Figma, \u00e9 importante ter uma ideia clara de como voc\u00ea deseja que ele seja. Defina o prop\u00f3sito do menu bar, sua estrutura, os itens que voc\u00ea deseja incluir e como deseja que eles sejam organizados. Isso ajudar\u00e1 a guiar o processo de cria\u00e7\u00e3o.<\/p>\n<h2>Passo 2: Cria\u00e7\u00e3o de um novo arquivo<\/h2>\n<p>Abra o Figma e crie um novo arquivo. Selecione o tamanho e a orienta\u00e7\u00e3o desejados para o seu menu bar. \u00c9 recomendado usar a grade de design para garantir que os elementos sejam alinhados corretamente.<\/p>\n<h2>Passo 3: Adicionando elementos b\u00e1sicos<\/h2>\n<p>Comece adicionando os elementos b\u00e1sicos do menu bar, como os bot\u00f5es e os itens de navega\u00e7\u00e3o. Use as ferramentas de desenho do Figma para criar ret\u00e2ngulos e textos. Certifique-se de alinhar e espa\u00e7ar os elementos corretamente.<\/p>\n<h2>Passo 4: Estilizando o menu bar<\/h2>\n<p>Agora \u00e9 hora de dar estilo ao seu menu bar. Use as op\u00e7\u00f5es de preenchimento, contorno e efeitos do Figma para personalizar a apar\u00eancia dos elementos. Experimente diferentes combina\u00e7\u00f5es de cores, fontes e estilos para encontrar a est\u00e9tica desejada.<\/p>\n<h2>Passo 5: Adicionando interatividade<\/h2>\n<p>Uma das vantagens do Figma \u00e9 a capacidade de adicionar interatividade aos seus designs. Para o menu bar, voc\u00ea pode criar transi\u00e7\u00f5es suaves entre os diferentes estados dos bot\u00f5es, como ao passar o mouse sobre eles ou ao clicar neles. Use a fun\u00e7\u00e3o de prototipagem do Figma para definir essas intera\u00e7\u00f5es.<\/p>\n<h2>Passo 6: Testando e iterando<\/h2>\n<p>Ap\u00f3s criar o menu bar no Figma, \u00e9 importante test\u00e1-lo e iterar conforme necess\u00e1rio. Pe\u00e7a feedback de outros designers ou usu\u00e1rios para identificar poss\u00edveis melhorias. Fa\u00e7a os ajustes necess\u00e1rios com base no feedback recebido.<\/p>\n<h2>Principais elementos de um menu bar no Figma<\/h2>\n<p>Um menu bar eficiente no Figma deve incluir os seguintes elementos principais:<\/p>\n<h3>1. Logo ou identifica\u00e7\u00e3o da marca:<\/h3>\n<p>Inclua o logotipo ou o nome da marca no menu bar para que os usu\u00e1rios possam identificar facilmente o site ou o aplicativo.<\/p>\n<h3>2. Itens de navega\u00e7\u00e3o:<\/h3>\n<p>Os itens de navega\u00e7\u00e3o s\u00e3o os links para diferentes se\u00e7\u00f5es do site ou do aplicativo. Eles devem ser claros, concisos e f\u00e1ceis de entender.<\/p>\n<h3>3. Bot\u00f5es de a\u00e7\u00e3o:<\/h3>\n<p>Os bot\u00f5es de a\u00e7\u00e3o permitem que os usu\u00e1rios realizem a\u00e7\u00f5es espec\u00edficas, como fazer login, cadastrar-se ou realizar uma compra. Eles devem ser destacados e facilmente acess\u00edveis.<\/p>\n<h3>4. \u00cdcones de notifica\u00e7\u00e3o:<\/h3>\n<p>Se o seu site ou aplicativo possui notifica\u00e7\u00f5es, \u00e9 \u00fatil incluir \u00edcones de notifica\u00e7\u00e3o no menu bar para alertar os usu\u00e1rios sobre novas mensagens, atualiza\u00e7\u00f5es ou outras informa\u00e7\u00f5es importantes.<\/p>\n<h3>5. Menu suspenso:<\/h3>\n<p>Um menu suspenso pode ser usado para agrupar itens de navega\u00e7\u00e3o relacionados. Isso permite que voc\u00ea organize melhor o menu bar e economize espa\u00e7o.<\/p>\n<h2>Dicas e melhores pr\u00e1ticas para design de menu bar no Figma<\/h2>\n<p>Ao projetar um menu bar no Figma, aqui est\u00e3o algumas dicas e melhores pr\u00e1ticas a ter em mente:<\/p>\n<ul>\n<li>Mantenha-o simples e intuitivo: Um menu bar deve ser f\u00e1cil de entender e usar. Evite sobrecarregar com muitos itens de navega\u00e7\u00e3o ou op\u00e7\u00f5es confusas.<\/li>\n<li>Priorize a usabilidade: Certifique-se de que os elementos do menu bar sejam clic\u00e1veis e responsivos. Teste em diferentes dispositivos e resolu\u00e7\u00f5es para garantir uma experi\u00eancia consistente.<\/li>\n<li>Consist\u00eancia visual: Mantenha uma apar\u00eancia visual consistente em todo o menu bar e em todo o site ou aplicativo. Use as mesmas cores, fontes e estilos para criar uma identidade visual unificada.<\/li>\n<li>Acessibilidade: Certifique-se de que o menu bar seja acess\u00edvel a todos os usu\u00e1rios, incluindo aqueles com defici\u00eancias visuais. Use contraste adequado entre cores e forne\u00e7a alternativas para texto em imagens.<\/li>\n<\/ul>\n<h2>Como personalizar o menu bar no Figma para uma experi\u00eancia \u00fanica de usu\u00e1rio<\/h2>\n<p>Uma das grandes vantagens do Figma \u00e9 a flexibilidade para personalizar seu menu bar e criar uma experi\u00eancia \u00fanica de usu\u00e1rio. Aqui est\u00e3o algumas maneiras de personalizar seu menu bar no Figma:<\/p>\n<ul>\n<li>Experimente diferentes estilos de bot\u00f5es: Explore diferentes formas, cores e efeitos para os bot\u00f5es do menu bar. Isso ajudar\u00e1 a destacar as a\u00e7\u00f5es principais e a criar uma apar\u00eancia visual atraente.<\/li>\n<li>Use \u00edcones personalizados: Em vez de usar \u00edcones gen\u00e9ricos, crie ou escolha \u00edcones personalizados que estejam alinhados com a identidade visual da marca ou do projeto.<\/li>\n<li>Adicione anima\u00e7\u00f5es sutis: Use anima\u00e7\u00f5es sutis para tornar a intera\u00e7\u00e3o com o menu bar mais agrad\u00e1vel. Por exemplo, adicione uma transi\u00e7\u00e3o suave ao passar o mouse sobre os bot\u00f5es.<\/li>\n<li>Considere a responsividade: Certifique-se de que o menu bar seja responsivo e se adapte a diferentes tamanhos de tela. Isso garantir\u00e1 uma experi\u00eancia consistente em dispositivos m\u00f3veis e desktops.<\/li>\n<\/ul>\n<p>Em resumo, criar um menu bar no Figma \u00e9 um processo que envolve planejamento, design, personaliza\u00e7\u00e3o e testes. Ao seguir os passos mencionados neste guia completo, voc\u00ea poder\u00e1 criar um menu bar atraente e funcional que melhore a experi\u00eancia do usu\u00e1rio em seu site ou aplicativo.<\/p>\n<h2>Dicas e melhores pr\u00e1ticas para design de menu bar no Figma<\/h2>\n<p>Ao projetar um menu bar no Figma, existem algumas dicas e melhores pr\u00e1ticas que podem ajudar a garantir um design eficiente e agrad\u00e1vel para os usu\u00e1rios. Veja algumas delas:<\/p>\n<ul>\n<li>Mantenha-o simples e intuitivo: Um menu bar deve ser f\u00e1cil de entender e usar. Evite sobrecarreg\u00e1-lo com muitos itens de navega\u00e7\u00e3o ou op\u00e7\u00f5es confusas. Mantenha-o limpo e organizado, priorizando os elementos mais importantes.<\/li>\n<li>Priorize a usabilidade: Certifique-se de que os elementos do menu bar sejam clic\u00e1veis e responsivos. Os bot\u00f5es devem ser facilmente identific\u00e1veis e os usu\u00e1rios devem saber exatamente como interagir com eles. Teste o menu bar em diferentes dispositivos e resolu\u00e7\u00f5es para garantir uma experi\u00eancia consistente.<\/li>\n<li>Consist\u00eancia visual: Mantenha uma apar\u00eancia visual consistente em todo o menu bar e em todo o site ou aplicativo. Use as mesmas cores, fontes e estilos para criar uma identidade visual unificada. Isso ajudar\u00e1 os usu\u00e1rios a identificar rapidamente os elementos do menu e a navegar de forma mais intuitiva.<\/li>\n<li>Acessibilidade: Certifique-se de que o menu bar seja acess\u00edvel a todos os usu\u00e1rios, incluindo aqueles com defici\u00eancias visuais. Use contraste adequado entre cores para garantir que o texto seja leg\u00edvel. Al\u00e9m disso, forne\u00e7a alternativas para texto em imagens, como descri\u00e7\u00f5es alt, para que usu\u00e1rios de leitores de tela possam compreender o conte\u00fado.<\/li>\n<li>Teste e itere: Ap\u00f3s projetar o menu bar, \u00e9 importante test\u00e1-lo e iterar conforme necess\u00e1rio. Pe\u00e7a feedback de outros designers ou usu\u00e1rios para identificar poss\u00edveis melhorias. Fa\u00e7a os ajustes necess\u00e1rios com base no feedback recebido, garantindo que o menu bar atenda \u00e0s necessidades e expectativas dos usu\u00e1rios.<\/li>\n<\/ul>\n<h2>Como personalizar o menu bar no Figma para uma experi\u00eancia \u00fanica de usu\u00e1rio<\/h2>\n<p>O Figma oferece v\u00e1rias op\u00e7\u00f5es de personaliza\u00e7\u00e3o para criar um menu bar \u00fanico e atraente. Aqui est\u00e3o algumas maneiras de personalizar o menu bar no Figma e proporcionar uma experi\u00eancia \u00fanica de usu\u00e1rio:<\/p>\n<ul>\n<li>Experimente diferentes estilos de bot\u00f5es: Os bot\u00f5es s\u00e3o elementos-chave do menu bar e podem ser personalizados de v\u00e1rias maneiras. Explore diferentes formas, cores e efeitos para os bot\u00f5es do menu bar. Isso ajudar\u00e1 a destacar as a\u00e7\u00f5es principais e a criar uma apar\u00eancia visual atraente.<\/li>\n<li>Use \u00edcones personalizados: Em vez de usar \u00edcones gen\u00e9ricos, crie ou escolha \u00edcones personalizados que estejam alinhados com a identidade visual da marca ou do projeto. Os \u00edcones personalizados ajudam a transmitir a personalidade da marca e tornar o menu bar mais atraente.<\/li>\n<li>Adicione anima\u00e7\u00f5es sutis: As anima\u00e7\u00f5es podem adicionar um toque interativo ao menu bar e tornar a experi\u00eancia do usu\u00e1rio mais envolvente. Por exemplo, adicione uma transi\u00e7\u00e3o suave ao passar o mouse sobre os bot\u00f5es do menu ou ao abrir um menu suspenso. Essas anima\u00e7\u00f5es sutis podem ajudar a criar uma experi\u00eancia \u00fanica e agrad\u00e1vel para o usu\u00e1rio.<\/li>\n<li>Considere a responsividade: Certifique-se de que o menu bar seja responsivo e se adapte a diferentes tamanhos de tela. Isso garantir\u00e1 uma experi\u00eancia consistente em dispositivos m\u00f3veis e desktops. Ajuste os elementos do menu bar e as anima\u00e7\u00f5es para se adequarem ao espa\u00e7o dispon\u00edvel em telas menores, mantendo a funcionalidade e a est\u00e9tica.<\/li>\n<li>Teste em diferentes contextos: Antes de finalizar o design do menu bar, teste-o em diferentes contextos e cen\u00e1rios de uso. Verifique como o menu bar se comporta em diferentes navegadores, dispositivos e resolu\u00e7\u00f5es. Garanta que todos os elementos sejam vis\u00edveis e que a intera\u00e7\u00e3o seja suave em todos os casos.<\/li>\n<\/ul>\n<p>Ao personalizar o menu bar no Figma, leve em considera\u00e7\u00e3o a identidade visual do projeto, as necessidades dos usu\u00e1rios e as melhores pr\u00e1ticas de design. Dessa forma, voc\u00ea poder\u00e1 criar um menu bar \u00fanico e eficiente, proporcionando uma experi\u00eancia agrad\u00e1vel e intuitiva aos usu\u00e1rios do seu site ou aplicativo.<\/p>\n<h2>A Awari \u00e9 a melhor plataforma para aprender sobre design no Brasil.<\/h2>\n<p>Aqui voc\u00ea encontra cursos com aulas ao vivo, mentorias individuais com os melhores profissionais do mercado e suporte de carreira personalizado para dar seu pr\u00f3ximo passo profissional e aprender habilidades como Data Science, Data Analytics, Machine Learning e mais.<\/p>\n<p>J\u00e1 pensou em aprender de maneira individualizada com profissionais que atuam em empresas como Nubank, Amazon e Google? <a target=\"_blank\" href=\"https:\/\/app.fluency.io\/br\/blog\/candidatura?&utm_source=blog&utm_campaign=paragrafofinal\" rel=\"noopener\">Clique aqui<\/a> para se inscrever na Awari e come\u00e7ar a construir agora mesmo o pr\u00f3ximo cap\u00edtulo da sua carreira em dados.<\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Descubra como criar um menu bar no Figma passo a passo e melhore a experi\u00eancia do usu\u00e1rio. Aprenda a personalizar e otimizar o menu bar para uma experi\u00eancia \u00fanica de usu\u00e1rio. Dicas e melhores pr\u00e1ticas para design de menu bar no Figma.<\/p>\n","protected":false},"author":9,"featured_media":27887,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":[186],"meta":{"inline_featured_image":false,"footnotes":""},"categories":[229],"tags":[],"trilha":[],"class_list":["post-115115","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-skills","format-artigos"],"acf":[],"yoast_head":"\n<title>Como Criar Um Menu Bar No Figma: Guia Completo Para Designers | Fluency.io Brasil<\/title>\n<meta name=\"description\" content=\"Descubra como criar um menu bar no Figma passo a passo e melhore a experi\u00eancia do usu\u00e1rio. Aprenda a personalizar e otimizar o menu bar para uma experi\u00eanci...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Criar Um Menu Bar No Figma: Guia Completo Para Designers | Fluency.io Brasil\" \/>\n<meta property=\"og:description\" content=\"Descubra como criar um menu bar no Figma passo a passo e melhore a experi\u00eancia do usu\u00e1rio. Aprenda a personalizar e otimizar o menu bar para uma experi\u00eanci...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/\" \/>\n<meta property=\"og:site_name\" content=\"Fluency.io Brasil\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-26T22:52:47+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=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/\",\"url\":\"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/\",\"name\":\"Como Criar Um Menu Bar No Figma: Guia Completo Para Designers | Fluency.io Brasil\",\"isPartOf\":{\"@id\":\"https:\/\/fluency.io\/br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2023-08-26T22:52:47+00:00\",\"author\":{\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\"},\"description\":\"Descubra como criar um menu bar no Figma passo a passo e melhore a experi\u00eancia do usu\u00e1rio. Aprenda a personalizar e otimizar o menu bar para uma experi\u00eanci...\",\"breadcrumb\":{\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\",\"width\":1027,\"height\":420},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/fluency.io\/br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como Criar Um Menu Bar No Figma: Guia Completo Para Designers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fluency.io\/br\/#website\",\"url\":\"https:\/\/fluency.io\/br\/\",\"name\":\"Fluency Academy\",\"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\"}}]}<\/script>\n","yoast_head_json":{"title":"Como Criar Um Menu Bar No Figma: Guia Completo Para Designers | Fluency.io Brasil","description":"Descubra como criar um menu bar no Figma passo a passo e melhore a experi\u00eancia do usu\u00e1rio. Aprenda a personalizar e otimizar o menu bar para uma experi\u00eanci...","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:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/","og_locale":"pt_BR","og_type":"article","og_title":"Como Criar Um Menu Bar No Figma: Guia Completo Para Designers | Fluency.io Brasil","og_description":"Descubra como criar um menu bar no Figma passo a passo e melhore a experi\u00eancia do usu\u00e1rio. Aprenda a personalizar e otimizar o menu bar para uma experi\u00eanci...","og_url":"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/","og_site_name":"Fluency.io Brasil","article_published_time":"2023-08-26T22:52:47+00:00","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"kaue","Est. tempo de leitura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/","url":"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/","name":"Como Criar Um Menu Bar No Figma: Guia Completo Para Designers | Fluency.io Brasil","isPartOf":{"@id":"https:\/\/fluency.io\/br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/#primaryimage"},"image":{"@id":"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/#primaryimage"},"thumbnailUrl":"","datePublished":"2023-08-26T22:52:47+00:00","author":{"@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a"},"description":"Descubra como criar um menu bar no Figma passo a passo e melhore a experi\u00eancia do usu\u00e1rio. Aprenda a personalizar e otimizar o menu bar para uma experi\u00eanci...","breadcrumb":{"@id":"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/#primaryimage","url":"","contentUrl":"","width":1027,"height":420},{"@type":"BreadcrumbList","@id":"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/fluency.io\/br\/"},{"@type":"ListItem","position":2,"name":"Como Criar Um Menu Bar No Figma: Guia Completo Para Designers"}]},{"@type":"WebSite","@id":"https:\/\/fluency.io\/br\/#website","url":"https:\/\/fluency.io\/br\/","name":"Fluency Academy","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"}}]}},"_links":{"self":[{"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/posts\/115115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/comments?post=115115"}],"version-history":[{"count":0,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/posts\/115115\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/media?parent=115115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/categories?post=115115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/tags?post=115115"},{"taxonomy":"format","embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/format?post=115115"},{"taxonomy":"trilha","embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/trilha?post=115115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":115115,"date":"2023-08-26T19:52:47","date_gmt":"2023-08-26T22:52:47","guid":{"rendered":"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/"},"modified":"2023-08-26T19:52:47","modified_gmt":"2023-08-26T22:52:47","slug":"como-criar-um-menu-bar-no-figma-guia-completo-para-designers","status":"publish","type":"post","link":"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/","title":{"rendered":"Como Criar Um Menu Bar No Figma: Guia Completo Para Designers"},"content":{"rendered":"

\n
\n
\nComo criar um menu bar no Figma passo a passo<\/title><br \/>\n<\/head><br \/>\n<body><\/p>\n<h1>Como criar um menu bar no Figma passo a passo<\/h1>\n<h2>Passo 1: Prepara\u00e7\u00e3o<\/h2>\n<p>Antes de come\u00e7ar a criar o menu bar no Figma, \u00e9 importante ter uma ideia clara de como voc\u00ea deseja que ele seja. Defina o prop\u00f3sito do menu bar, sua estrutura, os itens que voc\u00ea deseja incluir e como deseja que eles sejam organizados. Isso ajudar\u00e1 a guiar o processo de cria\u00e7\u00e3o.<\/p>\n<h2>Passo 2: Cria\u00e7\u00e3o de um novo arquivo<\/h2>\n<p>Abra o Figma e crie um novo arquivo. Selecione o tamanho e a orienta\u00e7\u00e3o desejados para o seu menu bar. \u00c9 recomendado usar a grade de design para garantir que os elementos sejam alinhados corretamente.<\/p>\n<h2>Passo 3: Adicionando elementos b\u00e1sicos<\/h2>\n<p>Comece adicionando os elementos b\u00e1sicos do menu bar, como os bot\u00f5es e os itens de navega\u00e7\u00e3o. Use as ferramentas de desenho do Figma para criar ret\u00e2ngulos e textos. Certifique-se de alinhar e espa\u00e7ar os elementos corretamente.<\/p>\n<h2>Passo 4: Estilizando o menu bar<\/h2>\n<p>Agora \u00e9 hora de dar estilo ao seu menu bar. Use as op\u00e7\u00f5es de preenchimento, contorno e efeitos do Figma para personalizar a apar\u00eancia dos elementos. Experimente diferentes combina\u00e7\u00f5es de cores, fontes e estilos para encontrar a est\u00e9tica desejada.<\/p>\n<h2>Passo 5: Adicionando interatividade<\/h2>\n<p>Uma das vantagens do Figma \u00e9 a capacidade de adicionar interatividade aos seus designs. Para o menu bar, voc\u00ea pode criar transi\u00e7\u00f5es suaves entre os diferentes estados dos bot\u00f5es, como ao passar o mouse sobre eles ou ao clicar neles. Use a fun\u00e7\u00e3o de prototipagem do Figma para definir essas intera\u00e7\u00f5es.<\/p>\n<h2>Passo 6: Testando e iterando<\/h2>\n<p>Ap\u00f3s criar o menu bar no Figma, \u00e9 importante test\u00e1-lo e iterar conforme necess\u00e1rio. Pe\u00e7a feedback de outros designers ou usu\u00e1rios para identificar poss\u00edveis melhorias. Fa\u00e7a os ajustes necess\u00e1rios com base no feedback recebido.<\/p>\n<h2>Principais elementos de um menu bar no Figma<\/h2>\n<p>Um menu bar eficiente no Figma deve incluir os seguintes elementos principais:<\/p>\n<h3>1. Logo ou identifica\u00e7\u00e3o da marca:<\/h3>\n<p>Inclua o logotipo ou o nome da marca no menu bar para que os usu\u00e1rios possam identificar facilmente o site ou o aplicativo.<\/p>\n<h3>2. Itens de navega\u00e7\u00e3o:<\/h3>\n<p>Os itens de navega\u00e7\u00e3o s\u00e3o os links para diferentes se\u00e7\u00f5es do site ou do aplicativo. Eles devem ser claros, concisos e f\u00e1ceis de entender.<\/p>\n<h3>3. Bot\u00f5es de a\u00e7\u00e3o:<\/h3>\n<p>Os bot\u00f5es de a\u00e7\u00e3o permitem que os usu\u00e1rios realizem a\u00e7\u00f5es espec\u00edficas, como fazer login, cadastrar-se ou realizar uma compra. Eles devem ser destacados e facilmente acess\u00edveis.<\/p>\n<h3>4. \u00cdcones de notifica\u00e7\u00e3o:<\/h3>\n<p>Se o seu site ou aplicativo possui notifica\u00e7\u00f5es, \u00e9 \u00fatil incluir \u00edcones de notifica\u00e7\u00e3o no menu bar para alertar os usu\u00e1rios sobre novas mensagens, atualiza\u00e7\u00f5es ou outras informa\u00e7\u00f5es importantes.<\/p>\n<h3>5. Menu suspenso:<\/h3>\n<p>Um menu suspenso pode ser usado para agrupar itens de navega\u00e7\u00e3o relacionados. Isso permite que voc\u00ea organize melhor o menu bar e economize espa\u00e7o.<\/p>\n<h2>Dicas e melhores pr\u00e1ticas para design de menu bar no Figma<\/h2>\n<p>Ao projetar um menu bar no Figma, aqui est\u00e3o algumas dicas e melhores pr\u00e1ticas a ter em mente:<\/p>\n<ul>\n<li>Mantenha-o simples e intuitivo: Um menu bar deve ser f\u00e1cil de entender e usar. Evite sobrecarregar com muitos itens de navega\u00e7\u00e3o ou op\u00e7\u00f5es confusas.<\/li>\n<li>Priorize a usabilidade: Certifique-se de que os elementos do menu bar sejam clic\u00e1veis e responsivos. Teste em diferentes dispositivos e resolu\u00e7\u00f5es para garantir uma experi\u00eancia consistente.<\/li>\n<li>Consist\u00eancia visual: Mantenha uma apar\u00eancia visual consistente em todo o menu bar e em todo o site ou aplicativo. Use as mesmas cores, fontes e estilos para criar uma identidade visual unificada.<\/li>\n<li>Acessibilidade: Certifique-se de que o menu bar seja acess\u00edvel a todos os usu\u00e1rios, incluindo aqueles com defici\u00eancias visuais. Use contraste adequado entre cores e forne\u00e7a alternativas para texto em imagens.<\/li>\n<\/ul>\n<h2>Como personalizar o menu bar no Figma para uma experi\u00eancia \u00fanica de usu\u00e1rio<\/h2>\n<p>Uma das grandes vantagens do Figma \u00e9 a flexibilidade para personalizar seu menu bar e criar uma experi\u00eancia \u00fanica de usu\u00e1rio. Aqui est\u00e3o algumas maneiras de personalizar seu menu bar no Figma:<\/p>\n<ul>\n<li>Experimente diferentes estilos de bot\u00f5es: Explore diferentes formas, cores e efeitos para os bot\u00f5es do menu bar. Isso ajudar\u00e1 a destacar as a\u00e7\u00f5es principais e a criar uma apar\u00eancia visual atraente.<\/li>\n<li>Use \u00edcones personalizados: Em vez de usar \u00edcones gen\u00e9ricos, crie ou escolha \u00edcones personalizados que estejam alinhados com a identidade visual da marca ou do projeto.<\/li>\n<li>Adicione anima\u00e7\u00f5es sutis: Use anima\u00e7\u00f5es sutis para tornar a intera\u00e7\u00e3o com o menu bar mais agrad\u00e1vel. Por exemplo, adicione uma transi\u00e7\u00e3o suave ao passar o mouse sobre os bot\u00f5es.<\/li>\n<li>Considere a responsividade: Certifique-se de que o menu bar seja responsivo e se adapte a diferentes tamanhos de tela. Isso garantir\u00e1 uma experi\u00eancia consistente em dispositivos m\u00f3veis e desktops.<\/li>\n<\/ul>\n<p>Em resumo, criar um menu bar no Figma \u00e9 um processo que envolve planejamento, design, personaliza\u00e7\u00e3o e testes. Ao seguir os passos mencionados neste guia completo, voc\u00ea poder\u00e1 criar um menu bar atraente e funcional que melhore a experi\u00eancia do usu\u00e1rio em seu site ou aplicativo.<\/p>\n<h2>Dicas e melhores pr\u00e1ticas para design de menu bar no Figma<\/h2>\n<p>Ao projetar um menu bar no Figma, existem algumas dicas e melhores pr\u00e1ticas que podem ajudar a garantir um design eficiente e agrad\u00e1vel para os usu\u00e1rios. Veja algumas delas:<\/p>\n<ul>\n<li>Mantenha-o simples e intuitivo: Um menu bar deve ser f\u00e1cil de entender e usar. Evite sobrecarreg\u00e1-lo com muitos itens de navega\u00e7\u00e3o ou op\u00e7\u00f5es confusas. Mantenha-o limpo e organizado, priorizando os elementos mais importantes.<\/li>\n<li>Priorize a usabilidade: Certifique-se de que os elementos do menu bar sejam clic\u00e1veis e responsivos. Os bot\u00f5es devem ser facilmente identific\u00e1veis e os usu\u00e1rios devem saber exatamente como interagir com eles. Teste o menu bar em diferentes dispositivos e resolu\u00e7\u00f5es para garantir uma experi\u00eancia consistente.<\/li>\n<li>Consist\u00eancia visual: Mantenha uma apar\u00eancia visual consistente em todo o menu bar e em todo o site ou aplicativo. Use as mesmas cores, fontes e estilos para criar uma identidade visual unificada. Isso ajudar\u00e1 os usu\u00e1rios a identificar rapidamente os elementos do menu e a navegar de forma mais intuitiva.<\/li>\n<li>Acessibilidade: Certifique-se de que o menu bar seja acess\u00edvel a todos os usu\u00e1rios, incluindo aqueles com defici\u00eancias visuais. Use contraste adequado entre cores para garantir que o texto seja leg\u00edvel. Al\u00e9m disso, forne\u00e7a alternativas para texto em imagens, como descri\u00e7\u00f5es alt, para que usu\u00e1rios de leitores de tela possam compreender o conte\u00fado.<\/li>\n<li>Teste e itere: Ap\u00f3s projetar o menu bar, \u00e9 importante test\u00e1-lo e iterar conforme necess\u00e1rio. Pe\u00e7a feedback de outros designers ou usu\u00e1rios para identificar poss\u00edveis melhorias. Fa\u00e7a os ajustes necess\u00e1rios com base no feedback recebido, garantindo que o menu bar atenda \u00e0s necessidades e expectativas dos usu\u00e1rios.<\/li>\n<\/ul>\n<h2>Como personalizar o menu bar no Figma para uma experi\u00eancia \u00fanica de usu\u00e1rio<\/h2>\n<p>O Figma oferece v\u00e1rias op\u00e7\u00f5es de personaliza\u00e7\u00e3o para criar um menu bar \u00fanico e atraente. Aqui est\u00e3o algumas maneiras de personalizar o menu bar no Figma e proporcionar uma experi\u00eancia \u00fanica de usu\u00e1rio:<\/p>\n<ul>\n<li>Experimente diferentes estilos de bot\u00f5es: Os bot\u00f5es s\u00e3o elementos-chave do menu bar e podem ser personalizados de v\u00e1rias maneiras. Explore diferentes formas, cores e efeitos para os bot\u00f5es do menu bar. Isso ajudar\u00e1 a destacar as a\u00e7\u00f5es principais e a criar uma apar\u00eancia visual atraente.<\/li>\n<li>Use \u00edcones personalizados: Em vez de usar \u00edcones gen\u00e9ricos, crie ou escolha \u00edcones personalizados que estejam alinhados com a identidade visual da marca ou do projeto. Os \u00edcones personalizados ajudam a transmitir a personalidade da marca e tornar o menu bar mais atraente.<\/li>\n<li>Adicione anima\u00e7\u00f5es sutis: As anima\u00e7\u00f5es podem adicionar um toque interativo ao menu bar e tornar a experi\u00eancia do usu\u00e1rio mais envolvente. Por exemplo, adicione uma transi\u00e7\u00e3o suave ao passar o mouse sobre os bot\u00f5es do menu ou ao abrir um menu suspenso. Essas anima\u00e7\u00f5es sutis podem ajudar a criar uma experi\u00eancia \u00fanica e agrad\u00e1vel para o usu\u00e1rio.<\/li>\n<li>Considere a responsividade: Certifique-se de que o menu bar seja responsivo e se adapte a diferentes tamanhos de tela. Isso garantir\u00e1 uma experi\u00eancia consistente em dispositivos m\u00f3veis e desktops. Ajuste os elementos do menu bar e as anima\u00e7\u00f5es para se adequarem ao espa\u00e7o dispon\u00edvel em telas menores, mantendo a funcionalidade e a est\u00e9tica.<\/li>\n<li>Teste em diferentes contextos: Antes de finalizar o design do menu bar, teste-o em diferentes contextos e cen\u00e1rios de uso. Verifique como o menu bar se comporta em diferentes navegadores, dispositivos e resolu\u00e7\u00f5es. Garanta que todos os elementos sejam vis\u00edveis e que a intera\u00e7\u00e3o seja suave em todos os casos.<\/li>\n<\/ul>\n<p>Ao personalizar o menu bar no Figma, leve em considera\u00e7\u00e3o a identidade visual do projeto, as necessidades dos usu\u00e1rios e as melhores pr\u00e1ticas de design. Dessa forma, voc\u00ea poder\u00e1 criar um menu bar \u00fanico e eficiente, proporcionando uma experi\u00eancia agrad\u00e1vel e intuitiva aos usu\u00e1rios do seu site ou aplicativo.<\/p>\n<h2>A Awari \u00e9 a melhor plataforma para aprender sobre design no Brasil.<\/h2>\n<p>Aqui voc\u00ea encontra cursos com aulas ao vivo, mentorias individuais com os melhores profissionais do mercado e suporte de carreira personalizado para dar seu pr\u00f3ximo passo profissional e aprender habilidades como Data Science, Data Analytics, Machine Learning e mais.<\/p>\n<p>J\u00e1 pensou em aprender de maneira individualizada com profissionais que atuam em empresas como Nubank, Amazon e Google? <a target=\"_blank\" href=\"https:\/\/app.fluency.io\/br\/blog\/candidatura?&utm_source=blog&utm_campaign=paragrafofinal\" rel=\"noopener\">Clique aqui<\/a> para se inscrever na Awari e come\u00e7ar a construir agora mesmo o pr\u00f3ximo cap\u00edtulo da sua carreira em dados.<\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Descubra como criar um menu bar no Figma passo a passo e melhore a experi\u00eancia do usu\u00e1rio. Aprenda a personalizar e otimizar o menu bar para uma experi\u00eancia \u00fanica de usu\u00e1rio. Dicas e melhores pr\u00e1ticas para design de menu bar no Figma.<\/p>\n","protected":false},"author":9,"featured_media":27887,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":[186],"meta":{"inline_featured_image":false,"footnotes":""},"categories":[229],"tags":[],"trilha":[],"class_list":["post-115115","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-skills","format-artigos"],"acf":[],"yoast_head":"\n<title>Como Criar Um Menu Bar No Figma: Guia Completo Para Designers | Fluency.io Brasil<\/title>\n<meta name=\"description\" content=\"Descubra como criar um menu bar no Figma passo a passo e melhore a experi\u00eancia do usu\u00e1rio. Aprenda a personalizar e otimizar o menu bar para uma experi\u00eanci...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Criar Um Menu Bar No Figma: Guia Completo Para Designers | Fluency.io Brasil\" \/>\n<meta property=\"og:description\" content=\"Descubra como criar um menu bar no Figma passo a passo e melhore a experi\u00eancia do usu\u00e1rio. Aprenda a personalizar e otimizar o menu bar para uma experi\u00eanci...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/\" \/>\n<meta property=\"og:site_name\" content=\"Fluency.io Brasil\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-26T22:52:47+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=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/\",\"url\":\"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/\",\"name\":\"Como Criar Um Menu Bar No Figma: Guia Completo Para Designers | Fluency.io Brasil\",\"isPartOf\":{\"@id\":\"https:\/\/fluency.io\/br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2023-08-26T22:52:47+00:00\",\"author\":{\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\"},\"description\":\"Descubra como criar um menu bar no Figma passo a passo e melhore a experi\u00eancia do usu\u00e1rio. Aprenda a personalizar e otimizar o menu bar para uma experi\u00eanci...\",\"breadcrumb\":{\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\",\"width\":1027,\"height\":420},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/fluency.io\/br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como Criar Um Menu Bar No Figma: Guia Completo Para Designers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fluency.io\/br\/#website\",\"url\":\"https:\/\/fluency.io\/br\/\",\"name\":\"Fluency Academy\",\"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\"}}]}<\/script>\n","yoast_head_json":{"title":"Como Criar Um Menu Bar No Figma: Guia Completo Para Designers | Fluency.io Brasil","description":"Descubra como criar um menu bar no Figma passo a passo e melhore a experi\u00eancia do usu\u00e1rio. Aprenda a personalizar e otimizar o menu bar para uma experi\u00eanci...","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:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/","og_locale":"pt_BR","og_type":"article","og_title":"Como Criar Um Menu Bar No Figma: Guia Completo Para Designers | Fluency.io Brasil","og_description":"Descubra como criar um menu bar no Figma passo a passo e melhore a experi\u00eancia do usu\u00e1rio. Aprenda a personalizar e otimizar o menu bar para uma experi\u00eanci...","og_url":"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/","og_site_name":"Fluency.io Brasil","article_published_time":"2023-08-26T22:52:47+00:00","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"kaue","Est. tempo de leitura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/","url":"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/","name":"Como Criar Um Menu Bar No Figma: Guia Completo Para Designers | Fluency.io Brasil","isPartOf":{"@id":"https:\/\/fluency.io\/br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/#primaryimage"},"image":{"@id":"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/#primaryimage"},"thumbnailUrl":"","datePublished":"2023-08-26T22:52:47+00:00","author":{"@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a"},"description":"Descubra como criar um menu bar no Figma passo a passo e melhore a experi\u00eancia do usu\u00e1rio. Aprenda a personalizar e otimizar o menu bar para uma experi\u00eanci...","breadcrumb":{"@id":"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/#primaryimage","url":"","contentUrl":"","width":1027,"height":420},{"@type":"BreadcrumbList","@id":"https:\/\/fluency.io\/br\/blog\/como-criar-um-menu-bar-no-figma-guia-completo-para-designers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/fluency.io\/br\/"},{"@type":"ListItem","position":2,"name":"Como Criar Um Menu Bar No Figma: Guia Completo Para Designers"}]},{"@type":"WebSite","@id":"https:\/\/fluency.io\/br\/#website","url":"https:\/\/fluency.io\/br\/","name":"Fluency Academy","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"}}]}},"_links":{"self":[{"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/posts\/115115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/comments?post=115115"}],"version-history":[{"count":0,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/posts\/115115\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/media?parent=115115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/categories?post=115115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/tags?post=115115"},{"taxonomy":"format","embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/format?post=115115"},{"taxonomy":"trilha","embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/trilha?post=115115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}