{"id":14133,"date":"2024-09-06T11:37:06","date_gmt":"2024-09-06T14:37:06","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=14133"},"modified":"2024-09-11T18:51:13","modified_gmt":"2024-09-11T21:51:13","slug":"figma-conceitos-iniciais","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/","title":{"rendered":"Figma: compreendendo conceitos iniciais"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>O Figma \u00e9 uma ferramenta muito utilizada no UX (User Experience, ou experi\u00eancia do usu\u00e1rio) e no UI (User Interface, ou interface de usu\u00e1rio).<\/strong> Nesse artigo, vamos abordar os conceitos mais b\u00e1sicos de como come\u00e7ar nessa \u00e1rea ou utilizar o Figma em outros setores, como administra\u00e7\u00e3o, design, social media etc.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se voc\u00ea \u00e9 um <strong>desenvolvedor<\/strong> querendo aumentar suas habilidades, um <strong><a href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/web-designers-da-bahia\/\" target=\"_blank\" rel=\"noreferrer noopener\">designer<\/a><\/strong> iniciando no UI, um <strong>profissional<\/strong> <strong>estudando<\/strong> possibilidades de carreira, esse artigo \u00e9 para voc\u00ea.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Em futuros artigos, vamos explorar o <strong>modo desenvolvedor do Figma, a cria\u00e7\u00e3o de <a href=\"https:\/\/pt.wikipedia.org\/wiki\/Prot%C3%B3tipo\" target=\"_blank\" rel=\"noreferrer noopener\">prot\u00f3tipos<\/a> e como se especializar<\/strong> na \u00e1rea para o qual ele \u00e9 mais usado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Continue a leitura e aprenda mais!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_72 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Conte\u00fado<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#O_que_e_Figma\" title=\"O que \u00e9 Figma?\">O que \u00e9 Figma?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#Conhecendo_as_funcoes_e_ferramentas_do_Figma\" title=\"Conhecendo as fun\u00e7\u00f5es e ferramentas do Figma\">Conhecendo as fun\u00e7\u00f5es e ferramentas do Figma<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#Menu_lateral_direito_%E2%80%93_arquivo_paginas_e_recursos\" title=\"Menu lateral direito \u2013 arquivo, p\u00e1ginas e recursos\">Menu lateral direito \u2013 arquivo, p\u00e1ginas e recursos<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#Menu_de_funcionalidades_%E2%80%93_usado_para_a_criacao\" title=\"Menu de funcionalidades \u2013 usado para a cria\u00e7\u00e3o\">Menu de funcionalidades \u2013 usado para a cria\u00e7\u00e3o<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#Menu_lateral_direito\" title=\"Menu lateral direito\">Menu lateral direito<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#Comecando_um_projeto_simples_wireframe_de_site\" title=\"Come\u00e7ando um projeto simples: wireframe de site\">Come\u00e7ando um projeto simples: wireframe de site<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#Copiando_e_colando_referencias\" title=\"Copiando e colando refer\u00eancias\">Copiando e colando refer\u00eancias<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#Usando_uma_referencia\" title=\"Usando uma refer\u00eancia\">Usando uma refer\u00eancia<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#Criando_o_layout_basico\" title=\"Criando o layout b\u00e1sico\">Criando o layout b\u00e1sico<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#Construindo_o_menu_e_elementos_centrais\" title=\"Construindo o menu e elementos centrais\">Construindo o menu e elementos centrais<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#Ctrl_c_ctrl_v\" title=\"Ctrl c + ctrl v\">Ctrl c + ctrl v<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#Ajustando_Tamanhos_e_Renomeando_Itens\" title=\"Ajustando Tamanhos e Renomeando Itens\">Ajustando Tamanhos e Renomeando Itens<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#Personalizando_cores\" title=\"Personalizando cores\">Personalizando cores<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#Finalizando_Detalhes_e_Simulando_Textos\" title=\"Finalizando Detalhes e Simulando Textos\">Finalizando Detalhes e Simulando Textos<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#Conclusao\" title=\"Conclus\u00e3o\">Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"O_que_e_Figma\"><\/span>O que \u00e9 Figma?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>O Figma \u00e9 uma das ferramentas mais usadas para criar <em>wireframes <\/em>(rascunhos de sistemas e aplica\u00e7\u00f5es) e <em>design <\/em>de <em>apps<\/em>, sistemas complexos ou <em>templates <\/em>de social media e\/ou e-mails.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Concorrente direto do Adobe XD, costumam dizer que o Figma ganha por v\u00e1rias de suas funcionalidades, que exploraremos bastante por aqui.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>O que se pode criar com o Figma?<\/strong> Essa \u00e9 uma pergunta bem dif\u00edcil de responder, ao mesmo tempo que muito f\u00e1cil:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cria\u00e7\u00e3o de interfaces responsivas<\/strong> para aplicativos, websites e softwares que se ajustam automaticamente a diferentes tamanhos e configura\u00e7\u00f5es de tela;<\/li>\n\n\n\n<li><strong>Desenvolvimento de prot\u00f3tipos e fluxos de navega\u00e7\u00e3o<\/strong> para otimizar a experi\u00eancia do usu\u00e1rio;<\/li>\n\n\n\n<li><strong>Implementa\u00e7\u00e3o de sistemas de design (Design Systems)<\/strong> para garantir a consist\u00eancia visual e funcional em todos os projetos;<\/li>\n\n\n\n<li><strong>Produ\u00e7\u00e3o de <\/strong><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/email-marketing\/enviar-newsletter-mautic\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>pe\u00e7as gr\u00e1ficas<\/strong> para e-mails<\/a> e redes sociais, al\u00e9m de apresenta\u00e7\u00f5es, e-books e infogr\u00e1ficos;<\/li>\n\n\n\n<li><strong>Cria\u00e7\u00e3o de anima\u00e7\u00f5es e gr\u00e1ficos din\u00e2micos<\/strong>, com base em dados reais, utilizando plugins e recursos como Figmotion, LottieFiles e Chart.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Existem dezenas de <strong>templates<\/strong> dispon\u00edveis que podem ser usados, como podemos ver abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-7.png\" alt=\"figma\" class=\"wp-image-14143\" width=\"886\" height=\"367\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-7.png 886w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-7-300x124.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-7-768x318.png 768w\" sizes=\"(max-width: 886px) 100vw, 886px\" \/><figcaption class=\"wp-element-caption\">Figma: \u00e1rea da comunidade onde h\u00e1 <em>templates<\/em> prontos para usar em diversos setores.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conhecendo_as_funcoes_e_ferramentas_do_Figma\"><\/span>Conhecendo as fun\u00e7\u00f5es e ferramentas do Figma<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para aprender sobre algo, primeiro come\u00e7amos do come\u00e7o, certo? A estrutura do Figma \u00e9 bem simples de se compreender, vamos por cada parte separadamente. Primeiro pela p\u00e1gina de projeto, em seguida os menus dispon\u00edveis.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ao criar um projeto de design, \u00e9 essa tela que veremos:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-8.png\" alt=\"projeto de design figma\" class=\"wp-image-14144\" width=\"886\" height=\"415\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-8.png 886w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-8-300x141.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-8-768x360.png 768w\" sizes=\"(max-width: 886px) 100vw, 886px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Menu_lateral_direito_%E2%80%93_arquivo_paginas_e_recursos\"><\/span>Menu lateral direito \u2013 arquivo, p\u00e1ginas e recursos<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Cont\u00e9m as p\u00e1ginas do projeto, as camadas e os <em>assets<\/em><\/strong> (itens que podem ser adicionados, como bot\u00f5es e derivados, para o caso de estarmos criando uma interface ou prot\u00f3tipo). Por exemplo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-9.png\" alt=\"assets\" class=\"wp-image-14145\" width=\"886\" height=\"415\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-9.png 886w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-9-300x141.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-9-768x360.png 768w\" sizes=\"(max-width: 886px) 100vw, 886px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">No modo gratuito, temos tr\u00eas p\u00e1ginas de projeto, mas d\u00e1 para criar <em>frames<\/em> e conte\u00fado ilimitadamente dentro de cada uma.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Menu_de_funcionalidades_%E2%80%93_usado_para_a_criacao\"><\/span>Menu de funcionalidades \u2013 usado para a cria\u00e7\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-10.png\" alt=\"funcionalidades figma\" class=\"wp-image-14146\" width=\"886\" height=\"415\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-10.png 886w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-10-300x141.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-10-768x360.png 768w\" sizes=\"(max-width: 886px) 100vw, 886px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Respectivamente, essas funcionalidades s\u00e3o:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-11.png\" alt=\"ferramentas\" class=\"wp-image-14147\" width=\"383\" height=\"266\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-11.png 383w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-11-300x208.png 300w\" sizes=\"(max-width: 383px) 100vw, 383px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mover;<\/li>\n\n\n\n<li>Ferramenta m\u00e3o;<\/li>\n\n\n\n<li>Alterar escala.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-12.png\" alt=\"ferramentas\" class=\"wp-image-14148\" width=\"348\" height=\"250\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-12.png 348w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-12-300x216.png 300w\" sizes=\"(max-width: 348px) 100vw, 348px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Quadro;<\/li>\n\n\n\n<li>Se\u00e7\u00e3o;<\/li>\n\n\n\n<li>Fatia.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-13.png\" alt=\"ferramentas\" class=\"wp-image-14149\" width=\"343\" height=\"413\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-13.png 343w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-13-249x300.png 249w\" sizes=\"(max-width: 343px) 100vw, 343px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ret\u00e2ngulo;<\/li>\n\n\n\n<li>Linha;<\/li>\n\n\n\n<li>Flecha;<\/li>\n\n\n\n<li>Elipse:<\/li>\n\n\n\n<li>Pol\u00edgono;<\/li>\n\n\n\n<li>Estrela;<\/li>\n\n\n\n<li>Inserir imagem.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-14.png\" alt=\"ferramentas\" class=\"wp-image-14150\" width=\"336\" height=\"214\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-14.png 336w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-14-300x191.png 300w\" sizes=\"(max-width: 336px) 100vw, 336px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Caneta;<\/li>\n\n\n\n<li>L\u00e1pis.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-15.png\" alt=\"ferramentas\" class=\"wp-image-14151\" width=\"292\" height=\"81\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Texto;<\/li>\n\n\n\n<li>Coment\u00e1rios;<\/li>\n\n\n\n<li>A\u00e7\u00f5es.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Menu_lateral_direito\"><\/span>Menu lateral direito<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-16.png\" alt=\"menu lateral direito figma\" class=\"wp-image-14152\" width=\"886\" height=\"415\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-16.png 886w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-16-300x141.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-16-768x360.png 768w\" sizes=\"(max-width: 886px) 100vw, 886px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Aqui \u00e9 onde ficam as <strong>modifica\u00e7\u00f5es de design e prot\u00f3tipo,<\/strong> tamb\u00e9m onde modificaremos a cor da p\u00e1gina para dar mais contraste ao projeto. Como iniciaremos com um wireframe (que possui cores cinzas por padr\u00e3o), <strong>o fundo da p\u00e1gina \u00e9 preto,<\/strong> mas sinta-se \u00e0 vontade para mudar quanto quiser.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O que s\u00e3o:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Vari\u00e1veis locais (Local variables):<\/strong> itens reutiliz\u00e1veis que voc\u00ea aproveitar\u00e1 ao longo do projeto, como bot\u00f5es, caixas de texto e outros itens repetitivos;<\/li>\n\n\n\n<li><strong>Estilos locais (Local styles)<\/strong>: estilos de texto, cor, efeito e grade. Geralmente usamos quando temos uma paleta de cores definida e uma tipografia;<\/li>\n\n\n\n<li><strong>Exportar (Export)<\/strong>: exportar para PNG, JPG, SVG ou PDF o projeto inteiro ou p\u00e1ginas selecionadas.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Comecando_um_projeto_simples_wireframe_de_site\"><\/span>Come\u00e7ando um projeto simples: wireframe de site<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Um wireframe \u00e9 o rascunho b\u00e1sico do que ser\u00e1 sua aplica\u00e7\u00e3o, site ou interface.<\/strong> Assim, n\u00e3o nos preocupamos muito com cores e tipografia, mas sim com a ideia b\u00e1sica de onde as coisas v\u00e3o ficar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Copiando_e_colando_referencias\"><\/span><strong>Copiando e colando refer\u00eancias<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>O Figma permite que voc\u00ea copie elementos e os cole dentro de seu projeto, como prints de sites ou interfaces que voc\u00ea j\u00e1 conhece e quer reproduzir. <\/strong>Se voc\u00ea encontrou uma interface que gostou, pode reproduzi-la para seu projeto, facilitando a reprodu\u00e7\u00e3o do layout que funciona bem.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aqui, faremos isso com a home do nosso site:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-17-1024x484.png\" alt=\"\" class=\"wp-image-14153\" width=\"1024\" height=\"484\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-17-1024x484.png 1024w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-17-300x142.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-17-768x363.png 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-17-1536x726.png 1536w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-17.png 1858w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Esse design pode funcionar tranquilamente para qualquer outro e-commerce.<\/p>\n\n\n\n<div class=\"wp-block-group has-background is-layout-constrained wp-block-group-is-layout-constrained\" style=\"background-color:#ff6a003b\">\n<p class=\"wp-block-paragraph\">Antes de come\u00e7armos, uma observa\u00e7\u00e3o:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sempre renomeie o elemento que voc\u00ea criar ou adicionar ao design,<\/strong> isso \u00e9 muito importante para definir a hierarquia dos elementos e reproduzi-los quando precisar.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Usando_uma_referencia\"><\/span><strong>Usando uma refer\u00eancia<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>No menu lateral direito,<\/strong> <strong>diminua a opacidade da imagem<\/strong> que voc\u00ea usar\u00e1 como refer\u00eancia, no caso a nossa home. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-18.png\" alt=\"aparencia\" class=\"wp-image-14154\" width=\"288\" height=\"204\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Isso permite que voc\u00ea <strong>desenhe os elementos do <em>wireframe <\/em>diretamente sobre a imagem de fundo<\/strong>, come\u00e7ando pelos ret\u00e2ngulos, que s\u00e3o o ponto de partida. Eles t\u00eam uma cor padr\u00e3o de cinza, ent\u00e3o um fundo mais transparente vai te deixar enxerg\u00e1-los melhor.<\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#ff6a003b\"><strong>No menu esquerdo de camadas, renomeie a imagem como &#8220;refer\u00eancia&#8221;.<\/strong> Basta dar dois cliques em cima da camada respectiva.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Criando_o_layout_basico\"><\/span><strong>Criando o layout b\u00e1sico<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>A maioria dos projetos no Figma se baseia em ret\u00e2ngulos e hierarquias. <\/strong>Crie um ret\u00e2ngulo grande para o fundo da interface, ele deve abranger toda a imagem que voc\u00ea colou. O tamanho vai depender da resolu\u00e7\u00e3o do seu monitor, pois, se voc\u00ea printou a tela do site, ent\u00e3o ser\u00e1 a resolu\u00e7\u00e3o em que o site \u00e9 apresentado para voc\u00ea que ser\u00e1 usada. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-19-1024x422.png\" alt=\"layout basico figma\" class=\"wp-image-14155\" width=\"1024\" height=\"422\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-19-1024x422.png 1024w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-19-300x124.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-19-768x316.png 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-19.png 1066w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Em seguida, preste aten\u00e7\u00e3o \u00e0s \u00e1reas marcadas em vermelho na imagem de refer\u00eancia, elas s\u00e3o o alinhamento que garante que seu ret\u00e2ngulo e a imagem s\u00e3o do mesmo tamanho. Se arrastar o mouse n\u00e3o surtir muito efeito, <strong>voc\u00ea apenas pode selecionar a imagem ou o ret\u00e2ngulo maior e ver a altura e largura, ajustando manualmente.<\/strong><\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#ff6a0038\">Na hierarquia das camadas, voc\u00ea pode enviar a imagem para tr\u00e1s <strong>(menu com o bot\u00e3o direito + send to back)<\/strong> e deixar o ret\u00e2ngulo na frente, vis\u00edvel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Construindo_o_menu_e_elementos_centrais\"><\/span><strong>Construindo o menu e elementos centrais<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Crie um ret\u00e2ngulo adicional para o menu e envie-o para tr\u00e1s da imagem de refer\u00eancia.<\/strong> Sempre partindo das bordas da refer\u00eancia. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-20.png\" alt=\"retangulo\" class=\"wp-image-14156\" width=\"849\" height=\"424\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-20.png 849w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-20-300x150.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-20-768x384.png 768w\" sizes=\"(max-width: 849px) 100vw, 849px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Modifique a cor dele para branco, para podermos lembrar que ele est\u00e1 ali<strong>.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-21.png\" alt=\"\" class=\"wp-image-14157\" width=\"208\" height=\"78\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Repita o processo para criar um ret\u00e2ngulo central que ser\u00e1 o corpo principal do seu layout, <strong>onde temos a imagem na refer\u00eancia.<\/strong> <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-22.png\" alt=\"selecionando um retangulo no figma\" class=\"wp-image-14158\" width=\"846\" height=\"431\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-22.png 846w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-22-300x153.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-22-768x391.png 768w\" sizes=\"(max-width: 846px) 100vw, 846px\" \/><\/figure>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#ff6a0038\">Utilize cantos arredondados <strong>(menu direito, op\u00e7\u00e3o &#8220;Mixed&#8221;, valor 10)<\/strong> para imitar o exemplo fornecido.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Ctrl_c_ctrl_v\"><\/span><strong>Ctrl c + ctrl v<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>A partir daqui, todos os elementos da nossa home ser\u00e3o reproduzidos em ret\u00e2ngulos com suas medidas exatas, mesmo aqueles que s\u00e3o textos.<\/strong> Como dissemos: o wireframe \u00e9 o rascunho b\u00e1sico, a imagina\u00e7\u00e3o de como o layout ser\u00e1, ent\u00e3o n\u00e3o precisamos inserir muitos elementos agora.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Utilizaremos o copiar e colar o tempo todo, pois os ret\u00e2ngulos s\u00e3o repetitivos e, por exemplo, no menu e na \u00e1rea de pre\u00e7os h\u00e1 v\u00e1rios com tamanho igual:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-23.png\" alt=\"botoes\" class=\"wp-image-14159\" width=\"495\" height=\"160\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-23.png 495w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-23-300x97.png 300w\" sizes=\"(max-width: 495px) 100vw, 495px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00e3o 6 ret\u00e2ngulos no total, ent\u00e3o depois de criar os 3 primeiros, seguramos <strong><code>shift <\/code><\/strong>e os selecionamos, copiamos e colamos. \u00c9 s\u00f3 ajustar, depois <strong>selecione os 6 e use <code>ctrl G,<\/code> para criar um grupo com esses elementos.<\/strong> <\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#ff6a003b\">Use o menu de redimensionamento para deixar os itens com o espa\u00e7amento igual:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-24.png\" alt=\"posicao do texto\" class=\"wp-image-14160\" width=\"210\" height=\"162\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Para facilitar a organiza\u00e7\u00e3o, use as teclas<strong> <code>Ctrl<\/code> e <code>Shift<\/code><\/strong> para selecionar e redimensionar todos os elementos do design no menu direito.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Envie os elementos para tr\u00e1s novamente para comparar o tamanho com a refer\u00eancia. Ajuste o arredondamento dos cantos para 10.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Ajustando_Tamanhos_e_Renomeando_Itens\"><\/span><strong>Ajustando Tamanhos e Renomeando Itens<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Se os itens n\u00e3o estiverem no mesmo tamanho, modifique-os.<\/strong> Lembre-se de renomear cada um dos itens conforme voc\u00ea os ajusta. Nomeie os elementos de fundo, barra de menu e o ret\u00e2ngulo de pre\u00e7os.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-26.png\" alt=\"layers no figma\" class=\"wp-image-14162\" width=\"295\" height=\"488\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-26.png 295w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-26-181x300.png 181w\" sizes=\"(max-width: 295px) 100vw, 295px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Personalizando_cores\"><\/span><strong>Personalizando cores<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use a ferramenta conta-gotas para selecionar as cores da imagem de refer\u00eancia.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-27.png\" alt=\"cores\" class=\"wp-image-14163\" width=\"578\" height=\"264\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-27.png 578w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-27-300x137.png 300w\" sizes=\"(max-width: 578px) 100vw, 578px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Finalizando_Detalhes_e_Simulando_Textos\"><\/span><strong>Finalizando Detalhes e Simulando Textos<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ap\u00f3s ajustar os bot\u00f5es e demais elementos, certifique-se de que tudo est\u00e1 organizado e renomeado corretamente. Voc\u00ea pode simular os textos utilizando a ferramenta de texto (<code>T<\/code>) e colocando-os sobre os elementos correspondentes. Teremos um wireframe semelhante a esse, no final:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-25-1024x523.png\" alt=\"wireframe no figma\" class=\"wp-image-14161\" width=\"1024\" height=\"523\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-25-1024x523.png 1024w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-25-300x153.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-25-768x392.png 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/08\/image-25.png 1060w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#ff6a003b\">Quando estiver satisfeito com o layout, remova a imagem de refer\u00eancia. Agora, voc\u00ea tem um wireframe limpo e ajustado pronto para ser utilizado!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusao\"><\/span>Conclus\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Quando se utiliza o Figma para trabalhar as suas ideias, o trabalho se torna ainda mais f\u00e1cil. Basicamente, tendo um bom conhecimento de <strong>formas geom\u00e9tricas, usabilidade e teoria das cores<\/strong> j\u00e1 adianta mais de metade do processo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nesse artigo voc\u00ea conheceu as principais funcionalidades do Figma e como utiliz\u00e1-lo daqui em diante, mesmo n\u00e3o sendo um profissional da \u00e1rea. \u00c9 claro que, em se tratando de especializa\u00e7\u00e3o, recomendamos que voc\u00ea estude mais a fundo e compreenda quais seus pontos mais fortes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Acompanhe a <strong>s\u00e9rie de artigos que estamos preparando<\/strong> e continue aprendendo mais sobre essa ferramenta realmente \u00fatil para diversos profissionais.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O Figma \u00e9 uma ferramenta muito utilizada no UX (User Experience, ou experi\u00eancia do usu\u00e1rio) e no UI (User Interface, ou interface de usu\u00e1rio). Nesse artigo, vamos abordar os conceitos mais b\u00e1sicos de como come\u00e7ar nessa \u00e1rea ou utilizar o Figma em outros setores, como administra\u00e7\u00e3o, design, social media etc. Se voc\u00ea \u00e9 um desenvolvedor [&hellip;]<\/p>\n","protected":false},"author":31,"featured_media":14170,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_helpful_status":1,"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-14133","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvedores"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Figma: compreendendo conceitos iniciais | Homehost<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Figma: compreendendo conceitos iniciais | Homehost\" \/>\n<meta property=\"og:description\" content=\"O Figma \u00e9 uma ferramenta muito utilizada no UX (User Experience, ou experi\u00eancia do usu\u00e1rio) e no UI (User Interface, ou interface de usu\u00e1rio). Nesse artigo, vamos abordar os conceitos mais b\u00e1sicos de como come\u00e7ar nessa \u00e1rea ou utilizar o Figma em outros setores, como administra\u00e7\u00e3o, design, social media etc. Se voc\u00ea \u00e9 um desenvolvedor [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/\" \/>\n<meta property=\"og:site_name\" content=\"Homehost\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Homehost\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-06T14:37:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-11T21:51:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/09\/figma.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Daiana S\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Homehost\" \/>\n<meta name=\"twitter:site\" content=\"@Homehost\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Daiana S\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/\",\"name\":\"Figma: compreendendo conceitos iniciais | Homehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/09\/figma.png\",\"datePublished\":\"2024-09-06T14:37:06+00:00\",\"dateModified\":\"2024-09-11T21:51:13+00:00\",\"author\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/eb90cb369d7098d6d85fa96c78ea1689\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#primaryimage\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/09\/figma.png\",\"contentUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/09\/figma.png\",\"width\":1200,\"height\":630,\"caption\":\"figma\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.homehost.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Figma: compreendendo conceitos iniciais\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/\",\"name\":\"Homehost\",\"description\":\"Hospedagem De Sites\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/eb90cb369d7098d6d85fa96c78ea1689\",\"name\":\"Daiana S\",\"description\":\"Graduada em Letras pelo Instituto Federal da Para\u00edba e especializada em reda\u00e7\u00e3o geral. Gosto de escrever sobre tudo e me dedico em v\u00e1rios n\u00edveis de expressividade. No geral, todos os meus hobbies giram em torno de escrever alguma coisa e fazer isso bem. Contato: daiana.blog@homehost.com.br\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Figma: compreendendo conceitos iniciais | Homehost","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:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/","og_locale":"pt_BR","og_type":"article","og_title":"Figma: compreendendo conceitos iniciais | Homehost","og_description":"O Figma \u00e9 uma ferramenta muito utilizada no UX (User Experience, ou experi\u00eancia do usu\u00e1rio) e no UI (User Interface, ou interface de usu\u00e1rio). Nesse artigo, vamos abordar os conceitos mais b\u00e1sicos de como come\u00e7ar nessa \u00e1rea ou utilizar o Figma em outros setores, como administra\u00e7\u00e3o, design, social media etc. Se voc\u00ea \u00e9 um desenvolvedor [&hellip;]","og_url":"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/","og_site_name":"Homehost","article_publisher":"https:\/\/www.facebook.com\/Homehost\/","article_published_time":"2024-09-06T14:37:06+00:00","article_modified_time":"2024-09-11T21:51:13+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/09\/figma.png","type":"image\/png"}],"author":"Daiana S","twitter_card":"summary_large_image","twitter_creator":"@Homehost","twitter_site":"@Homehost","twitter_misc":{"Escrito por":"Daiana S","Est. tempo de leitura":"13 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/","url":"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/","name":"Figma: compreendendo conceitos iniciais | Homehost","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#primaryimage"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#primaryimage"},"thumbnailUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/09\/figma.png","datePublished":"2024-09-06T14:37:06+00:00","dateModified":"2024-09-11T21:51:13+00:00","author":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/eb90cb369d7098d6d85fa96c78ea1689"},"breadcrumb":{"@id":"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#primaryimage","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/09\/figma.png","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/09\/figma.png","width":1200,"height":630,"caption":"figma"},{"@type":"BreadcrumbList","@id":"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.homehost.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Figma: compreendendo conceitos iniciais"}]},{"@type":"WebSite","@id":"https:\/\/www.homehost.com.br\/blog\/#website","url":"https:\/\/www.homehost.com.br\/blog\/","name":"Homehost","description":"Hospedagem De Sites","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/eb90cb369d7098d6d85fa96c78ea1689","name":"Daiana S","description":"Graduada em Letras pelo Instituto Federal da Para\u00edba e especializada em reda\u00e7\u00e3o geral. Gosto de escrever sobre tudo e me dedico em v\u00e1rios n\u00edveis de expressividade. No geral, todos os meus hobbies giram em torno de escrever alguma coisa e fazer isso bem. Contato: daiana.blog@homehost.com.br"}]}},"modified_by":"Daiana S","jetpack_featured_media_url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2024\/09\/figma.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/14133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/comments?post=14133"}],"version-history":[{"count":5,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/14133\/revisions"}],"predecessor-version":[{"id":14171,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/14133\/revisions\/14171"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media\/14170"}],"wp:attachment":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=14133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=14133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=14133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}