Como criar e usar componentes no Figma - curso para iniciantes

1. Bem-vindo ao curso Figma - como criar componentes: Ei, bem-vindo à aula. Meu nome é barras laterais e sou designer de marketing e produto. E hoje vamos falar sobre componentes. E vou mostrar a vocês como criar esses módulos realmente dinâmicos. E depois o Figma, que ajudou a tornar seu processo de design muito mais eficiente e eficaz. Aqui temos um site de feed social falso e alguns botões no lado direito que são pré-animados. Assim, você pode ver quando você passa o mouse sobre eles, eles mudam para um traçado, contorno, preenchimento branco em comparação com um arquivo NoStroke e azul. Agora, eles obviamente representam botões e nesta classe, vou mostrar a você como fazer os componentes individuais necessários para criar esse efeito. Quando você está projetando seus aplicativos ou sites ou qualquer tipo de programa, você tem o conhecimento para criar componentes dinâmicos realmente valiosos que podem fazer seu processo de design parecer bom, mais polido e, o mais importante, economiza muito tempo. Então, se você está procurando uma aula muito fácil de acompanhar e pode ter sido assinante das minhas anteriores. Você saberá que eu costumo adotar uma abordagem muito alegre ao ensino. E estou ansioso para vê-lo na minha aula de Skillshare. Se você decidir se inscrever, não sabe o que está fazendo agora, mas se quiser se juntar a mim, fique à vontade para seguir e faremos alguns desses botões juntos. 2. Como criar o primeiro ativo para componentes: Bem-vindo à primeira lição desta aula de Skillshare, vamos criar botões que têm efeitos de foco e são criados usando a função de componente do Figma. Então, a primeira coisa a fazer é projetar nossos botões. Então, vamos para a guia retângulo, criar um retângulo e renomear essa forma como um. Agora, por padrão, você verá a cor natural, isso é cinza. E vamos querer criar isso e torná-lo a cor do botão. Então, se formos aqui para o quadrado e escolhermos Sólido, e depois escolhermos uma cor, vamos escolher um azul. E então vamos arredondar os cantos porque podemos fazer um botão com cantos sólidos como angulares, mas os botões redondos têm uma sensação agradável e funcionaram bem nos aplicativos modernos. Então clicamos na caixa e chegamos a essa ferramenta aqui, que muda o raio do canto. Eu vou fazer isso quatro. E você verá aqui como temos uma pequena curva agora, dependendo do tamanho do seu botão. Então, se eu reduzir isso, você verá como o raio mudará acordo e o tornará maior. Parece mais um retângulo e torna mais curto e terá uma proporção maior do raio do canto. Então, dependendo do tamanho do seu botão , você pode querer mudar isso. E você pode fazer isso novamente digitando um número ou você pode realmente arrastar o raio aqui. Assim, você pode ver ao arrastar, isso torna o raio mais graduado. Então, agora que fizemos isso, vamos projetar esse botão em uma moldura. Agora, a maneira de fazer isso é se eu escrever o botão direito do mouse no quadrado, você terá a opção de seleção de quadros. Isso fará com que o quadro um e o canto superior esquerdo. Você pode ver como essa forma se encaixa sob essa moldura. Agora, vamos nomear esse botão que sabemos que é um botão. E então vamos adicionar algum texto a esse quadro. Aperte o botão Texto e , em seguida, pressione o interior. E vamos chamar isso a seguir. Então, neste exemplo, esse será próximo botão para ir para uma nova página ou uma parte diferente do aplicativo. Agora, obviamente, esse texto é um pouco pequeno demais, e mesmo que diga 18, claramente nossos botões são muito grandes. Botão, essa será proporção de acordo com o tamanho do seu botão. Se eu clicar aqui e clicar na quinta-feira, isso ainda não é grande o suficiente. Vamos 45. Estique a caixa aberta. E agora você verá como esse próximo texto está dentro da moldura do botão. Agora, o que vou fazer é centralizar esse texto na própria caixa de texto. Então clique aqui. E então toda essa seção precisa estar centralizada no botão. Você verá esses ícones aqui em cima, os ícones de alinhamento, vou clicar na linha central e alinhada verticalmente. Isso agora é Central. 3. Como criar variações de componentes: Então, o que vamos fazer é clicar na moldura. E vamos converter isso em um componente. Então, se eu clicar com o botão direito do mouse, você terá que criar componente. Agora, isso transformará automaticamente o quadro em um componente. E você pode ver isso como é colorido de roxo ou olhar na guia de camadas à esquerda. Agora, para obter o efeito de foco onde ele muda dependendo se você insere ou sai da forma ou do ativo. Vamos criar uma variação, uma variação. E você pode ter várias variações dependendo da complexidade do seu componente. Então, se você clicar nisso, na parte superior, você verá Adicionar variante usa máscara ou seleção de união. Queremos adicionar uma variante e você verá como ela cria automaticamente uma cópia, que podemos alterar para que ela tenha o efeito desejado. O contorno tracejado mostra apenas a extensão dos componentes. E se você clicar nesse botão de adição, ele adicionará outra variação. Portanto, temos o botão padrão na parte superior e, em seguida, a variante abaixo dele. Então, agora vamos mudar a estética deste. Então, o que queremos fazer para deixar óbvio que isso foi passado sobre isso, vamos mudar as cores. Então, o que vamos fazer é clicar duas vezes. E quando você clica duas vezes, ele escolherá automaticamente o item de árvore mais baixo dentro do ativo selecionado. Forma um, que é o retângulo. Tem uma cor azul e vamos adicionar um traço. Agora, esse traçado será da mesma cor do preenchimento. Então, se clicarmos aqui, clicar na ferramenta conta-gotas, clicar no interior, você verá agora que está feito um contorno azul. E então, se você fizer a espessura um pouco maior. Obviamente, não podemos ver como é isso por causa das mesmas cores. Podemos mudar a cor de preenchimento para branco. Nós vamos. Agora temos um preenchimento branco e um traço azul. E você pode ver que o texto desapareceu porque o texto era branco. Então, o que vamos fazer é deixar esse texto azul. Então clique aqui, a ferramenta conta-gotas lá. Então, agora temos essencialmente um botão inverso, que podemos usar como nosso efeito de foco. E agora isso, é isso. Essa é basicamente a parte principal dos componentes ou os componentes principais feitos. E agora precisamos apenas trabalhar no fluxo real do botão. 4. Como adicionar ações de fluxo ao componente: Então, se você for para o canto superior direito, você verá o protótipo. Agora o protótipo permite adicionar movimentos e animações aos objetos em uma ordem linear. Então, com essa área de protótipo selecionada e eu clico em um botão, você verá como temos um pequeno ícone de mais. Agora, com o Figma, você pode arrastar e soltar. Se eu clicar aqui e arrastar para baixo, você verá o automático, clica automaticamente e se anexa à variante do componente construído. Solte. E, em seguida, uma caixa pop-up aparece. Agora, se o que podemos fazer aqui é escolher como queremos que isso interaja com nosso mouse ou nosso toque, ou como você está usando e em qual dispositivo está usando. No momento, por padrão, ele clicou. Mas queremos tê-lo porque as mulheres, quando o mouse entra no botão, queremos que ele mude para a outra variante. E quando sai do complexo composto, o recipiente do botão, queremos que ele volte ao que era. Então clique enquanto passa o mouse. Ele muda da propriedade um para a variante para. Agora, você pode escolher ter um instante, você pode escolher que ele se dissolva, tenha um pouco de desbotamento lá, o que vamos fazer. Então, o que isso faz agora é que sempre que você inserir esse botão, ele mostrará esse botão. E quando você sair desse botão, ele mostrará esse botão. 5. Testando os componentes: Agora, para testar isso, vamos criar um quadro muito rápido. Então, podemos imaginar isso sendo um monitor. E esse monitor é, vamos colocar isso, colocar isso em um quadro. Clique com o botão direito do mouse E nós vamos fazer isso. Podemos fazer o que você quiser lá dentro. Então você pode imaginar que este é o aplicativo. E vamos querer colocar o componente agora nessa área de aplicativos. Então, o que você faz é acessar Ativos e você verá, como criamos um componente, ele o tornou um ativo de componente local. Agora você pode arrastar isso para a área e verá como podemos empilhá-los. Então, se isso é um botão isolado, ótimo. Isso pode ser um botão Avançar e um botão Voltar. Então, se tentarmos a saída, faça isso, copie e cole. E agora temos dois botões. E podemos chamar esse, esse próximo. E podemos clicar duas vezes e recuperar alguns. Agora você notará como, com os ativos selecionados internamente, você pode realmente alterar o texto deles sem afetar o componente original. O que ele fará é manter todas as animações, manter todos os fluxos como fizemos antes, mas reterá o texto que é realmente útil. Então você não precisa fazer dez versões do mesmo componente. Você pode criar uma versão e continuar alterando-a em sua área de trabalho principal. Então, este é o nosso botão Voltar e o botão Avançar. E, obviamente, você pode projetar sua área de aplicativos como quiser. Vou apenas mantê-lo agradável e simples para que possamos colocar uma pequena barra no topo para que pareça uma espécie de cabeçalho de um site. Mude a cor. Então talvez, talvez estejamos fazendo alguma forma. Talvez isso, talvez seja um formulário. Então, vamos deixar isso branco. Você pode adicionar um efeito. Se você clicar nele, por padrão, ele mostrará uma sombra projetada. Podemos adicionar algum raio. Novamente, todas as coisas que você já aprendeu na aula. E se eu voltar às camadas, você verá como fica dentro da moldura. Então, se eu clicar na ferramenta de alinhamento, ela irá automaticamente para o centro desse quadro. Agora, novamente, você pode imaginar isso sendo algum tipo de forma. E só para mostrar que é uma forma, vou colocar algumas linhas. Então é aqui que você teria seu nome e e-mail, etc. E agora vamos testá-lo. Então essa é a parte em que você pode ver como suas animações funcionam. Portanto, se você clicar no quadro um e acessar este ícone de reprodução, ele o carregará automaticamente em um ambiente semelhante ao de um aplicativo. Então, se eu clicar em Reproduzir, e vamos diminuir um pouco o zoom, vamos ajustar à tela, porque obviamente fizemos um aplicativo muito grande aqui. Mas você verá aqui como temos os botões. E se eu passar por cima desses botões, você verá como eles agora têm esses efeitos de animação. Agora, novamente, o best torna o processo de design de componentes muito, muito fácil. Porque, como você pode imaginar, se você tivesse que criar manualmente todos esses botões e criar manualmente todos esses fluxos para cada quadro do seu aplicativo, levaria uma eternidade. E neste exemplo você pode ver como, se eu copiar e colar, faço um segundo quadro. E só para mostrar como isso funciona, você pode ir aqui e mudar, mudar esse plano de fundo para que seja uma página diferente, se preferir. Então, removeremos isso, removeremos e alteraremos o plano de fundo para que possamos ver que é um aplicativo diferente. Na verdade, podemos animar esses botões para funcionarem da mesma maneira. Então, se eu clicar aqui e entrar no protótipo, eu posso realmente fazer esse próprio fluxo de hábitos. Portanto, ele não apenas lembrará o componente original, as animações e os fluxos, mas você também poderá adicionar extras de fluxo e protótipo direções extras de fluxo e protótipo à interface real em que você está trabalhando. Então, se eu for para o protótipo, você verá como ele já tem a interação hover, mas você pode colocá-lo onde ele clicou, ele faria outra coisa. Então, se eu fizer isso e arrastá-lo para cá, você verá como isso se soma em uma segunda interação. Você tem que variar a interação e ter a que você está fazendo. Neste, estamos dizendo onclick, navegue até o segundo quadro. E então, nesse quadro, queremos ser opostos. Então, se clicarmos novamente, isso voltará para aquela página. Então, vamos ver o que isso parece. Eu vou aqui, clique em Avançar. Ele abre a nova moldura. De volta. Ele abre o quadro anterior. 7. Conclusão de curso: Muito fácil, muito simples de fazer. E você pode ver rapidamente como criar alguns projetos realmente úteis e eficientes em termos de tempo muito rapidamente usando os componentes e o Figma. E o que eu gostaria de ver é que você cria um mapa próprio ou um aplicativo ou adapta um aplicativo, um painel e apenas cria alguns botões. E vamos ver como vão essas animações. E eu estarei acompanhando aqueles em nossa área de projeto da classe. Portanto, certifique-se de que, depois de fazer isso, faça algumas capturas de tela ou envie alguns vídeos para que possamos ver como você se sai. E se você tiver alguma dúvida, fique à vontade para deixá-la na área de perguntas. E a avaliação sempre foi muito útil. Obrigado por assistir a essa aula. E se você quiser que eu vá mais fundo nos componentes, podemos fazer alguns realmente, muito complexos, que têm muitas variantes e muitos protótipos de fluxo. Obrigado, e te vejo na próxima aula.