{"id":24,"date":"2024-05-02T22:53:38","date_gmt":"2024-05-02T22:53:38","guid":{"rendered":"https:\/\/blog.rubcube.com\/?p=24"},"modified":"2024-07-02T18:21:15","modified_gmt":"2024-07-02T18:21:15","slug":"variaveis-no-figma","status":"publish","type":"post","link":"https:\/\/blog.rubcube.com\/index.php\/2024\/05\/02\/variaveis-no-figma\/","title":{"rendered":"Vari\u00e1veis no Figma"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">Como reduzir dias de trabalho para 2\u00a0minutos e ajudar a empresa a impactar na prospec\u00e7\u00e3o de\u00a0clientes!<\/h4>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<h4 class=\"wp-block-heading has-text-align-center\">Tempo \u00e9 dinheiro.\u00a0<\/h4>\n<\/blockquote>\n\n\n\n<p><strong>D<\/strong>isse Benjamin Franklin em seu ensaio \u201cConselhos para um jovem comerciante\u201d, publicado em 1748. Que o tempo \u00e9 um dos recursos mais escassos e valiosos, ningu\u00e9m discorda. E tempo extra \u00e9 sin\u00f4nimo de liberdade para criar solu\u00e7\u00f5es mais eficientes. Ou seja, criar processos eficientes \u00e9 um ganha-ganha, tanto para a empresa quanto para o designer que est\u00e1 executando a tarefa.<\/p>\n\n\n\n<p>O objetivo deste artigo \u00e9 mostrar o passo a passo de como eu implementei as vari\u00e1veis do Figma em nosso Design System e como isso ajudou a:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Economizar dias de trabalho<\/li>\n\n\n\n<li>Ter um prot\u00f3tipo Whitelabel bem mais flex\u00edvel<\/li>\n\n\n\n<li>Criar um fluxo de valida\u00e7\u00e3o para clientes<\/li>\n\n\n\n<li>Criar um valor personalizado para nossa prospec\u00e7\u00e3o<\/li>\n<\/ul>\n\n\n\n<p><em>Lembrando que as vari\u00e1veis s\u00e3o um recurso pago do Figma, mas podem ser usadas no seu draft de forma gratuita. \u00c9 poss\u00edvel criar at\u00e9 4 colunas de vari\u00e1veis na vers\u00e3o Pro do Figma, ou 40, na vers\u00e3o Enterprise.<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Quem trabalha com produtos Whitelabel sabe que existe uma atividade que consiste em adaptar o produto para ter a \u201ccarinha do cliente\u201d. E muitos clientes gostam de experimentar. Antes, esse processo de adapta\u00e7\u00e3o das cores e textos do prot\u00f3tipo podia levar dias, se incluirmos o tempo de altera\u00e7\u00e3o e retorno do cliente. E \u00e9 aqui que entram as vari\u00e1veis, um recurso do Figma que agiliza a prototipa\u00e7\u00e3o, permite experimenta\u00e7\u00e3o de forma mais r\u00e1pida e melhora a organiza\u00e7\u00e3o do Design System.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>O que s\u00e3o as vari\u00e1veis?<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/720\/1*dxB_F_4vLMWX2nkKXs52eQ.png\" alt=\"A imagem \u00e9 composta por quatro colunas verticais, cada uma com uma cor de fundo diferente e texto centralizado: A primeira coluna cont\u00e9m o texto \u201cN\u00fameros\u201d com um \u00edcone de \u201c123\u201d. A segunda coluna tem o texto \u201cStrings\u201d com um \u00edcone de texto\u00a0. A terceira coluna tem o texto \u201cBooleans\u201d com um \u00edcone de interruptor\u00a0. A quarta coluna tem um fundo azul muito escuro e cont\u00e9m o texto \u201cCores\u201d com um \u00edcone de cores.\"\/><figcaption class=\"wp-element-caption\">Tipos de vales que as vari\u00e1veis aceitam.<\/figcaption><\/figure>\n\n\n\n<p>Uma vari\u00e1vel \u00e9 um espa\u00e7o nomeado que armazena um valor. Esse valor pode variar ao longo da execu\u00e7\u00e3o do programa. As vari\u00e1veis no Figma s\u00e3o uma funcionalidade que permite guardar valores que podem variar ao longo do design. Isso pode incluir cores, booleanos, n\u00fameros e strings que podem ser reutilizados em diferentes partes do design.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Diferen\u00e7a entre vari\u00e1veis (variables) e estilos&nbsp;(styles)<\/strong><\/h3>\n\n\n\n<p>\u00c9 importante entendermos as diferen\u00e7as entre os conceitos de vari\u00e1veis (variables) e estilos (styles).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Tipos de&nbsp;valores<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>As vari\u00e1veis usam valores \u00fanicos, brutos e reutiliz\u00e1veis. Por exemplo, os valores brutos podem incluir preenchimentos s\u00f3lidos como #FFFFFF, n\u00fameros como 16 ou -32,75 e valores booleanos verdadeiro e falso.<\/li>\n\n\n\n<li>Os estilos usam valores \u00fanicos e brutos; dados com m\u00faltiplos valores; bem como outros formatos. Por exemplo, um estilo de cor pode usar preenchimentos s\u00f3lidos (valores brutos \u00fanicos), gradientes (valores m\u00faltiplos), bem como outros formatos (imagens, GIFs, v\u00eddeos e modos de mesclagem).<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Escalabilidade e gerenciamento<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Os estilos n\u00e3o suportam alias. Em outras palavras, eles n\u00e3o podem ser aplicados a vari\u00e1veis e outros estilos.&nbsp;<\/li>\n\n\n\n<li>Vari\u00e1veis podem ser aplicadas a ambos. Dessa forma, elas oferecem suporte mais robusto para estruturas de token complexas e escal\u00e1veis. Elas permitem definir valores primitivos que podem fluir atrav\u00e9s de outros tokens e elementos do seu sistema de design. Tamb\u00e9m tornam a atualiza\u00e7\u00e3o e o gerenciamento de sistemas de design mais eficientes.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Criando as vari\u00e1veis\u200a\u2014\u200aPasso a&nbsp;passo<\/strong><\/h3>\n\n\n\n<p>N\u00e3o se preocupe se voc\u00ea nunca usou as vari\u00e1veis antes. No passo a passo que vou mostrar abaixo, vamos criar um arquivo com vari\u00e1veis juntos. Ent\u00e3o, m\u00e3o na massa!<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>A primeira etapa ser\u00e1 criar nossa tabela de vari\u00e1veis dentro do nosso Design System. Abra o arquivo do seu Design System e navegue at\u00e9 o menu na lateral direita. Clique no menu <strong><em>Local variables<\/em><\/strong>.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/720\/1*Wgb7CgQ-KJCAsjplPwM7Kw.png\" alt=\"A captura de tela mostra a interface do Figma. No lado direito, a barra lateral exibe o painel \u201cDesign\u201d com a configura\u00e7\u00e3o da p\u00e1gina, onde se pode ver o campo \u201cLocal variables\u201d destacado em vermelho.\"\/><figcaption class=\"wp-element-caption\">A imagem mostra onde est\u00e1 a op\u00e7\u00e3o Local variables na interface do&nbsp;Figma.<\/figcaption><\/figure>\n\n\n\n<p>2.<strong> <\/strong>Em seguida, no modal que ir\u00e1 abrir, clique em <strong>+ <em>Create variable<\/em><\/strong>.<strong> <\/strong>Selecionando <strong><em>Color<\/em><\/strong>, crie 4 vari\u00e1veis do tipo <strong><em>Color<\/em><\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/720\/1*Lk0CE06UIQB7v8cxcEh7Ww.png\" alt=\"A captura de tela mostra a interface do Figma. \u00c0 direita o bot\u00e3o \u201cLocal variables\u201d destacando em azul. No centro, uma janela com o t\u00edtulo \u201cCollection 1\u201d e \u201cAll variables\u201d indica a cria\u00e7\u00e3o de vari\u00e1veis reutiliz\u00e1veis. O bot\u00e3o \u201c+ Create variable\u201d est\u00e1 selecionado e abaixo aparece um menu com os tipos de vari\u00e1veis dispon\u00edveis. A variavel Cor est\u00e1 selecionada em azul.\"\/><figcaption class=\"wp-element-caption\">A imagem mostra onde est\u00e1 a op\u00e7\u00e3o de Color, ao clicar em Create variable.<\/figcaption><\/figure>\n\n\n\n<p>3. <strong>Nomeando as vari\u00e1veis:<\/strong> A coluna <strong><em>Name<\/em><\/strong> da tabela de vari\u00e1veis refere-se ao nome da vari\u00e1vel que estamos criando. Vamos come\u00e7ar criando as cores prim\u00e1ria, secund\u00e1ria, complementar prim\u00e1ria e complementar secund\u00e1ria.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/720\/1*rfxeQbkjuchy4Ef-eji3Xg.png\" alt=\"A captura de tela mostra a interface do Figma com o projeto \u201cProduto Demo \/ Vari\u00e1veis Figma\u201d. \u00c0 direita, o painel \u201cDesign\u201d mostra a configura\u00e7\u00e3o da p\u00e1gina com a cor de fundo \u201c#F5F5F5\u201d, 100% de opacidade e \u201cLocal variables\u201d destacado em azul. No centro, uma janela exibe uma tabela com vari\u00e1veis chamadas \u201cPrim\u00e1ria\u201d, \u201cSecund\u00e1ria\u201d, \u201cComplementar Prim\u00e1ria\u201d e \u201cComplementar Secund\u00e1ria\u201d, todas com o valor \u201cFFFFF\u201d.\"\/><figcaption class=\"wp-element-caption\">A imagem mostra a coluna com as vari\u00e1veis Color adicionadas.<\/figcaption><\/figure>\n\n\n\n<p>4.<strong> Adicionando as cores:<\/strong> Na coluna de <strong><em>Value<\/em><\/strong> podemos adicionar as cores que nossas vari\u00e1veis ir\u00e3o guardar. Tamb\u00e9m podemos trocar o nome <strong><em>Value<\/em><\/strong> para o nome do Cliente que estamos aplicando a cor. No exemplo, chamei de Cliente X.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/720\/1*Vi2Jpo-KOWTb3IIzNNz4Qw.png\" alt=\"A captura de tela mostra a interface do Figma com o projeto \u201cProduto Demo \/ Vari\u00e1veis Figma\u201d. \u00c0 direita \u201cLocal variables\u201d destacado em azul. No centro, uma janela exibe uma tabela com vari\u00e1veis chamadas \u201cPrim\u00e1ria\u201d, \u201cSecund\u00e1ria\u201d, \u201cComplementar Prim\u00e1ria\u201d e \u201cComplementar Secund\u00e1ria\u201d, cada uma com valores de cores hexadecimais diferentes na coluna \u201cCliente X\u201d.\"\/><figcaption class=\"wp-element-caption\">A imagem mostra a tabela de vari\u00e1vel com os valores de Color preenchidos<\/figcaption><\/figure>\n\n\n\n<p><strong>OBS:<\/strong> A cor complementar prim\u00e1ria ir\u00e1 sobre a cor prim\u00e1ria e por isso devem possuir um bom contraste entre si, o mesmo vale para as secund\u00e1rias. Quando formos criar um componente esse conceito ficar\u00e1 mais claro.<\/p>\n\n\n\n<p>5.<strong> <\/strong>Crie a vari\u00e1vel do tipo <strong><em>String<\/em><\/strong>. Na coluna de <strong><em>Name<\/em><\/strong>, nomeie a vari\u00e1vel de Nome da empresa, e na coluna do Cliente X, adicione o nome da empresa. Aqui chamei de App X.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/720\/1*WgcGFaKE9Zj5xgcLdvUf3A.png\" alt=\"A captura de tela mostra a interface do Figma. \u00c0 direita o bot\u00e3o \u201cLocal variables\u201d destacando em azul. No centro, uma janela com o t\u00edtulo \u201cCollection 1\u201d e \u201cAll variables\u201d indica a cria\u00e7\u00e3o de vari\u00e1veis reutiliz\u00e1veis. O bot\u00e3o \u201c+ Create variable\u201d est\u00e1 selecionado e abaixo aparece um menu com os tipos de vari\u00e1veis dispon\u00edveis. A variavel String est\u00e1 selecionada em azul.\"\/><figcaption class=\"wp-element-caption\">A imagem mostra como adicionar a tabela a vari\u00e1vel&nbsp;String.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/720\/1*B1DGHX0TbELqvazNcnU0-A.png\" alt=\"A captura de tela mostra a interface do Figma com o projeto \u201cProduto Demo \/ Vari\u00e1veis Figma\u201d. \u00c0 esquerda, h\u00e1 uma lista de camadas. \u00c0 direita, o painel \u201cDesign\u201d destaca \u201cLocal variables\u201d. No centro, a tabela de vari\u00e1veis exibe \u201cPrim\u00e1ria\u201d, \u201cSecund\u00e1ria\u201d, \u201cComplementar Prim\u00e1ria\u201d, \u201cComplementar Secund\u00e1ria\u201d e \u201cNome da empresa\u201d com seus respectivos valores, incluindo \u201cAPEX\u201d para o nome da empresa.\"\/><figcaption class=\"wp-element-caption\">A imagem mostra onde inserir o valor da vari\u00e1vel&nbsp;String.<\/figcaption><\/figure>\n\n\n\n<p>6.<strong> <\/strong>Se voc\u00ea utiliza um arquivo separado como biblioteca\/Style Guide\/Design System, publique as altera\u00e7\u00f5es. V\u00e1 no menu lateral esquerdo e clique em <strong><em>Assets<\/em><\/strong>, depois no \u00edcone de livro da Biblioteca e clique em <strong><em>Publish<\/em><\/strong>, para publicar as altera\u00e7\u00f5es.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/720\/1*sYgCcrKyGGJlWjujmNOk_A.png\" alt=\"A captura de tela mostra a interface do Figma com o projeto \u201cProduto Demo \/ Vari\u00e1veis Figma\u201d. \u00c0 esquerda, a aba \u201cAssets\u201d est\u00e1 aberta (1), e \u201cLibraries\u201d \u00e9 selecionado (2). No centro, uma janela exibe bibliotecas dispon\u00edveis, destacando \u201cVari\u00e1veis Figma\u201d com 5 vari\u00e1veis e o bot\u00e3o \u201cPublish\u201d (3) em azul, pronto para publica\u00e7\u00e3o.\"\/><figcaption class=\"wp-element-caption\">A imagem mostra o caminho para publicar as altera\u00e7\u00f5es do Design&nbsp;System.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Aplicando as vari\u00e1veis aos componentes<\/strong><\/h3>\n\n\n\n<p>Depois de criarmos as vari\u00e1veis, \u00e9 hora de atualizarmos os componentes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Componentes<\/strong><\/h4>\n\n\n\n<p>No layout de um produto Whitelabel, existem alguns componentes que recebem as cores dos clientes, como por exemplo, bot\u00f5es, algumas cores de fundo, texto e por a\u00ed vai. Os componentes que recebem a cor do cliente devem ser vinculados \u00e0s cores das vari\u00e1veis.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Ainda dentro do seu arquivo de Design System, selecione o componente que deseja vincular \u00e0s vari\u00e1veis. No exemplo estou usando o componente de bot\u00e3o. Navegue no menu lateral direito e clique no \u00edcone de <strong><em>Styles and Variables. <\/em><\/strong>As vari\u00e1veis s\u00e3o as cores representadas no formato quadrado, e aparecem no topo da lista de cores.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/720\/1*1Iw7joj4yT2oRYTePV_75Q.png\" alt=\"A captura de tela mostra a interface do Figma com o projeto \u201cVari\u00e1veis Figma\u201d. \u00c0 esquerda, a barra lateral exibe camadas e componentes. No centro, h\u00e1 uma tela de design com o texto \u201cApp X, seu banco, como voc\u00ea precisa\u201d e um bot\u00e3o \u201cEntrar\u201d. \u00c0 direita, o painel \u201cDesign\u201d mostra propriedades do bot\u00e3o. Uma janela pop-up exibe a sele\u00e7\u00e3o de cores, destacando vari\u00e1veis de cor como \u201cPrim\u00e1ria\u201d, \u201cSecund\u00e1ria\u201d, \u201cComplementar Prim\u00e1ria\u201d e \u201cComplementar Secund\u00e1ria\u201d.\"\/><figcaption class=\"wp-element-caption\">A imagem mostra onde aparecem as vari\u00e1veis Color.<\/figcaption><\/figure>\n\n\n\n<p>2. Para o preenchimento do bot\u00e3o, utilize a cor prim\u00e1ria. Para o texto \u201cEntrar\u201d, utilize a cor complementar prim\u00e1ria. Nesse exemplo, conseguimos ver a import\u00e2ncia da cor complementar secund\u00e1ria contrastar bem com a cor prim\u00e1ria.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/720\/1*z8p1Mf3s2gJf3PEnd0pE3g.png\" alt=\"A imagem mostra um bot\u00e3o azul com a palavra \u201cEntrar\u201d no centro. Setas vermelhas apontam para a configura\u00e7\u00e3o de preenchimento (Fill) do bot\u00e3o no painel de propriedades \u00e0 direita. O preenchimento prim\u00e1rio \u00e9 azul claro (\u201cPrim\u00e1ria\u201d) e o preenchimento complementar \u00e9 preto (\u201cComplementar Prim\u00e1ria\u201d).\"\/><figcaption class=\"wp-element-caption\">A imagem mostra onde aplicar as cores prim\u00e1ria e complementar prim\u00e1ria.<\/figcaption><\/figure>\n\n\n\n<p>Fa\u00e7a o mesmo para todos os componentes que variam de acordo com a paleta do cliente.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Textos<\/strong><\/h4>\n\n\n\n<p>Agora vamos vincular os textos \u00e0s vari\u00e1veis.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Clique no texto que ser\u00e1 vinculado \u00e0 vari\u00e1vel. No exemplo que criamos, utilizamos o nome da empresa.<\/li>\n\n\n\n<li>Clique no bot\u00e3o <strong><em>Apply variable<\/em><\/strong><em>.<\/em><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/720\/1*EzTJnGEkwh0Hb7LNwTmLpw.png\" alt=\"A captura de tela mostra a interface do Figma com o projeto \u201cVari\u00e1veis Figma\u201d. \u00c0 esquerda, a barra lateral lista camadas e componentes. No centro, h\u00e1 um texto com a frase \u201cApp X, seu banco, como voc\u00ea precisa.\u201d \u00c0 direita, o painel \u201cDesign\u201d exibe as propriedades do texto, como fonte, tamanho, cor e alinhamento. A cor do texto est\u00e1 definida como preto (#000000).\"\/><figcaption class=\"wp-element-caption\">A imagem mostra onde aparece a vari\u00e1vel de String vinculada ao&nbsp;texto.<\/figcaption><\/figure>\n\n\n\n<p><strong>3. <\/strong>Selecione a vari\u00e1vel \u201cNome da empresa\u201d que criamos.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/720\/1*XFBOVH4keHQOdBQRW6phqQ.png\" alt=\"A captura de tela mostra a interface do Figma com o projeto \u201cVari\u00e1veis Figma\u201d. \u00c0 esquerda, a barra lateral lista camadas e componentes. No centro, um texto exibe \u201cApp X, seu banco, como voc\u00ea precisa\u201d. \u00c0 direita, o painel \u201cDesign\u201d mostra propriedades do texto, incluindo fonte, tamanho e cor. Uma janela pop-up mostra a vari\u00e1vel de texto \u201cNome da empresa\u201d com o valor \u201cApp X\u201d.\"\/><figcaption class=\"wp-element-caption\">A imagem mostra onde clicar para aparecer a vari\u00e1vel de&nbsp;String.<\/figcaption><\/figure>\n\n\n\n<p>Agora o texto est\u00e1 vinculado a vari\u00e1vel.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/720\/1*l1KcBugVmu75B5BsMJ-Qjw.png\" alt=\"A imagem mostra um texto no Figma com uma seta vermelha apontando para as configura\u00e7\u00f5es de texto no painel de propriedades. As propriedades incluem fonte \u201cInter\u201d, estilo \u201cSemi Bold\u201d, tamanho 16, espa\u00e7amento de 124%, e alinhamento. A vari\u00e1vel de texto \u201cNome da empresa\u201d est\u00e1 destacada em vermelho na parte inferior do painel de propriedades.\"\/><figcaption class=\"wp-element-caption\">A imagem mostra onde aparece a vari\u00e1vel de String vinculada ao&nbsp;texto.<\/figcaption><\/figure>\n\n\n\n<p>Pronto! Agora j\u00e1 temos nossas primeiras vari\u00e1veis e componentes criados!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Adicionando uma nova coluna de&nbsp;cores<\/strong><\/h3>\n\n\n\n<p>Agora que seu Design System est\u00e1 atualizado com as vari\u00e1veis, voc\u00ea recebeu a miss\u00e3o de adaptar seu prot\u00f3tipo Whitelabel para apresentar para o Subway.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Acesse seu Design System e abra a tabela de vari\u00e1veis. Clique no \u00edcone de + para criar um <strong><em>New variable mode.<\/em><\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/720\/1*xrT_TeQMYk8xtQdKCMXX0g.png\" alt=\"A captura de tela mostra a interface do Figma com o projeto \u201cVari\u00e1veis Figma\u201d. \u00c0 esquerda, a barra lateral lista camadas e componentes, como \u201cRectangle 16\u201d e \u201cimage 16\u201d. No centro, uma janela exibe a tabela de vari\u00e1veis, o bot\u00e3o + New variable mode, est\u00e1 destacado em vermelho.\"\/><figcaption class=\"wp-element-caption\">A imagem mostra onde clicar para criar uma nova coluna de&nbsp;Value.<\/figcaption><\/figure>\n\n\n\n<p><strong>2. <\/strong>Nomeie a coluna para o nome do cliente, no caso, Subway. Adicione as cores do cliente e o nome da empresa.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/720\/1*Y6sQr9rloeT4jYuZIqRFJQ.png\" alt=\"A captura de tela mostra a interface do Figma com o projeto \u201cVari\u00e1veis Figma\u201d. \u00c0 esquerda, a barra lateral lista camadas e componentes, como \u201cRectangle 16\u201d e \u201cimage 16\u201d. No centro, uma janela exibe a tabela de vari\u00e1veis com cinco linhas: \u201cPrim\u00e1ria\u201d, \u201cSecund\u00e1ria\u201d, \u201cComplementar Prim\u00e1ria\u201d, \u201cComplementar Secund\u00e1ria\u201d e \u201cNome da empresa\u201d. Cada vari\u00e1vel tem valores na coluna \u201cSubway\u201d, com cores hexadecimais como #009845, #FFCA08, #FFFFFF e #000000.\"\/><figcaption class=\"wp-element-caption\">A imagem mostra as cores e o texto alterado na tabela de vari\u00e1veis.<\/figcaption><\/figure>\n\n\n\n<p><strong>3. Publique as altera\u00e7\u00f5es.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Aplicando as altera\u00e7\u00f5es ao prot\u00f3tipo<\/strong><\/h3>\n\n\n\n<p>1.<strong> <\/strong>Abra o arquivo onde est\u00e1 seu prot\u00f3tipo Whitelabel (usaremos o arquivo Prot\u00f3tipo Vari\u00e1veis), acesse <strong><em>Assets<\/em><\/strong> e depois clique no \u00edcone do livro da Biblioteca, <strong><em>Updates<\/em><\/strong> e, por fim, <strong><em>Update All. <\/em><\/strong>Assim, todas as altera\u00e7\u00f5es feitas no Design System ir\u00e3o aparecer nesse arquivo tamb\u00e9m.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/720\/1*ZkIX4WNGldIerIQljiW6_w.png\" alt=\"A captura de tela mostra a interface do Figma com o projeto \u201cProt\u00f3tipo Vari\u00e1veis\u201d. \u00c0 esquerda, a aba \u201cAssets\u201d est\u00e1 aberta (1), e \u201cLibraries\u201d \u00e9 selecionado (2). No centro, a janela \u201cUpdates\u201d exibe atualiza\u00e7\u00f5es para \u201cAndroid bars\u201d e \u201cprofile\u201d. \u00c0 direita, o painel \u201cDesign\u201d exibe propriedades da p\u00e1gina. O bot\u00e3o \u201cUpdate all\u201d est\u00e1 destacado em azul na parte inferior (4).\"\/><figcaption class=\"wp-element-caption\">A imagem mostra o caminho a ser seguido dentro do Figma para atualizar as mudan\u00e7as feitas no Design&nbsp;System.<\/figcaption><\/figure>\n\n\n\n<p>2. No menu lateral direito, no canto superior, selecione o \u00edcone de <strong><em>Change Variable Mode<\/em><\/strong>. Depois selecione <strong><em>Collection 1<\/em><\/strong> (voc\u00ea pode alterar esse nome depois, na sua tabela de vari\u00e1veis) e, por fim, selecione o nome do cliente que voc\u00ea quer aplicar as cores, no exemplo Subway. E a m\u00e1gica acontece! Cores e textos alterados, com 1 clique.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/720\/1*2s6xThWhq8ftaC6yt70DLw.gif\" alt=\"A captura de tela mostra a interface do Figma com o projeto \u201cProt\u00f3tipo Vari\u00e1veis\u201d. \u00c0 esquerda, a barra lateral exibe a p\u00e1gina \u201cProt\u00f3tipo\u201d e a se\u00e7\u00e3o \u201cHome\u201d. No centro, um prot\u00f3tipo de tela de aplicativo exibe uma sauda\u00e7\u00e3o \u201cBom dia, Helo\u00edsa\u201d com a foto de perfil, seguido pelo texto \u201cApp X, seu banco, como voc\u00ea precisa\u201d e um bot\u00e3o \u201cEntrar\u201d azul. \u00c0 direita, o painel \u201cDesign\u201d destaca a op\u00e7\u00e3o \u201cChange variable mode\u201d. Ao clicar no bot\u00e3o Subway, a cor da tela \u00e9 alterada.\"\/><figcaption class=\"wp-element-caption\">Gif mostrando troca de cores utilizando vari\u00e1veis.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/720\/1*T246liwfqsYj0xJNNtFD0g.gif\" alt=\"A imagem mostra um layout de design no Figma com v\u00e1rias telas de um aplicativo m\u00f3vel organizadas em uma grade. As telas incluem diferentes etapas e interfaces. As telas mudam de cor quando as vari\u00e1veis s\u00e3o alteradas.\"\/><figcaption class=\"wp-element-caption\">Troca de cores utilizando vari\u00e1veis em v\u00e1rias&nbsp;telas<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Os ganhos dessa implementa\u00e7\u00e3o<\/strong><\/h3>\n\n\n\n<p>\u00c9 claro que essa toda essa implementa\u00e7\u00e3o n\u00e3o foi f\u00e1cil e nem feita do dia para a noite. Ainda temos muito a aprimorar no nosso Design System, por\u00e9m, \u00e9 um esfor\u00e7o que recomendo que seja feito, principalmente se voc\u00ea necessita estar trocando cores e testando modelos para serem apresentados para um cliente ou poss\u00edvel cliente.<\/p>\n\n\n\n<p>Esses foram os principais ganhos observados nessa atualiza\u00e7\u00e3o:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Qualquer pessoa com conhecimento b\u00e1sico de Figma consegue trocar as cores, isso<\/li>\n\n\n\n<li>facilitou para o time de vendas e at\u00e9 para os P.O.s testarem e apresentarem layouts, gerando<\/li>\n\n\n\n<li>agilidade na constru\u00e7\u00e3o de prot\u00f3tipos para venda dos nossos produtos, al\u00e9m de criar a<\/li>\n\n\n\n<li>possibilidade de incluir o cliente no processo de cria\u00e7\u00e3o e experimenta\u00e7\u00e3o, fazendo a<\/li>\n\n\n\n<li>chance de fechar neg\u00f3cio aumentar significativamente!<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>B\u00f4nus<\/strong><\/h3>\n\n\n\n<p>Estou compartilhando os links dos arquivos que criei para exemplificar o processo descrito no passo a passo deste artigo. Sinta-se \u00e0 vontade para explorar os arquivos e test\u00e1-los:<\/p>\n\n\n\n<p><a href=\"https:\/\/www.figma.com\/design\/n5JN6tAQxcednalxbTyyyC\/Vari%C3%A1veis-Figma?node-id=15-74&amp;t=XUeSvRrtenwikn2b-1\">Exemplo de Design System Figma<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/www.figma.com\/design\/eRCqoMPiUdNPAx8EqTm7oE\/Prot%C3%B3tipo-Vari%C3%A1veis?node-id=5-29&amp;t=HNv61DI2wty0I81F-1\">Exemplo de Prot\u00f3tipo Figma<\/a><\/p>\n\n\n\n<p>\u00c9 isso, espero que tenham gostado! Compartilhem comigo se voc\u00eas tamb\u00e9m j\u00e1 utilizaram as vari\u00e1veis, como voc\u00eas aplicaram e se elas tamb\u00e9m ajudaram voc\u00eas a acelerar processos! Obrigada por terem chegado at\u00e9 aqui!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Refer\u00eancias:<\/h4>\n\n\n\n<p><a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/15339657135383-Guide-to-variables-in-Figma\"><strong>Guide to variables in Figma<\/strong><br><em>Before you Start Who can use this feature Variables in prototypes and publishing variables to team libraries are\u2026<\/em>help.figma.com<\/a><a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/15339657135383-Guide-to-variables-in-Figma\"><\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/14506821864087-Overview-of-variables-collections-and-modes\"><strong>Overview of variables, collections, and modes<\/strong><br><em>Before you Start Who can use this feature Anyone on any plan can create and use variables The number of modes you can\u2026<\/em>help.figma.com<\/a><a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/14506821864087-Overview-of-variables-collections-and-modes\"><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Descubra como a implementa\u00e7\u00e3o de vari\u00e1veis no Figma transformou o processo de design na nossa empresa, reduzindo dias de trabalho para apenas 2 minutos e impulsionando significativamente a prospec\u00e7\u00e3o de clientes. Este artigo detalha o passo a passo para integrar vari\u00e1veis no Design System, destacando como essa pr\u00e1tica pode economizar tempo, criar prot\u00f3tipos Whitelabel flex\u00edveis e melhorar a personaliza\u00e7\u00e3o para clientes. Aprenda a aproveitar ao m\u00e1ximo essa funcionalidade poderosa do Figma e veja como ela pode revolucionar seu fluxo de trabalho de design.<\/p>\n","protected":false},"author":5,"featured_media":111,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[8,15,9,16,17],"class_list":["post-24","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-design","tag-design-system","tag-figma","tag-produtividade","tag-variaveis"],"_links":{"self":[{"href":"https:\/\/blog.rubcube.com\/index.php\/wp-json\/wp\/v2\/posts\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.rubcube.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.rubcube.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.rubcube.com\/index.php\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.rubcube.com\/index.php\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":12,"href":"https:\/\/blog.rubcube.com\/index.php\/wp-json\/wp\/v2\/posts\/24\/revisions"}],"predecessor-version":[{"id":114,"href":"https:\/\/blog.rubcube.com\/index.php\/wp-json\/wp\/v2\/posts\/24\/revisions\/114"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.rubcube.com\/index.php\/wp-json\/wp\/v2\/media\/111"}],"wp:attachment":[{"href":"https:\/\/blog.rubcube.com\/index.php\/wp-json\/wp\/v2\/media?parent=24"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.rubcube.com\/index.php\/wp-json\/wp\/v2\/categories?post=24"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.rubcube.com\/index.php\/wp-json\/wp\/v2\/tags?post=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}