Transcrições
1. Boas-vindas ao curso: Todo mundo. Eu sou Adi. Bem-vindo a esta
rápida sessão do Figma. Hoje, criaremos um componente de botão inteligente e
reutilizável. Nosso botão terá duas
variantes, primária e secundária, e adicionaremos
propriedades para ajustar a visibilidade
do ícone, alternar ícones e alterar
o texto do botão O que você aprende hoje
não se aplica apenas aos botões, mas a qualquer tipo de componente que você queira criar no Figma Você não precisa de nenhuma habilidade especial do
Figma para isso, um novo arquivo e 15
minutos do seu tempo Ah, e também há um projeto de
classe que você pode fazer. Então, vamos abrir o Figma
e começar.
2. Vamos projetar um botão inteligente: Tudo bem, então eu quero criar
um botão versátil que possa ser reutilizado em vários
lugares em meus designs, e esse botão
precisa ter, antes de tudo,
dois estilos, um primário
e um secundário, que seja mais Além disso,
gostaria de exibir uma etiqueta dentro do
botão ou uma etiqueta mais um ícone. E eu preciso de uma maneira de
alterar esse ícone e o texto do botão e também a visibilidade
do ícone com muita facilidade. É aí que entram
as propriedades dos componentes, mas sobre isso
um pouco mais tarde. Por enquanto,
vamos começar com esses três ícones
que obtive de
m, um conjunto de ícones chamado ícones de
fósforo É um conjunto de ícones gratuito. Então, eles são SVGs,
e eu vou
selecionar todos os três e
transformá-los em componentes Agora, isso é muito importante porque nos permitirá
trocar o ícone em nossos botões Não vai
funcionar de outra forma. Então, selecione todos os três
e
entraremos no painel Inspetor, clique em Criar opções de
componentes e selecione Criar
vários componentes E isso vai pegar
cada elemento que eu
selecionei e o transformará em um
componente exatamente como esse. Agora eu tenho um componente
para o ícone do cubo, um para a seta para a direita e outro para a seta para a
direita. Esse é o primeiro passo. Segundo passo, vamos começar a
criar nosso botão. Vou pressionar T para a ferramenta de
texto, digitar algum texto. No meu caso, etiqueta do botão. Isso pode ser o que você quiser. Para a tipografia,
vou usar uma fonte
intermédia de 16 pixels,
tamanho de fonte 140% Por enquanto, vamos definir
o preenchimento para preto. Agora, vou pegar um dos ícones. Digamos que esse cubo é um. E cole na minha moldura. E vamos mudar sua cor para preto para que possamos
ver o que estamos fazendo. E eu vou criar um
botão com esses dois elementos. Agora, eu gostaria que meu botão
fosse redimensionável, certo? Eu gostaria que ele mudasse
automaticamente sua largura, dependendo do
conteúdo interno. Então, para isso, vou
usar o layout automático. Selecione esses dois elementos pressione Shift A para adicionar
layout automático a esses elementos. E se você não sabe
como o layout automático funciona, isso basicamente cria um
quadro no painel de camadas, e esse quadro tem
essa coisa chamada layout
automático
aplicado automaticamente a ele. layout automático me permite alterar a direção na qual
os elementos são exibidos. Isso me permite alterar o
espaço entre os elementos. No meu caso, vou
escolher dez pixels, e isso também me permite
adicionar preenchimento vertical e
horizontal Mas, por enquanto, vamos adicionar uma cor de
preenchimento a esse quadro, e essa cor será 00 51bc É como uma cor azul mais escura. Agora, vou mudar
o preto aqui para branco e vou usar 90%. Esse é um pequeno truque
que eu gosto de fazer. Isso meio que empresta um pouco
da cor do fundo porque não é branco puro É um pouco transparente. Então, estamos tirando um pouco desse azul
do fundo. Agora, vamos adicionar um pouco de espaço para
respirar ao redor do rótulo e do ícone. Para isso,
adicionarei um pouco de preenchimento. Então, vou usar 40 pixels de preenchimento à esquerda e à direita
e 20 na parte superior e inferior Agora, descobri isso usando, digamos, X nas laterais
e X dividido por dois. Portanto, metade desse X
na parte superior e inferior é
uma boa regra prática
e, geralmente, produz resultados muito
bons Além disso, vamos tornar isso
um pouco mais amigável. Vamos adicionar oito pixels
de raio de canto, basta arredondar esses cantos E o design inicial do
meu botão está completo. Agora, vamos torná-lo reutilizável
transformando-o em um componente Então eu o seleciono e posso
transformá-lo de várias maneiras diferentes. Posso entrar no
inspetor aqui
e clicar em criar
componente ou usar o atalho de
teclado Control Alt K ou a Opção de Comando K
se você estiver em um Mac, ou posso clicar com o botão direito do mouse e escolher Criar componente
exatamente assim Agora, a maneira como eu gosto de trabalhar
é definir meus componentes fora de
qualquer estrutura de design finalizada. Então, eu vou trabalhar aqui. Na verdade, vamos renomear
esse Command R Control R para renomeá-lo para botão Não, eu sempre posso controlar C ou copiar isso e
colar no meu quadro, e isso
criará uma cópia dele ou uma instância,
como é chamada. Então, na figma, esse é
o componente principal, e essa é uma cópia
desse componente E se eu fizer qualquer tipo de
alteração no componente principal, isso será automaticamente aplicado a qualquer cópia dele. Então, digamos que eu vou mudar o tamanho desse ícone
em vez de 32 por 32, vou torná-lo 22 por 22. E essa mudança acontece aqui, mas também em qualquer
cópia. Super legal. Agora, vamos adicionar algumas propriedades a esse componente de botão
porque, atualmente, se você quiser fazer
qualquer tipo de alteração na instância, isso é
muito difícil de fazer. Obviamente, você pode selecionar a etiqueta interna e
alterá-la para o que quiser. Mas, você sabe, você
tem que cavar e, você sabe, selecionar isso diretamente. Uh, você pode selecionar
o ícone em si e clicar nesse menu
suspenso e alterá-lo
para outra coisa. E se você quiser ocultar
esse ícone completamente, basta clicar
no botão Ocultar aqui e
ele desaparecerá. Mas, na verdade, há
uma maneira mais elegante de controlar
essas coisas com componentes, e isso é com propriedades. Então, vamos selecionar o componente
principal, e aqui em cima, onde
diz propriedades, vamos clicar no
título ou no sinal de mais. E temos quatro tipos de
propriedades que
podemos escolher entre texto variante, booleano e troca de instância Vamos começar com o texto, pois é
isso que
usaremos para editar o rótulo do botão. Então clique nisso. Vamos
chamá-lo de rótulo. E para o valor, vamos chamá-lo de
rótulo do botão. Crie uma propriedade. Em seguida, vamos adicionar uma propriedade
para alterar o ícone, chamada propriedade de troca
instantânea Então, novamente, clique e
selecione troca instantânea. Desta vez, vamos chamá-lo de ícone. E vamos escolher
um valor por padrão. Vamos escolher o cubo que
definimos aqui. Agora, essa lista mostra
basicamente todos os componentes
que podem ser usados para, você sabe, trocar esse elemento Então, vou escolher
Criar propriedade. Finalmente, vamos
clicar no sinal de adição novamente e escolheremos Bolion Bolian é como um zero e um,
verdadeiro, falso, um
tipo de propriedade isolada É um ou outro. Então escolha Bollion. Vamos chamá-lo de ícone de exibição. Por padrão, defina o valor como
verdadeiro e crie a propriedade. Agora, temos essas três
propriedades criadas, mas sozinhas,
elas não fazem nada. Precisamos vinculá-los
a elementos específicos. Então, selecione o rótulo do botão e, no inspetor, clicaremos
nesse ícone que diz aplicar propriedade variável e escolheremos o
rótulo porque essa é uma
das propriedades que temos
disponíveis no botão Em seguida, vou
selecionar o ícone. E, novamente, no inspetor, clique no botão que diz
aplicar propriedade de troca de instância Vou escolher
o nome da propriedade ou a propriedade chamada ícone. E enquanto ainda
temos o selecionado, vamos voltar à aparência. Aqui, clique na propriedade de
aplicar variável e eu vou
escolher o ícone Mostrar. Agora, isso
vinculará a variável
booleana show icon à
aparência desse elemento Então, como isso funciona exatamente? Bem, se eu selecionar essa instância ou essa
cópia do componente, você pode ver que,
no inspetor, agora
tenho três opções com as quais
posso brincar Posso optar por ocultar completamente
o ícone. Eu posso escolher trocar esse
ícone por outra coisa. E eu posso facilmente mudar
o rótulo desse botão. Digamos que comece e escolha a seta para
a direita. Claro, com isso, eu posso, você sabe, copiar e colar, criar
quantos botões eu quiser que pareçam diferentes e
façam coisas diferentes. Essa é a beleza de
usar componentes. Agora, mencionei que
também precisamos adicionar um
estilo secundário ao botão
e, para isso, usaremos
o que é chamado de variância na figura Então, selecione o botão
do componente principal. E no inspetor, clique em adicionar variante Agora, isso adicionará tudo a esse tipo de contêiner aqui e fará duas coisas. Ele fará uma cópia
desse estilo inicial ou
dessa variante inicial e também adicionará
outra propriedade ao meu botão. Ela é chamada por
padrão de propriedade um, mas posso renomeá-la
para estilo de botão Ou o que eu quiser.
E esse estilo de botão, se você olhar no
painel de camadas, tem duas opções. O primeiro, que
é chamado de padrão, você sabe, você pode
renomeá-lo para primário E a segunda variante dois, você pode renomeá-la para,
digamos, secundária Então, agora vamos fazer com que esse tipo de botão
secundário pareça diferente. Vou começar
alterando a cor de preenchimento e usarei EB
F três Ff para isso. Vou adicionar um traçado
ou uma borda a ele. Isso é b8d7 FF, um pixel. E depois vou mudar o branco do texto
e do ícone para
80% preto, sem mais nem menos. Agora, se eu fizer outra
cópia desse componente, agora
tenho outra opção na barra lateral
chamada estilo de botão, que me permite escolher
entre as duas variantes Também tenho acesso
a outras propriedades, como
Mostrar ícone, rótulo e ícone. E se em algum momento você não gostar
da ordem desses elementos, é muito fácil mudar
isso. Basta selecionar o botão principal
e entrar no inspetor, basta passar o mouse para a
esquerda da propriedade até obter esse ícone de
três pontos Então você pode movê-los. Então, talvez eu queira que o rótulo fique acima disso e depois mostre o
ícone e depois o ícone. OK. Agora, se eu selecionar
qualquer uma dessas instâncias, você notará que a ordem
dessas propriedades foi alterada. Então, vamos alterar o rótulo
desse botão para saber mais e vamos ocultar completamente
o ícone. Então, eu gostaria de apenas
um botão simples no estilo secundário
que não tivesse um ícone. Tudo bem, isso foi
super simples de fazer. Como você pode ver, configurar componentes dessa forma
economiza muito tempo. Chega de reconstruir
botões ou fazer mudanças
constantes
em seus designs Agora é a sua vez. Use o que você aprendeu
neste vídeo para criar seu próprio componente de
botão
e fique à vontade para ser
criativo com as cores, e fique à vontade para ser
criativo com a
tipografia e Apenas faça do seu jeito. Se precisar de um ponto de partida, você pode baixar o
arquivo Figma em que trabalhei Você encontrará um link para isso
na seção do projeto. E quando terminar de
criar seu botão, compartilhe uma captura de tela ou apenas um vídeo rápido do
botão em ação e,
você sabe, publique-o na galeria de projetos da
turma Eu adoraria ver
o que você inventaria. Se você gosta dessa aula, confira meus outros vídeos. Tenho uma aula aprofundada sobre o layout automático do
Figma que
você pode achar útil E com isso dito,
muito obrigado por assistir. Happy Designing e
nos vemos na próxima vez.
Adi Purdila, UI/UX Designer, Framer Developer, Educator
