Diseño de UI/UX: 6 consejos para agilizar los componentes en Figma

1. Introdução: Nos primeiros meses em que usei o Figma, eu estava usando componentes de forma totalmente errada. Foi só quando mergulhei e aprendi mais sobre o poder dos componentes que realmente comecei a ver minha confiança na velocidade e na Figma melhorarem. Como UI/UX e designer de produto, os componentes são os alicerces de todos os nossos projetos. Começar forte é essencial se quisermos produzir um trabalho de qualidade. [MÚSICA] Sou Maddie Beard e sou designer de UI/UX com sede em Denver, Colorado. Trabalho profissionalmente como designer desde 2017 para grandes e pequenas empresas de tecnologia, bem como para mim mesma como freelancer e empreendedora. Nesta aula, falaremos sobre seis maneiras de tirar o máximo proveito dos componentes do Figma. Criaremos alguns componentes do zero da maneira certa, configuraremos as propriedades do componente, os tornaremos responsivos, forneceremos algumas variantes necessárias e, finalmente, os tornaremos interativos. Então, para finalizar, falaremos sobre algumas dicas para criar componentes pensando no trabalho em equipe e na colaboração. Espero que você saia dessa aula, não apenas com uma compreensão mais profunda dos componentes, mas também com algumas habilidades e práticas reais em seu currículo. Esta aula é para qualquer designer que seja novo no Figma, componentes ou esteja trabalhando em equipe, ou talvez você esteja trabalhando com componentes há algum tempo, mas com termos como variantes, propriedades booleanas e O layout automático acabou de fazer seus olhos brilharem. Depois de concluir essas seis lições, você usará essas funcionalidades e muito mais para tornar seus componentes consistentes, flexíveis e economizar muito tempo para você e sua equipe. Eu encorajaria você a fazer esses exercícios comigo e até mesmo compartilhá-los com sua equipe, se quiser. Em breve, você terá tudo o que precisa para aplicar essas lições ao seu próprio trabalho em sua empresa. 2. Como criar um componente: Primeiro, vamos aprender como criar alguns componentes da maneira certa. Prepare-se para o sucesso a longo prazo seguindo estas cinco dicas ao criar seus próprios componentes. A primeira dica é pensar em componentes como modelos. Cada instância de um componente é basicamente toda vez que você está usando esse modelo. As alterações feitas no componente serão reduzidas e alterarão instâncias individuais. Mas se você fizer uma alteração no nível da instância, isso não afetará o componente principal ou qualquer outra instância do componente. Dica número 2, sempre que possível, use molduras em vez de retângulos. Três, aproveite o layout automático. Quatro, sempre preste atenção ao alinhamento. Cinco, tente seguir um sistema de grade de pixels. Na minha última empresa, usamos um sistema de grade de oito pixels, mas tudo o que sua equipe usa é perfeitamente adequado, desde que todos os designers estejam sendo consistentes. Agora, vamos ver como essas dicas entram em jogo com alguns componentes reais. Vou começar criando um componente muito simples, um botão. Então, vou pressionar F no meu teclado, que é o atalho para alternar para essa ferramenta de moldura. Então, estou apenas criando uma moldura. Vamos criar um com 44 pixels de altura, digamos, 100 pixels de largura para nosso botão. Como eu disse na dica número 2, é importante usar apenas molduras como retângulos em vez de adicionar camadas adicionais. Então, por exemplo, em vez de adicionar um retângulo azul em cima dessa moldura, vou dar a essa moldura uma cor de fundo azul. Dessa forma, estou lidando com menos camadas e isso realmente será útil quando se trata de layout automático. Agora, vamos adicionar o texto, então eu estou apenas pressionando T como um botão de atalho. Agora estou selecionando esse quadro novamente e vou dar a ele um raio de canto de quatro, bonito e sutil. qualquer momento, podemos transformar isso em um componente selecionando no quadro e pressionando a opção Comando K. Você também pode fazer isso subindo até Objeto e depois descendo para criar um componente. Agora que isso é um componente, vamos renomeá-lo. Agora, vamos entrar no layout automático. O motivo pelo qual usamos o layout automático é para que diferentes instâncias desse componente, embora possam aparecer em tamanhos diferentes, o texto sempre deve estar centralizado. Como está agora, o texto não está centralizado. Então, vamos selecionar o quadro inteiro e clicar no layout automático. Por padrão, ele fixará a criança, que neste caso é o texto dentro de todo o quadro, a fixará no canto superior esquerdo com um pouco de preenchimento. Como você pode ver, temos 23 pixels de preenchimento em cada lado e 12 na parte superior e inferior. Mas o que queremos é ter certeza de que ele será fixado no centro. Então, vou clicar nesse ícone lá. Então, acho que 12 pixels são bons para a parte superior e inferior, mas vamos fazer com que sejam 24 para a direita e a esquerda. Como eu disse, usar múltiplos de oito e até quatro é muito útil quando se trata de manter a consistência em seus layouts. Então, agora, o que acontece quando redimensionamos esse botão? Você pode ver que o texto fica no meio. Isso é exatamente o que queremos. Agora vamos criar um componente diferente. Vamos fazer um cartão. Então, estou pressionando F novamente no meu teclado. Vamos fazer isso de 200 por 200 só por enquanto. Vou renomear este cartão Option Command K. Vou fazer R para retângulo e colocar uma imagem aqui dentro que ocupa a primeira metade superior dessa altura vertical. Então, para usar isso como uma máscara, vou apenas preencher em vez de sólido, vou clicar em Imagem e depois escolher uma imagem. Eu tenho essa pizza aqui no meu desktop. Então, temos isso, agora vamos adicionar os outros elementos que precisaremos. Vamos fazer um texto. Então, talvez isso seja um título e depois uma descrição. Isso deve ser muito menor. Queremos alinhar isso à esquerda e faremos o mesmo com o título. Agora que temos todos os elementos que precisaremos aqui, vou ativar o layout automático. Então, as coisas ficaram um pouco estranhas, mas tudo bem. Vamos descobrir por que isso aconteceu e como podemos fazer com que funcione exatamente como queremos que funcione como um modelo para o resto de nossos projetos. Então você pode ver que quando eu fiz o layout automático, automaticamente, ele posicionará as crianças, que são os elementos individuais dentro de um quadro. Ele os posicionará verticalmente e centralizados no meio e fixados na parte superior. Isso é exatamente o que está acontecendo aqui. Esse texto está alinhado à esquerda, mas a própria caixa de texto está alinhada ao centro do quadro. Então, agora, o que eu quero fazer é agrupá-los em um quadro. Vou clicar na seleção de quadros e, na verdade, podemos ativar o layout automático para esse quadro dentro do quadro. Então, vou alinhá-los no canto superior esquerdo. Nós realmente só precisamos talvez quatro pixels entre esses caras. Em vez de abraçar o texto, o que eu quero que ele faça é realmente encher o recipiente. Verticalmente, queremos que ele abrace o conteúdo. Então, isso é bom. Então, quando clicamos nesse mainframe aqui, podemos ver que há oito pixels de espaço aqui. Vamos fazer isso 12. Agora, vamos ver o que acontece quando expandimos isso. Veja, estamos conseguindo espaço em ambos os lados. Então, em vez de ter uma largura fixa para essa imagem, vou dizer que a imagem deve preencher o contêiner. Manteremos a altura fixa. Agora, quando o expandimos, você pode ver que ele preenche todo o contêiner. Vamos adicionar um pouco de preenchimento. Queremos adicioná-lo a esse elemento porque não queremos que ele também se aplique à imagem. Então, vamos adicionar 12 pixels em cada lado e 12 pixels na parte inferior. Está parecendo bom. Agora, vamos dar à coisa toda um raio de vértice, talvez 16. Agora vamos ter que entrar com essa imagem que está sobreposta e adicioná-la separadamente. Isso parece bom. Vamos dar uma sombra só por diversão. Vou tornar essa sombra um pouco mais sutil. Eu gosto de usar oito por cento. Parece bom. Com esses dois componentes, já estamos fazendo a dica número 1. Estamos pensando neles como modelos, então estamos prestando muita atenção ao que vai acontecer se, por exemplo, continuarmos escrevendo nesta descrição até que ela vá para o próxima linha. Isso parece perfeito. Então confira, estamos pensando no modelo. Número 2, estamos usando molduras quando possível em vez de retângulos. Número 3, dominamos o layout automático com ambos. Número 4, garantimos que tudo esteja alinhado corretamente. Número 5, quando possível, usamos preenchimento e dimensões que se enquadram em uma grade de oito pixels. Uma forma de verificar se nossos componentes são flexíveis e se fizemos tudo o que precisamos para configurá-los para o sucesso é arrastar uma cópia dela ou de uma instância e usá-la como você o usaria em um projeto. Então, por exemplo, e se tivéssemos um título muito longo aqui. Então, como você pode ver, esse título muito longo ampliou esse componente para ser muito amplo. Não acho que isso seja necessariamente o que queremos. Então, vamos voltar a esse componente principal e transformá-lo em um elemento de largura fixa. Então, agora, temos essa largura fixa, definitivamente precisamos alinhá-la à esquerda. Agora vamos ver o que acontece sempre que mudamos o título para algo mais longo. Aí vamos nós. Agora que essa é uma largura fixa, ela vai empurrá-la para baixo em vez de empurrá-la para a direita. Então, agora, podemos ir até aqui. Como esse é o componente principal, as alterações chegam à nossa instância. Agora podemos ver que é exatamente assim que gostaríamos. Então, vou dar um A mais a esse componente e dizer que podemos passar para a próxima lição. Então agora é a sua vez. Vá em frente, escolha um ou ambos os componentes e crie-os você mesmo. Certifique-se de marcar todas as cinco caixas para ver as dicas que compartilhei nesta lição. Te vejo no próximo. 3. Como configurar as propriedades de componentes: Agora que você tem um ou dois componentes com os quais trabalhar, vamos configurar algumas propriedades para que possamos torná-las ainda mais flexíveis para poder ser usadas em seus projetos. Nesta lição, faremos isso por meio de três propriedades diferentes. Booleano, que é uma propriedade de verdadeiro/falso, ativada, troca de instâncias e texto. Então, vamos ver como eles entram em jogo com esses dois componentes que já criamos. Vamos começar com as propriedades booleanas. Pense nisso como criar um botão liga/desliga. Acho que um bom lugar para fazer isso é dentro desse botão. Então, vou colocar um ícone aqui e agora vamos descobrir como desligar e ligar esse ícone. Porque às vezes, quando você está usando esse botão, você pode querer um ícone e outras vezes não. Portanto, poder usar um componente apenas em instâncias diferentes desse componente, em vez de criar dois componentes separados, você economizará muito tempo. Especialmente quando você vê como isso é fácil. Então, o que vou fazer é entrar e selecionar esse ícone. Do outro lado da camada, temos esse ícone aqui. Diz aplicar propriedade booleana. Então, vou clicar nele e ele me mostrará automaticamente que o nome dessa propriedade, por padrão, é mostrar ícone. Então isso soa bem para mim, então eu vou criar isso. Agora, se arrastarmos isso para ver outra instância desse componente, assim, teremos um botão onde o alvo da alternância é esse ícone. Figma é inteligente o suficiente para saber que queremos desligá-lo e ativá-lo com uma propriedade booleana. Então, isso é muito fácil. Agora vamos dar um passo adiante. E se quisermos mudar esse ícone para outra coisa? Bem, eu criei algumas variantes desse componente aqui, e vamos nos aprofundar nas variantes na Lição 4. Mas, por enquanto, não se preocupe sobre como eu criei isso, vamos pensar em como vamos usá-lo. Então, eu tenho um componente aqui, esse é o componente principal e tem várias variantes. Então, eu tenho a variante de download, que é a padrão, uma variante de compartilhamento e uma variante de salvamento. Portanto, o Figma é inteligente o suficiente para saber que, como eles estão agrupados em um componente, talvez queiramos trocar entre eles. Então, novamente, se eu entrar e clicar nesse ícone aqui, vou ver esse ícone aqui, aplicar a propriedade de troca de instância. Então, vou clicar nisso, vamos chamá-la instância, e isso parece bom. Então, agora, sempre que eu arrasto uma instância e clico duas vezes nesse ícone aqui, podemos trocar isso por todas as instâncias desse componente de ícone. Agora, o último, vamos falar sobre texto. Então, se eu quiser que alguém possa acessar meu arquivo Figma e alterar o texto sem tocar no componente em si, o que podemos fazer é selecionar no texto. Então, aqui embaixo, podemos clicar neste ícone aqui e criar uma propriedade a partir dele. Agora, novamente, arrastaremos uma instância e, em vez de digitar o texto aqui, posso simplesmente selecionar a instância e, em seguida, ir até o painel Propriedades e digitar algum texto em vez disso. Então, talvez queiramos que diga download. Em seguida, ele atualizará automaticamente esse componente sem precisar tocá-lo. A mesma coisa funciona com algo assim. Digamos que queremos poder alterar o título e a descrição. Vamos apenas apertar esse botão ou nomear esse título, daremos um nome a essa descrição. Agora, se tivermos uma instância desses componentes em algum lugar, sem precisar tocar nesse componente, basta clicar nele e vir aqui. Aqui está o título, esta é uma descrição. Como você pode ver, ele também prestará atenção a todas as propriedades de layout automático que definimos anteriormente. Então, isso torna as coisas muito mais fáceis e rápidas para você e sua equipe. Vá em frente e brinque com essas propriedades com os componentes que você criou e fique à vontade para ser criativo com criar algo novo e testar os limites do booleano e a troca de instâncias e as propriedades do texto. 4. Tornando os componentes responsivos: É importante ter em mente que você e sua equipe podem estar usando esses componentes em vários tamanhos de tela diferentes. Portanto, torná-los responsivos é muito útil e economiza tempo. Falamos um pouco sobre isso na Lição 1. Mas vamos fazer outro exemplo aqui com uma barra de navegação. Vamos começar com uma barra de navegação otimizada para um iPad mini e ver se podemos torná-la responsiva para uma tela de desktop. Então, vou pressionar “F” para enquadrar e criar algo com 774 pixels de largura, e vamos com 60 pixels de altura. Vou dar a isso uma bela cor de fundo. Vamos pegar um logotipo falso que eu fiz e colocá-lo lá. Em seguida, vamos fazer alguns itens do menu. Então, se for um café, talvez queiramos menu, horários e contato. Agora, assim como antes, queremos transformar isso em um componente, opção “Comando K”, vou chamá-lo de nav. Em seguida, vamos ativar o layout automático logo de cara para que possamos ver com o que estamos trabalhando. Então, por padrão, ele vai abranger todo o nosso conteúdo. Então, vamos agrupá-los em um quadro para que possamos colocar layout automático e digamos que queremos 24 pixels entre cada um deles. Então, definitivamente, parece que eles estão se abraçando mais para baixo, então vamos nos certificar de que podemos alinhar isso ao centro. Agora temos a estrutura principal, que é o componente como um todo e dois filhos diferentes. Então, vamos ver o que acontece quando tentamos tornar isso maior. Isso definitivamente não é o que queremos. Então, o que eu vou fazer é selecionar esse quadro e vir e bater nesses três pontos, e em vez de empacotar, vamos mudar isso para um espaço entre eles. Você pode ver que isso está mais de acordo com o que queríamos. Podemos então entrar e trocar o acolchoamento lateral, talvez 24 funcione para isso. Então isso parece um pouco grande, então eu vou entrar e torná-lo um pouco menor. Mas quando eu fiz isso menor, parece que mudou a altura. Então, eu quero ter certeza de que minha altura é sempre de 60 pixels, então digamos que seja fixa para isso. Então, isso parece bom. Então, agora, vamos testá-lo. Eu tenho essas molduras aqui, uma para um iPad Pro e outra para um MacBook Pro de 16 polegadas. Então, o que vou fazer é copiá-los e colá-los e vamos apenas posicioná-los. Então, primeiro, para o nosso iPad e depois para o nosso desktop. Então, como você pode ver, isso funcionou muito bem, e você pode estar se perguntando o que faria se quisesse criar um desses para a tela do iPhone? Bem, o que talvez queiramos fazer é transformar isso em um menu de hambúrguer, e isso realmente teria que ser uma variante separada. Então, vamos falar sobre variação na próxima lição. Mas antes disso, tente praticar a criação de um componente responsivo. Você pode criar algo responsivo do iPhone para o iPad ou do iPhone para o desktop ou do iPad para o desktop. O que você quiser, e se você ficar preso, fique à vontade para fazer o que eu fiz e criar essa mesma barra de navegação. 5. Como criar variantes para componentes: Às vezes, as propriedades e o layout automático não são suficientes para tornar seus componentes flexíveis o suficiente para serem usados em todo o projeto ou sistema de design. É aí que as variantes entram em jogo. Eles podem economizar muito tempo e esforço quando se trata de projetar telas usando seus componentes. Nesta lição, criaremos variantes para diferentes estados de um botão, campos e ícones que você pode usar e trocar de forma intercambiável. Vamos começar com esse botão que já criamos. Então, vou clicar na moldura como um todo. Em seguida, chegaremos às propriedades, clicaremos no botão “Mais” e criaremos uma nova variante. Então, vou clicar no botão Mais aqui embaixo para criar um novo. Portanto, isso será automaticamente rotulado como padrão. Agora vamos editar essa propriedade e dar um nome a ela. Vamos chamá-lo de estado. O padrão é bom aqui. Agora, o que queremos que esse estado seja? Acho que vamos começar com o mouse. Então, vamos tornar o estado de flutuação um pouco mais escuro do que o azul. Vou apenas clicar com o botão Command para descer até a camada de moldura atrás do texto no ícone. Vou entrar aqui e arrastar isso para baixo até achar que está escuro o suficiente. Só um pouco, não precisa ser muito drástico. Agora esse é o estado de flutuação e vamos criar mais um. Talvez tenhamos um estado que esteja desativado. Em vez desse azul, vamos usar uma cor cinza como essa para que fique claramente desativada e você não possa usá-la. Eu acho que isso é bom, então é bastante fácil. Agora, vamos fazer a mesma coisa com um campo. Primeiro, vamos criar esse campo juntos. Vou pressionar F para moldar. Vamos ver, definitivamente queremos que isso tenha 44 pixels de altura, o campo em si e o comprimento não importam no momento. Vamos rotular esse campo e torná-lo um componente. Agora, o que queremos fazer é realmente esse plano de fundo não exista porque o que queremos é ter um rótulo de campo. Então, isso pode ser bem pequeno. Vamos apenas posicioná-lo no canto superior direito. Então, queremos que outro quadro dentro desse quadro seja o campo real, e isso terá um preenchimento. Por enquanto, vamos apenas torná-lo branco. Isso é o que queremos que tenha 44 pixels de altura. Então, queremos ter certeza de que tudo isso está dentro do quadro. Agora vamos fazer o layout automático e brincar um pouco com eles. Nós temos esse rótulo. Acho que queremos tornar esse rótulo um pouco maior, 12 geralmente é bom para rótulos. Agora, por padrão, ele tem quatro pixels entre eles ou cinco pixels entre eles. Vamos fazer quatro. Vamos arredondar um pouco esses cantos. Isso parece muito bom. Agora vamos colocar um texto no campo. Texto de amostra. Vamos tornar isso um pouco maior. Acho que queremos fazer isso com pelo menos 14, e vamos torná-lo com peso normal. Vamos alinhá-lo à esquerda. Vamos garantir que isso também esteja alinhado à esquerda e enquadrá-los para que possamos colocar o layout automático. Acho que queremos fixar a largura e garantir que tenhamos, acho que podemos ter menos acolchoamento. Vamos fazer oito pixels e depois 16 na parte superior e inferior. Vamos nos certificar de centralizar o texto lá dentro. Isso parece bom. Agora, definitivamente precisaremos de várias variantes para isso. Vou apenas adicionar uma propriedade, adicionar uma variante. Faremos disso nosso padrão. Vamos chamá-lo de estado padrão da propriedade. Então, vamos chamar esse campo. Agora que estou pensando nisso, acho que o estado padrão antes de alguém começar a digitar qualquer coisa, deveria se parecer mais com um texto de amostra. Vamos entrar e fazer isso cinza. Isso servirá por enquanto. Agora, esse texto é na verdade o texto preenchido. Agora temos duas variantes diferentes e vamos fazer mais uma. Talvez se alguém passar o mouse sobre isso, deva haver um derrame preenchido aqui para chamar sua atenção. Vamos apenas adicionar um derrame. Vamos torná-lo um pouco mais sutil. Isso deve ser bom. Um pixel é bom. Isso parece muito bom. Agora, o que temos são três variantes diferentes. Mas esse que criamos, o estado que daríamos é pairar. Mas o problema é que alguém poderia ter passado o mouse sobre um campo que já está preenchido e outro que ainda não está preenchido. Na verdade, queremos transformá-los em duas propriedades diferentes. Eu vou me livrar disso por enquanto. O que vou fazer é adicionar outra variante. Então, visualmente, gosto de alinhá-los de forma um pouco diferente quando se trata de uma propriedade diferente, para que eu possa ver visualmente com o que estou trabalhando aqui. Agora temos esse, e vamos copiar esse também. Agora, nesta coluna da esquerda, temos aquelas que são padrão. Agora precisamos adicionar uma outra variante. [RUÍDO] Em vez de chamar isso de estado, vamos chamar isso de pairar. Agora, passar o mouse será sim com esses dois e não com esses dois. Então, para esses dois, daremos o mesmo golpe que fizemos anteriormente. Vamos nos certificar de que também preenchemos o estado para isso. Isso é padrão. Isso deve ser preenchido. Agora temos esse componente com quatro variantes totais e duas propriedades. Agora vamos ver o que acontece quando vamos usá-lo. Eu só vou colar isso aqui. Agora, como tínhamos um valor sim e não como uma de nossas propriedades, ele o transformou automaticamente em um booleano, que significa que podemos ativá-lo e ativá-lo, assim como o ícone no botão em uma lição anterior, que torna tudo mais fácil. Em seguida, também podemos alternar entre texto padrão e texto preenchido. Agora você pode ver como isso está funcionando. Você pode ter quantas variantes quiser com o componente. Você pode ser muito granular com isso. Esse é apenas um exemplo super simples de como usar variantes com um campo. Agora, vamos ver esses ícones que eu estava mostrando anteriormente. Vou torná-los pretos apenas que sejam mais fáceis de ver por enquanto. Para mostrar como fiz isso, vou adicionar outro. Vamos usar o botão Mais, e isso só vai adicionar um que, por padrão, se parece com o primeiro. Vou clicar duas vezes aqui e excluir isso. Mas ainda temos essa moldura aqui. Vou pegar um desses outros ícones. Acabei de pressionar o Comando C para copiar. Agora vou selecionar neste quadro o Comando V para colar. Em seguida, vou redimensioná-lo para que fique bem dentro desse quadro, como o resto deles. Isso parece bom. Agora, só precisamos dar um nome a ele. Tipo, vamos chamar isso de edição. Isso é tudo o que você precisa fazer para criar esse conjunto de ícones. Se você tiver ícones de tamanhos diferentes em seu sistema de design, você pode absolutamente ter dois componentes principais de ícones diferentes. Um pequeno e um grande ou grande, médio e pequeno, o que for melhor para você. Eu só quero te mostrar rapidamente como eu realmente os fiz. Estou apenas pressionando T para enviar uma mensagem de texto. Eu tenho um tipo de letra chamado Font Awesome 5 Pro. Se eu começar a digitar, vou digitar pause, então há um ícone de pausa para isso. Eu vou fazer a versão sólida. Então, tudo o que eu faço é clicar com o botão de controle para nivelar. Foi assim que criei esses ícones. Vamos criar apenas mais alguns aqui. Adicionar uma variante, clicar duas vezes, excluir, copiar e colar, redimensionar. Você pode até mesmo centralizá-lo bem dentro desse quadro. Isso parece bom. Agora temos cinco variantes diferentes desse ícone. Você pode usá-lo em todo o projeto em qualquer componente ou layout que tenha esse ícone. Isso facilita muito a troca de entrada e saída. Vamos ver isso em ação. Agora vou pegar uma instância desse componente e ver como podemos ser flexíveis com isso. Se o selecionarmos, podemos mudar o estado. Talvez a mudemos para pairar. Podemos tocar no ícone e alterá-lo para qualquer um desses que criamos. Editar. Então, podemos até mesmo voltar aqui e alterar o texto sem nem mesmo tocar no componente. Para praticar isso, pegue um de seus componentes e crie algumas variantes. Se você está preso, um ótimo lugar para começar é com os estados desses botões. Assim como eu fiz, crie um estado padrão, um estado de flutuação e um estado desativado. Então, sinta-se à vontade para fazer uma captura e compartilhá-la na seção de discussão. 6. Tornando componentes interativos: Tornar seus componentes interativos é definitivamente mais uma coisa extra que você pode fazer se tiver tempo ou realmente quiser começar a criar protótipos. Mas, dito isso, se você trabalha em uma equipe que faz muita prototipagem, seja para testes ou apresentações para não designers, isso definitivamente pode economizar muito tempo. Pense nisso como uma prototipagem no nível do componente ou do modelo, em vez do nível da instância. Por exemplo, qualquer tela que tenha uma instância desse componente do botão principal adotará essa mudança de comportamento ao passar o mouse. Vamos ver isso em ação. Agora, como você realmente faz isso acontecer? Bem, é super fácil. Vamos apenas aprimorar esses dois estados do botão. O que vou fazer é clicar neste e ir para o protótipo. Depois de fazer isso, vou ver esse sinal de mais aqui quando eu passar por cima dele. Vou clicar e arrastar. Vou arrastar essa seta para o estado de flutuação. Então, aqui, em vez de tocar, faremos enquanto mouse e ele mudará para esse estado de flutuação. Isso é bastante fácil. Em seguida, sairemos do modo de protótipo e entraremos no modo de design. Vou copiar esse componente. Só para mostrar isso em ação, vou colá-lo neste componente aqui. Em seguida, vou clicar em toda a moldura do iPhone e apertar o botão play aqui em cima. Depois de carregar, você poderá ver uma prévia da tela e eu vou examinar. Como você pode ver ao passar o mouse, essa instância desse componente está mudando do azul mais claro para o azul mais escuro. Há muitas coisas que você pode fazer com esses tipos de interações. Este é simplesmente o mais simples , mas é o que eu acho que uso com mais frequência. Vá em frente e experimente isso e , em seguida, seja criativo com isso. Crie sua própria interação, crie algumas instâncias dela e teste-as com o player de pré-visualização. 7. Como construir com trabalho em equipe: Antes de encerrarmos esta aula, quero compartilhar algumas das minhas dicas para construir com o trabalho em equipe em mente. Se você estiver criando componentes para usar em toda a equipe, seja ela de dois ou 50 designers, essas etapas ajudarão o processo a ocorrer sem problemas. Número 1, use convenções de nomenclatura consistentes para seus componentes. Isso não importa se você tem apenas alguns componentes, como temos agora, mas quando você começa a desenvolver um sistema de design completo, você terá muitos, muitos mais componentes, muitas variantes, e até mesmo versões diferentes de componentes. O que eu gosto de fazer é dividi-las em páginas diferentes e começar a criar um arquivo que seja o seu sistema de design. Não vamos nos aprofundar nisso nesta aula porque os sistemas de design são outra fera sobre a qual eu posso fazer uma aula inteira. Mas começar cedo com as convenções de nomenclatura pode realmente ajudá-lo. Por exemplo, digamos que temos duas versões desse componente da placa. Talvez tenhamos um com uma imagem e talvez tenhamos um com ícones. Então você pode nomeá-los adequadamente. Você poderia dizer Carto/Imagem e Carto/Ícones. Isso realmente ajudará sempre que as pessoas estiverem usando esses componentes e os arrastando do painel Ativos no Figma. Voltando ao nosso outro exemplo, também podemos dizer Nav/Mobile versus Nav/Desktop, ou Icons/Large, Icons/Small. Você pode obter ainda mais detalhes, Icons/12 para 12 pixels versus Icon/24 para 24 pixels. Eu também vi isso ser feito dessa maneira. Número 2, nomeando suas camadas dentro de um componente. Sempre que estou criando componentes, não me preocupo muito com a bagunça. Mas volto quando estiver satisfeito com o funcionamento de um componente, testá-lo em vários tamanhos de tela e ficar feliz com ele. Nesse ponto, vou voltar e começar a nomear minhas camadas e realmente organizar as coisas. Muitas vezes, vou enquadrar elementos em quadros diferentes. Ele se transforma em uma moldura dentro de uma moldura dentro de uma moldura. Rotular todas essas molduras diferentes é muito útil se alguém precisar entrar e ajustar esse componente. O número 3 é pensar no tipo de rótulos de texto que você está usando ao usar texto de amostra. Isso é difícil de descrever de forma abstrata. Vamos dar uma olhada nesse exemplo de campo. Para tudo isso, usamos a palavra rótulo como rótulo de campo, mas para o texto interno, estamos usando texto de amostra versus texto preenchido. Isso também ajudará muito os desenvolvedores Em vez de apenas ter Lorem ipsum lá, na verdade está descrevendo para eles que é assim que o texto preenchido deveria parecer, é preto, versus isso é o que o texto de amostra deve ter a aparência de, que é cinza. Eu fiz a mesma coisa no componente do cartão. Eu chamei o título de Título e, em seguida, a descrição que tenho lá. Essa é uma descrição e às vezes eu até coloco alguma coisa, ela pode ficar em duas linhas antes de truncar ou algo assim. Vou usar isso como um guia para meus desenvolvedores. Dito isso, o objetivo é tentar usar o texto em seus componentes a seu favor, e isso apenas fornecerá clareza para todos os envolvidos. Número 4, eu já compartilhei isso em várias aulas, mas use o layout automático. Não sei dizer quantas vezes usei um componente e tão frustrado porque, no segundo em que o estou usando em um projeto real, ele simplesmente não é flexível o suficiente para eu usá-lo e então eu tenho que ajustá-lo e, ao mesmo tempo, seria muito mais rápido ajustá-lo no nível do componente para que o trabalho não seja duplicado, triplicado ou quadruplicado com todos os designers de sua equipe. Essas são minhas quatro dicas para construir com o trabalho em equipe em mente. Sinta-se à vontade para refletir sobre eles e compartilhar alguns dos seus favoritos com sua equipe. 8. Considerações finais: Parabéns por passar por esta aula. Eu realmente espero que, pouco a pouco, essas lições tenham ajudado você a se sentir mais confortável criando componentes no Figma. Eu recomendo fortemente que você continue praticando e compartilhando o que está aprendendo com sua equipe. Você também pode se sentir à vontade para deixar todas as perguntas que surgirem na seção de discussão abaixo e eu me certificarei de respondê-las. Muito obrigado por passar um tempo comigo hoje e nos vemos na minha próxima aula ou mais no meu canal do YouTube. Tchau.