Transcrições
1. Apresentação: Você está trabalhando duro para
corrigir a inconsistência em seu design e procurando
unificar a experiência do usuário
em todas as plataformas Se você quer aumentar a escalabilidade do
seu sistema, então você está no lugar certo Neste curso,
usaremos o
token de design para uniformizar
todo o nosso projeto No início, daremos
adeus à nossa atualização do TDS. Assim como acontece com o token de design, alteraremos um token
e o veremos se espalhar
pelos Também deixaremos de reinventar
a baleia, assim como
os tokens que promoveremos para
reutilizar e agilizar o fluxo Ideal para designers de UIUX, designers de
produtos ou indivíduos que
desejam melhorar a eficiência e padronizar seu processo
de design Nenhum conhecimento prévio do
token é necessário, mas um conhecimento básico
do Figma é útil Por fim, também preencheremos a
lacuna entre a comunicação do design
criando uma linguagem comum para sua
equipe. Vamos começar.
2. Seu projeto do curso: À medida que
avança no curso, você praticará
criando seu próprio token de
design no Figma Faça o download do arquivo Figma para obter o
token de design fortuden dot. Este arquivo tem uma abordagem prática que permite que você
desenvolva habilidades em tempo real e garanta domínio de cada um dos
conceitos à medida que são ensinados. Então, depois de abrir o arquivo, é
assim que ele se parece. Você pode ler o
nome do arquivo na parte superior, criar tokens
entre colchetes para estudantes, e se eu ampliar um
pouco o arquivo, você experimentará isso Eu intencionalmente tornei este em cinza para que você possa criar o token e
aplicá-lo à medida que
avançamos no curso
3. O que são tokens de design: O que são tokens de design? O token de design tem
tudo a ver com gerenciar as propriedades de design e o valor de um alinhamento diferente
nos sistemas de design Olhando para o cartão agora, ele tem alguns dos
elementos da interface do usuário presentes nele. Um deles é o cartão em si. O segundo é o texto. O terceiro é o botão. Agora, cada lamento da interface do usuário tem uma propriedade
associada a ele Um cartão pode ser redondo, um texto com cor, tamanho e assim por diante. Um botão também tem cor,
tamanho, espaçamento, preenchimento e assim por diante Cada um desses valores está
dentro do token. Esse valor pode ser representado
na forma de cor, número, tensão ou booleano Em geral, temos
três tipos de tokens. Um é o token primitivo, o token eeny e
os tokens componentes Vamos ver os
tokens primitivos em detalhes.
4. Tokens primitivos: A cor é um
dos símbolos primitivos mais
usados em qualquer sistema de design Também é conhecido como
tokens globais. Vamos criar alguns tokens
primitivos. Há duas maneiras de
criá-lo. Uma é manual e a
segunda é a camada automática. Clique em qualquer lugar da
tela e entraremos à
direita e clicaremos
nesta, ken variables. Você pode clicar
em qualquer lugar nesse espaço. Vou abrir a
mesma caixa dial-up. Você o cria manualmente, clica na
variável de nota e seleciona a cor. Vou te dar um
nome de 500 aqui. É desta vez. Se abrirmos esse piloto de cores, podemos simplesmente selecionar
qualquer cor, perder essa e a
variável agora será criada. Agora, criar essa caneta
dessa maneira é demorado. Clique com o botão direito e vamos
deletar essa coisa. Em vez disso,
faremos isso de forma inteligente. Vá até a barra de ferramentas e selecione
essa ação de chamada de botão. Você pode usar um atalho Control K ou, se estiver no Macintosh, pode usar o Command K. Vá
até o plug-in e use esse plug-in chamado
The Você pode usar qualquer plug-in
, desde que ele permita
gerar as variáveis. Eu tenho a cor Ph à mão com você. Copie essa primeira cor.
Insira a guia de cores e limpe as variáveis.
Esse é o primeiro. Vamos fazer esse exercício para
as variáveis de segunda cor, Bightd, copy, faced e created
. Agora, o que acontece? Quando clico
na variável local, não
encontramos nada. Mas se você
clicar nesse menu suspenso, ele tem uma seção
chamada cores e cria
automaticamente todas as variáveis que
estamos procurando. Esses são todos os nossos tokens
primitivos. Agora vou renomear essa coisa como primitiva para que seja
fácil de entender Neste,
clicarei duas vezes, digamos, primário, e neste
clique duplo, secundário. Criamos nossas
primeiras aberturas primitivas.
5. Crie variáveis: Depois de executar o plug-in do gerador de
cores básicas, você verá algumas
mudanças sutis na interface. Se eu clicar
em qualquer lugar da tela, e se eu for para o lado
direito, você pode ver no estilo de cores que, anteriormente, essa
seção estava em branco. Agora eu tenho um estilo azul, bem como o estilo amarelo
, que estão surgindo aqui. Não queremos essa hierarquia. Então, o que vou fazer é
selecionar os dois
pressionando a tecla Sift e
clicando e arrastando para a parte superior No momento em que eu fizer essa ação, a base será
automaticamente apagada A próxima etapa seria criar esse estilo
para a variável. Para isso, usarei um plugin chamado
style to variable. Vou até a parte inferior
e clico na ação. E aqui na parte superior, você verá de estilo a variável. Quero dedicar algum tempo e
procurar por este. Agora, você verá vários
plug-ins chegando, mas o que
estamos usando é esse. Então, vou mostrar os
detalhes para que estejamos todos na mesma página e você também tenha
a mesma experiência. Este é um plugin muito bom. Eu já
tentei várias vezes. Então, deixe-me pressionar Escape e eu
voltarei para minha tela. Agora, vamos executar esse plugin e abrir a variável
no lado direito Agora é aqui que
a mágica acontece. Ele dirá qual
coleção você deseja criar, pois não temos nenhuma
coleção em nossas variáveis, então direi que queremos criar uma coleção e quero
dar um nome primitivo No momento em que clico em Criar, foi
isso que aconteceu. Ele criou automaticamente
todos os tokens primitivos que são necessários
para nosso sistema de design No entanto, ainda
exigiu algum refinamento, o que faremos em
apenas alguns segundos. Mas você pode imaginar bem, um, dois, e vamos
criar mais sobre isso. Agora deixe-me sair X daqui e
deixe-me também sair daqui.
6. Tokens de ajuste fino: Para ajustar nosso token, vamos até a seção de
variáveis, clique nela e descubra. Quais são todos os tokens que temos
agora? Nós temos um azul. Temos um amarelo no lado
esquerdo como grupo
e, dentro dele,
temos os tokens. Agora, o azul é muito genérico. Vamos renomeá-lo para primário. Então, isso adicionará mais
contexto, e o amarelo, eu quero torná-lo
secundário. Selecione o principal. Quero remover o
hífen azul do texto. Ou eu faço isso
manualmente ou
podemos usar um plug-in para automatizar
isso de acordo com nossa necessidade Deixe-me sair daqui. Deixe-me ir para a
área de plug-in, que é ação, e vou até o plug-in e o
widget e usarei o plug-in chamado variável de renomeação
em lote Para ter certeza de que você está
na mesma página, mostrarei os
detalhes do plugin. Este é o plugin em que estou usando. Deixe-me executar esse plugin. E deixe-me ir para
o lado direito e abrir a variável. Agora vou manter a
coisa lado a lado. No lado direito,
copiarei o texto que
desejo encontrar e clicarei
nas alterações de visualização. Na parte inferior, você pode ver, deixe-me remover essa coisa para que
você possa vê-la com mais clareza. Está fazendo exatamente
o que precisamos? Ele está removendo o
traço azul, do lado direito do lado de dentro. Agora, para vê-lo em andamento, vou rolar para baixo
e aplicar as alterações. Deixe-me manter os dois lado a lado. Deixe-me rolar para baixo
e aplicar as alterações para que você possa ver diretamente
dentro dela remover Bj Vamos para o secundário. Deixe-me ver como parte
disso. Revise as alterações. Novamente, clique nas alterações
aplicadas. Agora estamos em uma posição em que
os tokens são algo que eu adoro usar e
podemos escalá-los ainda mais à medida
que aprendemos no curso
7. Tokens primitivos adicionais: Queremos adicionar um token primitivo
adicional
à nossa coleção primitiva. Agora, o que isso significa. Deixe-me ir para o lado direito
e abrir a variável. Portanto, temos uma coleção
cujo nome é primitivo. Você pode ver no
canto superior esquerdo
e, dentro desta coleção, quero adicionar alguns tokens mais
primitivos a esta Agora vou sair daqui e fazer o exercício semelhante ao que
fizemos alguns
vídeos atrás. Então, vou para o
lado direito e gerarei os estilos que queremos que sejam
necessários para criar o token. Mas antes disso, você precisa
fazer uma verificação de sanidade, remover esse amarelo e azul aqui para que não precisemos que esse
veado seja regenerado Vá um por um. Deixe-me
copiar esse primeiro. Desça, vá para a base do gerador de
cores. E aqui eu posso gerar. Vou até o material, né, é isso
que estamos usando, uso o mesmo e posso simplesmente
clicar em Criar Estilo. Número um, farei
isso rapidamente para todas as
coisas, uma por uma. R: vamos voltar e
verificar isso. Agora temos todos eles,
verdes, azuis, tudo bem. E vou selecionar
um, dois, três, quatro pressionando
a tecla Control, selecionar e colocá-la no topo, para que não precisemos dessa hierarquia Agora, a parte mais complicada aqui é vou usar o mesmo
plugue que usamos,
que é de estilo a variável, mas desta vez, você
precisa ser um pouco Agora, aqui ele perguntará em qual coleção
precisamos adicionar? Se eu for para o lado direito
e abrir a variável, você verá que temos uma coleção
chamada primitiva, então eu posso selecionar a primitiva no
menu suspenso E o segundo é o modo. Agora, esse valor
não é nada além do que está vindo
aqui no lado direito. Eu não dei nenhuma asa, então vou apenas dizer luz e vou usar o mesmo texto aqui. Agora vou criá-lo e
atualizá-lo e você poderá ver em um momento
todos os quatro laranja, azul, marrom e verde aparecendo
aqui. Agora vou renomeá-lo rapidamente como fizemos este exercício
e concluí-lo para você Concluí as alterações e é assim que nossa saída
final se parece. Temos vídeos primários e
secundários nos vídeos anteriores que
criamos e
adicionamos com sucesso o
token adicional, como aviso, informação, sucesso e erro à forma como
queremos que pese
8. Mover a solução alternativa de Tokens: Queremos criar tokens Sal
primitivos para nosso sistema de design que nos
ajudarão a oferecer suporte
às mensagens de aviso, mensagens informativas, mensagens de sucesso e
mensagens lm Agora, para fazer isso, seguiremos o mesmo procedimento,
mas há um problema. Veja em nossas variáveis locais, atualmente todos os nossos tokens
primitivos, tentamos agrupá-los em uma
coleção chamada primitiva Quaisquer que sejam os novos tokens
primitivos que
criamos , também estão dentro
dessa coleção específica Mas se eu sair daqui e fizer esse exercício mais
uma vez, copie, faremos esse tom
chamado ação,
selecionaremos o gerador de cores Tin CSS, criaremos uma pasta e
criaremos variáveis. Agora que as variáveis são criadas, vou tirar X daqui. Se eu voltar novamente, para a variável local, não
verei esses
tokens chegando aqui. Em vez disso, ele criou um grupo de coleções
adicional, cujo nome é a
cor na parte superior. Aqui, onde você pode ver todas as variáveis que
estamos procurando. No momento da gravação, não
há mecanismo para mover
uma coleção de variáveis ou tokens de um grupo para outro grupo ou de uma coleção para
outra coleção. Agora, para corrigir isso, estou usando uma solução alternativa que
gostaria de compartilhar Vou deletar essa coisa primeiro. Tudo bem, vou renomear Pim
para duas cores porque é
isso que a pasta da coleção B
Deford é gerada pelo CSS tailwind Se eu sair daqui e
fizer o mesmo exercício, que fiz, fazer uma pasta e criar
variáveis
mais uma vez e pronto, a
criação estará feita. Agora, se eu for às variáveis locais, você pode ver que elas vêm dentro da mesma coleção
que estamos procurando. Vou repetir esse exercício um por um para tudo
isso. Vou clicar duas vezes
e dizer aviso. E uma vez feito isso, vou renomear isso de
volta para primitivo Ao fazer isso, todo
o token primitivo vem dentro de uma única coleção e é exatamente
isso que
estamos procurando Eu concluí esse exercício e vou renomear essa
coleção de volta para primitiva
9. Mover quaisquer símbolos: Com os últimos atrasos do Wigma, agora você deve ser capaz mover uma variável de
uma coleção para outra coleção ou um token de uma coleção para
outra coleção Anteriormente, isso não
era possível. No entanto,
isso não é tão simples, mas podemos dar uma olhada nisso Vá até a
variável local, clique nela. Vou criar duas coleções
aqui. Esta é a coleção A. Fine. E eu vou criar uma variável aqui também,
que é uma cor. Vou colocar uma cor A aqui. Vou criar
mais uma coleção. Crie uma coleção e eu
vou dizer esta como B. Agora, um dos problemas
que eu quero destacar aqui é que
você só pode copiar e colar, a menos que
haja um token ou uma
variável dentro dela. Digamos, por exemplo, que
eu tenha uma coleção A, eu tenho um valor aqui,
certo, li copy. Se eu for para a coleção B, aqui não tenho nada. Não consigo
clicar com o botão direito do mouse e fazer uma pasta. Você precisa ter pelo
menos um valor dentro dessa
coleção específica. Tudo bem. Agora, se eu escrever “
clique e cole”, isso me permitirá colar
a cor
A da coleção A. Isso não se
limita apenas à cor. Você pode usar qualquer
variável nesse caso. Digamos que eu desça e clique em Criar variável e desta
vez eu crio um número. Eu criei essa variável ou token dentro da coleção
A. Eu posso clicar com o botão direito do mouse, copiá-la, ir para a coleção B e
fazer uma pasta da mesma forma. Uma das desvantagens aqui é
que, depois de copiar e colar, você precisa excluir esse
valor da coleção A. Durante a gravação, não
temos uma opção de corte nesse menu
específico Sem dúvida, no futuro,
eles poderão adicioná-lo. Está evoluindo muito rápido. Ok.
10. Token semântico: token sincronizado
normalmente faz referência um token e um
nome primitivos com base no
contexto de suas visualizações Eles também são chamados de camada abstrata dos tokens. Vamos aprender com uma analogia do catálogo de
contatos. Sempre que você deseja salvar um
número em sua lista telefônica, geralmente dá um nome
a esse número específico É fácil realizar
ações como ligação telefônica, messa ou videochamada Esse nome nada mais é do que um token
sintético que criamos. Há um contexto de que, para James, esse é o número
e, no futuro, se o número for alterado, você não altera
o nome da pessoa, atualiza o número
dentro desse token. Comece com um elemento CO de tokens primários ou, digo, tokens
primitivos Vou selecionar o elemento,
vá para a seção de aletas. Selecione a centena primária. Faremos a mesma coisa com
o botão e
aplicaremos uma borda aqui. No traço,
selecionarei 100. O token primitivo em si
não tem nenhum contexto. O que você quer dizer com centena
primária? Não sabemos onde usá-lo. Portanto, criaremos
um token semântico. Para fazer isso, vou até
a variável local. No topo, criarei uma coleção e darei o nome
de semanti Dentro disso, criarei
uma variável, variável de cor, darei a superfície primária
e darei um valor. Em vez de digitá-lo,
clicarei nele, selecionarei a biblioteca
e selecionarei cem Agora, isso indica que,
para esse token específico, estou me referindo à
centena primária como uma das variáveis Vamos fazer isso
pela fronteira. Vou criar
mais uma borda variável e vou me referir
à centena primária. Agora vou voltar e
mudar essa cor. Aqui, em vez de 100, usarei nosso
token semântico. Vou rolar para baixo. Este é o nosso token semântico, criamos o Surface
primário aqui também, vou selecionar a superfície primária Neste caso, vou selecionar
uma borda, rolar para baixo, e essa é a borda. Como já aplicamos
nossos tokens semânticos, é fácil gerenciá-los Agora eu quero mudar
a cor
de fundo desses dois UIL Mn Um é o cartão, o segundo
é o botão, mas eu não quero
mudar a borda. Anteriormente, isso não era
possível porque todos esses três estavam conectados
ao 100 primário. Por causa do token semântico, tudo o que preciso fazer é
ir aqui em vez de 100, vou apenas dizer que vou
clicar neste Digamos que eu queira
alterá-lo para 400. É isso mesmo. Isso mudará
em todo o sistema. Você não precisa fazer isso manualmente
e é fácil de gerenciar.
11. Prática de token semântico: Olhando para esta tela agora, quero que você faça
uma pausa e pense quais são todas as diferenças semáticas que
podemos criar Temos uma mensagem. Podemos
criar um token para ícones, plano
de fundo,
arredondamento e espaçamento Sempre que você cria um
token semântico ou um token de alias, ele deve estar
associado a um contexto claro O token deve ser específico
o suficiente para responder como, onde ou quando ele deve ser usado. Eu criei um nome de token como texto, mas esse token é muito
genético e não tem valor. Você não sabe simplesmente
onde usar esse texto. Você quer
usá-lo como primário? Você quer usá-lo como
secundário ? Isso
não faz sentido. Quando você criará
um token semântico, certifique-se de adicionar
um contexto a ele Eu adicionei valor ao
nosso token semântico, e é assim que ele se parece Então, no texto que é primário, sabemos que isso pode ser
usado como texto primário. Também temos um
texto secundário, como PM e SNI. Ambos estão
no texto secundário. Então, eu tenho texto não secundário. Além disso,
tenho um plano de fundo para poder usar a superfície sob quadrado primário para dar
mais contexto ao ícone Posso usar o ícone do
clima
que é SNI porque,
se não quisermos
criar, tenho uma categoria de ícones que é usada especificamente
para o clima Eu usei a
nomenuclatura, clima,
como parte do grupo, depois o elemento
e, em
seguida, o contexto em que
está Vamos tentar criar os tokens
semânticos e aplicá-los. Vou para minha
variável local, clique em combater. Já criamos
dois tokens semânticos. Atualmente, estou no grupo de coleta de
tokens semânticos e tentaremos
criar mais três Um é o texto primário. Bolo, duplicado. Podemos tornar isso secundário. Mais uma duplicata, e
faremos esta como
um traço climático, ícone de traço ensolarado Vamos vincular este.
Então, para o texto
principal vá até a biblioteca e vá para a seção em que
temos a cor cinza. Dessa forma, isso é fácil de encontrar. Vamos marcar este como
950 para texto secundário. Novamente, escolha o cinza
que temos e, para isso, acho que 500 deve ser bom. Quanto ao clima, acho
que 500 na
seção de aquecimento deve ser bom. Sim. Vamos selecionar esse. Vá para a
seção de cores de preenchimento aqui, está? Podemos aplicar aqui o
scroll na parte inferior, temos a superfície primária, selecione esta, vá para baixo, superfície primária para
esta, para esta, bem
como este número, bem
como esta ou
desta coisa quatro
pressionando a tecla Control, eu posso selecionar uma por uma. Agora vamos entregá-lo ao texto primário, PM, bem como ao Sunny. Eu quero fazer esses
dois como secundários. Deixe-me ir aqui, mande uma mensagem para o
secundário. Tudo bem. Nós nos referimos a esse ícone. Acho que posso descer, selecioná-la e dar uma cor
que é onde ocorre bem. Substantivo Aqui, acho que essa
ferramenta parece diferente. Tudo bem. Vamos copiar essa coisa, clique com o botão
direito, copie a propriedade, selecione esta, clique com o botão
direito e crie sua propriedade de colagem.
Isso parece bom. Em vez de maiúsculas, precisamos de um caso de sentença. Tudo o que você faz é selecionar
este, ir até o canto inferior
direito aqui e torná-lo um
local ensolarado e que fique bem,
e eu acho que eles são bons.
12. Nomeação de token: À medida que nosso sistema de design
continua crescendo ao longo do tempo, precisamos de uma convenção de
nomenclatura aprimorada para gerenciá-lo de forma eficaz Nomear tokens de design
é essencial para nosso sistema de design,
pois promove clareza, consistência, facilidade de manutenção
e colaboração eficaz e Clareza que permite que
você
se comunique instantaneamente e sua
finalidade e função. Consistência, você
deve ser capaz de
navegar facilmente dentro
do sistema
de design aumentar sua eficiência. Você deve permitir
a manutenção fácil
do sistema de design, facilitando a atualização
a longo prazo. Com relação à colaboração, ela permite que você promova uma melhor comunicação
e colaboração. Então, sempre que eu quero
dar um nome aos meus tokens,
é isso que eu uso. Começo com a categoria, depois o conceito, a propriedade
e o modificador categoria e a
propriedade fornecem uma base sólida para a maior parte
da convenção de nomes de tokens. Por exemplo, cor primária, em que a cor é uma categoria e a primária é uma
das propriedades. À medida que avançamos, queremos aumentar nossa coleção de tokens à medida que nosso sistema de design também cresce. Portanto, precisamos dividir
nossos tokens em subconjuntos. É isso que organizamos
nos conceitos. E o modificador é último nível
da nossa hierarquia de nomenclatura de
tokens Ele pode ser usado de forma independente ou pode ser combinado
com a categoria, conceito e a propriedade para dar um significado proposital
aos nossos tokens Nomear um token pode ser um desafio, mas eu sigo uma abordagem
sistemática que pode ser
refinada para atender às suas necessidades Não há um único tamanho
que se encaixe no formato. Depende totalmente de você com base na sua necessidade,
você pode escalá-lo. Mas, desde que você estabeleça um entendimento compartilhado entre a equipe multifuncional,
você está no caminho certo. Eu agrupei categoria, conceito e propriedade em uma base,
considerando a função, o estado da variante, escala e o modo como modificadores Para aprender isso,
vamos jogar um pequeno jogo. Neste jogo, sua tarefa é
colocar a ficha relevante
em um respectivo balde. Para fazer isso, primeiro,
selecionarei a cor e a
colocarei na categoria porque tenho uma elevação também como categoria, então
vou colocá-la lá. Então, eu tenho duas categorias agora. Para uma superfície, é mais
provável que seja uma propriedade, como um plano de fundo, então
vou mantê-la aqui. Mesmo assim, este também vai aqui. Isso é interpretado como um papel. Então, vou colocá-lo
neste local, e a sobreposição
também pode atuar como uma função, então vou colocá-la aqui E o é uma variante de uma superfície que
estou prestes a criar. Não há uma resposta certa ou
errada aqui. Depende totalmente de você
como você deseja colocá-lo. Mas, com o passar do tempo, automaticamente
se tornará
autoexplicativo como
usá-lo dessa maneira No anterior,
não usamos o conceito. Vamos dar um
exemplo com conceito. Eu vou para este lugar
em particular. Agora, aqui eu tenho uma cor, então vou arrastá-la e colocá-la
na categoria de cor. Vou colocá-lo em uma
categoria de conceito, e todas essas coisas, posso arrastá-lo e colocá-lo
sob a propriedade. Meu objetivo aqui é
mostrar uma
mensagem de feedback para meu usuário. E por causa disso, eu agrupo dentro de um
conceito chamado feedback. Também temos vários
textos em nossa tela. Um texto pode ser primário, mas outro texto
pode ser secundário. Portanto, precisamos ter
dois tokens para isso. Então, aqui, novamente, a cor também pode
ser aplicada sobre o texto, vou colocá-la em
uma categoria de cores. Dentro disso, em vez
do plano de fundo, desta vez estamos focando no texto, então
vou mantê-lo aqui O papel seria primário e haveria mais um
papel secundário. Agora, nosso token se
parece com isso. Anteriormente, era uma
superfície primária. Agora podemos
escrevê-lo dessa forma. Superfície colorida do traço,
traço primário, etc.
13. Variante e dimensionamento: As variantes
favorecem a criatividade do design e, ao mesmo
tempo, permitem flexibilidade
e escalabilidade em nosso sistema de tokens Sempre que você cria uma variante, é mais provável
que seja qualquer um desses modificadores,
repetindo-se várias Temos uma variante
do nosso histórico. Eu geralmente chamo o
plano de fundo de superfície, então escrevi como uma superfície
em vez de fundo. Ele tem quatro variantes diferentes. Um é o baixo,
que é por padrão, um é o mais baixo, o
hi e o mais alto. Vamos criar esse
token semântico em nosso sistema. Vou clicar nas variáveis
locais e começar a renomear essa coisa Cor, da superfície,
dT é a mais baixa. Eu posso copiar ou duplicar essa coisa quatro vezes e
vou renomeá-la Um é o mais baixo, o mais baixo, o
mais alto e o alto. Isso é alto, e
isso é mais alto. Para o mínimo, nós o manteremos 100. Essa gama 200, essa
eu darei 300, para esta, é mais
provável que eu nos dê 400 Vamos sair daqui e vamos tentar aplicar
isso em nosso design. Vou selecionar o primeiro. A moldura é selecionada. B, então eu posso aplicar
o mais baixo aqui. Aqui, eu posso tentar
aumentar a criatividade. Eu posso rolar para baixo e selecionar. Em vez do mais baixo,
podemos usar o mais baixo. Aqui também posso selecionar as cores cinza e posso
aplicar a mesma coisa aqui. Provavelmente o mais alto, e este que podemos fazer é um
dos mais altos. Dessa forma, você pode aprimorar sua criatividade
usando as variantes. Vamos entender o
tamanho em detalhes. Aqui está uma analogia simples. Imagine três xícaras
de café à sua frente com tamanhos
diferentes. Cada etiqueta com a quantidade de
café que pode conter é de 250, 405 ml Mas se você precisar alterar
a quantidade de café, essas etiquetas impressas não funcionarão porque não
são escaláveis Em vez disso, se rotularmos a
xícara como pequena, média e grande, podemos
alterar facilmente a quantidade de café sem nos
preocupar com a etiqueta fixa Isso torna as coisas muito mais fáceis de ajustar e
gerenciar ao longo do tempo. A mesma analogia se aplica ao
nosso sistema de design. Você pode aplicar pequenos,
médios e grandes, não apenas à fonte, mas a qualquer outro elemento em
nosso sistema de design. Por exemplo, temos um
tamanho de fonte como 24, 28 e 32. Mas, em vez de fornecer um tamanho fixo como
temos na parte inferior, podemos usar nossa analogia:
pequeno, médio e grande Podemos considerar isso o
primeiro como uma categoria, isso como uma propriedade e este como uma
das variantes disso.
14. Tokens de tipografia: Há algumas maneiras pelas quais podemos criar nossos tokens de
tipografia Uma das formas é manual, enquanto a segunda é
um pouco automática. Você faz isso manualmente.
Primeiro de tudo, você precisa selecionar
aquela para a qual deseja criar uma tipografia. Eu
selecionei esta E depois você vai para
a seção de tipografia e clica neste ícone
que diz aplicar Clique no botão Mais , que permitirá
criar estilo. Aqui você pode
escrevê-lo aqui como display , conforme está escrito na parte superior, com
a barra Grande Ao colocar uma barra, ele
criará automaticamente uma hierarquia Deixe-me clicar no
estilo de criação quando estiver pronto Se eu clicar nele, você
verá que o tamanho um estilo está dentro
da seção de exibição. Você pode fazer esse exercício um por um para cada
um,
mas esse é um processo de TBS Vamos criar o
estilo de forma inteligente. Em primeiro lugar,
excluirei o estilo existente clicando com o botão direito do mouse
e é um estilo de exclusão. Selecione todos os estilos, então eu vou clicar e arrastar
para fazer uma seleção. Vou usar um plugin para isso, desça e clique
neste botão de ação ou pressione Control K se
você estiver no Windows. Acesse o plug-in, ligue para o
Text Style Generator. Depois de terminar, ele criará um destyle
automaticamente para você Clique em qualquer lugar na tela e nossos estilos de texto serão criados. Abra a caixa de diálogo da variável. Para isso, vá até a variável
local, clique nela. Temos
duas coleções. Um é primitivo, o
segundo é semântico. Vou criar mais uma
coleção aqui clicando nesses três pontos e clicando
em Criar coleção. Vou dar um nome
como tipografia. X fora daqui. Agora,
tomaremos uma ação. Vou até o
botão de ação aqui, clico nele e executarei um plugin chamado variableiz X styles.
Clique sobre isso. Vou selecionar a
coleção que criamos recentemente,
que é tipografia, e quero que todos os
parâmetros sejam armazenados dentro do token e
clicarei no botão Criar Tudo pronto. Deixe X sair daqui. Vamos voltar para a variável
e verificá-la novamente. Aqui agora em nossa coleção, que é tipografia, temos todo o valor que Vamos X sair daqui. Primeiro, a
coisa mais incrível aqui é que ele não cria apenas o
tipógrafo que ele representa para nós Em vez disso, também se aplica a ele. Se eu selecionar este, o texto e ir para o lado direito, dá para ver que não
vem do estilo, é aplicado diretamente
do próprio token Realmente incrível.
15. Espaçamento de Tokens: espaçamento no design se refere à área
vazia entre o
elemento, como texto, imagens ou componente de interface do usuário Ele desempenha um papel fundamental em
tornar um design estético, agradável, legível e utilizável Vamos criar nosso token de espaçamento
global. Eu irei para a variável local. E aqui temos
três coleções,
primitivas, semânticas
e Então eu vou para o primitivo. E dentro disso, queremos
criar nossos tokens de
espaçamento primitivos e adicionaremos uma subcategoria a essa coleção Em vez de fazer isso manualmente, vamos automatizar isso Então, deixe X sair daqui, vá até a ação, clique nela e procure o plugin chamado gerador de
variáveis em massa. Já temos nossa coleção, então selecionarei a existente e
selecionaremos a primitiva E o nome da variável, você pode ver no lado
direito está vindo de uma forma muito sutil Mas queremos criar
uma subcategoria, então vou usar o espaçamento como nome e criar
uma barra Essa barra é o que permite Figma criar uma subcategoria
dentro da coleção Começaremos do zero e aqui faremos a
alteração para quatro porque
precisamos de mais possibilidades aqui para que possamos refiná-las
em nosso token semântico Agora, tudo parece bom. Queremos fazer isso até 128,
acho que está tudo bem. E vamos clicar em gerar. Feito isso, vamos
para a variável local, mais
uma vez, para a primitiva, e aqui temos o espaçamento
como nossa E todo o valor ou todos os tokens que queremos
estão aqui em pouco tempo. Eu tenho valor agregado aqui, que criamos recentemente. Agora eu não
adicionei todos eles, apenas aquelas coisas com as quais
realmente nos preocupamos. Então, aqui queremos dar o
tamanho aos nossos tokens. Então, digamos que eu queira
dimensionar algo assim. Eu quero dizer que o token, que tem um espaçamento de oito, eu quero dizer isso como um pequeno Se for menor do que isso, quero contar
como extra pequeno
e, para dois, vou
dizer extra pequeno. Da mesma forma, se eu for para
a parte
superior , direi que, ok, para 16, quero fazer este com um espaçamento de tamanho
médio 24 é grande, 32 é extra grande. E se eu for um
pouco mais longe, 64 é o dobro do Excel. Agora, vamos criar
esse token semântico. Para fazer isso, vou
até nossa variável local, clicar nela, ir
até a semântica e aqui tentaremos criar
uma subcategoria dentro dela Crie uma variável. E desta vez, selecionaremos o número. Queremos dar a essa cor. Desculpe, queremos
dar aqui como espaçamento, então vou colocar espaços
extra pequenos e pressionar Enter Você vê no lado esquerdo, a categoria foi criada. Clique sobre isso. Com o botão direito, clique nesse valor e duplique-o. Portanto, você deseja duplicá-lo pelo
menos cinco a seis vezes, então farei esse
exercício rapidamente Então, aqui temos um extra pequeno. Eu vou torná-lo capital. Extra pequeno, então
temos extra pequeno,
pequeno , médio,
clique duas vezes, grande, extra grande. E o dobro extra grande. Isso é
suficiente a partir de agora. Você pode até adicionar mais à medida que avança em sua jornada
de design. Então, no
lado direito, iremos para esse ícone onde
selecionaremos nossa variável. Então, aqui na lista
dos mais pequenos, queremos fazer com que sejam dois que
não temos no momento,
então vamos deixar para lá. Para os mais pequenos,
faremos deste em quatro. Isso se torna pequeno, temos um valor de oito. Para médio, temos
um valor de 16. Para grandes,
faremos deste como 24. 32, acho que 32, vamos
verificar primeiro. Então, para grandes, temos 24. Ok, vá para a parte de trás. Essa é a razão pela qual fazemos esse exercício. 24 para que não
percamos nada. Então 32 é muito grande. Então aqui está 32 que
se torna extra grande. E para o Excel duplo, faremos deste como 64. No entanto, este permanece, então vou para o lado
esquerdo, vou para o token primitivo, vou para o espaçamento e
criarei um desses aqui Então eu vou até a parte inferior, clique com o botão
direito, crie uma duplicata, e essa seria 002, e o número também está
aqui, vou colocá-lo como Vá para o token semântico e
mapearemos esse valor aqui. Então aqui, role para
baixo e devemos ter 002 na
lista aqui está Então é assim que criamos nosso símbolo semântico
para nosso espaçamento Então, vamos tirar um X disso e
vamos aplicá-lo ao nosso design. Selecione o alinhamento no qual
você deseja adicionar espaçamento. Então, vou selecionar este cartão. E dentro deste
cartão, vou para o lado esquerdo e
selecionarei o conteúdo. No layout automático, temos algum espaçamento aqui Selecione este ícone, que
diz aplicar variável, clique nele, role para
baixo e selecione 16. Da mesma forma,
faremos esse exercício. Certifique-se de não
selecioná-lo do primitivo. Eu vou te dizer em algum momento
como gerenciar isso, mas role para baixo e
selecione 16 aqui. E da mesma forma aqui, você verá uma lista suspensa. Clique sobre isso. E então você verá um valor
chamado variável Ople Então, depois de clicar
em Aplicar variável, role para baixo e
selecione meio aqui. Agora, no futuro, se você quiser mudar a definição de meio, digamos que, se eu
voltar, anteriormente, esse era o nosso meio. Agora eu digo que não queremos
dizer 16 pixels como nosso meio. Queremos dizer 20 como meio. Nesse caso, tudo o que você precisa fazer é me deixar ampliar um pouco para que você
possa ver com mais clareza. Vá para a variável local. Vou colocá-lo um pouco longe
daqui para que você possa realmente
ver o que acontece. Então, se eu for para o meio, deixe-me sair de você. E aqui temos o valor de 16. Tudo o que estou dizendo é que,
em vez de 16 como meio, considere 20 como meio. E no momento em que eu faço
isso, isso ganha uma mudança. Agora imagine que você tenha usado esse tipo de coisa
em todo o sistema de design. É aí que os tokens
se tornam muito poderosos. Você não precisa alterá-lo
manualmente. Basta alterar a
definição do que é
o meio com
base na analogia do copo e pode mudar facilmente
em todo o sistema Então, vou voltar para o
16 neste momento. Você também pode
aplicá-lo ao botão. Então aqui, neste caso,
deixe-me ir para a esquerda e para o
lado, selecionar o botão e, no
lado direito, podemos dizer:
Ok, aqui já
atribuímos 16 pixels. Isso é bom. Aqui podemos descer
rapidamente e fazer o
mesmo exercício rapidamente. E aqui está oito, então vou rolar para baixo e
selecionar esse oito.
16. Gerenciamento de token: Então, na aula anterior, fornecemos nosso espaçamento, mas queremos gerenciar nosso
token com mais eficiência Vamos ver com um exemplo
do mundo real. Vou selecionar o cartão,
ir até o recipiente e ir para o
lado direito no espaçamento. Vou clicar no final. Você verá que o
cursor está piscando. Eu removerei o
valor simbólico que forneci e darei um valor
fixo para o time bean. Agora, quando clico
nessa variável de aplicação, você pode ver que já estou
vendo a primitiva, bem
como meu token semático Agora, quero que o membro da
minha equipe veja apenas esse
símbolo semântico porque, no passado, muitas vezes, consciente
ou inconscientemente, equipe selecionou
um dos valores daqui e as
coisas que lançamos Agora, para evitar isso,
existe um dos ótimos
recursos do InFigma chamado escopo Então, deixe-me clicar lá fora. Vá para a variável local, vá para a primitiva,
nossa coleção e onde temos espaçamento Agora, aqui no lado
direito, você pode ver que quando eu passo o mouse sobre ele,
eu recebo um ícone de configuração sombrio, que é uma variável de edição Quando clico neste
, recebo um escopo e ele dirá onde você deseja que essa variável
fique visível. Então me deixe X sair daqui. Então, vou selecionar o
primeiro. Role para baixo, pressione a tecla Shift e
selecione o último. E eu vou aqui e
clicarei em Editar variável. Agora, atualmente, ele está sendo
exibido em todos os lugares, então vou
desmarcá-lo e
garantir que o escopo esteja
selecionado em todos os lugares Então, agora, se eu for até o
topo e verificar novamente o escopo, ele deve ser
desmarcado, e tudo bem Então, o que
acabamos de fazer é dizer ao Figma que não mostre esse valor
sempre que o menu
suspenso abrir quando eu
seleciono meu espaçamento Então, vamos ver X daqui, ir até este cartão e
selecionar o conteúdo. Agora, se eu tentar aplicar aqui
o valor da variável, você verá que os únicos
tokens semânticos estão chegando Não existe um token primitivo. Portanto, mesmo acidentalmente, as pessoas não
poderão selecioná-lo.
17. Tokens de raio: Talvez não precisemos de tantos tokens que
usamos em nosso espaçamento. É aqui que
usamos o token de espaçamento. Temos um, dois, três, quatro, cinco, seis e sete. Para o raio, não acho que
precisemos de um extra pequeno, então vou remover este e acho que
não vou precisar desse
também, o dobro do Excel Vou remover este.
Para nosso token de raio, acho que esse valor de cinco
deve ser suficiente, mas você sempre pode alterá-lo Não há
caminho difícil neste caso. Então, vou para minha variável
local e aqui vou para
o token semântico Tchau, eu vou criar. Então, deixe-me rolar para baixo. Vou criar uma variável
desta vez novamente, um número, mas vou escrevê-la como
um raio extra pequeno Vá para o
lado esquerdo, clique nesse. Agora, clique com o botão direito do mouse em
duplicar esta hora do WiFi. Faremos isso rapidamente. Fino extra pequeno, extra pequeno, pequeno, médio, grande
e extra grande. E podemos mapeá-lo da mesma forma
que fizemos o espaçamento. Então, aqui vamos usar o mesmo token global
primitivo que temos Então, vamos fazer
deste um como quatro. Esse é oito.
Este tem 16. Isso pode ser em 24. Este tinha 32. Agora, vamos aplicar nosso
raio ao nosso cartão. Para fazer isso,
selecionarei o cartão, vou até o alument
chamado foto Paisagem No lado direito, posso ver o arredondamento na aparência e onde posso clicar
em Aplicar variável Mas desta vez, posso ver o
espaço e também o raio. Para evitar o erro, quero que o espaço não apareça aqui.
Vamos consertar isso. Vou clicar fora de
qualquer lugar na tela, ir até o topo e
clicar na variável local. Desta vez, vou entrar
na coleção semântica. É aqui que está nosso espaço. Vou selecionar todos eles
pressionando a peneira. A primeira, vá até o final, pressionando a tecla Shift, selecione a última e
clique na variável de edição. E aqui vou
definir o escopo. Então esse é o
segundo, clique nele. E eu quero que esse valor só
apareça quando houver uma lacuna. Então, sobre isso, deve
haver um pequeno espaçamento. Deixe-me sair
daqui. Isso é bom. E para o raio,
farei o mesmo exercício. E aqui eu quero que meu raio seja
exibido apenas no raio da esquina. Eu desmarquei esta, mostro
todas as propriedades suportadas e quero que essa variável
seja visível apenas na lista de raios dos cantos,
e pronto Vamos ao nosso cartão. Vamos selecionar a primeira, foto paisagem e, à direita,
na parte interna, conforme vou até a aparência
e clico agora, só vejo o raio Agora a vida parece fácil. Vou selecionar aqui como 16
pixels, isso deve ser bom. Aqui nesta placa, eu posso até mesmo fazer esta
como 16 Pixel 2. Deixe-me selecionar o
primeiro cartão mais uma vez. Eu apliquei em todos os lugares, 16 pixels, tudo bem, o que não é o caso. Eu quero que o raio
aqui não seja 16, então é zero aqui também,
é zero para que possamos
corrigir esse arredondamento Deixe-me sair daqui
e tudo bem. Na aparência, agora o raio do
canto é misto. Deixe-me abrir essa coisa
clicando neste ícone de seta
independente. Aqui colocamos o valor do código rígido. Em vez de colocar um código rígido, podemos passar o token aqui. Para isso, deixe-me fechar este e verificar se
temos esse token em mãos Eu vou até o raio,
não temos uma ficha igual a zero. Vamos criar um aqui. Clique no número, vou
colocá-lo como Z como zero, e o valor deve ser do nosso primitivo, pois este
é o primeiro tamanho zero, zero, zero. Isso soa bem. Deixe X sair daqui. Selecione a paisagem da foto, vá para a direita para dentro e vá para a aparência da área. Clique neste ícone, que
é um canto independente e aqui vou
selecionar o valor como zero. No futuro, se eu quiser dar
a volta, devo
ser capaz de fazer isso. Isso aumentará significativamente a escalabilidade do design
18. Tokens de design de componentes: O que são tokens
específicos de componentes? Um token específico do componente armazena e representa
explicitamente uma decisão de
design exclusiva e específica associada a um componente
específico Na tela,
temos dois componentes. Uma é a pesquisa, a segunda é
uma lista suspensa. Agora podemos bifurcar quais são
os diferentes componentes que um token
específico pode ser criativo Um valor de espaço reservado dentro do componente pode ser um token específico
do componente Uma borda, um ícone e até mesmo um texto de apoio para esse componente específico também
podem fazer parte dele. Um ícone de pesquisa também pode ser um token específico do
componente. Se você ver no lado direito, temos uma estrutura muito
semelhante que temos um valor de
espaço reservado, também pode estar dentro de
um token específico, uma borda está lá e um ícone também está Agora, existem muitos tokens específicos de
componentes. Vamos simplificá-lo
nos próximos minutos. Anteriormente, tínhamos duas
coisas em nossa lista. Uma é a base e a segunda
é o modificador. Como estamos lidando com o token específico do
componente, adicionei mais um
valor na hierarquia, que é o nome como objeto Dentro do objeto, temos
grupo, componente e elemento. Vamos aprender isso
com um exemplo do mundo real. Qual deve ser o
nome do token que define a borda de um
componente específico? Vamos descobrir isso. Vou dar um nome para começar com a pesquisa, então estamos direcionando
o componente de pesquisa Na pesquisa,
estamos direcionando uma cor, aquela para uma borda e para um estado padrão O segundo ganha V, este é um elemento em uma forma em
que estamos almejando uma cor, direta até uma borda,
e uma cor padrão Agora, desses dois, qual você acha que
é mais significativo, faça uma pausa e descubra A resposta é a
segunda, e veremos o porquê. O primeiro é muito
específico para a pesquisa. Já o segundo, não
é apenas específico
para a pesquisa, mas tem como alvo todo o
componente do formulário Para me aprofundar nos detalhes, deixe-me ampliar um pouco e ir
um pouco mais longe aqui. Agora, o primeiro
em que temos uma pesquisa, então esse é um componente. Dentro de um componente, eu tenho
uma categoria chamada cor. Estou visando uma fronteira de propriedade e estou em um estado de inadimplência Já no segundo,
estou segmentando um grupo, formulário, cor, propriedade
como borda e padrão Vamos dar outro
exemplo para isso. Aqui, você pode ver que eu
dei em forma de nome, entrada, cor e superfície. Agora, aqui estão duas
imagens que temos. Uma é a pesquisa e a
outra é uma lista suspensa. Na pesquisa, pretendo fornecer um
histórico específico à pesquisa Eu também posso escrever
isso dessa maneira. Aqui vou digitá-lo como pesquisa. E por enquanto, vou esconder essa coisa.
Agora, o que acontece? Se você fizer isso dessa forma, estará direcionando explicitamente
apenas para a pesquisa, token
muito específico
para a Mas, em vez de
fazer dessa forma, se o fizermos, escreva-o
como um formulário, para que ele tenha como alvo
não apenas a pesquisa se houver um campo de entrada em
qualquer lugar desse formulário
específico, ele também terá como alvo essa área. Portanto, seu token, sua força e sua escalabilidade
aumentarão drasticamente Então, fiz esse exercício para todas as propriedades respectivas que estamos visando
nesse token
específico de componente específico Então, deixe-me clicar e abaixar um pouco e você
poderá ver na tela. Se eu quiser segmentar um texto de espaço reservado
em um componente, estou usando uma
convenção de nome como Fm Em um formulário, se houver controle de entrada
MI e que
contenha texto de espaço reservado
, essa é a convenção de nome de
token que
devo usar e assim por diante Agora, a pergunta aqui é quais são os
tokens de rótulos de
componentes específicos que você pode criar?
Aqui está um exemplo. Em uma pesquisa, eu
tenho um ícone aqui. Agora, esse ícone
vem explicitamente
apenas da pesquisa e eu posso ter um token
específico para esse ícone Como eu posso fazer isso aqui é. Então, em vez de colocar em uma
categoria de grupo, colocarei esse nome em um componente para que ele
direcione uma pesquisa. Em uma pesquisa, quero dar uma cor e essa
a uma pesquisa de ícones. Da mesma forma, temos um ícone de cancelamento de consulta que
vem no lado direito, que é muito específico para
essa pesquisa específica. Posso segmentar
esse com cancelamento de pesquisa, cor e ícone. Portanto, esse token terá
como alvo essa parte dele. Sempre que tivermos vários sistemas de
design,
nesse momento, será muito mais
fácil
alterá-los no futuro , e isso
mudará facilmente em todo o sistema. É assim que nossos tokens específicos de componentes
finos se parecerão. Então, primeiro, aqui está a
pesquisa, a cor e o ícone. Então, se eu remover essa coisa, ela tem como alvo um componente,
que é a pesquisa Dentro do surto,
ele tem como alvo uma cor e essa também
uma cor de pesquisa de ícones Esse também é um token muito específico de um
componente. Dentro dos componentes,
temos como alvo uma cor
e, nesse caso, posso cancelar uma No entanto, o outro, eles são um pouco mais genéricos, mas ainda estão conectados
ao componente. Eles têm como alvo o grupo. Então, dentro do formulário, estamos
visando qualquer elemento que tenha uma cor e eu quero segmentar uma borda e
o estado padrão, e é isso que deveria ser Isso tem como alvo
o texto do espaço reservado para qualquer componente do
formulário É mais provável que isso tenha
como alvo o texto de apoio, que vem logo abaixo
deste, que é o grupo Dentro disso, há um alinhamento
de entrada e eu tenho uma propriedade que se
conecta ao texto de apoio O último também está
conectado ao formulário. Dentro do formulário, eu tenho
vários componentes. Se o componente tiver
uma entrada em que eu tenha que
digitar algo,
nesse caso, há uma
cor de fundo que está na parte de trás e essa cor é
direcionada por esse token específico Agora eu quero que você faça este
exercício com este.
19. Crie tokens de componentes: Crie um token
específico do componente. Vamos para o lado direito e clicamos em nossas variáveis locais. Aqui, adicionaremos uma coleção clicando em
Criar uma coleção e nomearemos essa
coisa como um componente. Dentro disso, começaremos a
criar nossas variáveis, que nada mais são do que o token. Desta vez, estamos
focando na cor, então vou selecionar a primeira Dentro disso, vou
escrevê-lo como um formulário, que é uma barra Deixe-me esconder isso no lado
esquerdo, para que seja fácil. Clique duas vezes
mais uma vez, pinte, corte. Temos um formulário, encontre, então queremos que
dentro desses
grupos específicos formem entrada de
hífen, texto do titular da classe Então, temos dentro do formulário, o
primeiro que criamos. E da mesma forma, criaremos
todos os outros três rapidamente. Clique em branco para duplicá-lo. Mais uma vez, duplique-o. E acho que
precisamos de quatro deles. Então, clique duas vezes.
O segundo é inserir, remover essa coisa, texto de
apoio. O terceiro está conectado
à entrada. Lá temos a cor
e depois temos a superfície. E a última é a forma em que
temos uma cor, que é borda, isso é padrão. Vamos criar uma variável, botão
direito do mouse e duplicar. Queremos este como
uma pesquisa específica. Aqui, cancelamos o ícone de cor da pesquisa CH Sarge Este é o primeiro, então ele
vai para dentro do balde. Dentro do formulário,
há uma pesquisa por subcategoria e ulicate essa
coisa mais uma vez Precisamos da cor da pesquisa. Tudo o que precisamos mudar é a última placa. Aqui
está o ícone de pesquisa. Agora vamos adicionar o valor
aqui no lado direito. Começaremos com
o ícone de pesquisa. Para o ícone de pesquisa, temos
um valor de cinza 600. Vamos clicar na cor,
ir até a biblioteca. Vou digitar 600, rolar para baixo e
aqui está o valor. Para cancelar o ícone,
selecionamos um 800 cinza. Deixe-me clicar aqui,
ir para a biblioteca, digitar 800 e
selecionar esse valor. Agora podemos acessar o formulário e aqui temos o valor
do texto de entrada. Vamos torná-lo um pouco
grande para que seja fácil de ler. Tudo bem. Temos texto de espaço reservado Para texto de espaço reservado,
temos nota 900. Vou selecionar o 900
aqui como texto de apoio, temos 700 cinza. Vou selecionar 700. Aí está. Agora,
para a superfície colorida, temos 50 primários. Aqui vamos nós. Primária, precisamos de 50. Então, para a cor da borda, temos cinza 500. Aqui crescemos e
vamos adicionar 500 aqui. Selecionaremos o campo de texto. Vá pelo
lado direito. Veremos a cor da seleção. Vamos expandi-lo. Agora vou substituir todo esse valor
pelos tokens que criamos. Vou clicar aqui, rolar para baixo. Essa seria nossa superfície
de cor de entrada. Cinza 500, isso
seria uma borda, então vou rolar para baixo e
selecionar a borda aqui. 600 é mais provável que seja um ícone, então vou clicar em continuar aqui, então selecionaremos o ícone de
pesquisa, cinza 700. Gray 700 está conectado
ao texto de apoio. Vou usar o texto de
apoio,
cinza 700, rolar para baixo, texto de
apoio. Para cinza 800, temos
nosso ícone do câncer. Desça e selecione
o ícone do câncer. Aqui está ele, vamos
verificar novamente com o 900 cinza. Gray 900 é para o espaço reservado. Deixe-me ir até o topo
e aqui está um 900 cinza, rolamos para baixo e selecionamos o espaço reservado
de entrada Agora, atualizamos
todo o valor
desse componente específico com as variáveis de
token específicas do componente.
20. Renomear em massa: Para entender o nome
completo do seu token, criei propositalmente um token que não corresponde exatamente
ao contexto Eu vou para a variável local e aqui se eu for para o espaçamento, você verá aqui o tamanho Agora, o tamanho geralmente diz o
quão pequeno e grande ele é, não a que distância está, ou nem diz o
quão redondo é. Isso é algo
enganoso
no contexto e
tentaremos corrigi-lo em massa Usaremos um plugin
chamado variável Renail. Se você tiver um pequeno
número de tokens, poderá renomeá-los diretamente. No entanto, se
houver muitos tokens, você precisará
tomar medidas adicionais. Nesse caso, você pode usar Google Sets ou o Excel,
dependendo de suas preferências. Navegue até a
área de ação na parte inferior, clique nela e tente encontrar um plug-in chamado
renomear variáveis. Clique sobre isso. Depois de aberto,
clicaremos no botão
Exportar variável nove. Ele nos mostrará todos os tokens que temos dentro
desse arquivo Figma No entanto, estamos interessados
apenas no espaçamento, então copiaremos apenas
a parte do espaçamento daqui até aqui Clique com o botão direito do mouse em Copiar,
navegaremos até o
Excel que temos
e aqui faremos uma pasta. Agora, quero tornar
isso um pouco genérico para que
possamos usá-lo em forma, tamanho e raio Vou usar um controle de chamada curta
F para encontrar o tamanho do espaçamento. Então, ele terá como alvo este, e eu quero substituir
essa coisa pelo SRS Este é o acrônimo que
usei para espaçamento, R significa raio e o último S significa tamanho. Então, sempre que abro esse token, lembro-me de
onde ele será usado e N significa número. Vou substituí-los
todos e, uma vez pronto, clicarei com o botão direito na parte superior e inserirei uma
coluna à esquerda. Deixe-me voltar ao nosso Figma e copiar esta
seção mais uma vez. Copie e vamos voltar
novamente ao Excel Pi. Vou fazer uma pasta. Agora, no lado esquerdo, temos o valor antigo
e, no lado direito,
temos o novo valor A única etapa final
que precisamos fazer é exportar
isso no formato CSV Então, arquivo, exporte isso no CSV
e, uma vez baixado, vamos abrir esse arquivo Então esse é o
arquivo que temos. Vou clicar com o botão direito do mouse e tentar abrir essa
coisa em um bloco de notas Então, uma vez feito isso, Controle , clique com o botão
direito do mouse, faça uma cópia ,
vá até nossa Figma ,
no lado direito,
selecione tudo isso e faça com
que delte e cole Então esse é o nosso valor antigo, e esse é o novo valor. Agora, clique no botão
chamado renomear variáveis. Ok, então, uma vez feito, não
temos nenhum erro e tudo parece bom.
Vamos fechar essa coisa. Vá para a variável local. Se rolarmos para baixo,
veremos que o SRS
foi criado e todos os nossos tokens foram
renomeados corretamente No entanto, ainda vejo que
há um espaçamento aqui porque, ao fazer essa
seleção, perdemos esse token Vamos adicionar essa coisa manualmente. Para fazer isso, em primeiro lugar, vou apenas verificar o
token semântico Se estamos usando essa
coisa em qualquer lugar, sim, estamos usando
aqui em nosso espaço. Vamos voltar ao token
primitivo. Vá para o SRS, role para baixo
e eu criarei um token, e eu criarei um token, clique com o botão
direito do mouse e
duplicarei uma variável Então eu vou dizer N zero, 02, e vou adicionar um valor dois. Volte para o token
semático e eu mudarei a definição
para extra pequeno Em vez de espaçamento, ele deve
vir de n002 aqui. Sim. Agora, tudo deve começar com o SRS e está
tudo bem Vamos verificar o raio, e isso também parece bom Vamos ao token primitivo. Agora podemos
excluir essa coisa com segurança. Caso contrário, pode
acontecer que você o exclua daqui e o valor do token ainda
permaneça dentro como quebrado.
21. Agradecimentos: Obrigada.
Muito obrigado por dedicar seu tempo. Eu realmente aprecio sua
dedicação e espero que a habilidade que
você adquiriu o capacite a
criar um design escalável incrível Continue praticando e
estou ansioso para ver seu incrível
projeto que você constrói Se você tiver alguma dúvida, sinta-se à vontade para iniciar uma conversa
na guia de discussão. Fico feliz em ajudá-lo e
responder à sua consulta. Você também pode fazer uma pergunta
ou compartilhar seu projeto. Vamos continuar o aprendizado.
Anand Padia, Design, Technology and Product
