Crie um aplicativo da Web

1. Trailer do curso: Olá, Bem-vindo ao curso de web design com a Figma. E neste curso, aprenderemos como criar um aplicativo web de amostra em que as pessoas possam assistir filmes juntas. Se você tiver frango, um curso prévio, também lançaremos uma versão móvel disso. E então, neste curso, trabalharemos e, em seguida, aplicaremos um aplicativo web para o coração dele. E eu próprio era designer de UX de interface do usuário há mais de três anos e uso o Figma há muitos e muitos anos. Hoje, sou seu instrutor para este curso. Portanto, ao final deste curso, você terá as habilidades opostas às de criar um site visualmente atraente e fácil de navegar. Novamente, como importar e usar uma imagem específica e seu espaço de trabalho. Também aprenderemos a usar o layout automático que podemos criar. Para designers, Para designers usaremos um plug-in poderoso para gerar alguns dados de amostra para nosso projeto. Novamente, aprendemos como podemos adicionar nossos componentes, animação inteligente e exemplos de introdução entre as telas. Então, se você está pronto para aprender a criar um aplicativo web bonito e simples usando o Figma. Entre imediatamente e vamos começar. 2. Ferramenta de quadro: Tudo bem, então vamos embora. Eu tenho o Figma, abri-lo aqui é apenas um projeto vazio. Primeiro passo, estou apenas falando francês e vou parar aqui. Podemos fazer isso e clicar em algum lugar aqui na tela. E isso novamente e gere um forame ou que pode ser como uma página para o nosso site. Então, se eles quiserem ser folhagem D, posso modificar toda a propriedade daqui à direita. Mostre quando escolhemos 124, a testemunha, e os anos 2000 e 84, a altura. Bom. Basta reduzir o zoom para personalizar meu espaço de trabalho. Ben, daqui na parte superior do quadro, podemos mudar o nome da tela. Mas neste exemplo, vou escolher a página de empréstimo. Agora, com essa paleta de cores, eles escolheriam uma cor azul. Com essa opção, podemos personalizar nossa cor assim. Eu prefiro isso para começar a criar minha FirstPage. Bom, agora estamos prontos para começar a criar nossa landing page. E pessoal, nos vemos no próximo vídeo. 3. Página de desembarque: Agora vamos começar a criar nossa página e reenviar a primeira página de qualquer site. Você não deve usar as técnicas, truques e seu design para extrair o usuário para tentar entrar nos detalhes, mas você obterá. Portanto, na primeira página do nosso site, usaremos no Imperador Franz o tamanho e a cor do texto. Além disso, a simplicidade dos componentes que o utilizam tem um papel muito importante na experiência do usuário. Começamos primeiro a adicionar texto no centro da tela. Então, da mesma forma, Ei garoto e escolhi o texto aqui na seção certa, vou mudar o tamanho do texto para 64 e retornar aqui e a tela para escrever uma frase curta, por exemplo, banner, certo? Assistir é melhor. O que muda melhor em conjunto? Sim, bom. Filme, Cheers como esse. Em seguida, faça uma cópia desse imposto. E eu vou escrever outra coisa aqui. Existe. Pouco antes de concluir, alterarei o tamanho do texto desta ferramenta, 56 e continuarei. Ou encontre uma nova sala de musculação durante sua escolha favorita. Com suas pessoas favoritas. Sim, é um bom filme logo abaixo do primeiro ano. Malvado. Em seguida, selecione o óleo agrupe-os assim. Esses são os dedos para isso. E, novamente, vou alterar o tipo de arquivo no segundo viés de texto aqui. É isso. Para a primeira, escolherei um robô. Além disso, podemos aumentar o tamanho dessa ferramenta, a ferramenta e personalizá-la ou alterá-la de uma forma mais ou menos assim. Devemos sempre manter o mesmo alinhamento de dois textos. Agora, vou adicionar uma imagem aqui à esquerda. Então, por enquanto, adicionei um preso B, C, que usaremos como nosso exemplo. E vou adicioná-lo mais tarde como punição na descrição do projeto. Ou pergunta: por que ela diz que é assim? Nós o movemos apenas para o centro da tela. Além disso, adicionamos a letra mais para a esquerda. Então é bom. Não, sim, ótimo. Tudo bem, na próxima etapa, adicionaremos o botão de navegação entre a tela. Então, vamos trabalhar com o próximo vídeo. 4. botões: Neste vídeo, vamos adicionar um botão aqui logo abaixo do texto. Então, para criar um botão no Figma, eu aconselho usar um retângulo de amostra e depois personalizar Bezier para que o rho aqui seja mais retangular assim. E mova-o com o mesmo. E depois há a outra zona de deformação e eles estão surfando. E agora vou escolher um tipo de ferramenta para ser, ser irregular e com as outras cores da tela é um bom passo a passo. Estamos preparando nosso botão. Estamos perdendo novamente o texto. Podemos escrever o artigo para saber. Eles darão ao usuário a opção de participar um filme a partir da página inicial. Então, depois de alterar o tamanho do texto para 24, move o texto para o sensível do retângulo. Agora vou mudar o raio da fronteira para dez. Sim, é bom. Segure o retângulo e o texto com a Seleção de Grupo de Opções. Portanto, os dois componentes são agrupados aderem ao mesmo componente, que será o botão de nome. Agora também podemos nos mover e preparar a magia juntos como um só. Como sua boca, escolha o lugar certo e bom do PDF para o botão. Tudo bem, aqui logo abaixo deste texto , são os melhores dias. Sim. Se você tiver alguma outra sugestão, escreva um comentário na seção de revisão do curso e obrigado, pronto. Então, no próximo vídeo, vamos adicionar aqui na parte superior da tela e a navegação, mas alternar entre esse verde. Além disso, adicionaremos o logotipo para começar. Então, vamos. 5. Barra de navegação: Aqui vamos adicionar dois links para criar uma barra de navegação. Portanto, copie esse texto dos gatilhos do botão, coma como o primeiro comprimento. Esqueça de entrar na página. Você deve alterar o texto para 32. 32, ou para ser mais legível para o usuário e exclua-o antes e depois de mudar a cada ano para obter uma seta. Aqui neste lugar. Faça uma cópia. Agora, o segundo link, que vamos renomear esse encoberto. Nesta página, o usuário pode descobrir os diferentes filmes e filmes que o termo vive. E outros que programam com o, com a vantagem de participar e o que mudou com seus amigos. E aqui podemos usar o super legal para entrar na landing page. Temos o layout da Bree aqui, então vou clicar em Mais. Vai germinar isso, concorda? Agora é muito complexo e não faz nenhum sentido. Mostre que vou clicar neste e ir para a coluna. E podemos escolher o justo aqui. Isso vai nos dar, então podemos usar as coisas do leão. Tudo bem. Agora, posso alinhar os links das ondas do lago da barra de navegação. Mova esse link para o início da terceira variável e junte o segundo cânone. Agora, posso esconder esse truque legal e o nome da tela novamente e clicar. Agora, vamos começar a preparar o logotipo do nosso lado positivo. Primeiro, eles fazem uma cópia desse texto e colam aqui e o alteram por, pelo nome da plataforma. Então, acho que vou escolher um exemplo de nome, como assistir, assistir ou assistir parte. Sim, qual parte é ir até aqui? Com esse nome? Vamos adicionar uma imagem como essa, que eu tenho no meu PC. E eles adicionarão o último como um anexo. E a descrição da pressão. Eu vou dizer que é um pouco menor assim? E vou mover você para tentar ao lado do zoom para uma escolha melhor, a base dele. E com o mesmo exemplo de Button, vou agrupar esse componente de sapato assim. Grego em grupos, palestras e mude o nome vulnerável. Eles organizam nosso projeto. Pule aqui. E vamos movê-lo para a parte esquerda desta árvore. Sim, entre aqui. Então, agora terminamos esta página e vemos no próximo vídeo, criar a segunda tela. 6. Entrar na tela: Vamos começar com a segunda página conjunta. Reduza o zoom e ajuste nosso espaço de trabalho. Vou mover a página de empréstimo aqui e fazer uma cópia. Colar. Bom, conserve o mesmo rebaixamento e cor. Novamente, para manter a barra de navegação porque ela se repete em todo o projeto. Telas. Diminua o zoom e mova as duas telas aqui. Nós, pessoal, em nossa tela. Você está dentro. Agora vamos mudar o nome para página do regime. Ok? Ok, ótimo. Em primeiro lugar, exclua os componentes apenas para manter a barra de navegação. E então, como vimos na apresentação do projeto aqui à direita, adicionaremos um pequeno formulário que inclui alguns campos de maturidade para que os usuários acompanhem com a pessoa e os dados antes de assistirem a um filme com amigos. Vamos começar adicionando seu retângulo aqui. Vou ajustá-lo assim, só para ser apresentado no meio da tela. Agora vou mudar essa cor para um azul mais escuro, como falta de sorte. E ajuste a transparência para 50. Sim. Sim, bom. Tudo bem. Agora vamos adicionar o raio da borda, mostrar que eles se formam. Está cercado e será mais parecido com um Red Bull. Continuamos agora adicionando o primeiro campo de texto com o retângulo de amostra. Da mesma forma que os chips de manteiga. Vamos consertá-lo aqui. Em seguida, trocou sua coleira com isso. Com esse parâmetro. personalizar a cor e a pedra como se eu fosse fixá-la em três. Agora eu posso mudar a cor. Vou escolher a cor desse botão aqui na primeira tela para que suas telas apareçam consistentes. De novo. Vou continuar mudando a cor do retângulo usando o alto-falante apenas para detectar a cor. E para os campos, novamente, é melhor ajustar o raio da borda para, HA, Sim, é perfeito. Agora vou fazer uma cópia do link Discover aqui acima, acima do fago. Mas, como você vê agora, é deliberado porque está escondido pelo retangular. Você deve usar a opção branch de Frank para que o texto seja postado com a frente do composto principal. Bom. Agora movemos cada uma aqui e trocamos essa bola de uma para duas. Continuará alterando o texto para renomear. O primeiro medo, a difusão deve ser concluída um pouco abaixo. Mas a força de fusão, o retângulo, adiciona a letra ambos para que a base possa pegar os outros feeds. Eu posso corrigir isso normalmente para 1060. Sim. Tudo bem, ótimo. Agora continuamos com isso. Agora vou copiar esses dois componentes para o gabinete do resto dos pés. Bom. Agora germinamos o último e nossos filmes aqui mudarão para esses dois principais. Vou adicionar um botão logo abaixo. Então, aqui vamos adicionar o botão ou você simplesmente copiará esse botão e colará cada um aqui. Ok? Nós adicionamos o raio da borda, como os outros componentes. Altere o tamanho da fonte para 28. E essa ferramenta é um presságio. Bem, mova os textos e a perna central desta forma fará com que as últimas alterações passem de saborosas. E vamos ver algo e o lado esquerdo da tela. Ok, muito bom. Então, aqui vamos adicionar a mesma coisa, como texto, copiar e colar aqui. Só para conservar o mesmo parâmetro dos textos do projeto antigo. Podemos escrever relógio, observar quando a França está, em algum sentido, você deve saber transformá-la mais bola vermelha e pegar as camadas aqui à esquerda. Além disso, posso aumentar o tamanho só para que os amigos se sintam atraídos pelos ouvidos. Sim. 90 é bom. Filme mais tarde na parte superior e no centro da tela, assim. Sim, exatamente. Vamos mudar a cor da França para outra quente para ficar mais atraente porque o custo de nossa plataforma é econômico para amigos e como participar e se divertir com seus amigos com essa técnica é amplamente usada em muitas plataformas e muitos, muitos aplicativos rastreiam o usuário até uma coisa específica, como este exemplo. Ok, vamos continuar agora adicionando uma foto do final da página. Aqui normalmente contém notas de direitos autorais, links, política de privacidade , cujas informações de contato e redes sociais precisam do ícone Inserir uma foto contém informações que você aprimora no futuro externo. Então, vou usar essa ferramenta de retângulo a partir daqui e desenhar um retângulo sobre a largura do telefone da página com o redutor. Então, vou verificar a resposta no lugar certo. Agora vamos mudar a cor da falha. Então, vamos adicionar dois links esquerda para a página Sobre nós e para a página de contato. E também por meio de outros indiretos, começamos com a seção viral esquerda. Da mesma forma, copie os textos de descoberta da barra de navegação e cole e cole todos os anos. Provavelmente, a mesma sonda é ou clique no link e escolha esta opção ramificada ou frontal. Ok? Uh, bom por enquanto. Vamos mudar o tipo e o tamanho da fonte para 24. Vou mudar agora o texto desse primeiro nome para falar sobre eles e fazer outra cópia para entrar em contato com seus nomes. Tudo bem, é bom continuar agora para a parte direita da pasta, onde adicionaremos os links de mídia social para colar aqui. Portanto, coloque a sintaxe na camada base e outro comprimento próximos um do outro. Mude esse pool do Facebook e este pelo Twitter. Então, usaremos a opção de grade de layout para alinhar adequadamente os links das fotos. Selecione a frente e a atividade do alto-falante. Eu corro uma linha, esse link no final da segunda cor e esse no começo. Então, com o mesmo método, posso alinhar as outras pernas. Você também pode aumentar o número de Kelvin para obter mais detalhes. Então, é bom para este. Agora vou desativar a opção verde e há dois links, ícone do ícone do ícone. Se eu conectar o Azure, ML, a variedade e a escolha, você pode voar para oferecer suporte a isso. Eu posso escrever neste campo, Facebook. Ok, eu posso compartilhar este. Depois de clicar. Importante aqui. Eles diriam que o Canadá foi importado o meu espaço de trabalho? Volte para cima. Agora, Fu, veja o ícone do Twitter. Twitter, que serve a coluna vertebral. Novamente, clique em. Tudo bem. Agora, é claro, amanhã, o tamanho desse ícone de ferramenta se tornará um tamanho semelhante para texto completo. E vamos hipotecar aqui. Mas depois outra pia. Você deve alterar a cor para branco para ser mais consistente com o dx. Ok, bom para este. Continue com o segundo bacon, acho 20, é um bom tamanho para esse cheque. Amplie e mova essa imagem para a esquerda do texto. Em seguida, por meio de outro, colocaremos o link. Muito bom Esta tela está pronta agora e Jamal sai para entrar no espaço de trabalho. Tudo bem, pessoal. Agora terminamos esta página e nos vemos no próximo vídeo para criar a tela Discover. 7. Descubra a tela: Olá amigos. Então, vamos começar a fazer a tela de descobertas. Em primeiro lugar, vou mover o segundo componente aqui e fazer uma cópia para conservar o mesmo modelo do anterior. Amplie. E mudamos o nome para descobrir Bache. Depois vou excluir componentes antigos da página. Agora pode ser a partir dos links da barra de navegação. Esse aqui. Para conservar o mesmo estilo na tela do aplicativo. Portanto, é muito importante em seus designs usar a mesma fonte para a frase e as palavras. Vamos continuar escrevendo um exemplo de senso para orientar o usuário a participar e assistir alguns. Certo? Filmes e programas de TV da Bros. Bros a partir daqui. Não, não, não. Basta procurar filmes e programas de TV. Aqui mostra o tamanho do texto até 48. E a ferramenta Type frontal. Novamente, eu deveria aumentar o tamanho para 56 e remover cada um aqui um pouco na parte superior. Aqui vamos adicionar três oxigénios para que os usuários possam escolher os filmes favoritos ou exibir a lista de sentimentos. Vamos começar a adicionar um retângulo aqui no centro. Eu movo o botãozinho desse jeito. E agora vamos mudar a cor para preto a partir daqui. Ok, ótimo. Mas o que eu posso mudar de novo é assim e levar a transparência para 80%. Agora está muito bom. Então, vamos fazer uma cópia e colar aqui. Novamente, outro retângulo ao lado do outro. Agora eu posso mover os componentes em Israel para o topo desta forma. Quando pudermos começar a preparar seus batalhões desse retângulo. Copie novamente da barra de navegação e cole aqui. Então, para esse oxigênio, vou escrever os melhores, como os melhores ou os filmes mais populares. Assista na plataforma. Agenda, do tamanho de 24 a 28. Sim, está bom agora, então um filme aqui. Mas você deve ativar ou clicar na opção Brand24 e continuar escolhendo a melhor. Assim como eu, está tudo bem. Vamos fazer uma cópia para o retangular secundário. E vamos mudar isso, Georgina, quando o usuário puder escolher o general do filme que deseja assistir. Novamente, para a última opção, modo. Sim, More. Permita que o usuário veja mais filmes ou termine. Certo? Agora vou adicionar três ícones para o distrito. Estou usando o plugin de luta. Para a primeira, posso escrever a droga como se as pernas estivessem ligadas. Para alterar a expressão para curtir, melhor ou favorito, para exibir mais ícones. Na próxima página eu vou escolher esta. Role para baixo e, em seguida, despeje o ícone de ir para a próxima barra. Agora eu posso desenhar a opção geral. Sim, Schwann, Baker. E para obter mais oxigênio, posso pesquisar em uma fileira com next. Ou o que dizer? Sim. Ok. A próxima página. Aqui, vamos importar isso. Eu posso. Ok. Agora não dissemos ícone deles e os movemos para um retângulo. Então, os caras sabem que vamos mudar a cor do ícone para y, deve ser consistente com o resto dos outros componentes. Ok. Bom. Terminamos com o motociclista de fevereiro. E agora vou mostrar os melhores dias para o ícone aqui e ali estava o barômetro em que fixamos AT. E o mesmo para a segunda pirâmide. Moverá cada um aqui no centro do primeiro retângulo. Ok, está bom. Agora, continue com o segundo. Bem, nos disseram a mesma configuração e terminamos com a última. Eu posso fixar a mesma trajetória perimetral em 180 graus assim. Finalmente, movo cada um para o centro, como os outros ícones que vou escrever em os outros ícones que outra frase aqui são o outro botão vida para motivar ou incentivar o usuário a se juntar a seus amigos. Então copie do primeiro e baseie aqui. Agora vou escrever quase como assistir lado a lado na vida real? Sim. Isso funcionaria? Vamos mudar o tamanho da fonte para 24. Prefere o melhor ano e o tipo de fonte ao normal. Tudo bem, então é perfeito com essa circunavegação. Agora vou personalizar os componentes para que sejam mais legíveis e atraentes para desenhar os do usuário. Vamos começar com esse retângulo agora, qual conteremos os pôsteres dos filmes aqui no lado esquerdo. E mudamos o rebaixamento para 550 pelo esboço de Faith Handel. Agora eu posso movê-lo para cá. Sim, aqui vamos apenas reagrupar os componentes da tela dessa forma para reorganizar meu componente em roxo. 8. Plugins poderosos: Olá pessoal. Aqui, neste retângulo, adicionaremos as quatro imagens de uma poderosa, que descobriremos neste vídeo, onde podemos ou apresentar os filmes que estão sendo exibidos agora com sua postura. Tudo bem, então clicamos com o botão direito do mouse e escolhemos os plug-ins. Em seguida, clique no plugin Unsplash. Para mim, o plugin em amostra. Mas se não for importado para o seu espaço de trabalho, você pode clicar, descobrir o que é vegano e simplesmente importado. Este plugin contém muitas imagens de alta qualidade. Eu recomendo usá-lo. Estamos procurando qualquer tipo de imagem. Pessoalmente, eu o uso muito no meu projeto. Aqui, pesquisaremos um quadro de termos para sentir forças. E então, para nossa página aqui, mova-a para a barra de pesquisa e role para descobrir a lista de pastas. Assim, posso recortar este como se fosse o primeiro pôster do meu sentimento. Aqui, você não deve esperar que essas empresas de ferramentas de indicadores cheguem ao final do EMH. Ok, ótimo. Diz que foi importado com sucesso. Vamos continuar procurando por outro pôster. Essa ou essa. Agora, aluno, vou importar este. Ok? Tudo bem, continuar com essa imagem covalente maior para esta é bom agora, sim, vou importá-la. Ok. Role para baixo mais dois. O último. Voltaremos aqui com os melhores retratos. Uma dessas imagens. Sim, este, núcleo de criptônio. Certo? A imagem foi importada com sucesso para minha área de trabalho. Agora vamos avaliá-los da mesma forma que é o caso. Isso nós terminamos com isso. Ok. Agora vamos movê-los para nossa caixa. Ok, somos bons rapazes. Agora terminamos com esta página e duas no próximo vídeo para adicionar um protótipo e uma animação inteligente. 9. Protótipo e animação: Neste vídeo, adicionaremos links de introdução ou navegação entre a tela e, novamente, animação para alguns componentes porque estou aqui e na página inicial da primeira tela e no shopping center Switch Strip. Ok, vamos começar com o botão aqui. Clique no círculo e vincule-o à página conjunta. Ok? Essa é uma janela de detalhes de interação. A partir daqui, personalizaremos interação entre a página e poderemos mostrar o tipo de navegação ou em movimento. Além disso, a duração que você está mudando de uma tela para outra. Para essa interação, vou corrigir essa. Então, vou clicar ou clicar em oxigênio e navegar pelo fago articular. E aqui podemos escolher, nessa lista , o tipo de animação. Mas para, mas para mim agora vou mostrar a animação instantânea. Vamos continuar adicionando os links à barra de navegação com as outras telas. Junte-se a esta página como na introdução do botão. Novamente, vou mostrar a mesma parametrização do link de progresso e agora do link Discover. Ok, bom. O link foi adicionado com sucesso com a mesma interação que pensamos. Agora vamos encerrar o resto da interação entre verduras alaranjadas com o mesmo método. Portanto, para a imagem do logotipo que escolhemos, ao clicarmos no logotipo, retornaremos à página inicial desta forma. Muito bom. Agora vamos experimentar a introdução clicando aqui. Primeiramente, vou usar o botão, a troca de comprimento e largura com o resto da navegação aqui na área de trabalho. Ok, agora vou adicionar a animação a essa imagem da landing page. Mas antes de tudo, quando adicionarmos animação para qualquer componente, você deve copiar a tela urgente para fazer essa inovação mudar na segunda tela e dar a situação inicial de que o original é Gideon , mas não é o caso. Mova o segundo link logo abaixo do primeiro desta forma retorne ao modo de design. Agora ampliamos aqui e mudamos o nome para emprestar uma animação de página. Selecione a imagem de mudar nossa intuição com esse parâmetro, levando-a a zero. Ok? Reduza o zoom da interação entre essas duas telas com a armadura apesar da armadura. Novamente, mude para o modo de protótipo, exclua por tamanho da segunda página, assim. Em seguida, vamos adicionar a interação da imagem na primeira tela. A segunda tela. Aqui na janela de detalhes da interação. Vou escolher qualquer opção e pela animação I will Navy nas configurações padrão. Bom. Vamos tentar não, a primeira animação. Muito bem. Então, coloquei o mouse sobre a imagem virada com a irritação que definimos nas configurações. Volte para adicionar a segunda animação. Agora, na segunda animação sobre o botão, quando o usuário passa o mouse, sobre o botão, a corrente fica um pouco mais escura. Então, primeiro de tudo, vou adicionar outra cópia para a mudança de tela internacional para o modo de design e base aqui, mas nenhuma animação. Aqui. Mais uma vez, alterei o nome para a ferramenta de animação da página de empréstimo e retornei pela tabela. Então, vou excluir todos os links da tela e ajustar a interação do botão com a joint venture após editar a cor do botão aqui, alterar o modo de design de cores e selecionar a paleta de cores. Então, vou escolher ou preferir tê-lo lá. Boa toupeira, a cor mais escura. Ok, tudo bem, Jim Crow na MU e direção. Na primeira etapa, você deve excluir essa navegação entre a tela original e a dor gigante. E o link entre o botão e a nova tela. Para este que vou escolher, estamos reduzindo o oxigênio. Para a animação. Vou garantir a animação inteligente como esta pequena demonstração. Também para o dia. Altere-o em 200 milissegundos para tornar a animação mais rápida. Ok, ótimo. Agora vamos terminar com o link entre o botão e a página gigante. Para essa configuração, forneça o mesmo pai. Basta consertar as juntas de animação. Muito bom. Agora podemos experimentar essa nova animação. Então, como você observa aqui, quando a maioria toca no botão, as versões coloridas são assim. E depois clique, navegamos para a próxima tela. Então, volte agora ao nosso espaço de trabalho para adicionar outra admissão à página descoberta. Novamente, como na mesma animação, você deve copiar a segunda página do original. Mude o nome para rolar a página e certifique-se de que, para esta animação, ela seja quase imparcial. Quando o usuário passa o mouse sobre um ou sobre o analisador, o componente muda o título, o outro força e se concentra apenas no pôster Selecionar filme para exibir mais detalhes. Então, o primeiro passo é desenhar um retângulo para escolher um feto mais escuro. Quando, quando os pôsteres são selecionados. Amplie aqui para fixar a largura e a altura do retângulo. Tudo bem. Agora vamos mudar a cor para preto e personalizar a transparência para 50. Vamos movê-lo para o lado por enquanto e excluir este pôster. Vou usar isso como primeiro pôster. Os detalhes serão exibidos aqui no centro desta forma. Podemos corrigir esse problema com esse parâmetro da ferramenta. Para cada 1.230, 550 dos mesmos cinco fornecedores, pesado. Depois de adicionar o filtro no pôster como se esse fosse um mundo diferente, correto? Agora vou adicionar o título do filme com o mesmo formato para a cadeira de copiar e colar do link Discover. Mas você não deve usar a opção brand to Front para ter um padrão. Ok, ótimo. Mude-o para se sentir autorizado. Agora compartilha o texto de tamanho 64 e também o estranho para digitar para movê-lo para o centro do retângulo. Em seguida, o topo aqui. Agora vamos adicionar um botão no centro para dar ao usuário a opção de começar a assistir ao feed. Então, vou copiar da tela o botão e colá-lo aqui. Ok. Agora vou movê-lo exatamente para o centro. Mudar isso não foi legal. Relógio. E o formulário para avisar é presumir que não removerá esse raio de borda daqui. O relógio também deve ser digerido, Toby totalmente visível e colocado no centro da antena parabólica. Como você também pode adicionar o injetor abaixo, que fornece um número de visitantes. Quando o filme começou, o zelador estrangeiro diz para 22, o tipo de fonte para irregular. E altere novamente o tamanho do texto para 24 para ficar mais legível e alterar o texto. Por exemplo, sexto, observando, observando a medula. Bem, torcemos para a direita. O texto é muito pequeno. Para ser claro, vou nomear louco novamente. Ok, muito bom. Terminamos com a última modificação no título e na manteiga. Então, pessoal, vamos adicionar a interação com a tela. Mude para o modo de protótipo, mostre o mesmo pôster e vincule-o a uma nova tela como esta. Então, aqui nos detalhes da interação, vou mudar este para qualquer modo. Para que isso seja bom, mantenha a mesma configuração. Novamente para a animação. Terminou com o link entre o relógio, mas depois ganhou uma página gigante. Caso contrário, o usuário antes de começar a lavar os pés e precisar concluir o cadastro da variável, estamos finalizando agora com essa animação é sua boca. Você vê nossa entrada no espaço de trabalho e clica aqui para tentar navegar em nosso aplicativo. Como você pode ver aqui, quando você ultrapassa o máximo, o Forster dos componentes muda para a página de animação. E o botão funciona diretamente, redirecionando o usuário para a página gigante. Para os outros pôsteres, você pode completá-los como um exercício prático. Nosso site está funcionando corretamente. Volte ao nosso espaço de trabalho para vê-los. Novamente. Você pode adicionar outra tela para melhorar e criar uma nova opção na plataforma. Então, muito obrigado pessoal por assistirem. Aqui terminamos este curso e eu gostaria que você estivesse aprendendo coisas novas comigo. Finalmente, um adeus, e nos vemos no próximo curso.