Figma para iniciantes

1. Apresentação: Bem-vindo ao Figma para o curso para iniciantes. Este curso é destinado a iniciantes, designers juniores e aqueles que desejam mudar de carreira e se tornar designers. Aprenderemos tudo sobre interface 3D, componentes, estilos, variantes de layout automático, prototipagem e plug-ins. Se você não conhece nenhuma dessas palavras, acabei de dizer que explicarei tudo o que você precisa saber para ter uma base sólida para projetar na Figma apenas para gerenciar as expectativas. Este curso não substitui a escola. Além disso, você precisará praticar muito sozinho para se tornar designer. Dependendo de quando você estiver assistindo a este curso, talvez eu já crie mais cursos sobre design. Se eles ainda não existem, não se preocupe, eles estão em andamento. Eu pretendo abordar tópicos como sistemas de design, como emprestar o primeiro emprego, como melhorar as habilidades visuais e assim por diante. Agora vamos ao vídeo número um, interface vigorosa. 2. Interface figma: Aprenderemos os botões e recursos mais importantes do Figma e continuaremos expandindo nossos conhecimentos a cada novo vídeo. Para começar, precisamos nos concentrar apenas em duas visualizações, nível superior em uma visualização de arquivo, também conhecida como onde projetamos. Ao abrir o Figma pela primeira vez, você verá essa interface. Então, este de nível superior à esquerda, você tem um menu que contém arquivos. Rascunhos é uma pasta com suas coisas privadas. É excelente se você estiver trabalhando sozinho ou praticando. Por outro lado, os temas são úteis quando você tem mais pessoas trabalhando em um projeto porque hierarquia é um pouco mais profunda e oferece recursos avançados relacionados a sistemas de design, que não é abordado neste curso. Mas vou mencionar uma ou duas coisas ao longo do caminho. No nível superior está o nome da equipe e, em seguida, dentro está um projeto também conhecido como pasta, onde você guarda seus arquivos de design. Eu diria que é isso quando se trata das coisas que você precisa saber agora sobre essa visão. Então, vamos criar um novo arquivo e explorar o que você pode fazer lá. À minha esquerda, você pode ver que estou em rascunhos e começarei clicando em um novo arquivo. Aposto que você passará a maior parte do tempo nessa visão. Então, examinarei todos os botões e seções importantes e contarei como os uso. No canto superior esquerdo, temos um menu com muitas ações. Mas a única coisa com a qual eu interajo é nas preferências. O ajuste do valor do empurrão é feito pelas teclas de seta. Basicamente, você pode mover suas camadas com setas. Quando estou projetando, eu uso principalmente as teclas de seta para mover objetos porque sei que os estou movendo em incrementos de um ou oito pixels. Isso está relacionado às grades. E se você nunca ouviu falar sobre isso, pode conferir meu canal no YouTube. Tenho alguns vídeos que explicam o que é uma grade. É um conhecimento vital de design. Confira. Agora vamos continuar com os outros botões. Se eu não mencionar um botão, significa que eu realmente não o uso. Prosseguindo pela direita, temos uma ferramenta Move. É uma ferramenta essencial para mover coisas. A próxima é uma moldura. Lembre-se do atalho F, porque a moldura é a espinha dorsal de cada design. Você desenha tudo em molduras. E também no painel direito, você tem alguns modelos. E geralmente você precisa escolher o iPhone mais recente e o design interno dele. A menos que você esteja trabalhando em um site, use um modelo diferente ou pode simplesmente colocar sua largura e altura como quiser. Então temos algumas formas geométricas. Lembre-se de que, porque você vai usá-lo muito, parece loucura, mas a maior parte da interface é, na verdade, apenas retângulos. Então temos uma ferramenta de texto com um atalho T. Também vale a pena lembrar porque é um dos elementos centrais do design. Então, geralmente eu apenas pressiono T e faço minha camada de texto. Então temos uma ferramenta manual, mas eu nunca a uso assim. Eu só pressiono espaço. Arraste a tela. E por fim, temos comentários, o pão com manteiga de Figma. Você pode deixar comentários para seus colegas de equipe e eles podem responder. É muito útil e eu o uso o tempo todo. Você pode até marcar sem pernas. Se você não quiser ver comentários o tempo todo enquanto estiver projetando o Turno C e seus turnos do regulador veja novamente quando você seleciona um elemento, você verá várias propriedades. Elemento de deslocamento, lado direito, é onde você manipula os visuais em termos simples. Design, por enquanto, aprenderemos recursos adicionais à medida que avançamos no curso. A seguir, nossos componentes. 3. Componentes: Componentes ou elementos que você pode reutilizar em seus projetos. Digamos que você tenha um botão que precisemos usar em todas as visualizações do seu design com a cópia e colagem usual, eles não compartilhariam uma única fonte confiável. Se você mudar o plano de fundo de um botão, outros não saberão disso. Insira os componentes. Se você tiver um componente que é um botão e usa instâncias desse botão em seu design, qualquer alteração que você fizer no componente principal será refletida nas instâncias. Portanto, você não precisa pesquisar todos os botões e ajustá-los manualmente. Imaginando uma economia de tempo, você pode criar componentes a partir de qualquer camada ou objeto que você projetou. Isso pode ser uma grande variedade de coisas, como botões, ícones, layouts e muito mais. Criaremos um componente de botão e aprenderemos com ele. Então, vamos fazer um plano de fundo, algum texto. Centralize isso. Selecionaremos tudo à esquerda, você vê o botão e esse retângulo, e clicaremos aqui. Agora temos um componente e também queremos chamá-lo de botão desse componente. Ok, agora que temos um componente, como podemos acessar esse componente de botão? Bem, existem algumas maneiras diferentes. Primeiro, você pode acessar Ativos e depois ver nossos componentes locais. Podemos simplesmente arrastá-lo para seus designs como este. Muito fácil. Em seguida, você pode clicar nesse ícone e novamente ter seus componentes locais aqui. Realmente não importa onde você os acessa. Além disso, se você pressionar Shift I, esse painel de recursos será aberto e é a mesma coisa. Agora, esse grupo aqui, esses botões são apenas exemplos desse. Você não colocaria naturalmente esse tipo de componente em seus projetos. Eles deveriam morar em outro lugar separadamente. Pode estar em alguma outra página ou até mesmo em algum outro arquivo. E eu posso te mostrar a magia dos componentes bem rápido. Vamos fingir que isso está disperso por todo o design. Então, eu quero apimentar um pouco esse botão. Eu quero mudar a cor. Deixe-nos algo azul e também o texto. Portanto, é legível. E talvez queiramos colocar algum raio de fronteira lá. Agora parece muito melhor. A próxima coisa que precisamos fazer é tornar esse botão responsivo. O que isso significa? Se eu arrastar isso não parece muito bom. Parece quebrado e queremos que seja inteligente e responsivo. Então, vamos para o próximo vídeo, layout automático. 4. Layout automático: Neste vídeo, falaremos sobre layout automático. É um recurso muito avançado e muito complexo que muitas pessoas tiveram dificuldade em entender como ele funciona. Você pode fazer muito com o layout automático, mas tentarei explicar em uma linguagem simples com exemplos simples como ele funciona e como eu o uso. Eu já pré-fiz um pouco de design aqui para que possamos nos mover mais rápido em voz alta, tornando seus designs inteligentes e responsivos. Vamos começar com um exemplo simples. Um botão, eu vou fazer o botão novamente. Assim, você pode posicionar o conteúdo de um botão arrastando manualmente. Basta colocá-lo em preto. Você também pode selecionar dois elementos e depois posicionar. Então, está alinhado, visto que muda. Mas não é assim que queremos projetar, porque isso não é responsivo ou inteligente. Então, queremos selecionar isso. Vamos criar um componente. Vamos chamá-lo de botão melhor. Também podemos adicionar um pouco de tempero aqui. Uma coisa, eu coloquei o raio do canto aqui, mas ele não refletia nenhum desenho. Isso ocorre porque você precisa verificar o conteúdo do clipe , pois ele recortará o que estiver abaixo dessa moldura, o que significa que então eu vou ver o raio do meu canto. A próxima coisa que eu quero fazer é adicionar layout automático a esse botão. Por quê? Porque quando eu o estico, parece quebrado. Então, vamos adicioná-lo. Temos uma nova seção aqui com muitas coisas novas. Então, vamos tentar explicar isso. A primeira opção é onde seu layout automático vai na vertical ou na horizontal. Bem, eu quero que as coisas no botão sejam empilhadas horizontalmente, então vou deixar neste próximo, alinhamento do conteúdo de um quadro. Bem, eu quero que ele seja centralizado porque eu quero que o botão de texto seja centralizado, não apoiado em um ou no outro lado. Então, no centro, esse é o espaçamento entre os itens. Isso é útil quando você tem mais de um item. Claro, posso te mostrar rapidamente aqui, então vou duplicar. Como você pode ver, ele está configurado para oito pixels. Se eu aumentasse, o espaçamento aumentaria. Obviamente, a linha inferior é para preenchimento, ou seja, espaço a partir das bordas. Eu não quero que seja tanto assim. É muito. Vamos colocar 16. Ok, isso é mais razoável. Também excluímos essa etiqueta extra aqui, e esse é o preenchimento da parte superior e inferior. Pode ser 16. Claro. Ou, se quiser, você pode decidir de forma independente quais são as almofadas de cada borda. Então, agora, se tentarmos expandir esse botão, ele estará no centro. Parece e se comporta como eu quero que se comporte. Você pode ver que embaixo temos algo chamado abraço. Então, o que isso significa? Bem, quando você ativa o layout automático, você também obtém algumas opções na parte superior desta seção de quadros. Você sabe como a largura se comporta, ela é fixa ou monopolizará o que estiver dentro. Se você der um abraço , ele se contrairá em torno do conteúdo desta moldura. Se você tentar estendê-lo, ele imediatamente se tornará fixo. Vamos voltar a nos abraçar porque queremos que tudo seja responsivo e não sabemos qual será o conteúdo ou o nome desse botão. Então, queremos que ele se expanda de acordo. Digamos que, se o botão tiver uma ordem de etiquetas do que se corrigirmos, você verá que isso não funciona. Isso não é inteligente nem responsivo. Então, queremos que ele volte a abraçar. É claro que você pode fazer configurações diferentes nas próprias instâncias. Também é uma forma de fazer isso. Mas eu recomendaria que você desse um abraço porque queremos que ele seja responsivo imediatamente. O próximo é a altura. Tem altura fixa ou vai monopolizar o conteúdo? Se pudéssemos mover isso para cá. Se eu expandir a altura desse botão, porque o alinhamos no meio, no centro. Agora está centralizado, funciona mesmo que eu o expanda assim. Mas com o alinhamento, posso ditar onde meus textos estão acontecendo? Em qual borda ele adere? Quero que fique no centro porque, em todos os casos , quero que fique no meio. Então, isso é perfeito para mim, mas eu não quero que seja fixado tanto na horizontal quanto na vertical. Então eu vou simplesmente colocar tudo em um abraço. Dessa forma, o que quer que eu escreva para o título de um botão, ele se expandirá ou diminuirá de acordo. Se você acha que isso é muita informação, veja isso. Então, temos um design simples aqui. Queremos fazer um feed. Ou uma lista de menu com itens que se repetem em uma coluna, mostrarei como faço isso. Então, primeiro, vou selecionar tudo aqui. Vou usar o atalho Shift a para criar um layout automático a partir da seleção. Aí está você. Meu design mudou agora, mas tudo bem. Eu quero que o espaçamento entre os itens dessa camada externa seja, digamos, oito. Mas agora eu quero que a pizza e o preço estejam em uma linha, não em uma coluna. Então, o que vou fazer é listar o layout automático. Vou criar um novo. Bem, esses dois estão selecionados. Mude a, agora vamos mudar de direção. Queremos que pareça um contêiner. E então você pode ver que todo o limite custa até o tamanho de um contêiner. Mas eu não quero que fique do lado esquerdo. Quero que a pizza fique à esquerda e o preço fique à direita. Então, o que eu vou fazer é entrar no layout avançado. Em nossas configurações de layout, modo de espaçamento, quero mudar isso é muito importante. E eu vou escolher um espaço entre isso forçar todos os elementos a decidirem. Assim. Agora temos pizza à esquerda e um preço à direita. O que aconteceria se eu duplicasse o preço? Digamos que eu queira aplicar um desconto. Ele estará no meio porque está calculando o espaço igual entre os itens em um determinado contêiner. Mas se eu quiser ter esses dois preços novamente à direita, bem, eu preciso embrulhá-los em outra moldura. Vou usar o atalho de layout automático. Vou colocar, digamos, 16 pixels de espaçamento entre esses dois itens, vou ampliar um pouco. Vamos selecionar um preço. Opções extras para texto, depois decoração e riscado. Talvez isso possa ser ainda menor. E talvez possamos mudar. Fica um pouco acinzentado e talvez seja vermelho. Aí está você. Então, se selecionarmos esse quadro aqui, chamado quadro para ser descritivo, podemos ver que temos dois itens, uma camada de texto e outro quadro que por acaso tem layout automático. E porque temos apenas o espaço entre eles, na verdade os forçaremos a decidir. Isso é muito útil no design, especialmente em web design, quando você tem cabeçalhos semelhantes e precisa pressionar, digamos, um logotipo ou um título à esquerda e o menu Início à direita. Mas ainda não terminamos com o layout automático de agrupamento. Temos layout automático como recipiente para esta foto e também essa pizza e preço e também algumas descrições. Vou fazer um layout automático com isso, todo esse quadro. Mude a. Agora é layout automático. É um abraço. Posso até colocar altura fixa e colocar alguns pixels aqui, se quiser. E agora, se eu duplicar esse cartão, esse não é o efeito que eu realmente queria. Então, vou mudar a direção do nível superior ou do layout aqui. E eu posso simplesmente duplicar, e é inteligente, é responsivo, fica exatamente como eu queria. Uma coisa que eu quero mudar é o espaçamento entre os itens. 32 parece ser um bom número. Se não quisermos ver, como o design se espalhando pela moldura, podemos recortar o conteúdo. Aí está você. Outra coisa que eu quero mencionar é que você pode colocar coisas dentro do layout automático, mas apenas arrastar diria que eu quero colocar esse botão de pedido e quero que ele seja em tamanho real. Então, vou até essa opção aqui e selecionar Contêiner de campo. E é assim que você pode expandir seu botão ou qualquer outro elemento dentro do quadro que seja layout automático. Todas as coisas que estão dentro de uma moldura layout automático podem ser expandidas para parecer contêineres. Essa é uma opção extra para objetos, elementos que ocorrem dentro do layout automático. Além disso, se você quiser alterar a ordem dos elementos, basta selecionar um elemento. E então, com as teclas de seta, você pode simplesmente subir e descer ou para esquerda ou para a direita e posicionar seus elementos como quiser. Todos os espaçamentos serão consistentes porque o Auto Layout é inteligente. Isso é tudo que eu quero compartilhar quando se trata de layout automático com você neste vídeo, foram muitas informações. layout automático é mais importante, mas todas as outras coisas são ainda mais avançadas. Então, vamos parar aqui. Vamos pensar um pouco sobre isso. Eu recomendo que você pratique, tente fazer a mesma interface que eu fiz por aqui. Ou você pode simplesmente fazer uma captura de tela ou ver seu aplicativo favorito e tentar replicar um pouco a interface usando o layout automático. A seguir, nossa variação. Isso está relacionado aos componentes. Então, nos vemos lá. 5. Variantes: Bem-vindo à variance. Este tópico é uma curva de aprendizado um pouco mais acentuada, mas farei o meu melhor para torná-lo o mais simples possível para você. Portanto, a variância e as propriedades podem ser aplicadas apenas em dois componentes. Eu tenho um componente de botão aqui e vejo essa linha chamada propriedades. Quando você pressiona Plus, você tem quatro opções. Vamos testar cada um deles e ver o que acontece. Acho que aprender fazendo é a melhor maneira de aprender variância e propriedades. Então, primeiro de tudo, vamos usar o booleano. Booleano significa que alguma camada pode ser ocultada ou mostrada. Assim, podemos, por exemplo, mostrar e ocultar um ícone. Então, vamos fazer exatamente isso. Digamos que ele tenha o valor padrão do ícone, verdadeiro. Tudo bem. E então precisamos selecionar esse ícone e encontrar a linha da camada ou aqui, clicar em tem ícone. Agora juntei tudo. E se eu criar uma instância desse botão, tenho essa propriedade chamada tem ícone e posso mostrar ou ocultar o ícone. Simples, certo? Além disso, você pode simplesmente selecionar qualquer coisa que você deseja mostrar ou ocultar e clicar neste ícone. Crie uma nova propriedade a partir daqui, você não precisa criar a primeira propriedade de um pai. Você pode criar propriedades a partir de subcomponentes. Então, vamos tentar dessa maneira. Digamos que tem texto. Aí está você. E agora, quando clicamos na instância, mostramos ou ocultamos texto, com apenas alguns cliques, você criou um botão que pode ter uma aparência muito diferente, mas você só tem um componente que é bem elegante. Então, lembre-se de como tínhamos quatro opções aqui. Nós só exploramos esses booleanos. Então, também podemos criar uma troca de instâncias. Vou encontrar algum ícone, não importa qual seja a grande propriedade. E, como você pode ver, não está ligado a nada. Nós acabamos de criá-lo. É por isso que gosto de criar essas coisas partir de componentes reais que mudarão o comportamento. E então você não tem esse ponto de exclamação e é um pouco mais rápido. Então, vou encontrar meu calendário. Vou clicar nesse ícone e vou escolher essa única opção. Então, o que acontece é que temos um ícone aqui e temos um pequeno menu suspenso onde podemos mudar o ícone para outra coisa. E, claro, outras opções ainda funcionam. E a última opção foi o texto. Então, vou criá-lo a partir da camada que mudará o comportamento. Então, conteúdo, vou clicar nesse ícone aqui, ou podemos simplesmente criar uma propriedade. Ele detecta tudo o que você já projetou. Portanto, é um pouco mais rápido fazer isso de dentro de nossos componentes. Então, em camadas que mudarão o comportamento. E quando clico na instância, vejo meu texto e posso escrever outra coisa. Eu tenho uma maneira mais simples de gerenciar ícones e alterar texto em componentes. Então, quando se trata de ícones diferentes, eu apenas encontro meu ícone, eu apenas o arrasto e pressiono Option Command. E quando você vê esse contorno roxo no seu ícone, basta soltá-lo. E aí está. Está trocado. Portanto, não é necessário trocar essa instância aqui. Quando se trata de texto, eu não uso essa propriedade de texto nem aqui. Porque se você pressionar T, ele pode simplesmente mudar textos desse jeito. Não é tão difícil. Então, eu não preciso realmente usar essa propriedade de texto porque acabei alterá-la nelas, no próprio design. A última coisa que temos é a própria variante. Então, vamos clicar nesse. Quando você vê essa linha tracejada que indica que esse componente tem na verdade, variantes dentro de vários componentes. Então, vou criar uma nova variante. Vamos mudar um pouco o design. Agora parece completamente diferente. E como editamos a variante, obtivemos imediatamente essa propriedade um. Eu quero renomeá-lo. Então, basta clicar duas vezes. Vamos chamá-lo de estilo e, em seguida, você precisa selecionar cada componente e ajustar o nome. O padrão é bom para este. Vou deixá-lo para este. Não quero que seja muito intuitivo, então vou chamá-lo de negativo. Então, quando eu seleciono minha instância, eu posso simplesmente escolher um estilo diferente, como o negativo. E eu posso novamente manipular outras propriedades, como ocultar ícone, por exemplo. E também funciona quando você volta. Eu tenho apenas duas variantes no componente de botão, mas veja quantas opções diferentes estão disponíveis. Então esse é o poder das variantes e propriedades. Só porque a variação é um pouco confusa, recomendo que você pratique. Tente criar botões ainda mais complexos. Tentei criar elementos de cartão, campos de entrada e assim por diante. Quanto mais você pratica, mais fácil fica. A seguir, estilos, algo muito parecido com os componentes juntos. 6. Estilos: Bem-vindo aos estilos. Os estilos são muito semelhantes aos componentes. É apenas um conjunto de propriedades que você salvou com um nome. E então você pode usar esse estilo. Onde quer que você queira usar o InDesign. Você pode ter estilos de cor, texto e efeito. Então, vamos começar com a cor. Vou ajustá-lo para ficar, digamos, roxo. E eu vou criar um novo estilo. Incrível. Eu vou criar outro. Vamos ter, digamos, azul. Excelente. Agora, se eu criar outro oval e clicar no ícone de estilo, posso ver que tenho esses dois estilos aqui, então eu posso simplesmente aplicá-lo e ele terá a mesma aparência que este. Então essa é a essência dos estilos. Agora vamos tentar fazer o mesmo com o texto. Novamente, style icon plus. E você escolhe. Grande. Minha força para ser inteligente aqui, vamos mudar isso. Finja que é assim. E então você quer que ele se pareça exatamente com esse texto aqui. Então você pode simplesmente clicar nesse novo elemento de texto, ir para o estilo e escolher seu estilo. Agora vamos tentar fazer o estilo Effect. Então, vou fazer um pouco o efeito da primeira semana para que fique visível. E agora vamos dar um nome a ele. Se clicarmos no Canvas, podemos ver estilos de efeitos, essa sombra. Então eu posso aplicar isso a outras formas ovais, até mesmo um texto. Esses são estilos, não são tão difíceis. É apenas um conjunto de propriedades que você deseja reutilizar em todo o design. No próximo vídeo, falaremos sobre prototipagem. Então, nos vemos lá. 7. Criação de protótipos: Para realmente mostrar a prototipagem, precisamos ter alguns designs. Então eu encontrei esse arquivo da comunidade e ele será excelente para demonstrar prototipagem. primeiro passo é ir para o modo de protótipo. Agora, a interface parece um pouco diferente. Não estamos projetando. Vou ampliar. E digamos que, a partir do login, eu queira acabar na página inicial. Então, vou selecionar o botão Login e soltar quando essa seta tocar o quadro da página inicial. Agora temos alguns detalhes de interação aqui. Há muitas, muitas maneiras diferentes de acionar algo no Figma, como mostrar um modelo ou passar para outra visualização. Mas, principalmente, eu uso o onclick, mas só para você saber, você também tem muitas outras opções. próxima opção é navegar para uma visualização separada ou abrimos a sobreposição, trocamos a sobreposição, fechamos a sobreposição, voltamos, rolamos ou abrimos até mesmo um link. Por enquanto, na verdade, só queremos navegar até alguma visualização porque você soltou esta seta na página inicial, fig. molar o nariz. Então está aqui. Agora também podemos colocar alguma animação em nossos protótipos para que ela possa ser instantânea, dissolvida, animar de forma inteligente e assim por diante. Vamos verificar o Smart Animate um pouco mais tarde, porque esse é interessante. Mas, por enquanto, vamos usar o instantâneo. Ok, vamos fechar isso. E então, se você pressionar este ícone Play aqui, você visualizará seu protótipo. Então, está carregando agora. Tudo bem. Se você clicar fora, verá um ponto de acesso clicável. Agora vamos clicar em Login, e isso é exatamente o que configuramos em nosso arquivo de design. Agora, se quisermos enviar dinheiro, vamos selecionar esse ícone ou aqui, e essa é a nossa próxima tela. Isso é muito divertido. Vamos fechá-lo. Então, vou tocar aqui e estou exatamente onde quero que esteja na visualização de envio de dinheiro. Agora, se eu quiser voltar, pressionarei mais e interações. Clique para voltar. Se eu clicar para trás, estarei lá. Então, agora temos um círculo completo aqui. Então. Se eu pressionar Enviar, quero acabar nessa visualização. E isso funciona. Então, essa é a essência da prototipagem. Você está apenas criando pontos de acesso e, em seguida, o que acontece a seguir? Qual visualização você carrega? Você pode renomear. Você pode colocar como fluxo principal e, em seguida, vamos tentar fazer algo diferente. Então, vou retirar isso duplicado. E também vou levar esse teclado para cá. Vá para o modo de design bem rápido. Primeiro, precisamos transformar isso em um quadro porque os grupos não funcionam com prototipagem. E então vamos para o modo de protótipo, conecte esses dois quadros. Então, ao clicar, não quero navegar, quero abrir uma sobreposição. Isso está correto. Você quer que seja centralizado? Não. Quero que seja centrado na parte inferior e quero fechar quando clicarmos do lado de fora. E sim, quero adicionar um plano de fundo por trás da sobreposição. Podemos até mesmo ajustar a animação. Entre e você terá um pequeno vídeo aqui para poder visualizar o que vai acontecer. Sim, isso é exatamente o que eu quero de baixo para cima. E eu vou fechar. Agora, no modo de prototipagem, na barra lateral, posso ir para um fluxo diferente e agora posso tocar em enviar. E, de fato, temos um modelo. Eu posso fechá-lo clicando fora. Isso é exatamente o que eu queria. Posso até ajustar a animação, vivê-la para ser mais rápida. Eu posso colocar 150 milissegundos. Agora está mais rápido. Parece estonteante aqui. A próxima coisa que quero mostrar que é realmente muito útil na prototipagem é a animação inteligente. Então, com o propósito disso, vou criar dois quadros. Vou fazer um círculo. Vamos chamá-lo de círculo. E então eu vou expandi-lo nos próximos. Então, basicamente, estou digitalizando minha animação porque quero usar a opção de animação inteligente. É importante que os elementos sejam chamados da mesma forma. Todos os elementos que você deseja animar, fotografar e compartilhar de forma inteligente o mesmo nome. Agora vamos ao protótipo. Conecte-se ao outro quadro. Não queremos fazer isso com um clique. Vamos usar depois de demora. 800 milissegundos está bem. Animação, animação inteligente. E você pode até escolher que tipo de animação ela pode ser. Bouncy, por exemplo. O que acontece aqui é que ele funciona automaticamente. Você pode até mesmo fazer um loop. Então esse círculo simplesmente saltaria. Não queremos usar com um clique. Queremos dizer que, após demora, animação inteligente, saltitante, ótima. Agora, quando visualizamos, ele pula assim sozinho. Assim, você pode criar animações bem interessantes. Antes de finalizar este vídeo, quero mostrar a vocês um dos meus próprios projetos. Não é um grande problema, mas tenho algumas conexões aqui. Então, se eu abrir meu modo de protótipo, você pode ver que eu conectei muitos elementos juntos. E geralmente os arquivos ficam assim depois que você aplica seus pontos de conexão. Acredito que essas informações sejam suficientes para você começar a prototipagem. Você pode fazer coisas realmente loucas com protótipos. Eu vi coisas realmente incríveis no Twitter que as pessoas fazem. E o céu é o limite. No próximo vídeo, vamos verificar os plug-ins. vejo lá. 8. Plug-ins: Bem-vindo ao vídeo de plug-ins. Este vai ser muito curto porque os plug-ins são muito simples. Se você quiser instalar um plugin, basta clicar no painel do Figma, clicar na guia Comunidade aqui e ter acesso a todos os tipos de ativos e plug-ins gratuitos e outros enfeites. É realmente cheio coisas super úteis e menos úteis. Mas é incrível como as pessoas se esforçam tanto para compartilhar seus ativos e plug-ins. Então, por exemplo, podemos clicar em alguma categoria e queremos pesquisar plugins. Os ícones são plugins bastante populares, devo dizer. Então, talvez possamos experimentar este. Pacote de ícones gratuito da I conduct. Você acabou de executá-lo. O plugin está carregando e digamos que você clique neste N. Aqui vamos. Cada plugin funciona de forma um pouco diferente. É claro que faria sentido para mim examinar cada plugin e mostrar como ele funciona, porque você só precisa ler a descrição da documentação do plug-in e depois usá-lo. Eu não uso tantos plugins. Você pode ver que esses dois eu instalei apenas para o propósito deste tutorial. Mas, e também esse, os que eu uso, às vezes o Unsplash ProtoPie é útil porque eu gosto de fazer meus tipos de produtos nessa ferramenta. Fixo. São Francisco é muito boa porque quando você usa a fonte de São Francisco, quando você muda de tamanho, espaçamento entre letras também precisa mudar. Portanto, este excelente plug-in para deixá-lo perfeito em pixels e como a Apple pretendia. E este último é na verdade meu plug-in. Eu escrevi isso, ele faz uma biblioteca de ícones. Isso é algo que vou mostrar no meu próximo curso sobre sistemas de design. Se você achar que os plug-ins são necessários em seu trabalho, basta instalar vários deles e usá-los o tempo todo. Pessoalmente, gosto de manter meus arquivos sem depender de plug-ins porque eles podem desaparecer amanhã e você está com problemas. Mas é claro que não faltava nenhum plug-in ou algo parecido. Posso te mostrar mais um plugue de como funciona no Splash. E podemos colocar um pouco de textura. Agora, esse retângulo tem essa sensação dessa textura, é bem elegante e economiza muito tempo de design. Eu encorajo você a acessar a guia “Comunidade” e explorar os diferentes ativos que as pessoas estão compartilhando. Há muitos plug-ins novos todos os dias. E também você pode encontrar sistemas de design, alguns padrões para diferentes coisas ácidos visuais e assim por diante. Todas essas coisas podem ajudá-lo a se tornar um designer melhor e realmente ver como outras pessoas fazem certas coisas. E é um representante, aprendemos tudo o que precisamos saber para ter sucesso no uso do Figma. Há, é claro, toneladas de coisas avançadas que eu poderia abordar em alguns dos meus próximos cursos. Mas até agora, você tem uma base realmente sólida para começar a projetar com eficiência no Figma. No meu próximo vídeo, vou compartilhar algumas das palavras da minha lista com você. Então você está aí. 9. Conclusão: Espero que você tenha gostado deste curso e que tenha confiança para começar a projetar na Figma. Acabamos de descobrir neste curso e você pode desbloquear muito mais conhecimento se praticar. Você pode me encontrar no Twitter e também no YouTube, Você pode me encontrar no Twitter e também onde tenho muitos tutoriais do Figma. Se você gosta, podcasts, confira minha festa projetada por podcast. Tenha um bom dia e tenha um design feliz.