Figma Prático essencial: crie filmes App UI

1. Introdução ao curso: Eles querem aprender o básico do Figma e seus recursos essenciais do zero. E a senhora quer aplicar rapidamente todas essas ferramentas na prática, então você é definitivamente o lugar certo. Porque o que é um curso prático? Vamos criar um aplicativo de filmes. É uma oportunidade perfeita para cobrir todas as ferramentas e estigmas básicos, como layout, grades, texto, cores, estilos e assim por diante. Mas também abordaremos todas as características importantes, incluindo componentes, variância e também protótipos. Portanto, se você estiver pronto para criar o aplicativo de filmes, não espere e se inscreva neste curso agora mesmo. 2. Figma assets [arquivo gratuito]: Então, exatamente para este curso, eu criei um arquivo Figma, então você pode usá-lo para sua própria referência. Este arquivo é muito útil porque eu crio todos os tipos de cores, estilos , tecidos, ótimos estilos e também componentes que você precisa usar para este projeto. Você pode encontrar os estilos mais antigos aqui na barra de menu à direita e reutilizá-los ao longo deste curso. Você também pode conferir todos os diferentes componentes que preparei para você e também abordaremos alguns deles. Além disso, há outra página chamada de telas de design. E aqui você pode ver todos os designs diferentes que são relevantes para este aplicativo de filmes. Especificamente, vamos nos concentrar juntos na tela de boas-vindas e em toda a tela, mas você também pode navegar e conferir outras telas que eu preparei para você. Essa é uma ótima oportunidade de usar as telas para sua prática de aprendizado. E talvez também se você quiser reutilizá-los em seu portfólio. Portanto, certifique-se de não querer esse arquivo Figma. Deixei o link abaixo da descrição deste curso. E vamos começar. 3. Projetar tela de boas-vindas - parte 1: Então, vamos começar criando nossa primeira tela de boas-vindas. Se você for usar meu arquivo Figma, você pode navegar imediatamente até a guia Páginas e adicionar uma nova página. Então, vou fazer exatamente o mesmo e nomear esta página como especialista em tamanho. Sinta-se à vontade para nomear esta página da maneira que quiser. Então, a razão pela qual estou trabalhando exatamente no mesmo arquivo é porque eu já tenho todos esses tecidos, cores, estilos e estilos de grade definidos. Claro, vou explicar tudo do zero, como tudo foi projetado inicialmente por mim. Então, a primeira coisa que devemos fazer no Figma quando começamos a projetar nosso aplicativo web, neste caso, para o aplicativo de filmes, vamos até a barra de menu superior e selecionamos o quadro. O Frame nos permite criar algum tipo de tela que vamos usar em nosso aplicativo web. No quadro do lado direito, você tem muitas predefinições que podem ser usadas em seus projetos. Por exemplo, se você estiver trabalhando com aplicativos móveis para ter tamanhos de tela diferentes para iPhones, Androids e assim por diante. Mas, para o nosso caso, eu sou ótimo para trabalhar com desktop. Vou pegar esse modelo rapidamente e clicar nele aqui. Então, agora, criamos nosso primeiro quadro. Você também pode ver em uma etapa posterior. Portanto, na barra de menu direita, você pode ver que sua largura é de 14, 40 e também a altura, de 1024 pixels. Vamos renomear rapidamente esse quadro. O nome é a tela de boas-vindas. Agora, a primeira coisa que vamos fazer é mudar a cor de preenchimento desse quadro. Portanto, certifique-se de navegar até a seção e poder realmente fazer isso, por exemplo manualmente para selecionar a cor que deseja aplicar a este projeto. Ou você também pode ir ao menu de estilos e selecionar um dos estilos de cores que preparei para este projeto. Então, exatamente para este, vou usar um gradiente angular escuro que vou aplicar e com um clique, já tenho esse lindo gradiente para minha tela. Se você quiser descobrir como ele foi criado, você sempre pode clicar em desanexar estilo. E aqui você pode ver exatamente como esse gradiente foi criado. Então, por exemplo, a cor dourada para essa cor roxa e também coloque uma cor escura e todas as outras configurações aplicáveis a esse gradiente. Mas, na verdade, vou voltar aos meus estilos de cores e reaplicar o estilo apenas para obter consistência. Então eu vou pegar um retângulo, basicamente criado dentro da minha moldura. Portanto, vou me certificar de que as dimensões sejam exatamente iguais às da minha moldura para corresponder exatamente ao tamanho. Você também pode ver que o retângulo pertence à moldura. Portanto, certifique-se de que ele esteja colocado exatamente dentro, pois, por exemplo você pode ver facilmente quando ele não pertence à moldura. Também é visível no painel de camadas. Então, exatamente para esse retângulo, eu quero aplicar uma imagem. E para isso eu vou usar alguns plugins que são aplicáveis no Figma. Então, aqui na garrafa de recursos, podemos acessar os plug-ins e realmente pesquisar os plug-ins que queremos usar. E no meu caso, vamos encontrar o Unsplash. Este vagão ajuda você a encontrar muitas imagens de recursos gratuitos que você pode inscrever em seu projeto. E vamos usar esse plug-in para silenciar muitas vezes. Então, aqui vou digitar filme e encontrar exatamente a imagem que quero aplicar ao meu plano de fundo. E vamos clicar rapidamente nessa imagem. Eu acho que parece ótimo. Mas o fato é que você pode ver que o campo precisa ser estilizado para a cor sólida e também para a imagem. Vamos remover rapidamente essa cor sólida. E vou diminuir a opacidade dessa imagem para algo em torno de 10%. E eu acho que está ótimo porque agora nosso plano de fundo parece muito mais interessante. Tudo bem, a próxima etapa será adicionar uma grade de layout real para nossa moldura aqui no estilo. Assim, você pode acessar novamente os estilos de grade e selecioná-los no centro calmo. Vamos descompactar rapidamente esse estilo só para ver como tudo funciona. Então você pode ver uma lista suspensa. Existem três tipos diferentes de grade de layout, mas para aplicações web sempre usaremos colunas. Portanto, a contagem é de dez colunas que o número de colunas que você pode ver aqui na tela. Além disso, a largura é definida como 104, o que significa que essa coluna Rep, tem esse tipo de em que a calha está definida para 16 pixels. E essa é exatamente a distância entre a maior parte das colunas que você pode ver. Obviamente, os cinco estão alinhados ao centro. 4. Projetar tela de boas-vindas - parte 2: Agora podemos adicionar rapidamente todos os nossos elementos visuais a essa tela. Então, vou navegar rapidamente até os ativos e encontrar meus logotipos. Então, vou arrastá-lo e soltá-lo rapidamente aqui no meu quadro. Se você quiser ver como é feito, apenas certifique-se de abrir esse componente e ver todo o tipo de formas vetoriais que eu apliquei e também o texto. Mas, por enquanto, vamos deixar como está. E eu apenas me certificaria de que está alinhado horizontalmente. E então vamos selecionar decks e digitar aqui alguns textos que tornam atraente para as pessoas fazerem login. Estilos. Vou selecionar 18 pixels normais. Então, se desvendarmos esse estilo, podemos ver que estou usando fantoches como meu lago. E o peso é regular e também o tamanho da fonte se ela infectar células e a altura da linha for 20. Vamos alinhá-lo novamente ao centro. E vou diminuir rapidamente a largura entre essas duas camadas. Se você quiser saber exatamente quantos pixels existem entre as duas camadas, você pode segurar Option no Mac ou Alt no teclado do Windows. Em seguida, vou selecionar um retângulo e jogar meu botão aqui que corresponde a duas colunas na minha tela. Também mudarei rapidamente o raio do canto com o valor de 14 e o maior será 54 pixels. Então, rapidamente, novamente, vou mudar a cor para roxo e adicionar outro texto aqui. Para garantir que meu texto esteja exatamente alinhado no centro desse botão, selecionarei essa camada retangular e também essa camada inferior e as alinharei horizontal e verticalmente. Finalmente, vamos rapidamente com o botão direito do mouse e clicar na Seleção de grupos para criar um grupo em nossa seção de camadas Também podemos renomeá-lo para o botão de login apenas para nossa própria referência. Acabei de baixar exatamente a parte inferior aqui e talvez eu também diminua a distância aqui. Vamos também pegar essa camada de texto e duplicá-la com um atalho de tecla que é Control plus ou Command plus B no seu Mac. Então, vou arrastá-lo exatamente aqui e vamos alterar o texto que diz que não há contas. Cadastre-se. Também diminuirei rapidamente o tamanho desse texto e também garantirei que o cadastro esteja selecionado e alterado para o parafuso. Espere. Vamos também acessar rapidamente as Configurações de fonte e adicionar a ferramenta subjacente, nossa inscrição, perfeita. Então, vamos selecionar todas essas camadas, alinhá-las umas às outras e também clicar do mouse e selecionar a seleção do grupo. Finalmente, também podemos alinhar tudo novamente acordo com nosso francês, apenas para ver os resultados finais. Portanto, certifique-se de também selecionar seu quadro de tela de boas-vindas. E podemos esconder essa grade de layout. E dessa forma, você pode ver exatamente o design e como tudo está alinhado. Pessoal perfeito, que criou essa tela extremamente simples, mas espero que vocês tenham conseguido repetir todas as etapas que acabamos de fazer juntos. 5. Criar navegação lateral do painel: Acabamos de criar nossa primeira tela de boas-vindas. E agora vamos criar um painel, que será nossa primeira tela inicial para o aplicativo de filmes. Então, vamos navegar novamente até a barra de menu superior e clicar no quadro. E também nas predefinições de quadro, clicarei na moldura da área de trabalho. Vamos renomeá-lo rapidamente para a tela inicial. E aplicarei imediatamente o estilo de cor ao fundo da moldura. E vai ser um estilo de cor escura. Então, primeiro de tudo, vamos criar uma barra de navegação do site. E podemos fazer isso selecionando uma ferramenta retangular e jogando-a no lado esquerdo da tela Vou mudar a largura para 274 pixels. Certifique-se de alinhá-lo à esquerda e também ao centro. Aqui, vou aplicar esse tipo de cor. Então esse é o código hexadecimal. É um pouco mais claro do que nossa cor de fundo escura. Também tenha alguma separação visual. Vou até os efeitos e, na verdade, aplicarei sombras projetadas. Então, vou usar essa cor que na verdade é roxa e terá 40% de opacidade. E vou me certificar de que a posição disso seja zero pixel no eixo y e também em pixels aqui, também o valor do desfoque, vou aumentá-lo para 90 graus. No momento, você pode ver algum tipo de brilho roxo que realmente sai da nossa barra de menu lateral. Nenhum. Novamente, vamos pegar nosso logotipo e vamos alinhá-lo exatamente ao centro. E isso também mudará sua posição para garantir que a distância do topo seja 40 e a mesma distância seja do lado esquerdo. Agora vamos selecionar a ferramenta de texto, na qual criaremos algumas camadas de texto, ou seja, as páginas de nossos painéis. Então, o primeiro vai estar em casa. E aplicarei imediatamente a fonte normal de 16 pixels. E você pode ver o propósito. A altura da linha é de 24 pixels e o tamanho é 16. Vou apenas duplicá-lo algumas vezes. Agora, o que eu tenho que fazer é apenas mudar seu conteúdo. Como estaremos localizados em nossa página inicial, alterarei seu peso de forma muito ousada. Portanto, também nesta barra de menu é uma boa ideia adicionar alguns ícones visuais para também simbolizar onde o usuário está envolvido em meus ativos. Eu preparei vários ícones que você pode simplesmente arrastar e soltar aqui nesta área e realmente aplicá-los ao seu projeto. Se você quiser encontrar este item de ícone, venha do zero. Você pode ir rapidamente para a seção do plugin e digitar ícones meteorológicos. E esse é exatamente o plug-in com o qual eu uso para trabalhar em meus aplicativos. Por exemplo se você digitar filme, poderá ver exatamente o mesmo ícone que acabei de aplicar aqui. A única diferença é que, por padrão, ele tem cores pretas, então você precisa alterar o estilo para combinar com seu projeto. Mas de qualquer forma, vamos selecionar todos esses ícones segurando a tecla Shift. E eu vou alinhá-los exatamente ao centro. Agora podemos ver que a distância é de 12 pixels. Isso é o que eu quero alcançar neste design. E agora vamos usar um por um e aplicar exatamente o alinhamento vertical à nossa camada de texto e à camada IP. E para cada um, isso é um ícone, vou criar um grupo com controle e atalho G. Você também pode fazer isso com o botão direito do mouse e clicar em Seleção de Grupo. Agora você pode ver que a nova seção de camadas terá vários grupos diferentes. Então, vou selecionar todos esses grupos e também me certificar de arrumar tudo. E a distância entre todos esses ícones será de 35 pixels. Também vou me certificar de que eles também estejam alinhados à esquerda do meu logotipo. Aqui também, a distância será de 58 pixels. E também quero separar alguns desses itens do menu. Então, por exemplo, vou abaixá-los até o fim. Finalmente, eu também quero separar esse tipo de jogador, então também vou reduzi-los até aqui. Perfeito. E, na verdade, a última coisa que faremos com todos os itens do nosso menu, exceto nossa página inicial, é selecioná-los. E também em uma etapa posterior, diminuiremos a opacidade para 80 por cento. E a razão para isso é que eu quero mostrar visualmente ao nosso usuário que ele está localizado na página inicial. Então, finalmente, quando obtivermos tudo, vamos selecioná-lo e agrupá-lo por enredo controlado, atalho de truques. E vou criar rapidamente um componente. E esse componente vamos reutilizar em todo o nosso aplicativo. Vamos renomear rapidamente esse componente aqui e chamá-lo de barra de navegação do site. 6. Introdução aos componentes na Figma: Para explicar brevemente os componentes se você é novo neles, isso significa que temos, antes de tudo, nosso componente principal. Você pode sentar em seu painel de camadas se, sem o k, tivermos realmente um componente filho que, na verdade, é chamado de instância no Figma. Também podemos duplicar um número ilimitado de instâncias no Figma, e isso significa, por exemplo se eu acessar meu componente mestre, você também poderá vê-lo na barra de menu, por exemplo, quero alterar a cor de preenchimento do meu retângulo. Você também pode ver como tudo está sendo alterado. Então, isso realmente acelera seu fluxo de trabalho e seu processo de design. Por exemplo, você não precisará acessar todas as cópias da sua barra de navegação e alterá-las manualmente, mas poderá fazer isso com um clique. Mas, por enquanto, vamos excluir todas essas instâncias e focar apenas em nossa tela inicial. 7. Design Movie banner - Seção de heróis: Para nossa tela inicial. Então, decida mais. Vou aplicar uma grade de layout porque quero ter certeza de que tudo está alinhado corretamente. Então, vamos ver nossos estilos de grade de layout. E desta vez vamos selecionar 12 colunas de grão lateral. E você pode ver que a grade é realmente movida mais para o lado direito, que na verdade não encontra nossa barra de navegação. Então, se você descompactar esse estilo de grade de layout, poderá ver que a contagem de colunas é 12 e tudo está alinhado à esquerda. A diferença antes de termos tudo era que ela estava mais viva no centro da tela. Mas, nesse caso, realmente precisamos trabalhar com um alinhamento à esquerda. Além disso, você pode ver o valor da largura de cada coluna. O deslocamento é 306 e o valor da mediana é 24 pixels. Agora eu quero criar uma barra de navegação do Opera que seja bem simples. Então, vamos começar com uma camada de texto e digitar filmes. Então, vou selecionar apenas o 16º estilo de fonte regular de 6 vezes. E isso garantirá que ele esteja alinhado ao lado dessa grade. Vamos duplicar duas vezes a camada de conjuntos com Controle D ou Comando mais o atalho. Aqui vamos mergulhar em séries de documentários. Vou selecionar três camadas e também clicar em arrumar e garantir que a distância seja de 32 pixels entre elas. Então, vamos agrupá-los rapidamente e simplesmente subir ou enviar uma mensagem de texto. Aqui, eu quero adicionar um avatar, então vou clicar em Alice. E, na verdade, mantendo pressionada a tecla Shift, desenharei uma elipse com um valor de 16 por seis pixels. Essa elipse será meu avatar. Então, vou usar novamente a ferramenta Unsplash. Com o Unsplash para alérgenos, encontre o retrato que eu quero aplicar para este avatar. Aqui, com uma camada de texto, digitarei novamente meu nome e também garantirei que ambos estejam alinhados ao centro. Então, vamos também garantir que a distância entre esse texto e o Avatar seja de oito pixels. E agora, acho que esse Alix parece bem pequeno em comparação com o texto, então vou aumentar suas dimensões para o valor de 32 pixels. E agora, acho que parece muito, muito melhor. Vamos novamente formar um grupo. E, finalmente, quero adicionar mais dois ícones ao meu painel de ativos, que na verdade são um ícone de sino e também um ícone de pesquisa. Esses elementos são apenas anúncios visuais adicionais que podemos usar em nosso estilo. Então, vamos garantir que a distância entre todas essas três camadas seja de 24 pixels. E vou agrupar todos eles e garantir que eles também estejam alinhados adequadamente aqui lado esquerdo da minha grade de colunas. Ótimo. Agora podemos realmente pegar tudo aqui e também alinhá-lo um ao outro. Então, vou criar outro grupo e chamá-lo de barra superior. Agora, vou criar novamente um componente que vamos reutilizar por meio de nosso projeto. Então, vamos garantir que a distância até a parte superior da tela seja de 40 pixels. Resumidamente, é assim nosso painel inicial está no momento, o que eu acho que está realmente começando a ganhar algumas formas. Vou ativar novamente minha coluna e adicionaremos outro elemento visual. Aqui está o filme principal que mostraremos aos nossos usuários. Então, agora eu vou desenhar um retângulo, certificar de que ele esteja alinhado corretamente à esquerda do que à direita e que sua altura seja de 455 pixels. Agora vou alinhá-lo exatamente na parte superior da tela. Portanto, certifique-se de que, em suas camadas, seu retângulo seja colocado totalmente na parte inferior para que você possa ver os outros elementos que acabamos de criar juntos. Agora, vou desativar a grade e também procurarei outra imagem aqui que vamos usar para este filme. Este parece bem cinza e vou aplicar outro gradiente linear para que possamos ter mais contraste entre os próximos textos e outros elementos visuais e o plano de fundo no campo. Vamos selecionar um gradiente linear e mudar seus marcadores assim. E também certifique-se de que a opacidade seja de 100%. Então, aqui temos uma transição muito melhor e mais suave usaremos para esse elemento. Agora vamos criar um título para o filme, por exemplo inside or this is shift, esse nome super aleatório que eu inventei. Mas você pode usar outros aspectos cinematográficos que você adora. Agora, vou aplicar 48 pixels em ambas as fontes Poppins. Então, vamos também garantir que ele esteja alinhado à esquerda da minha barra de navegação do Opera. Vou duplicar essa camada e realmente renomeá-la. E vou mudar o estilo do texto para fixo e os pixels regulares. Talvez também seja melhor diminuir um pouco o tamanho da fonte. Finalmente, o que eu tenho que fazer é realmente criar alguns botões. Vamos pegar nosso retângulo e desenhá-lo aqui. E vou mudar as dimensões para 139 a 54 pixels. E também o raio do canto terá quatro pixels. Então, agora, vamos preenchê-lo e também modificá-lo, a cor roxa. E, claro, temos que digitar call to action, que é chamado de watch. Agora será novamente, os 16 pixels, tamanho de fonte médio. E vamos pegar essas duas camadas e alinhá-las uma à outra. Esse botão se tornará outro componente que vamos reutilizar neste projeto. Agora, também quero finalmente criar outro botão secundário que permitirá que nossos usuários gostem e gostem de nossos filmes, o que significa que eles podem salvá-los nos favoritos. Então, vou selecionar o retângulo e, segurando a tecla Shift, vou desenhar um retângulo que na verdade tem as dimensões de 54 por 54 pixels. E também nosso raio de canto terá quatro pixels. Aqui. Vou pegar novamente um ícone e vou mudar a cor da seleção desse ícone, que tem um traço para esse roxo escuro. Vamos alinhar tudo novamente e você pode ver como basicamente é um quadrado perfeito e a distância de cada lado é o quinto e os pixels. Este ícone é apenas um cinza simples, tem uma simples falha grave. Mas vou acessar meus estilos de preenchimento e selecionar outro estilo que nos permitirá deixar esse ícone muito mais desfocado. Vamos também adicionar um pouco de traço, e vou selecionar essa linha quase preenchida. Clique em Control plus C, selecione o botão direito aqui e clique em Control plus b para que possamos alterar a cor de preenchimento desse elemento. Além disso, se você não gostar da aparência desse ícone, você sempre poderá modificar basicamente seu valor. Então, por exemplo, algo com opacidade ou algo diferente. Tudo bem, então é por isso que parece muito melhor. E agora vamos realmente fechar nosso gradiente linear. Novamente, vamos agrupar essas camadas e também criar outro componente que vamos renomear, botão Curtir. 8. Curtir botões - variações em Figma: Então, é assim que nossa tela inicial no momento. Acho que parece muito legal, mas fique à vontade para usar outras imagens ou outras células se quiser, antes de continuarmos. Então, nas outras seções da tela, quero apresentar um novo conceito para você, que é chamado de variação. E esse é outro tópico relevante para nossos componentes. E eu vou te mostrar rapidamente um exemplo. Então, vamos pegar esse botão de curtir. E o fato é que, em todo esse projeto, eu quero ter diferentes variações desse componente, que é semelhante e diferente da bateria. Então, o que eu vou fazer é ir até o menu de componentes e clicar em Adicionar variante. Agora você vê que dentro do meu componente principal haverá duas variantes diferentes que acabamos de criar. Então, basicamente, vou renomear essa ferramenta de propriedades. Ao contrário da diferença aqui, será que nosso coração ficará cheio. Então isso significa que o universo salvou exatamente esse filme e ele ou ela também é capaz de salvá-lo. Então, também podemos renomear rapidamente a propriedade do componente para esta, como, então, agora você tem esse tipo de retângulo roxo em torno de nossa variância. E não parece muito bom porque , na verdade, nem faz parte do design. Então, o que vou fazer é movê-lo rapidamente fora do nosso quadro, por enquanto, por um momento. E eu basicamente vou até o painel Ativos. E aqui, quando você trabalha com seus ativos , certifique-se de acessar a página de exercícios. Esta é a página em que trabalhamos no momento. E você pode realmente arrastar esse botão de curtir aqui. E agora o legal é que, quando você vê aqui as propriedades de variância, você pode alternar entre gostar ou não. E eu acho que é super incrível porque também vai acelerar nosso processo de design. E isso vai nos ajudar muito na criação de algumas interações para nosso design in sigma. 9. Desenhe tendências de filmes cartões: Tudo bem, então estamos prontos para definir outras seções para esta tela inicial. E vou começar criando o título para a fração. Então, vamos pegar nossa ferramenta de texto e eu vou digitar trending. Então, aqui, usaremos 20 pixels, semi-negrito, no estilo OpenStack. E também me certificarei que a distância aqui da imagem principal até os seis pixels, e que também esteja adequadamente alinhada ao lado esquerdo, corresponda a todos os outros elementos criaria um Antes. Vou ativar novamente minha crítica porque vamos criar cartões de filme com os quais o usuário possa interagir. Então, vamos pegar novamente nosso retângulo e desenhá-lo aqui com uma largura de 254 pixels e a altura de 300. Vou mudar o valor do raio do canto de 20 pixels e também alterar a distância entre a tendência e esse retângulo para o valor de 16. Na verdade, 24 parece um pouco melhor. Então, vamos também adicionar uma cor de traçado, que também é com preenchimento cinza. E vamos encontrar uma imagem simbólica para este cartão de filme. Novamente, vou até Plugins e clicarei em Unsplash e encontrarei a imagem que cabe aqui. Portanto, este é um exemplo perfeito. Assim, podemos ver que as bruxas têm nossa imagem e o texto. Vou pegar esse retângulo novamente, duplicá-lo com control mais C. E em vez do preenchimento, vou usar sólido por enquanto. Também vou mudar o raio do canto, o que significa que os cantos superiores terão um valor zero. E anote, é exatamente isso que vamos criar esta seção dos cartões de filme onde vamos escrever o texto do título do filme e também a legenda. Agora, NFL, também aplicarei esses radianos de vidro para que possamos ver muito melhor como tudo está localizado. Então, vamos pegar nossa camada de texto e vamos criar alguns títulos. Então, por exemplo , o trem de Tóquio. E então vou duplicar essa camada de texto com o atalho sorrateiro do plano de controle e alterar seu conteúdo. Vamos também diminuir esse tamanho de fonte. Então, aqui, o valor é 16 pixels por 16. E da mesma forma, vamos alinhar tudo para o lado esquerdo e também mover sua posição um pouco mais para baixo, com um valor de oito pixels em relação à distância. Também vou mudar a fonte. Então, neste momento, temos nosso cartão de filme quase pronto. A única coisa é que vou acessar meus ativos novamente e, na verdade, sinalizei o botão Curtir. Nesse caso, o botão parece um pouco grande demais, então vamos selecionar uma ferramenta de escala segurando Shift Vou diminuir esse tamanho para o valor de 32 por 32 pixels. Perfeito. E também vamos modificar sua posse para garantir que ela esteja alinhada de 16 por 16 pixels. Ótimo, então temos tudo pronto aqui. Então, vamos apenas mover a carta para a vertical. E vou criar outro componente que vamos reutilizar por meio deste projeto. Então, vamos duplicar rapidamente essas placas de filme com os atalhos control plus dq. E vou repetir essa ação várias vezes. Então, no momento, temos quatro cartões e a única coisa que precisamos fazer é mudar a imagem e também o conteúdo do texto. Tudo bem, então é assim que estamos quase terminando nossa tela inicial para o painel deste filme. 10. Continue assistindo seção: Finalmente, vamos finalizar essa tela de design criando nossa seção final. Então, primeiro, vou pegar essa camada de tendência e duplicá-la com control mais D que está localizado aqui. E vou renomeá-lo para continuar assistindo. Então vou duplicar novamente este cartão de filme. E, por enquanto, vou colocá-lo fora da minha moldura. Então, o que eu vou fazer é, antes de tudo, separar essa instância. E isso significa que essa instância não pertencerá mais ao nosso conjunto de componentes. Isso significa que se eu voltar ao meu componente principal e fizer algumas mudanças de estilo, ele não será influenciado por isso tão facilmente, eu disse, eu posso basicamente pegar essa camada e realmente excluir a mesma que farei com nossa camada de textos. Então, a única coisa que eu tenho que fazer é realmente mudar as dimensões desse carrinho. Aqui na largura vai ser 348 e na altura vai ser 200. Da mesma forma, vou modificar a posição do botão deslizante. Então, esse valor está na verdade na borda desse 16 por 16. Agora você vê que a imagem não parece mais tão boa. É um pouco pixelizado. Mas o que podemos fazer é realmente adicionar as imagens que queremos para o nosso projeto da mesma forma com essas cartas. Então, novamente, vamos agrupar esse cartão. Agora vou renomear esta placa para placa de filme horizontal e criar outro componente. E é por isso que posso duplicar esse componente duas vezes e localizá-lo aqui no lado esquerdo, e ter certeza de que a distância entre todos esses carros seja de 24 pixels. E isso é exatamente o que podemos arrastar. Novamente, os descartes retornam à nossa tela inicial, como aqui na parte inferior. Então, novamente, só precisamos ter certeza que nosso conteúdo aqui é diferente, por exemplo, precisaríamos acessar o plugin Unsplash ou apenas com base em nossas próprias imagens. Você pode ver quando eu baseio minha primeira imagem e, por ser o componente principal, outras instâncias obtiveram exatamente a mesma imagem. Mas também podemos mudar facilmente a imagem de outras instâncias. Perfeito, agora parece um painel muito legal que temos para nosso aplicativo de filmes. Se quiser, você também pode acessar esse botão de curtir e alterar a variante para o status de curtir. E você pode ver que, como eu trabalho no meu componente principal, novamente, tudo mudou. Então, vou usar o Control Z e ir até a instância e aplicar o botão Curtir aqui mesmo. Muito bem, acabamos de concluir a seção em que criamos uma tela inteira para o nosso painel. 11. Protótipo básico e animações em Figma: Então, como terminamos de projetar duas telas, agora podemos passar rapidamente para outra parte deste curso. O que vamos criar uma interação muito simples entre esses dois quadros. Então, primeiro de tudo, vou conectar minha tela de boas-vindas à minha tela inicial e vice-versa. Então, para isso, terei que navegar até a seção de protótipos, e é aqui que vou começar meu carro alegórico. Vamos rapidamente para minha tela de boas-vindas. E eu vou realmente selecionar esse botão de login e realmente me conectar ao meu segundo quadro. Nos detalhes da interação, temos todos os tipos de configurações diferentes para nossa interação. Aqui temos nosso gatilho e vamos trabalhar com o onclick, o que significa que, ao clicar nesse botão de login, também verei outro quadro para animação. Vou usar o smart animate. E essa é uma animação muito legal porque ela pode simplesmente mostrar uma tradução muito boa porque combina com todas as camadas semelhantes, que permite torná-la mais fluida e suave da mesma forma. Na verdade, vamos para o meu grupo de logout e eu vou voltar ao nosso primeiro quadro. E para os detalhes da interação, farei exatamente as mesmas configurações com o gatilho onclick e a animação inteligente. Então, verifique rapidamente nossa interação simples. Vamos acessar nosso fluxo aqui no botão Play. Então, aqui temos nosso modo de apresentação onde podemos interagir com nosso lado do produto. Portanto, se você não tiver certeza de onde clicar, basta clicar em uma área vazia. E aqui você vê o destaque azul. E essa é exatamente a lama espessa L2 onde está o ponto de acesso , ou seja, o ponto interativo . Vamos clicar rapidamente no botão Login. É assim que temos essa transição suave para nossa tela inicial. Da mesma forma, clicaremos em nosso logout porque não queremos mais usar este aplicativo. E voltaremos sem problemas para a tela de login. Então você pode brincar e fazer com que esse cogumelo de animação seja complexo, mas a ideia é muito simples, pois basta voltar para a área de trabalho da Figma e fazer diferentes tipos de conexões. E no Figma você pode fazer um número ilimitado de conexões de protótipos entre os quadros. 12. Componentes interativos na Figma: Agora vamos falar sobre como animar nossos botões de curtir. Então, o que estou perdendo aqui no meu protótipo quando faço login eu realmente não consigo gostar ou diferir desses filmes, o que significa que não posso salvá-los como usuário. Então, para fazer isso, como já trabalhamos com variância antes, se você se lembra da seção anterior, também podemos simplesmente prototipá-las. Isso significa que não temos vários quadros duplicados, muitas vezes só podemos fazer uma conexão e ela funcionará perfeitamente para nós. Então, basicamente, ele garante que você esteja novamente no protótipo do que, se tiver sorte, na guia Design. Agora vamos selecionar nossa primeira variante e conectá-la à segunda variante. Aqui, usaremos novamente o Onclick Trigger com configurações de animações inteligentes. Da mesma forma. Vamos conectar nossa segunda variante, que é diferente da primeira, como a inferior, com os mesmos detalhes de interação. E isso é basicamente se for super simples, apenas duas conexões são criadas em nosso conjunto de componentes. E é exatamente assim que criou um componente interativo. Então, basicamente, é isso. Podemos voltar ao nosso modo de apresentação novamente e eu vou acessar toda a minha tela. Agora mesmo. Você pode ver como eu posso rapidamente curtir e diferir dos meus botões aqui, que interagiram com os componentes musculares da placa de filme. E, na verdade, aplicamos exatamente toda a transição às outras cartas restantes. Aqui. Se eu trabalhar com instâncias, posso rapidamente curtir e diferir dos meus filmes como eu quiser. Como você pode ver, os componentes interativos facilitam muito as coisas porque em nosso arquivo só tínhamos o quake, uma conexão simples. Não precisávamos fazer todas as cópias diferentes das molduras. E dois WK desse tipo de interação. Então, espero que você tenha conseguido repetir todas essas ações para criar algo incrível para essa conexão, para o nosso design. 13. Muito bem! Insights finais: Parabéns meu amigo, você finalmente terminou este minicurso. E espero que você realmente goste de criar esses aplicativos de filmes super simples. Então, basicamente abordamos os componentes, os fundamentos do layout, a grade do layout e outros elementos visuais. E, no final das contas, estou muito feliz que também tenhamos conseguido criar um produto muito simples e também abordar os conceitos básicos de componentes interativos. Se você gosta deste curso, certifique-se de divulgá-lo para seus amigos, colegas e rede. E também não se esqueça de me deixar um comentário sobre este curso. Agradeço todos os seus comentários honestos porque sempre tento melhorar meu conteúdo e também garantir que você fique satisfeito com os cursos a seguir. Muito obrigado e nos vemos novamente.