Figma UI/UX - Design a Messenger Web App UI/UX

1. Apresentação: Bem-vindo a este curso. Meu nome é ontem, instrutor de Chelsea e Albert neste curso. Neste curso, você projetará um aplicativo da web Messenger completo, UI UX, usando o Figma. Enquanto você projetará este mensageiro como um aplicativo da web, você terá uma IU UX e diferentes tipos de recursos e práticas recomendadas do Figma. Vou mostrar como usar diferentes tipos de ferramentas do Figma para diferentes recursos de design. Você aprenderá como agrupar, criar sistema de grade de feedback de componentes, como usar Figma, plug-in, prototipagem de figma com qualquer malha mostrada como fazer protótipo, oferecer recursos ao vivo e diferentes tipos de animais mostrados. No final, você aprenderá como compartilhar seu design e como exportar seu design. Depois de terminar este curso, você terá um projeto completo do mundo real que poderá adicionar ao seu portfólio. Portanto, vou encorajá-lo a aproveitar este curso. 2. Criar projeto e design de layout: Bem-vindo a esta palestra. Nesta parte, vamos começar a trabalhar em nossos projetos. Assim que você fizer login na sua conta Figma, poderá ver esse tipo de interface de usuário e, a partir daqui, precisará clicar em um novo arquivo de design. Então, vou clicar nele. E então ele abrirá um novo arquivo de projeto para nós. E a partir daqui, teremos que criar nossa moldura. Então, vamos trabalhar no aplicativo da web. Então, vou selecionar um quadro. E a partir daqui você poderá sentar deck stop e no deck stop, haverá algumas opções aqui. Ok, então a partir daí, vou escolher esta loja DIG, 14401024. Então, assim que eu selecionar este, temos esse layout. Agora, antes de mais nada, vou mudar o nome deste. Eu vou dizer para casa. Agora, precisamos criar nosso cabeçalho aqui. E no cabeçalho teremos nossa foto de perfil e depois o nome. E então teremos duas seções aqui. Um estará aqui e outro estará aqui. Tudo bem, então antes disso, vou selecionar a grade aqui e clicar na grade de layout da grade. E em vez dessa grade, vou selecionar a coluna. E então eu vou selecionar 20 colunas. Tudo bem? Isso nos ajudará muito a projetar. Ok? Agora, a partir daqui, vou criar nossa seção de cabeçalho aqui. Então, vou clicar nesse retângulo e desenhar aqui. Por enquanto eu vou apenas, tudo bem. Então, agora temos nosso cabeçalho aqui. E agora, clicando neste campo, podemos adicionar uma cor diferente. Para este aqui. Podemos adicionar uma cor diferente. Mas, por enquanto, deixe-me esconder isso para que possamos ver nossa célula T. Então essa é a nossa cor que temos agora, acho que essa cor é boa. Eu gostei. E agora, depois disso, vou mostrar novamente esta coluna. E aqui vou ter mais uma seção para mostrar nossas informações de usuário, lista de usuários. Ok, então, para isso, vou selecionar nosso retângulo aqui. E depois disso, até esta coluna, essa coluna, eu vou colocar esse retângulo talvez daqui. Vou colocar essa coluna. Vou pegar essa coluna daqui. E depois disso, vou definir nosso, vou definir nosso derrame aqui. Agora, vamos esconder esse alegado sistema de grade. Veja como fica. Então, parece com isso. Eu também quero ter uma cor branca. Então, a partir daqui, vou ocupar pouco espaço aqui. Tudo bem, então eu acho que literalmente espaço daqui. Agora. O que podemos fazer? Eu quero ter a cor branca aqui e também quero ter um pequeno raio de borda aqui. Então, vou colocar o raio da borda aqui, tender para pixel, e depois vou mudar a cor do plano de fundo. Vou escolher a cor branca, cor de fundo que temos aqui. Então, parece com isso agora. Mas seria bom se mostrássemos dessa maneira e depois ocupássemos pouco espaço daqui, do lado esquerdo e do lado direito. Portanto, este será nosso carrinho principal e a área principal onde colocaremos nossa lista de usuários. Tudo bem, e agora aqui estão bem aqui. Quero ter outra seção para mostrar as mensagens. Então, deixe-me ativar o sistema de grade. Então esse é o nosso sistema de grade. E vamos colocar esse aqui. Não daqui. Eu estava falando sobre isso. Vamos colocá-lo até esta grade e vamos começar nossas massas a partir daqui. Vou selecionar outro retângulo aqui. E a partir daqui, a partir daqui, vou começar a seção de mensagens do nosso aplicativo e garantir que tenhamos a mesma altura e peso. E aqui vamos nós. Este é o nosso ponto de partida e este é o nosso ponto de partida. Além disso. Você pode ver o símbolo da pequena cruz no lado esquerdo. Isso significa que é iniciado do mesmo tamanho, do mesmo lugar. Então, se escondermos nossa grade, então devemos ser capazes ver esse tipo de coisa aqui também. Aqui também podemos ver esse tipo de coisa. Leia agora, colocamos o raio da borda de dez pixels para aquele. Então, vou colocar raio de borda dez para este também e depois adicionar o traçado. Se eu clicar nessa palestra, ela nos dará a fronteira. E então, clicando nele, vou adicionar a cor branca para que tenhamos mesma cor para esses dois itens. Ok, agora temos esse pequeno espaço. E daqui eu vou, não precisamos ter esse espaço de modelo, então eu vou aumentar esse espaço daqui, um pouco de um espaço bem aqui. Tudo bem, então essas são as duas seções principais que teremos nosso conteúdo principal. Então, aqui, colocaremos nossas informações de usuário como nossa foto de perfil para isso, para o usuário logado e, em seguida, o nome. E aqui vamos colocar todas as mensagens de bate-papo e aqui estão todos os usuários e aqui todas as mensagens de bate-papo aqui. Então, vou parar esse vídeo aqui e continuaremos com a próxima palestra. Vejo você na próxima palestra. 3. Design de itens da lista de usuários: Bem-vindo de volta mais uma vez. Nesta parte, tentaremos projetar nosso cabeçalho e nossa barra lateral. Então, para isso primeiro, vou selecionar a elipse aqui. E nesta elipse, vou projetar essa ferramenta de elipse aqui. Então, aqui vamos colocar nossos e-mails e garantir que tenhamos exatamente a mesma altura e branco. Então vou colocar 60 por 60 e colocar aqui. E depois disso, queremos ter nosso raio de fronteira aqui. Então, ideias não incomodadas. Quero ter uma borda aqui e alterar o tamanho da borda para cinco. E eu vou fazer com que seja branco. Então, vai ficar assim. Se for necessário, faremos alterações. E agora, depois disso, eu queria ter um nome aqui. Então, vou clicar na ferramenta de texto. E aqui vou dizer John Doe. E vou selecionar o tamanho da fonte para 16 pixels. Aqui estão, talvez possamos escolher 20 e colocá-lo no meio. E agora, a partir daqui, posso escolher uma família de fontes diferente aqui, basta clicar nela, leva até o texto. E você poderá ver alguns deles da família de fontes que eles adicionaram. E eu vou escolher um nome aleatório aqui. Não está aparecendo aqui. Talvez este nós possamos escolher, não este. Na verdade, podemos escolher este. Ou se houver algo melhor. E vai ficar assim. Vai ficar assim. Este não é muito pequeno. Isso e isso. E isso. Eu vou escolher, eu acho que este, este foi melhor. Tudo bem, mas isso não faz nenhuma mudança aqui. Então eu vou escolher essa tília ou nós tínhamos algo chamado, Tudo bem, este aqui. Agora, aqui vou colocar nossa imagem para colocar um EMS. Eles cometeram um erro aqui, então coloque a bagunça. Então você precisa selecionar, você precisa selecionar a ferramenta Imagem. E a partir daqui, basta carregar sua foto de perfil, fazer upload da foto que você deseja mostrar. Por exemplo, vou escolher este aqui. E isso mostra que adicionar MS e depois de uma queda, enquanto você poderá ver essa imagem em sua boca, basta selecionar esta e, em seguida, adicionará sua ferramenta de elipse. Ok, então agora eu não quero ter cinco para a foto da fronteira. Eu vou querer três. Ok, agora parece bom. Perfeito. E aqui, aqui, queremos ter nossa lista de mensagens. Mas antes disso primeiro, precisamos ter uma barra de origem aqui. Então, vou definir um retângulo aqui. E coloque esse retângulo, ou raio da borda. Eu vou dizer raio de borda de dez pixels e adicionar a borda aqui, mudar a cor de fundo para a cor branca. E aqui, bem aqui, exatamente, podemos fazer isso. Então aqui podemos, nós podemos, nós podemos, nós também precisamos ter um botão aqui. Também precisamos ter um botão aqui do mesmo tamanho. Então, vou duplicar este e depois arrastá-lo aqui e depois redimensionar este para o botão. Podemos simplesmente colocar aqui desta forma. Então eu posso aumentar esse. Aqui. Vamos colocar nosso ícone e aqui podemos simplesmente pagá-lo. Podemos simplesmente adicionar uma textura. Podemos dizer, podemos dizer sars, nome de usuário sars aqui. E eu vou mudar o tamanho da fonte para 15 pixels. E talvez cor, ou eu posso fazer um pouco de cor para este. A cor da sombra. Tudo bem, então agora parece bom. Agora, aqui vou colocar nossos e-mails. Vou colocar um ícone aqui para isso. Eu já instalei um PECC que se chama meta de ir para os plugins. E aqui você pode ver o ícone do nosso alimentador. Portanto, se você ainda não o instalou, basta clicar no plug-in Localizar mais e pesquisar este ícone de filtro ou usar qualquer outro plug-in para mostrar o ícone aqui. Então, vou clicar no ícone da pasta. Aqui. Vou adicionar sars. Sars. Então, eles têm um ícone sars. Eu vou apenas colocá-lo lá. Então, aqui está o ícone Pesquisar. Então, vou apenas selecionar essa opção aqui, ícone sars, e colocá-la aqui. No centro desta. Agora você pode ver que este está fora do quadro. Nosso mainframe está em casa, então vou arrastá-lo para dentro desse quadro. Tudo bem, então este é o nosso ícone de pesquisa, e agora depois disso, eu quero ter nossas duas opções aqui. Ele vem aqui. Vou remover esse. Então, aqui vamos mostrar nossa lista de usuários. Tudo bem, então, como mostraremos uma lista de usuários, tomaremos um retângulo saudável aqui. Vou desenhar um retângulo aqui. E então esse retângulo aqui. Vou desenhar esse retângulo. E eu vou adicionar dez pixels para este retângulo, para este carro, para este artigo, para este retângulo. E então eu quero ter uma cor branca, como a mesma cor que estamos mantendo, mas eu quero ter um traço aqui. Então, selecione um traçado aqui. Agora, parece com isso e aqui, acho que podemos aumentá-lo. Precisamos colocar nosso único ícone, depois o nome e a mensagem, e a duração e, em seguida, um pequeno ponto aqui. Então, como vamos fazer isso? Quem podemos duplicar isso porque precisamos do mesmo design. Está bem? Então, vou duplicar esse. Então, Comando D, Controle D e depois basta colocá-lo aqui. Mas não podemos ver isso aqui. Parece que nosso retângulo e nosso EMS, EMS, mas não está aparecendo aqui. Então essa é a nossa elipse. A elipse para, deixe-me trazê-la para a frente. Podemos dizer H nada lá. Então, eu vou deletar este. E vamos fazer uma cópia novamente. E então arraste-o para cá desta forma, e depois rastreie aqui. Ok, então o problema é que não está na frente. Então, deve nos mostrar. Você pode ver Trazer para frente, clique em trazer para frente. E agora está na frente. Então, vou colocar aqui. E então eu vou adicionar nosso nome aqui. Então essa é a nossa ferramenta de elipse. Eu vou fazer disso, fazer disso um nome. Vou dar um nome aqui, então vou dizer Renomear. Então aqui está nossa elipse, esta. Então, vou renomear este. Vou acrescentar isso de uma forma que está se movendo para cá. Então essa elipse vai ser o nosso nome. Então pressione Control R, n aqui. Vou dizer aqui o ícone do usuário, lista e a lista de usuários. E depois disso, vou adicionar nosso nome aqui. Então, digamos que podemos dizer, podemos dizer Francisco. Francisco. E você pode ver que está pegando a família de fontes anterior que usamos. Então, para a família da fonte, para o, pois o nome está pegando essa. E estou feliz com isso. Se você quiser, você pode simplesmente alterar o nome da família da fonte aqui. E depois disso, então e está pegando um pixel 15 como se eles devessem tamanho de fonte. E então eu preciso de mais um texto para as massas. Podemos dizer, Oi, como você está? Mas para isso, eu quero ter 12 pixels. Aqui. Eu quero ter 12 pixels. E agora aqui eu quero colocar nossa duração aqui. Então, vou colocar um tempo aqui. Eu vou dizer, digamos 09 até 1915 PM. Esta é a hora que mostramos. Mas está tomando a cor branca. Por que isso? Deve ser de cor branca. Onde está tomando a cor branca. Esse não deveria ser o caso. Deixe-me deletar este. Então, vamos colocar o texto aqui novamente. Agora ainda estamos trabalhando. Então, vamos colocar um 90915, 15h apenas na hora da mensagem quando o usuário enviou. E aqui eu quero ter três pontos para isso. Quero desenhar um ponto T aqui, como um ponto de tamanho pequeno usando o Elasticsearch, digamos cinco pixels por cinco pixels e apenas mudar a cor para preto. Então agora parece com isso. Acho que podemos fazer com três pixels pela altura, e a altura é três por três. Não é bom. Então eu vou fazer isso quatro por 44 por quatro. E então eu vou duplicá-lo Comando D e pegar um espaço e duplicá-lo mais uma vez. Então, esses são os três pontos que acabei de adicionar. Então seria bom se eu diminuísse a distância entre esses dois. Ok, então parece bom. Então aqui temos essa elipse, uma ferramenta de elipse no Illustrator, tornando-os um grupo. Então, vou pressionar o Comando G. E depois vou colocá-lo aqui. E o centro desta. Agora temos esse ponto t e vou diminuir a altura deste porque não precisamos ter esse número de altura. Tudo bem, então agora, tudo bem, então um pouco mais aqui. Então, temos esse design aqui. Agora, o que teremos que fazer, teremos que adicionar vários itens deste. Então, o que faremos basicamente fará deles um grupo e, em seguida, adicionaremos vários itens e , em seguida, adicionaremos opções de rolagem. Então, vou parar esse vídeo aqui e continuaremos com a próxima palestra. Vejo você na próxima palestra. 4. Rolagem de grupo e vertical: Bem-vindo de volta mais uma vez. Nesta parte, tentaremos adicionar várias listas, vários itens de usuário e, em seguida tentaremos adicionar uma opção de escala. Agora temos esse design e podemos reutilizá-lo. Então, teremos que fazer deles um grupo. Então este retângulo, e então esta é uma lista ou EMS e que nós criamos então este texto, este texto e este, e este grupo um para este ícone ensinado. Então, essas são as coisas que contêm esse item integral aqui. Então, vou fazer deles um grupo. Então, selecione tudo isso na barra lateral esquerda. Verifique se você selecionou todos os itens no momento . Então, vou selecionar o Comando C e depois renomear o grupo sensível int para pressionar Control R. Ou você também pode fazer isso clicando aqui. Assim, você pode ver seu controlador de nome. Então, vou dizer lista de usuários. Então, quando você está trabalhando em um grande projeto, sempre tentei dar um nome significativo para que mais tarde, ao fazer alterações, você possa descobrir facilmente. Portanto, é sempre uma boa prática. Agora temos esse design e o que podemos fazer agora? Então, vou pressionar o Controle D para este. E então eu vou arrastá-lo até aqui. E agora eu só preciso arrastá-lo apenas uma vez. E depois disso, eu vou apenas dizer, eu só preciso arrastá-lo uma vez e eu coloquei isso, eu vou apenas pressionar Control D, então ele vai automaticamente. Então pressione Control D, Control D, Control D, Control D até o final, Control D. Portanto, esta é a lista de usuários que eu quero ter. Agora, vamos ver como parece. Ok, você pode, uma coisa, você pode notar que há algum ícone, há alguma lista que vai além do nosso mainframe, portanto, não seremos capazes de fazer isso. Então é aí que vem. É aqui que ele sai, é chamado de funcionalidades que vamos aprender aqui. Tudo bem? Então, agora teremos que torná-lo uma opção escalável para que possamos ver o resto da peça e chamá-la verticalmente. Ok? Então, como fazemos isso exatamente. Então, agora temos toda essa lista de usuários. Então, essa é a lista que contém todas as nossas coisas. Ok? Então, essas são as listas que contêm, você pode ver se eu seleciono esta, há outra, mas podemos ver. Agora. Faça uma coisa, selecione toda a lista de usuários novamente e torne-os um único grupo. Então, selecione todo esse item. Agora, esse conteúdo é a coisa toda. Então agora vou fazer deles um grupo. Ok? Agora, mude novamente o nome. Podemos dizer toda a lista de usuários para um pergaminho, apenas um nome significativo. Então, agora esse grupo contém toda a nossa lista de usuários. E mais fácil todo esse conteúdo neste design exclusivo é um design específico. Ok? Então, agora basta entrar no lado direito, você poderá ver as opções de layout automático aqui. Você só precisa clicar nele. Assim que você clicar nele, você verá o conteúdo do clipe. Então você só precisa clicar no conteúdo deste clipe. Depois de clicar no conteúdo deste clipe, você poderá ver que esse grupo terá esse tipo de formato. Agora, podemos arrastá-lo e depois ajustá-lo com nosso mainframe, que é que havia essa casa dessa premissa de formulário ainda aqui, mas nosso grupo ainda está aqui agora. Então, o que eu vou fazer, vou apenas adicionar aqui. Tudo bem. Agora, queremos poder ver todas as opções de escola. Então, se eu atualizá-lo, veremos essas opções. Ok, então o problema é que deixe-me mostrar o que quero dizer com isso. Agora ainda podemos ver as opções do crânio ainda é que só temos essa funcionalidade aqui, como até aqui. Eu também posso, novamente, eu posso arrastá-lo aqui. Vai ficar assim. Então, ainda temos essa opção aqui, ok, podemos chamar esse item. Você pode ver que podemos rolar para a direita? Nossa, nossa lista de usuários está quebrada até aqui. Agora, basta selecionar essa lista de usuários e ir para a seção de protótipos. Clique no protótipo. Aqui você pode ver a rolagem de estouro. Por padrão, ele é selecionado sem rolagem. Precisamos fazer mudanças aqui. Então, em vez de não rolar, vamos selecionar a rolagem vertical dessa alma. Agora, devemos ser capazes de ver nossa lista. Aqui. Você pode ver que podemos rolar nosso item. Podemos rolar nossa lista. É assim que podemos fazer mudanças, mas é assim que podemos adicionar nossas opções escolares. Então, agora temos essas opções aqui. Legal. Então, agora você aprendeu a fazer rolagem. Vamos fazer uma coisa. Agora. Eu posso mudar. Essas são imagens como imagens diferentes. Então, vou selecionar novamente a bagunça Plessy. E então eu vou selecionar todas essas imagens. Levará alguns segundos para fazer o upload dessas imagens. E assim que terminar o upload, poderemos ver nossas imagens em nossa boca quando as movermos. Então, a imagem é redimensionada, então ainda está, está demorando. Não está aparecendo. Aqui está. Você pode ver que temos oito e-mails agora. Então, agora eu vou selecionar este. Eu vou para a imprensa, então já temos esse. Vou apertar um aqui. Vou pressionar o segundo aqui. terceiro está aqui, o quarto está aqui. E dessa forma, você pode apenas, você pode apenas mostrar, você pode simplesmente colocar várias imagens aqui. Você pode ver isso. Agora temos imagens diferentes. Demora algum tempo para atualizá-lo. Então, agora temos imagens diferentes para cada item. Então, o que eu fiz basicamente, eu apenas cliquei nos e-mails deste lugar e selecionei todas as imagens. Demora alguns segundos assim que é carregado, então você poderá ver todas as imagens com um número com o mouse. E então você só precisa ir lá e clicar nele um por um, e então ele vai colar automaticamente aqui. Aqui vamos nós. Agora temos uma droga da Fannie Mae para um cartão diferente. Você pode ver e nós também podemos rolar. E também podemos rolar esse aqui. Então, dessa forma, se você quiser, você também pode alterar todas as imagens aqui. Você pode fazer isso sozinho. É o mesmo processo. Então, agora temos essas funcionalidades de rolagem e ícones diferentes sob imagens diferentes. É assim que você pode fazer isso. Tudo bem, então eu vou alimentar este. Então você aprendeu como fazer rolagem e como agrupá-la e como posso fazer isso aqui dessa maneira? Na próxima parte, vamos trabalhar nesse ícone. Quando você clica no ícone, mostraremos que nosso modelo funciona para excluir a lista. Vejo você na próxima palestra. 5. Protótipo de sobreposição aberto: Bem-vindo de volta mais uma vez. Nesta parte, vamos adicionar um item individual aqui. Quando você clica neste para excluir esta lista, como faremos isso para isso, novamente, precisamos definir um quadro. Então, vou clicar no quadro e, desta vez, vou desenhar um quadro personalizado, como arrastá-lo dessa maneira. Tudo bem, então em vez do quadro um, eu posso dizer, eu posso dizer excluir quadro. Tudo bem, você pode dar qualquer nome e eu quero ter um pequeno raio de fronteira aqui. Então, vou economizar cinco pixels. E dentro dessa moldura Dillard, eu quero ter dois botões. Um é para atrasado, outro é quadrado sem moldura. Então, o que eu posso fazer? Eu posso definir um retângulo aqui. E eu posso definir nosso rec, retângulo aqui. Para este retângulo, vou dar 95ª célula de raio de borda para que fique bem. E eu vou adicionar a cor vermelha e essa cor aqui que estamos usando aqui. E então eu vou colocar um texto aqui. E eu vou dizer deixe e coloque no centro. O texto em vez de 15, deve ser 12 porque é apenas um texto de botão normal. Agora, o que eu posso fazer? Faça deles um grupo, esses dois. Agora, vou duplicar esse grupo para que eu possa usar, eu possa adicionar outro botão. E esse botão vai ser esse nome de botão vai estar em um amigo. Eu posso dizer. E botão Amigo. Agora deixe-me colocá-lo no centro. Tudo bem, então agora temos esse quadro. Agora, o que precisamos fazer? Precisamos conectar esse quadro com esse ponto. Então, quando você clica neste topo, podemos mostrar este. Vá para isso, clique neste protótipo e agora clique neste grupo, neste grupo de pontos. Não exatamente no solo. Você pode ver isso. Você se lembra que para esses três pontos, temos um sulco. Então você só precisa clicar no grupo. E então, aqui você verá interações. Clique nele e clique aqui. Aqui diz que como você deseja interagir, queremos tê-lo no clique ou no caminho certo ou ligado, bem, queremos tê-lo no onclick. E então, em vez de navegar para, eu vou aparecer de novo e de novo. Deixe que essa sobreposição aberta nos ajude a adicionar nosso tipo de caixa de modelo. Então, agora, onde queremos fazer essa sobreposição aberta, queremos fazer isso com esse quadro de exclusão. Agora, esse nó está conectado a esse quadro Gillette. Agora, aqui diz que adiciona fundo atrás da sobreposição. Eu não quero ter nenhum histórico, então não vou selecionar aqui. E então diz fechado ao clicar fora, quero fechá-lo quando o usuário clicar do lado de fora. Eu vou te mostrar o que isso significa. E agora aqui ele tem esse sistema de animação de onde você quer mostrar este ou de onde você quer fazê-lo, ou você quer ter uma instância. Então, vamos primeiro adicionar essa animação para entrar e diminuir para que você entenda o que quero dizer. Agora, se eu executar este, se eu estiver aqui e se eu clicar nele, aqui está. Nosso delete, eu sou o quadro principal virá aqui por padrão se eu clicar fora dele. Agora precisamos colocá-lo manualmente aqui. Quero mostrá-lo quando clicar nele, vez de entrar no centro, ele deve vir aqui. Então, como eu vou fazer isso? Aqui, eles têm uma opção chamada centralizada por padrão. E aqui canto superior esquerdo do centro, canto superior direito, chumbo inferior de onde você foi de onde você quer mostrar. Então, digamos no canto inferior esquerdo. Clique nele. Ele vai adicionar aqui no canto inferior esquerdo. Mas queremos mostrar isso aqui. Portanto, você pode simplesmente brincar com este. Digamos que você queira mostrá-lo no canto superior direito. Agora, se eu clicar nele, ele virá no canto superior direito. Ok, então você pode apenas dizer. Então, meu objetivo é ensinar você. Então, estou apenas mostrando as opções antigas mais tarde que você pode usar com base em suas necessidades. Mas para este eu vou selecionar. Enquanto isso, assim que eu dormir com o mineral, eu posso simplesmente arrastá-lo para cá logo após este. Eu posso simplesmente arrastá-lo até aqui. Agora. Agora, se eu atualizá-lo, ele deve vir aqui porque editamos aqui. Agora, clique nele e ele está aqui. Tudo bem? Então, como temos experiência de colarinho branco e também temos esse. Então, vou adicionar uma cor diferente para esta para que fique facilmente visível. Então, em vez disso, vamos colocar essa cor cinza. Agora. É facilmente visível aqui e podemos colocá-lo aqui. Mas se quisermos, também podemos adicionar uma cor diferente para esta, talvez esta, e essa cor, agora parece boa, é facilmente visível. Eu clico do lado de fora, ele vai, mas eu não quero ter nenhuma medida porque não é fácil de usar, porque não queremos mostrar ao nosso usuário. Ele vem de baixo. O que queremos ter? Queremos mostrar quando clicar no grau mostrado aqui. Tudo bem, então como vamos fazer isso? Agora, novamente, vá para esta seção de protótipo. E aqui tivemos nossa interação aqui. Isso é o que tínhamos aqui. Ok, então precisamos clicar nele. Então podemos ver este aqui, o anterior, e aqui eles têm opções. Então, em vez de morfina de animação, vou selecionar Instant seus assentos. Então não vai dar nenhuma medida. Você pode ver em vez disso agora. Você pode ver em vez disso agora. Tudo bem. Clique nele, ele virá agora quando clicar no botão excluir e no botão não divertido, eu também quero descartar este. Eu quero remover este. Então, como eu faço isso? Então, agora clique neste botão, clique aqui e mostre esse indireto aqui. Clique no onclick e você terá, você só precisa clicar neste gloss over lead porque tivemos um, nós temos sobreposição. Então, eu só quero fechar essa sobreposição. Então, quando os usuários clicam nisso, você clica nele, vemos essa sobreposição. Agora clique em Excluir. Vai continuar desse jeito. Da mesma forma, também podemos adicionar para isso injusto e fora do Sean. Então selecione este e amigo e venha aqui, selecione este, clique em nenhum e clique em Fechar sobreposição. Este também está conectado agora. Agora eu clico nele, ele vai fechar. Eu clico aqui. Ele mostra essas duas opções. Em seguida, clique nele, ele sumiu. Então é assim que você pode fazer uma sobreposição aberta de shows, seção de trabalho do modelo dessa maneira. E então você também pode fazer esse tipo de lista. Espero que você tenha aprendido algo novo hoje. Vejo você na próxima palestra. 6. Envio de mensagens: Bem-vindo de volta mais uma vez. Nesta parte, tentaremos projetar nosso layout de mensagem principal. Então aqui eu quero, na parte anterior, terminamos todas essas funcionalidades. E então esse também está funcionando. Tudo bem, então também podemos fazer pequenas correções aqui, por exemplo, que eu acho que podemos apenas diminuir a altura do quadro, um pouco menos de configuração. E talvez eu não possa, não este como o mainframe. Estou falando sobre esse mainframe. Então, deslize este mainframe e minimize, diminua a altura deste. Agora podemos ver que está consertado. Ok, então agora eu vou fazer um pouco mais. Ok, então, ok, então vamos aumentar um pouco mais. Agora selecione este e coloque-o aqui. E também este, o carrinho principal que contém nosso design principal aqui. E também precisamos ajustar nosso quadro novamente. Então clique em clique neste quadro que fizemos aqui. E então podemos ajustá-lo até aqui. Então, agora parece bom. Agora podemos ver que não temos esse pergaminho. Quero dizer, como nós em primeiro lugar, nosso Haida era mais do que o tamanho da tela que eu tenho. Mas se você não quiser fazer alterações, tudo bem. Então agora temos esse ponto de partida para esse layout daqui, e este é daqui. E agora podemos simplesmente chamá-lo, agora parece melhor do que o anterior, anterior. Tudo bem, então o que eu fiz basicamente não se confunde aqui. Então, o que eu fiz, eu apenas diminuí a altura desse mainframe, que é o nosso quadro inicial, e então apenas adiciono apenas neste quadro e, em seguida, apenas ajustei esse quadro que contém tudo isso. E então isso para todo o quadro da lista de usuários, basta ajustá-lo para que fique melhor agora. E antes era como se tivéssemos um pequeno pergaminho. Tudo bem, então agora aqui vou adicionar a opção d then aqui. Então, o que eu vou ter aqui, eu vou ter uma ema e depois ao lado deste EMS, o nome, e depois a hora e depois a mensagem. Então, o que eu vou fazer, eu vou apenas duplicar isso, esse emus. E então eu posso simplesmente colocá-lo aqui. E quatro aqui. Vou adicionar uma cor de traçado diferente porque nosso plano de fundo é branco. Então, se eu escolher essa largura, então vai ficar ruim. Nada mal exatamente. Nós até entendemos este. Você não quer ser visível. Agora acho que ele está visível em vermelho, então vou selecionar este, e depois disso, terei que adicionar um nome aqui. Então eu vou mandar Francisco para ele. Francisco está indo para cá e eu vou colocar o nome aqui, 14 pixels. E coloque no centro. E no mesmo centro, vou puxar o texto e será a nossa vez. Ou também podemos colocar o tempo aqui ou no meio. Se eu colocar aqui, teremos mais um texto ainda. Não. Então, ficará bem no centro. Eu vou dizer den, den 12 PM. E então eu vou fazer isso aqui e no centro. E depois disso, o que terei depois disso, vou ter a mensagem aqui, a caixa de mensagens. Então, para isso, para a caixa de mensagem , eu vou desenhar um retângulo aqui. Vou adicionar a mensagem daqui até aqui. Os livros de mensagens serão assim. E vou adicionar um raio de borda aqui. Então, adicione raio de borda dez. E a cor de fundo da Jen ou sem cor de fundo, se parecer boa, também podemos manter essa. Deixe-me tentar. Essa será a melhor solução. Então, agora esta é a nossa caixa de mensagens. E eu quero ter um pouco de sombra aqui, como em vez de 100%, vamos colocar 50 versus n. Então, se eu usar uma cor diferente e não ficar bem em 50%, talvez 70, 70% por cento. Vai ficar assim. Coloque 80%. Teremos essa cor clara e essa não ficará bem. Então, vou tentar gerar algumas outras cores. Talvez essa cor, essa cor, essa. E então coloque um gradiente linear aqui. Portanto, o gradiente linear não será visível aqui. Então eu posso simplesmente colocá-lo aqui. Então, em vez dessa cor, vou escolher a cor branca. E então vou escolher a água que é porque na mensagem sempre temos a cor normal e normal para que o usuário possa olhar na tela por um longo tempo. Mas se estamos usando uma cor colorida que em mensagem colorida, então não pode ser muito ruim. Não é fácil de usar. Mas se você tem uma coisa diferente, equipe diferente, por exemplo, equipe preta ou qualquer outro tema, então você pode tentar usar cores diferentes. Mas para a equipe branca, para o fundo de colarinho branco é sempre melhor manter as massas em uma sombra branca. Então, vou minimizar essa altura. E dentro deles, eu posso apenas digitar em essência aqui eu posso dizer, Ei, Oi, Como você está? Como você está fazendo? Está tudo bem? Está tudo bem? Tudo bem, então esta é a caixa de mensagem que temos aqui. Então, agora precisaremos da mesma coisa aqui. Ok, então agora eu vou duplicar, ok, então vamos duplicar outro, como este, esta mensagem, esta imagem. Então, vou duplicar esse. E vou colocar aqui. Então, eu vou apenas duplicar este aqui. Desculpa. Ok, então eu fiz isso de maneira errada. Então, em vez de fazer isso, vou torná-lo um componente. Então crie um componente, então podemos usá-lo a partir daqui. Se você quiser criar um componente, basta selecionar a bagunça ou qualquer componente. Em seguida, clique com o botão direito, clique com o botão direito do mouse e clique no componente, criar componente Por exemplo, esse aqui. Em seguida, clique em Criar componente e ele aparecerá aqui. E então você pode usá-lo quantas vezes quiser sem nenhum problema. Então, agora aqui, eu vou colocar essa coisa aqui. E eu vou duplicar este, comando D. Então, no mesmo nível, deveria ser. Aqui podemos ver que é o meio. Tudo bem, então aqui, agora eu vou mudar a hora. Nós podemos dizer. Podemos dizer então cinco. E então aqui, bem aqui, teremos que escrever o nome. Então, vou pegar e adicionar o texto e vou colocá-lo aqui. Eu vou dizer Jessica. E eu vou colocá-lo aqui como no mesmo nível, mas próximo a este. Tudo bem, então Jessica manda mensagens para Francisco. E deixe-me verificar se temos a mesma altura ou as mesmas fontes. Tamanho da fonte 1414. Agora precisaremos do mesmo design aqui. Então, o que eu vou fazer, vou fazer deles um grupo juntos. Esses dois por item, selecione esse retângulo abaixo deste texto. Então faça deles um grupo e então eu vou duplicá-lo. E então eu vou colocá-lo aqui. E para esta mensagem, vou colocá-la aqui e no lado direito, no lado direito. E depois vou colocá-la aqui. Vou diminuir o tamanho. É o branco deste. E aqui está. Então, as dispensas vêm de, as dispensas vêm de Francisco. Esse vem da Jessica. E então, juntos, podemos simplesmente movê-lo para cá. Sim, mas está tudo bem aqui. Mas vamos agrupar essas duas coisas assim, esta e depois essa Jessica, e desta vez essas duas e essa lista de usuários. Então eu vou fazer deles um grupo, cortar todas essas coisas. E precisamos colocá-lo em um fundo. A partir daqui. Vou duplicar mais uma vez, esta mensagem aqui. E depois vou colocá-la aqui. Então, essas são as duas mensagens que foram enviadas por Jessica daqui. Então, essa mensagem vem da Jessica. E aqui vou colocar mais uma coisa aqui. Então eu vou, eu vou ter nossa linha aqui, assim por diante para adicionar uma linha. Podemos usar a ferramenta de linha ou podemos usar a ferramenta retângulo. Portanto, prefiro usar essa ferramenta retangular para que possamos personalizá-la facilmente. E então eu vou diminuir a altura deste. Vamos colocá-lo em, em seguida, adicionar raio de borda e célula de 90 cliques. E aqui vamos nós. Vamos ver como fica. Parece com isso. E eu vou selecionar este. A cor deste é um bloco, eu acho. Então, podemos escolher essa cor para preto. E não exatamente no blog. Um pouco de cinza seria bom aqui. Sim, então parece com isso e a mesma coisa. Essa mensagem vem de Francisco e dispensa vem de Jessica. Deixe-me mudar a mensagem aqui. Posso dizer que foi enviado para cá. Podemos dizer que vou adicionar massas diferentes aqui. Posso dizer que esta é a Jessica dos seus colegas da sua universidade. E depois a segunda mensagem, Como você está? Apenas um S aleatório para que fique bem? E comida? E deve começar do mesmo poema, mesma posição aqui, como este ponto de partida daqui. Tudo bem, então essas são as duas mensagens que foram enviadas por Jessica e Francisco. E depois disso, à direita aqui, quero ter uma caixa de mensagem aqui. Então, vou criar uma caixa de mensagem aqui. Vou adicionar uma caixa de mensagem aqui, bem aqui. E então deve começar da mesma posição que começou a partir dessa imagem. Então, quando você o arrasta dessa maneira, você pode ver essa coisa aqui. Então vou colocar esse raio de borda de 90 pixels, não 90 pixels. Seria bom se selecionássemos pixel de festa talvez não sejam bem pixels, nove pixels. Tudo bem, agora vou colocar aqui, vou adicionar um traço e mudar a cor do plano de fundo para branco. E aqui teremos que definir outros botões para isso. Vou duplicar esse. E só para diminuir esse branco. E este será para o nosso botão Enviar. Está bem? Então, para começar do mesmo, da mesma posição que começou a partir daqui. Agora, esses outros dois botões aqui, os dois campos que temos aqui. Então, esse aqui, vou dar uma cor diferente. Então, vou adicionar uma cor, cor traço que eu por acaso, infelizmente. Então, na verdade, não precisamos ter um derrame aqui. Precisamos ter uma cor de fundo aqui. E então seu alvo não é mais visível aqui. E aqui vou adicionar nosso ícone chamado enviado com nosso texto. Então, primeiro, precisamos editar o texto aqui. Podemos dizer aqui, podemos digitar aqui, podemos dizer perfume e colocá-lo no centro. E logo depois disso, quero ter nosso ícone chamado ícone do alimentador. Aqui, vou adicionar enviado. E eu vou selecionar esse ícone. E basta colocá-lo aqui. E eu vou mudar a cor para que você possa ver as cores de seleção aqui e chance de preto para branco. Legal, parece muito legal, mas você pode ver que esse ícone de envio aparece fora do nosso quadro. Portanto, queremos poder ver isso aqui. Então, o que vou fazer, vou apenas arrastá-lo para dentro do quadro. Então, podemos ver nosso botão Enviar. Acho que precisamos colocá-lo no meio. Dessa forma. Sim, esse é o meio. E isso é o que temos aqui. Tudo bem, então este é o nosso show bagunçado aqui. Quero adicionar um texto. Eu vou dizer digite sua tinta, sua mensagem. E eu vou adicionar esse ponto. E então eu vou, o que eu vou ter, eu vou adicionar uma sombra aqui. Podemos mudar o plano de fundo, podemos mudar a cor deste. Como esse tipo de cor. Podemos escolher a cor da pequena sombra da perna, essa cor. Tudo bem, então está tudo bem agora parece muito bom. Por isso, criamos nossas seções de mensagens. Então, vou parar esse vídeo aqui e continuaremos da próxima palestra. Vejo você na próxima palestra. 7. Inscreva-se e assine em Design de páginas: Bem-vindo de volta mais uma vez. Então fizemos nossa mensagem do sistema de mensagens. Mas ainda preciso consertar algumas coisas. Por exemplo, aqui você pode ver que não temos essa borda que temos aqui. Então, vou consertar isso rapidamente. E nós temos essa fronteira. O derrame é três. Então eu vou escolher o derrame aqui. E eu vou colocar esse derrame. Tudo bem, então eu cometi um erro. Preciso selecionar somente esse item. Aqui vou adicionar o traço. O traço vai atingir C. E a cor do traço será a cor que temos aqui. E nós, tudo bem, então já temos um derrame aqui. Parece que vou remover esse aqui. Então, aqui, clique duas vezes nele, então eu vou mudar a cor do traçado. Porque você já tem um derrame, porque acabamos de conhecê-lo componente. E em nosso componente, em nosso design anterior, já tivemos o curso deles. Então, basta clicar duas vezes nele. E então você vê o ícone, e então você vê a cor, depois muda a cor aqui. Você não precisa adicionar outro traçado aqui porque já temos uma borda para este. Tudo bem, então essas são as poucas coisas. Agora, eu quero projetar nossa inscrição e o login paga por isso. Vou criar uma moldura aqui. Então, vamos criar um quadro aqui. Eu vou fazer isso dessa maneira. É essa moldura pequena. E vou adicionar um raio de borda aqui. Então, podemos dizer aqui, primeiro mude o nome. Vou dizer que assine aqui. E aqui vou acrescentar, vou mantê-lo no raio da borda do pixel cipriano. Então raio de borda invertendo pixel. E aqui teremos que adicionar um texto e depois um campo de entrada. Então, vou adicionar a inscrição aqui. Assine aqui. Então, este é o texto de inscrição. E aqui está, temos melhorias de design no meio. E vou mudar a fonte para 20 pixels. Acho que sim. Podemos, podemos, podemos selecionar dois em pixel. E aqui eu quero ter que preencher não exatamente três campos de entrada. Um vai ficar assim. E eu vou colocar um raio de borda de 22 pixels e adicionar um traçado aqui e mudar a cor de fundo para a cor branca. Aqui, vou adicionar um espaço reservado. Vou mandar um nome. Ou podemos colocar esse nome bem aqui. Então seria bom se pudéssemos dar o nome dessa maneira. OK. E deixe-me arrastar um pouco mais. E então esse vai ser o nome. Isso vai ser o campo do nome. E então vamos fazer deles um grupo para que possamos duplicá-lo. Então, agrupe e depois o Comando D. Vou adicionar este será um e-mail. Então, basta alterar o nome para e-mail aqui. Então, vamos dizer e-mail. E depois disso, eu vou ter esse D. E este vai ser senha. Então este será o campo de senha. Parece que preciso aumentar a altura deste porque ainda precisamos adicionar nosso botão aqui. Então, e também precisa ajustar esse dessa maneira para que ele comece da mesma posição. Tudo bem, legal. Então, agora precisamos adicionar nossos botões. Então, para isso, vou desenhar um retângulo aqui e nosso botão aqui. Então vou colocar 20 aqui. Vamos colocar em 90. E então eu vou dar a nossa cor de fundo para esta, talvez essa cor. Então nós temos este e agora eu preciso colocar nosso texto aqui e o centro chamado sign up. E vou adicioná-lo aqui e ao centro. Tudo bem. Parece que está bom agora, mas ainda quero ter um pouco mais de design aqui. Então, o que vou fazer aqui, vou selecionar a Ferramenta Ellipse aqui. E vou adicionar esse tipo de elipse aqui. E deixe-me mostrar o que exatamente eu quero adicionar aqui. Quero adicionar aqui várias cores e o site. Então, vamos dar uma cor. Só uma cor aleatória, essa. E agora aqui está nossa configuração. Este está configurado neste quadro, então vou colocá-lo dentro do quadro. Agora podemos ver esse tipo de forma. Então eu vou desenhar mais um aqui. Dessa forma. Podemos adicionar quantos você quiser e podemos apenas dois ratos depois. Agora vou dar uma outra cor a este. Talvez dessa cor. Mas, novamente, preciso colocá-lo dentro dessa moldura. Agora, vai ficar assim, mas eu não gostei dessa cor. Então, o que eu quero fazer, vamos tentar uma cor diferente. Agora. Vai ficar assim. Parece melhor do que o anterior. Agora temos esses dois designs aqui no canto e no canto direito. E o que mais podemos fazer? Deixe-me arrastá-lo dessa maneira. Talvez possamos adicionar um pouco mais de design aqui, se você quiser. Ok, vamos tentar adicionar um retângulo aqui. Ok, então vamos desenhar um retângulo fora deste e dar 90 pixels e adicionar uma cor a esse retângulo. Esse retângulo e essa cor. Tudo bem, então agora eu posso simplesmente arrastar esse retângulo e isso, eu posso simplesmente girar esse retângulo dessa maneira e colocá-lo dentro deste. Então, o que vou fazer, vou adicionar um gradiente linear a este e mudar a cor e assim. E agora temos esse chef linear. Tudo bem, então agora o que posso fazer? Deixe-me mudar a cor aqui. Agora, parece com isso. E eu vou, vou duplicar este para adicionar mais uma opção aqui, para adicionar outra opção aqui. Então, parece muito bom agora. Então, agora, se eu executar este, eu deveria ser capaz de ver você mais uma vez. Eu deveria ser capaz de ver essa moldura. E vamos ver como fica. Então, parece com isso. Então, parece muito bom. Tudo bem, então, ao clicar no botão Inscrever-se, nós os enviaremos para uma página de login. Portanto, teremos que criar uma página de login também. E mais uma coisa que eu quero adicionar, eu quero adicionar um texto aqui. Eu vou dizer que já tenho uma conta. Já tenho uma conta, já tem uma conta entre aqui. Então, vou diminuir o tamanho da fonte para 14 pixels. Não é pixel como o tamanho da fonte. Então coloque aqui como este ponto de partida. Agora você pode ver essas coisas. Agora, precisamos duplicar este. Assim, podemos duplicar este e depois adicionar o mesmo design à nossa página de login, mas teremos que fazer algumas alterações aqui. Então, vou clicar nele. Vou duplicar esse. E mude rapidamente o nome para entrar em vez de assinar. Agora, aqui, altere o nome para entrar. Então, não precisamos tê-los quando o usuário fizer login. Então, o que eu quero fazer, eu quero apenas reorganizar este desta forma. Deste ponto de partida. Na verdade, podemos desfazer esse aqui. Deixe-me desfazer esse. E esse é o ponto de partida. E este é o eu vou apenas remover essa senha aqui e mudar o nome para e-mail. E essa vai ser senha. E então eu vou arrastar esse botão para ouvir. Ok, então parece que nesta inscrição, mude rapidamente o nome para entrar. E precisamos fazer disso um grupo. Então, vou fazer deles um grupo e colocá-lo aqui para o login. E então eu vou arrastar esse texto aqui. E desta vez posso dizer que não tenho conta, então inscreva-se. Posso dizer que não tenho conta e depois direi para se inscrever, assinar e fazer login. Tudo bem. Então, agora, tudo o que temos de aprovação, temos login até que ele possa executá-lo novamente, deve funcionar. Então, fizemos nosso design de página de inscrição e login. Na próxima parte, tentaremos conectar essas duas coisas ou usar prototipagem. Tudo bem, então temos esse, ok, então precisamos selecionar este. E então eu posso executá-lo. Então inscreva-se, faça login em nossa página inicial principal. E aqui está. Então essa é a palavra login. Então, parece muito bom. Tudo bem, vou parar esse vídeo aqui e continuaremos da próxima palestra. Vejo você na próxima palestra. 8. Prototipagem com animação: Bem-vindo de volta mais uma vez. Nesta parte, tentaremos adicionar nossa prototipagem, mas antes disso, quero ter um botão aqui. E então eu quero começar a prototipagem como teremos que fazer. Eu preciso desse tipo de design aqui para um bloqueio. Então, quando você clica nesse botão, mostramos um menu suspenso para ter muito logout. E então, a partir do logout, os enviamos para a página de login. E a partir daí podemos fazer toda essa prototipagem. Então, vamos adicionar um quadro aqui. Um é um quadro de tamanho pequeno aqui. Então, vou dar o nome aqui, sair. Tudo bem, então agora este é o nosso quadro de logout. Vou dar a ele um raio de fronteira. E aqui vou criar nosso botão aqui. Então, vou adicionar um retângulo aqui. Vou desenhar um retângulo aqui. E então aqui vou acrescentar, vou dar 90 e depois colocar uma cor vermelha. E aqui eu quero adicionar o texto aqui. Então, o texto será bloqueado. Eu vou dizer logout e colocar esse texto no centro. Então, agora temos esse quadro de logout e, em seguida, temos esse. Então, quando o usuário clicar aqui, vamos adicionar um ícone aqui. Então, vou adicionar um ícone de filtro. Eu vou dizer seta. Eu estava procurando nesse tipo de ícone com a seta, este aqui. Então, vou arrastar esse ícone aqui, bem aqui. E eu vou colocar essa cor na cor branca. Ok? Então, onde está esse ícone? Este ícone agora é login, aprovação. Ok, então já vimos dentro do quadro. Deixe-me checar. Então aqui vamos nós. Temos esse ícone. Então, quando clicamos neste ícone, mostramos esses quadros de logout da mesma forma que fizemos para este. Então, para isso, o que eu vou clicar na prototipagem, clique neste ícone. E então em interações aqui, e clique nele. Ao clicar, queremos ter e, em seguida, queremos ter nossa sobreposição aberta. E neste termo, queremos mostrar nosso quadro de logout. E como queremos mostrar. Não queremos ter quando o usuário perde, ao clicar fora, precisamos deste. Então, em vez de centralizar desta vez, queremos fazer isso manualmente. Então, queremos mostrar isso. Queremos colocar bem aqui. Queremos colocar isso bem aqui. Mas antes disso, deixe-me dar uma cor de fundo. Caso contrário, não será visível. Não podemos o vermelho, como a cor que usamos. Aqui. Acho que esse não vai ficar bem. Então, podemos escolher essa cor, eu acho. Ou qual código de cores temos para este. Vou copiar este, esse código de cores, e depois vou colocá-lo aqui. E aqui está. Então este será nosso logout, ou podemos fazer mais uma coisa. Podemos mantê-lo branco. E então podemos adicionar uma sombra aqui. Vamos mantê-lo branco e adicionar efeito. Em seguida, ficará visível. Agora, se estivermos no modo protótipo, então temos essa sombra aqui e queremos que ela seja instantânea em vez de adicionar a navegação. Ok? E assim que eu tentar. Então clique nele. Clique nele. Podemos ver esse botão de logout. E quando eu adicionei a sombra, podemos ver esse logout. Podemos ver essa pequena sombra aqui. Mas se você quiser, você também pode escolher essa cor de fundo. Acho que seria bom se usássemos essa cor de fundo. Portanto, vou mudar a cor de fundo novamente para esse código de cores que temos. Tudo bem, eu fiz isso no lugar errado. Então, precisamos alterar o código de cores. Aqui. E agora, se eu vier aqui, eu posso ver este. Clique em nosso site, vai. Então, novamente, volte para este protótipo. E aqui, quando o usuário clicar no botão, queremos fechar nosso modelo. Então, clique neste indireto e, desta vez, clique em Fechar sobreposição e clique nele. Clique neste botão de logout e ele desaparecerá. Ok? Então, em vez de garras aqui, quando você clica duas vezes no botão de logout de bloqueio, nós as enviaremos para o quadro de login. Então, vou remover esse daqui. Então, em vez de sobreposição de brilho, agora, desta vez, queremos ir para onde queremos navegar. Queremos navegar até os pares de login. Tudo bem, ao atribuir pares em vez de instantâneos, eu quero ter animações de metamorfose assim. E vamos ver agora o que temos outro bloqueio de Glick. E estamos dentro agora. Agora estamos nesse ritmo de assinatura. Estamos em pares de login. E a partir da assinatura paga, quando o usuário clicar no ritmo de login, nós o enviaremos para nossa página inicial. Então, o que eu fiz aqui não se confunde. Quando clicarmos neste botão, abriremos este. E quando você clica no botão Login, acabei de adicionar o botão de login onclick navegar para, em vez de sobreposição de garras, navegar para navegar. Dois significa que queremos mudar para um novo quadro ou um novo ritmo, o que você quiser dizer. Então clique no sobrinho, vá de lá. De quem são amigos? Quero dizer, desde navegar do logout até quem está no quadro. Você quer ir, eu quero ir para a página de login. E aqui você terá a opção de adicionar sua animação. Por exemplo, eu selecionei morfina e ele virá do lado esquerdo, se você quiser. Você pode fazer com o lado direito, superior e inferior. E aqui você também pode adicionar facilidade dentro e fora do orçamento da fantasia, ou eles têm muitas funcionalidades aqui. Você pode simplesmente fazer isso. Agora, assim que o usuário clicar na página de login, botão de login aqui. Nós os enviaremos para a página inicial. Então clique novamente neste indireto. Aqui. Clique, navegue até, navegue até onde, navegue até nossa página inicial. E aqui, em vez de instantâneo, eu quero ter uma animação de transformação. Então, agora, se eu clicar no login, estou nessas páginas iniciais. Novamente, clique neste botão de logout. Estou na página de login. Clique na página de login. Estou no login. Sim, ele vai trabalhar sozinho. Também vai funcionar aqui. Tudo bem. Faça logout aqui e estamos na página de login . Clique no login. Estamos nisso, estamos nesta página principal, aqui temos outra coisa. Não tenho uma conta cadastrada, então, quando você não tem nenhuma conta, devemos enviá-la para o ritmo de inscrição. Então selecione este e adicione indireto aqui. E a partir daqui, selecione nenhum para navegar até onde você deseja enviar a base de inscrição. E aqui, em vez de exemplo, você pode dizer mover nesta animação ou você pode simplesmente escolher esta apenas para um exemplo. Ok, então agora clique aqui, saia. Não tenho uma conta cadastrada aqui. Então, aqui está o botão de inscrição. E no botão de inscrição, precisamos enviá-los para a página de login. Ok, então se eles tiverem sucesso é assinar aqui, então, após a aprovação da escola de futebol, nós os enviaremos para a página de login, para a página de login para fazer login. Então, vou selecionar para navegar até o nosso ritmo de login. E em vez de exemplo aqui, queremos enviá-lo para a mudança. E então podemos selecionar essa animação. Agora, saia, sem usar página de login. A atribuição de pares estava no aplicativo principal desde a aprovação aqui. Então, aqui já tem um login de conta. Eu preciso também adicionar essa prototipagem. Portanto, se você ainda não tiver uma conta, nós os enviaremos para a página de login. Então, adicione esse indireto aqui, clique nele. Ao clicar, navegue até. Desta vez vou assinar. Em vez de exemplo. Vamos adicionar uma dimensão inteligente como esse tipo de coisa. Em vez de entrar e sair facilmente, vou dizer gentilmente que já tenho um login na conta. Parece com isso. Assinatura, inscrição, login, login. Então, se você acabou de fazer login com sucesso, então faça logout. OK. Então, a partir deste, eu quero ter uma perna emocional diferente se movendo do lado esquerdo para observar este modelo. Então, vamos clicar nisso. Nós temos esse. Colar de login. Não tenho uma conta cadastrada aqui. Você não tem uma conta, já tem uma conta. pagamentos de login já têm uma página de login da conta e de pares de login. Então, quando clicar no botão de login, eu quero mudar a animação. Então, quando eles forem para a casa aqui, vamos selecionar essa pequena animação. Observe aqui, como aqui, selecione uma pequena animação. E em vez de uma nota fácil, defina suave. Vamos ver como fica. Então, faça logout e clique no login. Então, parece com isso. Então, parece bom. Vou clicar nele. Então vai ficar assim. Portanto, esta é a nossa página inicial e também chamamos isso de funcionalidades. Assinatura. E nós temos essa animação. Ou vamos selecionar o Quick do que parece. Bloqueie o econ it. E então temos isso mostrado. Mas isso não é o que eu esperava. Então, vou selecionar o deslizamento. Vou bloqueá-lo e clicar no login. Então, parece bom. E tudo está totalmente funcional. Espero que você tenha aprendido muito com este curso. E este também vai funcionar com isso, essas coisas, essas também estão funcionando na aprovação. Todos não têm uma conta. Já tenho uma conta. Está funcionando perfeitamente. Acho que há uma pequena correção aqui, então acho que não preciso corrigir a gramática aqui. Portanto, não tenha uma conta ainda, faça login aqui. Tudo bem, legal. Então está tudo bem. Nosso aplicativo está funcionando totalmente funcional. Podemos simplesmente chamá-lo, temos esse sistema de mensagens, temos essas funcionalidades de login e login e aprovação , tudo está funcionando perfeitamente. Espero que você tenha gostado. 9. Compartilhe e exporte nosso design: Bem-vindo de volta mais uma vez. Nesta parte, vamos exportar nossos designs. Até agora, projetamos nosso aplicativo, fizemos prototipagem e tudo está funcionando funcional, totalmente funcional, agora é hora de aprender como podemos compartilhar nosso projeto com uma equipe e como podemos exportar nosso projeto? É muito importante. Então, primeiro, deixe-me falar sobre você. Como você pode compartilhar esse arquivo com os membros da sua equipe? Então agora você pode ver que no lado direito haverá um botão chamado botão Compartilhar. Aqui, você pode adicionar o endereço de e-mail. E aqui você também pode selecionar o candidato a função ou visualizar. Se você selecionar, pode editar, então todo o endereço de e-mail que você colocará aqui, eles terão uma opção para comer e até mesmo basta clicar nele para visualizar. Então, eles só terão a opção de ver aqui. E aqui você também pode adicionar condição somente pessoas convidadas para este arquivo de link ou qualquer pessoa com o link. Então, se você compartilhar, se você compartilhar o link, qualquer pessoa poderá acessar seu arquivo. Mas se você selecionar apenas as pessoas convidadas para este arquivo, quero dizer, o aluno, você entrará usando apenas e-mail. Eles terão a opção de acessar seu design. Então, por enquanto, basta clicar em qualquer pessoa com o link aqui. Você só precisa colocá-lo aqui e então você pode fazer isso aqui. Você pode ver esse link de cópia. Então, vou clicar no link Copiar. E agora vou abrir um novo navegador aqui. O navegador privado em que não estou conectado ao meu Figma. Agora, aqui, eu deveria ser capaz ver todo o design, certo? E eu não poderei editá-lo. Você pode ver que ele está me pedindo para fazer login, mas ainda assim posso acessar todo o design aqui. Portanto, esse é um quadro descendente indesejado. Portanto, temos esse quadro de inscrição, quadro de login e esse mainframe aqui. Então, eu tenho essa opção, mas não poderei fazer nenhuma alteração aqui. Isso é muito importante. Portanto, não poderei fazer nenhuma alteração aqui porque não tenho nenhum excesso aqui. E aqui, eu posso ver essa prototipagem de login, aprovação, e esta é a nossa página inicial. Deixe-me mostrar em tela cheia. E eu clico nele. Logout, Logout, inscrição, login. Tudo está funcionando totalmente funcional. E não tenho uma conta. Clique no botão Inscrever-se. Faça login. Já tenho uma conta. Tudo está funcionando perfeitamente, está funcionando. Então, depois de trabalhar para concluir seu projeto, você terá que compartilhar seu arquivo com os membros da equipe. Talvez você esteja trabalhando em uma equipe de desenvolvimento, então o membro da sua equipe seguirá seus projetos até este link, ok, então é assim que você pode compartilhar seu link, seu link de projeto, com sua equipe membros ou qualquer pessoa se você quiser dar acesso ao e-mail, basta colocar o e-mail e clicar no botão. Essa é a maneira de compartilhar sua participação em seu projeto. E há outra coisa. Vamos selecionar este aqui se eu quiser. Ok, então aqui você pode ver outro chamado inspecionar. No Inspecionar, normalmente você vê todo o design, todo o layout, todas as pernas, a distância, o couro e código branco e de cores que você usou. Esses são tipos de propriedade CSS. membro da sua equipe também virá buscar ajuda com este. Então eles só precisam inspecionar um, por exemplo, se eu selecionar este, e aqui eu posso ver que o branco desse retângulo em particular tem 493 pixels de altura, código de borda de raio superior esquerdo. E essas são todas as propriedades CSS. Assim, os membros da sua equipe podem simplesmente copiar esse código e usá-lo em seu aplicativo da web. Então é assim que você pode inspecionar este. Tudo bem? Então esse é o benefício deste. Aqui você pode ver no código CSS desse item. Agora, vamos exportar nosso design. Então esse é o nosso quadro. Agora clique no design e na parte inferior você poderá ver a opção Exportar. Clique nele. E aqui você pode ver o formato que deseja. Você precisa do formato PNG, formato JPEG ou formato ocupado ou formato PDF. Vamos selecionar o formato JPEG e clicar nele. Aqui. Você pode simplesmente colocar quantos quiser. Então, eu só quero um e clique nesta página inicial de exportação. E foi baixado. Deixe-me clicar nele. E aqui está. Este é o nosso design. Então, agora podemos exportar nosso design. Agora eu quero exportar, eu quero, eu também queria exportar essa base de inscrição. Vou selecionar a aprovação. Clique nesta exportação, clique em JPEG. E aqui vamos nós. Temos esses pares de inscrição. É assim que podemos exportar. Agora, selecione esses pares de login e clique nesta exportação. Clique neste JPG e exporte um login. Se eu clicar no login, aqui vamos nós. Temos esse sinal em pares. Então, você aprendeu a exportar inscrição, login e base inicial. Dessa forma, você pode simplesmente exportar cada quadro. Estes também são quadros independentes. Então você também pode, se quiser, você também pode exportar esses pequenos, deixe-me exportar um para você. Clique nele e ele concluiu o download. Este é o nosso quadro. Tudo bem, então essas são as poucas coisas que eu queria te mostrar. Então eu espero que você tenha gostado.