Figma UI/UX - Crie um aplicativo Web completo UI/UX. Aprenda a melhor técnica da Figma (Base de projetos)

1. Apresentação: Bem-vindo a este curso figma. Meu nome é sim, tan h ou três. E serei seu instrutor neste curso. Neste Figma, seu curso AUX, você aprenderá a projetar um aplicativo da web, você um UX. Usando Figma. Você criará este projeto web completo. Você aprenderá diferentes tipos de ferramentas e as melhores práticas do CDMA. Você aprenderá como criar um grupo, como criar cores de componentes, diferentes tipos de blogs e que acabou de ver plug-in e muitas outras coisas. Este é o projeto completo que você vai projetar neste curso. Deixe-me mostrar todas as funcionalidades, todo o design que adicionei nessas API da web onde você move. Então, no topo, temos nossa barra de navegação, então temos esta seção principal do aquecedor aqui e, em seguida, nossas opções de cartão de propriedade aqui. Você pode ver que cada cartão existe desde o mesmo tamanho. E parece muito bom. Em seguida, temos essa paginação com um ícone diferente e, em seguida, essa marca selecionada opções. Depois disso, temos uma seção Sobre com tipos de recursos cooperativos que você aprenderia neste curso. E então temos esta seção de design de feedback onde adicionamos ao carrinho, então este indicador e este botão Avançar e o botão anterior. Depois disso, temos nosso sistema de substituição e, na parte inferior, temos nossa seção de rodapé. Então, enquanto você vai projetar este aplicativo, você aprenderá a adicionar diferentes tipos de plug-in, como usar o ícone desses plugins e usá-lo em seu projeto. E depois disso, você aprenderá a adicionar um novo aplicativo. Em uma barra F, você pode ver nosso botão de login e inscrição. Então, se eu clicar no cadastro, agora estou no rosto de inscrição. E você também percebe que há uma pequena animação no momento da prototipagem. Então, você aprenderá como adicionar protótipo em seu aplicativo web com animação, diferentes tipos de recursos de protótipo e muitas outras coisas. Então, agora, se eu clicar neste texto, já tiver uma conta, você só vai me enviar para a página de login. E você pode ver uma pequena animação aqui. E se eu clicar na página de login, passarei para a página inicial. E agora posso acessar esta página inicial. Então, esse projeto vai me ajudar muito a aprender a projetar um aplicativo da web usando o Figma. Depois de projetar e criar protótipos de todo o aplicativo, você também aprenderá a exportar seu design, como exportar seu design e, em seguida, como compartilhar seu arquivo com outras pessoas nos membros da equipe para que de todo o mundo podem acessar seu design, podem trabalhar em equipe. Então, essas são as poucas equipes que aprenderão com este curso. Este curso vai te ajudar muito a se tornar um bom designer porque tentei seguir as melhores práticas, a melhor técnica da Figma. Portanto, vou me esconder incentivá-lo a inscrever este curso. Vejo você na classe. 2. Navegação de design: Bem-vindo a esta palestra. Nesta parte, vamos começar a trabalhar em nosso projeto. Então, antes de tudo, você terá que fazer login na Figma. Então você pode ver que acabei fazer login usando minha conta. Se você ainda não tiver seus comentários sobre anos, basta se inscrever usando seu endereço de e-mail. E assim que você fizer login na sua conta Figma, você poderá ver esse tipo de painel se já trabalhou em algum projeto anteriormente, então você pode ver esse tipo de projeto de trabalho recente. Mas, caso contrário, você poderá ver apenas essa coisa. Então, agora aqui podemos ver muitas vezes chamado novo arquivo ressentido e, em seguida, novo Figma, Faker Gem e, em seguida, novo arquivo de entrada. Então, para nós, vamos começar clicando em novo arquivo de design porque vamos começar a trabalhar em nosso projeto desde o início. Vou clicar nele e, em seguida, ele abrirá um novo projeto. Agora, atualmente, não temos nenhuma prancha de arte aqui. Ok, então este é o painel básico ou Figma. Na barra superior, na barra de ferramentas, temos todas as ferramentas capazes de nível dentro da Figma. E então temos essa opção de quadro. Então, primeiro precisamos adicionar um quadro. Então, vou clicar no quadro e vamos trabalhar em uma web. Você pode ver que há algumas opções. O tamanho da tela do telefone. Se você estiver trabalhando para telefone, telefone FU, uma interface do usuário do aplicativo móvel, poderá selecionar qualquer um deles. Mas para nós, vamos projetar nossos aplicativos da web. Vou clicar na parada do deck. E na parada do convés, você poderá ver esse tipo de visão. Então, vou selecionar o índice 121440 por dez a quatro. Então ele vai nos dar uma prancha de arte. Certo? Portanto, esta é a nossa principal saída. Agora temos nosso quadro de arte e aqui teremos que projetar nosso aplicativo. Então, vamos alcançar esse tipo de design neste curso. Então, se vamos ter nossa barra de navegação, teremos e-mails, essas coisas. E então teremos nossa lista de propriedades, depois a paginação e nossa opção de assinatura. Então, mais ou menos, tentaremos alcançar esse tipo de design. E também teremos que projetar uma aprovação e atribuir em ritmo para nossa aplicação. Então, vamos começar a trabalhar nisso. Tão rápido, temos nossa próxima parte. Então, como podemos adicionar nosso ajudante? Então, adicione nossa barra de navegação que vamos criar, vamos ajudar essa ferramenta retangular. E vou desenhar um retângulo na parte superior. E aqui vamos nós. Vou desenhar um retângulo aqui. E se eu olhar para essa imagem aqui, podemos ver que é uma cor branca, fundos, então vou mudar a cor. Então, depois de selecionar sua barra de navegação, você terá a opção de adicionar essa cor de fundo, clicar no preenchimento e, em seguida, você terá a opção de selecionar a cor branca. E agora não entendemos nada porque nosso histórico também é amplo. Então, o que posso fazer aqui? Quero adicionar, quero adicionar nosso efeito aqui. Então, se você clicar no efeito, ele vai nos dar nossa sombra. Então, há algumas sombras aqui, se você quiser, você pode simplesmente brincar com isso. Isso lhe dará sombra interior. Então ele vai nos dar sombra de dentro. Mas precisamos ter uma sombra aqui. E agora deixe-me executar o aplicativo para que possamos ver nossas mudanças de vida. Se estivermos fazendo alguma alteração. Se eu clicar no botão Executar, ele abrirá para uma nova guia aqui. E aqui vamos nós. Podemos ver que esta é a nossa barra de navegação. Agora precisamos adicionar um texto aqui e, em seguida, nosso item de menu. Então, podemos simplesmente ajudar esta ferramenta de texto, clicar no texto. E aqui, vou escrever um texto chamado Find home. Legal. Agora, precisamos alterar o tamanho da fonte aqui. Então este é o formulário diz por padrão 12º, mas vou selecionar 44, este. E se você quiser cortar qualquer coisa, você precisa clicar neste filme para poder selecionar uma opção e, em seguida, arrastar e soltar. E aqui vai você. Temos esta casa agora aqui, mas é muito maior. Então, vou selecionar, Adicionar a ele. E então, a partir daqui, eu adoraria adicionar diferentes tipos de design aqui, já que tipo de cor normal, vou selecionar com médio. E então aqui podemos simplesmente selecionar diferentes tipos de textos. Quero dizer, nome da família da fonte, que é por padrão aqui. Isso não vai ficar bem. Vou selecionar um diferente. Ok, então ficou assim. Então, parece assim. E talvez este, não este. E isso não faz nenhuma chance. E podemos dar este ou podemos tentar adicionar outro. Certo, então parece bom. Acho que podemos tentar mais algumas opções e isso não faz nenhuma alteração. Certo, então parece bom. Eu gosto deste e depois vou mudar a cor deste. Assim, podemos adicionar essa cor padrão para esta. Ok, então agora temos essa opção e, em seguida, precisamos adicionar nosso Agora para itens, então temos quatro itens aqui, propriedade de casa, novas listas, login e inscreva-se. Então, vou clicar na ferramenta Texto. E a partir daqui vou começar a adicionar este. Assim, podemos fazer mais uma coisa aqui, que é que sempre teremos que fazer, então eu vou clicar nesta. E aqui podemos adicionar nosso sistema de grade. Como podemos adicionar nosso sistema de grade? Então, vou selecionar o quadro. E assim que eu selecionar o quadro, há a opção chamada Layout Grids. Se você clicar neste, ele adicionará um sistema de grade para nós. Então agora parece assim, mas definitivamente podemos, podemos mudá-lo. Então, agora podemos, em vez do tamanho dez, podemos adicionar 60. Então ele vai ficar assim. E também podemos selecionar, se precisarmos apenas de coluna, ela só adicionará coluna. Mas se você precisar de coluna e linha, e então também podemos, talvez precisemos de três colunas. Você também pode contar a coluna cinco colunas. Então, em vez de 20, posso selecionar cinco, ou talvez eu possa selecionar dois. Então este é o espaço nisso, ótimo, mas precisamos de coluna e linha. Precisamos de grade dessa maneira. Podemos manter este e parece bom. Agora podemos adicionar nosso texto aqui. Então, primeiro, vou começar daqui. Então eu posso dizer em casa. E agora aqui teremos que alterar tamanho da fonte porque não precisamos ter 32. Então, podemos adicionar aqui. Acho que podemos adicionar 16 aqui, e também podemos testá-lo em nossa visualização ao vivo em tempo real. Então, parece bom. Assim, podemos continuar com 16. Agora, eu adicionei este. Então agora não preciso clicar aqui de novo e de novo. O que posso fazer? Posso pressionar, posso selecionar este texto e, em seguida, posso pressionar Control D para fazer uma duplicata. E você pode ver que temos dois itens aqui. Agora posso arrastar este aqui, e então posso simplesmente alterar o nome do texto. Posso simplesmente dizer que posso dizer propriedade. E o que temos aqui? Temos nosso nome, propriedade, nova lista. E depois vou duplicá-lo. E depois vou somar a propriedade. Vou adicionar nova lista, nova lista. E então temos nossa aprovação, temos nossa opção de login, mas para o login, temos esse histórico. Então vou ajudar esta ferramenta retangular de Londres. Vou desenhar esse retângulo aqui. E devo adicionar um raio de borda para este retângulo. Para adicionar um raio de borda, terei que adicioná-lo aqui. Vou selecionar 20 e, em seguida, alterar a cor de fundo para essa cor. E preciso ajustá-lo. Você pode ver 18 de cada item que estávamos mantendo uma distância. Então, vou manter este aqui. E então deixe-me tentar como parece aqui, então parece bom. E então o que posso fazer? Posso adicionar texto aqui. Posso simplesmente dizer Sign In. E então, a partir daqui, posso simplesmente adicionar este aqui e o centro. E temos outro. Vou fazer uma duplicata. E este será nosso, este será nosso cadastro. Então este será o nosso cadastro. Inscreva-se. Tudo bem, então, ok, legal. Parece realmente ótimo. Agora posso fazer uma coisa. Então este, esse texto e esse plano de fundo, eu deveria Meca crescer porque quando faremos protótipo, não precisamos torná-lo ranhura. Então, quando faremos protótipos para que, quando usuário clicar em qualquer uma dessa área, possamos mostrar o protótipo. Então, vou fazer com que ele se agrupe. Então, para torná-lo um grupo, preciso pressionar o controle Z no meu teclado ou você pode clicar com o botão direito do mouse. E então você também pode dizer onde você também pode clicar nele. Você pode dizer grupo. Agora, o grupo R está aqui. E podemos simplesmente renomear o nome do grupo aqui ou Control R. Posso dizer Login, botão. Legal. Parece bom agora. E OK, então está tudo bem. Uma coisa que eu quero mostrar agora, então agora vamos fazer um grupo toda essa parte. Portanto, este botão, esta nova lista propriedades seno de casa e tempo finito, vou pressionar comando para encontrar apenas este item em casa. E eu vou pressionar Command Z. E agora posso simplesmente arrastar essa coisa toda um pouco se eu quiser. Então, não terei que fazer isso. E se eu, mesmo que eu queira, posso aumentar o branco deste e assim tudo automaticamente vai adicionar baú. Mesmo se eu quiser, digamos que eu queira mudar o, digamos que eu queira alterar o tamanho da fonte. Digamos que eu queira alterar o tamanho da fonte desse item. Digamos que eu queira alterar o tamanho da fonte desta aqui. Então eu também posso alterá-lo daqui. E dessa forma, podemos simplesmente mudá-lo. Em seguida, selecione isso e, em seguida, posso simplesmente mudar de 16 para 20, depois vai ficar maior. Mas preciso ter 16 aqui. Então, parece realmente ótimo agora. Perfeito. Então, finalmente, adicionamos nossa barra de navegação. Acho que precisamos adicionar apenas isso um pouco porque os textos se tornaram um pouco menores porque aumentamos o tamanho. Então agora parece muito bom. Então, adicionamos nosso sinal com sucesso. Adicionamos nossa barra de navegação. E na próxima parte, vamos aprender a adicionar essa tela inicial. Então vou parar este vídeo aqui e vê-lo na próxima palestra. Adeus. 3. Imagem de capa caseira e design de cartões: Bem-vindo de volta mais uma vez. Nesta parte, tentaremos adicionar esta página inicial e design. Para fazer isso, em primeiro lugar, vou desenhar nosso retângulo aqui. Então selecione esse retângulo e daqui, ou talvez daqui. Então, do meio, vou desenhar um retângulo aqui, essa parte para isso. Então, a altura será um pouco maior, eu acho. Ok, deixe-me verificar como parece aqui. Então, parece esse tamanho de uma tela. E acho que não há problema em ter o tamanho da tela. E talvez eu possa arrastá-lo um pouco para baixo. Ok, então agora aqui podemos simplesmente arrastar nossa imagem do arquivo. Então eu já baixei este EMS. Então deixe-me tentar que bagunça eu usei aqui. Então eu usei neste aqui. Então eu usei nesta imagem. Acho que este, não este. Eu usei neste. Então deixe-me arrastá-lo aqui e depois soltá-lo aqui. E então, se você clicar no lado direito, ele adicionará este. Então, se você for fazer isso dessa maneira, então, no início, ela mostrará automaticamente o tamanho total da imagem. Portanto, essa não é a melhor abordagem. Então, vou remover este. Mas figma tem essa opção, então envie um e-mail para a opção. Certo, então o que podemos fazer? Vou selecionar este aqui e depois vou para o meu diretório aqui. E então, se eu clicar nele e, em seguida, digamos que eu queira adicionar essa imagem aqui e depois abri-la. Não vai aparecer aqui. Agora, se eu fizer o botão direito do mouse, se eu fizer isso agora você pode ver se eu passar o mouse, posso ver esta imagem agora se eu clicar, clique com o botão direito do mouse. Então, agora, se eu clicar no mouse no canto mais à esquerda, ele adicionará esta imagem aqui. Legal. Então agora podemos ver nesta imagem no, em cima dos e-mails, temos outro retângulo. Então, vou desenhar esse retângulo aqui, vai ser uma cor branca. Retângulos tão rápidos que vou adicionar um pouco de raio de borda aqui, talvez cinco pixels. E então eu vou adicionar este aqui. E eu posso ver essa coisa. Deixe-me ver o que mais temos aqui. Temos um botão e temos um texto aqui. Então, vou adicionar texto aqui. Vou clicar neste, e depois vou escrever o texto aqui. Posso dizer que encontre a casa dos seus sonhos. Legal. Então eu posso, oh, ok, para que possamos aumentar o tamanho da fonte rapidamente. Então talvez precisemos de 40. E vou adicioná-lo dessa maneira. E agora parece bom, mas ainda podemos ajustá-lo dessa maneira. E então podemos minimizar, podemos diminuir o tamanho da fonte para 36, ou parece bom, mas podemos mudar a cor e podemos adicionar um pouco de design do texto para que possamos escolher diferente tipos de textos. Família Font-. Parece bom. Vou dar o acaso ou a cor deste. Talvez essa cor, eu só estou usando alguma cor aleatória. Mas se você tiver sua cor favorita ou se tiver alguma cor selecionada, definitivamente você pode usar esta aqui. E agora depois disso, vou desenhar nosso retângulo. Então, como você pode fazer um retângulo? Clique na ferramenta retângulo. E então vou desenhar esse retângulo dessa maneira. E terei que adicionar raio de fronteira aqui. Então clique neste raio de borda. E então eu vou mudar a cor de fundo deste. Este não. Talvez uma cor diferente ou algo próximo de ler. Talvez essa cor vermelha. E aqui vou escrever um texto. Posso dizer que marque sua consulta. Então, não consigo me ajustar aqui porque o tamanho da fonte é demais. Então, vou selecionar 16, e então tudo deve funcionar. E deixe-me tentar. Por que temos ou podemos simplesmente dizer agendamento em vez de marcar sua consulta porque está ocupando um pouco mais de espaço. E agora posso dizer isso. Então, parece tão bom. Não há problema com isso. Gostei e está tudo bem até agora aqui. E eu queria te mostrar mais uma coisa. Então, se você quiser adicionar uma borda aqui, como você pode fazer isso? Então, definitivamente, você pode fazer isso. Há uma opção chamada traçado, e se você clicar no Stroke, ela adicionará a borda. E você também pode alterar a cor da borda para uma cor diferente. E você também pode alterar o tamanho da borda. Talvez você queira ter um tamanho maior de Boehner. Então você pode escolher esse modelo. E então, se você vier aqui, podemos ver esta fronteira aqui. E até você também pode selecionar o estilo de borda aqui. Então você pode dizer centro do lado de fora. E então, se você quiser esse ou um tipo diferente de borda, você também pode ver em vez de sólido, talvez você precise no painel e, em seguida, você também pode ver esses indels geralmente usam APR aqui. Portanto, há algumas opções que você pode aplicar com base em sua exigência. Mas, por enquanto, não preciso ter essa fronteira. Vou desativá-lo. Se você clicar na opção i vai desabilitar e, em seguida, ela também será ativada dessa maneira. Então, se você clicar aqui, ele vai fazer a parede. Se você clicar aqui, ele vai para o intervalo. Agora, se eu vier aqui, tudo está ótimo. Mas eu adoraria adicionar um pouco de gradiente linear aqui. Então, se eu clicar neste linear, então, em vez disso, tentarei adicioná-lo dessa maneira. Ou assim, parece realmente ótimo. Agora vou torná-lo um pouco mais perto. Aqui vamos nós. Ainda podemos ver um pouco de sombra na parte inferior aqui. Mas existem algumas outras opções. Talvez você possa experimentar este chef angular. Então ele vai ficar assim. E talvez você tenha um chef de diamantes e então ele vai ficar assim. E talvez você tenha forma radial vai ficar assim. Então você pode brincar com este. Então, vou apenas selecionar o linear. E então eu posso simplesmente manter este aqui. Tudo bem, vou parar este vídeo aqui, e vamos projetar essa parte na próxima palestra. Vejo você na próxima palestra. Tchau. 4. Design de cartões de propriedade: Bem-vindo de volta mais uma vez. Nesta parte, vamos começar a trabalhar nisso, neste sistema de cartões que temos para nossa propriedade. Tudo bem, para fazer isso, como posso fazer isso? Então, o que podemos fazer? Então , antes de tudo, precisamos aumentar nosso tamanho do quadro. Então, vou selecionar o quadro. E então, no fundo, vou arrastar um pouco, talvez isso. Certo? E depois disso, teremos que, agora temos esse olhar. Ok, temos essa barra de navegação, temos esse loop. Agora, aqui vamos adicionar este cartão. Então, para adicionar um cartão, em primeiro lugar, vou adicionar esse retângulo. Digamos que vamos começar a partir de 123 e esta árvore, ok, vamos começar com isso ou talvez daqui. Vamos começar a partir daqui. Portanto, essa é a beleza de usar esse sistema de grade para que possamos entender facilmente cada item. Então vamos começar a partir daí, e talvez a partir daqui, eu vou adicionar isso rapidamente daqui e depois, faremos isso. Tudo bem, então uma coisa que é perceptível é que temos design semelhante para cada item que normalmente temos em nosso aplicativo web. Então, para isso primeiro, vamos fazer essa parte inteira apenas uma vez, e então vamos fazê-los agrupar e então podemos simplesmente duplicá-la. Dessa forma. Não teremos que fazer a mesma coisa de novo e de novo. E essa é a melhor abordagem. Então, principalmente, você terá que trabalhar dessa maneira. Por exemplo, se você estiver mostrando um item de dados 100 em um carrinho e depois você, e definitivamente não faremos isso 100 cartões separadamente. Quando parecer exatamente o mesmo, você ganhará um, então você só precisa fazer uma duplicata. Ok, então agora primeiro temos nossos e-mails no topo. Então, para adicionar uma bagunça. Então eu vou para outro cartão para o EMS, outro retângulo aqui em cima deste. Então, podemos simplesmente adicionar este cartão talvez a partir desta linha. E então este cartão conterá nosso descartado, principalmente manterá nossa imagem. Então agora vou adicionar a imagem rapidamente. Então, a partir daqui, vou clicar nesse lugar. E depois vou selecionar essa imagem. E ele vai ver aqui, leva algum tempo. E assim que eu tiver este, posso passar o mouse sobre e posso ver essa imagem. Agora clique no mouse e você tem essa imagem. Vou adicionar um pouco de raio de borda de cinco pixels também para o carrinho principal e que temos, vou adicionar um raio de borda, cinco pixels. Ok, então agora temos este EMS e temos este carrinho. Legal, parece muito bom. Agora rápido. Precisamos adicionar uma sombra aqui. Então, para adicionar efeito aqui no carrinho principal, não no retângulo. O retângulo seis, que é a nossa placa principal, não o cartão EMS. Certo. Nossos retângulos cardíacos em seis horas. Este é um retângulo. Então, uma coisa que você também pode fazer é simplesmente mudar o nome da zona para que você possa entender o que está fazendo. Podemos simplesmente dizer e-mails retângulo, retângulo, seja lá o que for. Então agora, desta forma, seremos capazes de realmente entender e podemos, e este, podemos simplesmente dizer carrinho principal. Podemos dizer cartão principal, ok, este, e dessa forma você será capaz de se identificar com muita facilidade. Agora, vou adicionar um efeito aqui, vai nos dar uma sombra aqui. E novamente, você pode jogar com a sombra, você pode adicionar diferentes tipos de sombra. Você pode fazer tantas coisas com esta de nós dissemos para o lado, talvez você queira desfocar, talvez você queira um bloco oito. Então ele vai ficar assim. Vai te dar uma opção um pouco mais borrada na parte inferior. Certo, legal. Agora precisamos mudar a cor de fundo deste. Então, vou adicionar essa cor de paragon. E parece assim. Agora temos nosso, nosso preço, nossa localização e nosso botão aqui. Então, vou adicionar rapidamente esse preço aqui. Então, vou clicar nesta tecnologia T. E a partir daqui vou começar esse preço. Talvez possamos dizer isso e, em seguida, apenas algum texto aleatório. E vou mudar a cor deste. Talvez essa luz clara ou verde , essa cor clara. Não parece bom. Podemos escolher um diferente. Sim, parece bom. E agora talvez possamos arrastá-lo um pouco mais perto dessa imagem. E então eu posso adicionar, ok, então agora para ajustar este, o que posso fazer aqui? Principalmente você pode ver que o tamanho da nossa grade é muito maior. Então, essa é a razão pela qual não somos capazes entendê-lo. Então, o que posso fazer? Posso simplesmente adicionar apenas a grade. Então clique no sistema de grade. Então, em vez do tamanho 16, posso adicionar 40. Ok, agora, agora recebo um tamanho pequeno de grade. Então eu posso entender facilmente desde o sussurro, eu não comecei. Neste texto. Então, eu vou, em vez disso, também podemos renomear o texto aqui. Você pode simplesmente dizer preço ouro. Agora eu posso fazer uma duplicata, então pressione Comando D, então eu posso começar da mesma linha. Agora, espero que você entenda por que eu adicionei esse pequeno tamanho de grade. Podemos ver que estamos começando desta linha, esta, você pode ver essa linha. E posso ocupar um pouco mais de espaço. E então eu posso simplesmente mudar o nome deste. Posso simplesmente dizer que a localização estará aqui. Então, localização, você pode dizer Londres. Podemos dizer que a localização é Londres. E definitivamente, se você quiser, você pode simplesmente mudar a cor deste. Então eu adoraria ter uma cor diferente para esta . Talvez essa cor. E talvez eu adorasse adicionar uma família de fontes diferente para o texto. Legal. Talvez este. Sim, podemos fazer isso. E agora podemos adicionar um retângulo para o botão de reserva. Então, vou iniciar este botão de reserva daqui para aqui. Mais uma vez, ajuste-o do meio e acho que não a partir daí. Podemos ajustá-lo. Podemos adicioná-lo desta parte. Podemos adicioná-lo a partir daqui. Sim, acho que podemos fazer isso dessa maneira. Podemos me deixar ver como parece. Parece bom, mas podemos mudar a cor de fundo primeiro. E para adicionar este, vou escolher essa cor de fundo e adicionar o raio de borda 20. E agora podemos adicionar um texto aqui. Podemos dizer que reserve agora. E este é o botão livro agora que acabamos de projetar. Não está no centro. Vermelho frio, parece muito bom agora. E agora podemos duplicar este cartão e fazê-lo. Então posso dizer retângulo, este retângulo seis é o nosso livro. Agora. Botão. Tão rápido, o que podemos fazer? Podemos fazê-los em grupos. Então este livro agora e este botão livro agora estão juntos. Então, vamos fazer deles um grupo pressionar Command G, e então podemos dizer, o que podemos dizer? Podemos renomeá-los e podemos dizer botão Livro chamado, temos Desagrupar este. Então agora temos esse botão Livro de grupo. E então estes são cartões principais, esse preço e esse preço. Assim, podemos alterá-lo para este texto. Podemos simplesmente dizer localização porque isso está tudo bem, então acho que fizemos isso de uma maneira diferente. Certo. Então, deixe-me desfazer isso. Ok, então este deve ser o local. Então, vou adicionar a localização aqui. Então o retângulo cinco, retângulo cinco não é este. Então, este agendamento agendado. Então, identificamos esse agendamento, este botão de livro aqui, e depois esta imagem, depois a localização do que o preço, depois o carrinho principal. Mas há outro texto que é chamado de agendamento. Portanto, esse agendamento é esse botão aqui, este texto. Certo. Então, essas são as principais coisas que estão contendo este cartão. Então, vou fazer deles um grupo juntos. Então eu vou pressionar Command Z. E podemos dizer, podemos renomeá-lo, podemos dizer uma propriedade em massa, objetivos principais do cartão. Então agora essa coisa mantém todo o nosso sistema, podemos jockey juntos. Podemos colocá-lo em qualquer lugar, onde quisermos. Então, temos essas coisas. Vou pressionar o Comando D, então vou pressionar esta coisa aqui. E talvez desta forma. E então talvez possamos pressionar mais uma vez e, depois que você for duplicado, ele irá ajustá-lo automaticamente para você por algumas vezes. Então agora eu posso ajustá-lo dessa maneira. Talvez vamos começar com esses dois e depois podemos fazê-lo dessa maneira. Então agora aqui, quando arrastamos e soltamos, podemos ver que ainda temos esse 20 por 20. E então temos este cartão de 2020. De cada item, estamos mantendo 20 por 20 distância. Ok, agora deixe-me ver como parece legal. Parece muito bom. Então, parece muito bom de ambos os lados. Temos o mesmo design. Então, outra coisa que podemos fazer agora, podemos fazer isso para o item novamente em um grupo porque na parte inferior precisaremos de mais um item para este, certo? Então, como podemos fazer isso? Podemos fazê-los grupo, grupo, grupo. Então vou pressionar Command G novamente. E aqui eu posso simplesmente renomear este e posso dizer, então se eu vou renomear este e eu vou dizer isso. Item de guarda primeira linha. Legal. Então, agora, como tudo isso está em um grupo, o que posso fazer? Eu posso simplesmente movê-los e então eu posso ajustá-lo dessa maneira. Posso ajustá-los dessa maneira. Agora eu acho que de ambos os lados estamos tendo, deste lado estamos tendo o mesmo espaço, e deste lado estamos tendo o mesmo espaço. Ok, legal, parece muito bom. Então, é assim que você pode organizar seu arquivo. Você pode organizar seu documento, qualquer tipo de design que você esteja fazendo. Você pode simplesmente fazer isso. Você pode seguir essa técnica e, em seguida, você pode definitivamente fazê-lo. Agora, o que posso fazer? Eu posso, então, antes de duplicá-los, acho que preciso aumentar o tamanho do meu quadro principal, a altura do mainframe. Então, vou aumentá-lo dessa maneira. Vamos adicioná-lo dessa maneira. E agora o que posso fazer? Eu posso selecionar este. Vou fazer um Comando D. duplicado Então vou pressionar, vou colocá-lo aqui apenas na parte inferior deste item, talvez uma linha. E exatamente o mesmo que é nessa posição. Então vou pressionar Command D novamente, e ele adicionará mais um para. Agora. Deixe-me ver como ele parece aqui. Parece muito bom. Agora, temos esses três design bonito que eu realmente gostei. Legal. Então, criamos algo realmente único nesta parte. E vou parar esse vídeo aqui. E continuaremos a partir da próxima palestra. Vamos tentar corrigir mais algumas coisas e tentar adicionar mais alguns recursos neste projeto na próxima palestra. Vejo você na próxima palestra. Tchau. 5. Design de paginação: Bem-vindo de volta mais uma vez. Nesta parte, tentaremos adicionar um pouco de paginação em nosso candidato, em nosso aplicativo da web. Então você pode ver que este está realmente ótimo, muito legal. Não há problema com isso. Mas aqui primeiro vou adicionar nossa paginação. Então, para adicionar uma paginação. Então, vamos tentar adicionar esse tipo de paginação aqui, semelhante a esta. Este não. Mas só por ideia básica, vamos adicionar a esse tipo de paginação aqui. Para adicionar uma paginação primeiro, vou adicionar um retângulo aqui. E vou começar a projetar esse retângulo. Este retângulo exatamente deste lado, para que ele corresponda exatamente ao mesmo. E a partir daqui ele combina exatamente o mesmo. Ok, então se corresponder à mesma linha, então você poderá ver esse tipo de linha. Isso significa que estamos no mesmo ou estamos na mesma linha. Certo? Temos exatamente a mesma coisa aqui. E depois esfriar. Então agora temos esse design e podemos tentar adicionar uma cor diferente, eu acho, para nossa paginação. Ou talvez possamos tentar nessa cor e legal. Portanto, podemos definitivamente adicionar nosso fundo, nosso raio de borda. Então, digamos adicionar raio de borda cinco. E agora aqui vamos, vamos adicionar nossa paginação. Então, como podemos adicionar nossa paginação? Para adicionar nosso número de paginação? Vamos desenhar um círculo. Então, vou clicar nesta ferramenta de elipse aqui. Vamos começar a paginação daqui. E para torná-lo exatamente circular, precisamos ter certeza de que a largura e a altura sejam iguais. Ok, então temos Y 28, então temos alta 28. E então, e então ele parecerá exatamente um círculo. Vai parecer exatamente círculo. E também podemos torná-lo um pouco maior e depois torná-lo 38 por 38. E este e esse tamanho, temos este e podemos adicionar uma cor de fundo para este. Então esta é a cor de fundo da nossa vegetação. E outra coisa que podemos fazer é com essa paginação, podemos adicionar uma borda. Deixe-me ver como parece com isso. Ok, então precisamos adicionar um tamanho um pouco maior de borda. Então este, e isso não vai parecer bom porque já temos uma cor de fundo colorida, então precisamos torná-la branca e são cores diferentes para que possamos ver esta. Então, vou aumentar o tamanho da borda para cinco. Agora podemos entender isso. Mas não precisamos ter HIV, acho que para o bem, ou talvez três, o bom. E vamos tentar adicionar uma cor de fundo diferente para esse raio de borda e como ele se parece. Ok, não parece bom, então acho que não precisamos adicionar uma cor de borda aqui porque já temos essa cor de fundo. O motivo pelo qual essa cor de fundo e ajuste aqui. Então, agora precisamos adicionar, precisamos projetar mais algumas coisas aqui. Então, o primeiro será o nosso número. Certo, então vamos começar adicionando um texto aqui. Então essa elipse será nossa paginação, nosso número de paginação. E depois vou adicionar um texto nesta paginação. E precisamos ter, ok, então primeiro deixe-me ajustar este texto aqui. Ok, deixe-me adicionar o desenho pelo mais rápido aqui. Se eu escrever o aqui, então eu posso colocá-lo no meio. E para essa paginação, não precisamos ter esse tamanho de fonte porque ele vai parecer diferente. E então, em vez disso, vou escolher o normal. Talvez possamos escolher este também. Então, onde está o normal? E isso, por padrão, terá. Então, se em algum lugar em nosso recursivo regular, eu não estou recebendo o normal aqui, está em algum lugar, deve ser regular. O texto é escrito desta forma. Ou, é difícil que não tenha ideia. Então, podemos simplesmente adicionar talvez isso, então não vai parecer. Podemos simplesmente começar a definir aqui. Portanto, não está vindo dessa maneira. Nós podemos. E quanto a este aqui? Acho que podemos começar aqui. Nada vem com este. Então, nada é. Certo. Então eu acho que temos esse normal aqui. Este é o normal ou você pode escolhê-lo sozinho ou qualquer outra opção. Acho que não conseguimos, mas temos algo diferente deste aqui. Legal. Temos essa opção aqui no momento. Então, vou para este. Esse estilo de texto não é apenas ágil aqui porque anteriormente usamos este. Há uma razão pela qual temos essa opção aqui. Assim, podemos escolher um novo texto aqui. E daqui para cá. E talvez este. Ok, então é um tipo de maior. Então eu posso dar este aqui e posso colocá-lo no centro. Agora vamos ver como ele se parece. Parece assim. Mais uma vez, acho que agora está no centro. Oh, exatamente. Não está no centro, então precisamos colocá-lo no centro. Certo, então há muito centro. Agora, vou fazer dele um grupo para que possamos dizer o número base, esse número. Então, esse número e essa paginação, vamos torná-los um grupo juntos. E podemos dizer, podemos dizer obter item de paginação, podemos dizer que o item da nação pg é item, legal. E depois vou fazer uma duplicata. Vou colocá-lo aqui. Agora. Deixe-me tentar como parece. Parece bom. Então, o que posso fazer? Posso apenas pressionar duplicar e duplicar e duplicar e duplicar. Eu acho. Não há problema com isso. Então agora posso ter esse número de duplicatas. Então, antes de fazer qualquer outra coisa rápido, vou fazer deles um grupo completamente, todo o item de paginação para que, se eu tiver que adicionar novamente e semear ou se eu tiver que colocá-lo em outro lugar, então eu posso simplesmente fazer é que eu vou fazer com que ele cresça. E vou dizer isso, itens de paginação, vou dizer imaginação, Originação. Certo, legal. Agora, o que posso fazer para cada item? Posso fazer alterações? Então, por exemplo, vamos adicionar este é dois. Vou remover este e vou adicionar dois aqui. E porque o primeiro será capaz de ícone. Então, vou remover este 1 primeiro 1, e vou remover isso, remover o último daqui, porque aqui vamos adicionar um próximo ícone de botão. Então, como você pode fazer isso? Eu instalei o R, instalei um plugin chamado ícone do alimentador. Vou pegar metade desse ícone. Então, se você não sabe como instalar o ícone, então você pode simplesmente clicar em navegar plugging na comunidade. Então, aqui a partir daqui, você pode simplesmente pesquisar o ícone e , em seguida, você pode simplesmente instalar o ícone. Ele abrirá. Então você pode ver que muitos ícones estão aqui. Você só precisa clicar em Instalar, então você só aparecerá aqui. Então, quando você clicar nele sob o plugin, mostrará este. Então, vou instalar esses ícones de preenchimento. Já instalei este. Vou pegar alguns ícones daqui, vai me mostrar este. Então eu posso ver essa seta para a direita e para a esquerda ícone. Então este eu vou selecionar, e vou selecionar essa seta para a esquerda onde ela caiu. Então, está aqui agora. Então, vou arrastá-lo e depois vou colocá-lo aqui. E tudo bem, então a outra coisa é que é, ele saiu deste. Então, o que vou ter que fazer, terei que arrastá-lo e colocá-lo dentro do número de origem. Conseguimos que está dentro da paginação. Este aqui, tudo bem. Agora deixe-me ver. Certo, podemos ver este aqui. E para este também, precisamos ter o ícone certo. Ok, então está aqui agora. E onde está, este que temos neste aqui está aqui no último. Então, vou arrastar este para o último aqui. Ok, então temos este aqui e deixe-me tentar este. Então, não podemos ver este aqui. Deixe-me ver o que aconteceu exatamente aqui. Então, tudo bem, então não vem aqui. Deixe-me ser removido. Ok, então temos essa opção de ferramenta aqui. Então, vou remover toda essa parte daqui. Vou excluir este. Ok, então podemos, podemos, podemos desativá-lo aqui de rápido para que fique visível. Agora. Agora vou adicionar esse ícone aqui. E esse ícone será adicionado aqui. Certo, legal. Não poderemos vê-lo porque está fora de nossos quadros. Então, o que vou fazer, vou colocá-lo aqui. Ok, assim que colocamos aqui, não é utilizável porque o problema está aqui. Então, devemos dar isso fora deste aqui a partir daí. Então, vou colocá-lo apenas compensado deste. Ou podemos simplesmente colocá-lo no fundo, então ele ainda vai funcionar. Certo, então podemos ter esses problemas aqui. Nós quebramos tantas coisas para este aqui, mesmo esta vai bloquear daqui. Legal. Agora ele deve olhar. Então, temos este, mas esse item de seta está dentro deste. Então, o que podemos fazer aqui, podemos simplesmente arrastar este para dentro deste texto do material do deck. E sim, agora está funcionando então você não precisa colocá-lo dentro desta vegetação aqui. Então, cometemos um erro quando precisamos disso dessa maneira. Então, só precisamos colocá-lo enquanto estiver dentro do quadro deste texto. Também pode funcionar aqui. Você não come não é obrigatório colocá-lo dentro desse uso item de paginação assim. Então, definitivamente também podemos fazer isso aqui. Mas quando tentamos fazer isso, quebramos algo. Esse foi um motivo. Agora está funcionando perfeitamente. Agora. Deixe-me rapidamente arriscar o número do texto. Então eu vou pressionar este braço dois a 32 vai ser C, e então este vai ser, pois, este vai ser cinco, e este vai ser seis. E depois das seis, vou adicionar ponto duplo, ponto triplo, e depois vou adicionar sete. Este vai ser oito. Este vai ser nove. Apenas nove. E este vai ser, então este vai ser o de n. Este vai ser o 12º. Legal. Então, agora o que posso fazer? Posso simplesmente ajustar aqui e este também no centro. Legal. Então agora temos esse 1123456789101112. Temos essa boa paginação. Outra coisa que podemos fazer, teremos que fazer de forma excelente. Teremos que fazer markdown uma opção marcada. Então, vou selecionar este. Talvez você possa selecionar qualquer opção aleatória. Então, o que podemos fazer? Basicamente, podemos alterar a cor de fundo deste item. Teremos que adicionar uma cor de fundo diferente para esta. Deixe-me ver como parece. Estou feliz com essa cor. E então eu posso simplesmente escolher essa cor branca a partir daqui. E aqui vai você. Certo, mas este vermelho não vai ficar bem aqui porque temos o quê? Já temos uma cor de fundo. Ok, então estamos mudando este. Isso não é bom. Precisamos mudar essa cor vermelha para algo diferente. E eu não vou exatamente este. Podemos tentar amarrar o preto, eu acho. Sim, o preto vai ficar bem porque este está marcado. Ainda assim. Não estou feliz com este. Um pouco de sombra deste plano de fundo. Mas o problema é que já temos uma cor de fundo. Essa é a razão pela qual o marcado ficará bem diretamente. Então, temos este ou ainda podemos tentar uma cor um pouco mais clara nesta área. Talvez essa área. Ok, então vai ficar bem e eu vou mudar a cor do texto para preto. Legal. Então, agora é facilmente identificável qual deles é inteligente? Então três estão marcados aqui em baixo. Tão bom. Nós projetamos algo realmente bom nesta parte. Vou parar este vídeo aqui. Na próxima parte, tentaremos adicionar mais alguns recursos neste aplicativo. Vejo você na próxima palestra. Tchau. 6. Sobre o design de recursos de coletânea de seção: Bem-vindo de volta mais uma vez. Nesta parte, vamos tentar adicionar mais uma seção aqui, que será sobre seção no lado esquerdo, vamos colocar nosso EMS e o lado direito, vamos adicionar outro sexual. Deixe-me mostrar como podemos fazer isso. Então, para isso, em primeiro lugar, precisamos aumentar o tamanho do quadro principal, que é o nosso deck para. Então, vou selecionar esse texto desativado. E então vou aumentar o tamanho do nosso quadro principal. Então, vou arrastá-lo um pouco mais dessa maneira. Legal. Agora, se eu olhar aqui , podemos ver que temos esse espaço e nosso aplicativo já está ótimo. Temos pixel perfeito. E então tudo está realmente ótimo na posição perfeita. Tudo bem aqui. E talvez tentemos adicionar um pouco de modificação se for repetir. Mas, por enquanto, vou adicionar mais uma seção aqui, que será sobre seção. E aqui vamos ter alguns detalhes. Então, vamos adicionar este aqui. Então, primeiro vou projetar, vou adicionar um retângulo aqui. Viemos por este caminho, clique no retângulo. E então talvez daqui. Talvez daqui possamos ir a partir daqui. Assim, podemos desenhar um retângulo. E deste lado para este lado, ou talvez deste lado. Este lado. E um pouco maior. E agora deixe-me ajustá-lo com a mesma posição para que possamos ver essa marca vermelha. Então isso significa que estamos na mesma posição. Então aqui vou colocar nossos e-mails aqui. Então, vou clicar nesta imagem do lugar, e depois vou selecionar esta imagem aqui. Então recebi esse e-mail da Internet. Então você pode simplesmente baixar qualquer e-mail ou usar qualquer imagem aqui. Agora, se eu clicar nele, tenho essas imagens aqui. E agora no lado direito, barra lateral direita podemos colocar, deixe-me ver como ele se parece, quão grande ele parece no tamanho real. Então, parece assim. E podemos tentar adicionar algumas outras coisas aqui, outras coisas. Ok, então podemos acrescentar ao que, o que quero dizer com este. Então, posso adicionar outra seção. Então, o que posso dizer para esse retângulo? Posso dizer sobre a Seção. E vou desenhar mais um retângulo aqui, talvez deste lado para esta posição. Agora ele vai diretamente para esse tamanho. Ok, então agora temos exatamente o mesmo tamanho do lado direito e na mesma posição desta imagem. Assim, podemos, ainda aumenta o tamanho do nosso carrinho. E então eu posso adicionar um raio de borda de cinco pixels, pouco de sombra, um pouco de sombra, sombra. E então vou adicionar essa cor de fundo branco. Então agora temos esse tipo de visão. No topo. Primeiro vou acrescentar sobre nós. Então, o que posso dizer? Posso simplesmente renomear este. Posso dizer sobre detalhes. Aqui. Vou adicionar um texto, e o texto vai adicionar aqui, vou dizer sobre nós. Então, sobre nós vai ficar assim por enquanto. E na vista ao vivo vai ficar assim, mas deve ter um tamanho maior, talvez 32. E então ainda é um, vamos adicionar uma cor diferente para esta, nem exatamente não a preta. Qualquer cor. Estou apenas selecionando algum tipo de, ou talvez eu ainda possa selecionar essa cor enquanto você está usando esse modo de cor. Então, para esse estilo de texto, podemos escolher um diferente. Podemos escolher uma cor diferente, um design diferente. E talvez este ou este, ou este, ou este ou legal, pareça legal e ruim. Então, podemos usar este aqui e podemos simplesmente colocá-lo aqui. E depois disso, vamos adicionar uma espécie de colapso mostrado aqui. Podemos simplesmente adicionar mais uma opção de cartão aqui. Então, o que podemos fazer por isso? Então, parece muito bom. Estou feliz com isso. Não há problema com isso. Mas vou adicionar um carro mostrado aqui. Então, sobre nós, posso simplesmente dizer. Vamos renomear este rapidamente sobre o Título. Eu tenho este sobre o título. Tudo isso seção Sobre. Então aqui primeiro vou desenhar mais um retângulo. Vou pegar metade desse retângulo. Então, vou adicionar um texto de detalhes aqui. Podemos simplesmente redimensionar este dessa maneira. E assim adicionamos peso Hamas maior do que o tamanho médio do nosso design. Então, podemos adicionar este aqui. E então temos esse design de Sean. E podemos adicionar nossa cor de ícone aqui. Então, o que podemos fazer agora? O que eu queria fazer aqui, eu queria adicionar o título e a descrição para isso. Eu posso simplesmente Loren ipsum apenas para alguns textos aleatórios ou você pode usar algum plug-in também. Isso não é um problema. Então eu posso simplesmente selecionar Laura Nixon, este título aqui. E então eu posso selecionar um texto aqui. Posso colocar este texto aqui, e depois vou mudá-lo para 14. E aqui vamos nós. Temos esse 14. E agora posso selecionar 1619. E podemos ajustá-lo dessa maneira. Podemos colocá-lo, desculpe, podemos colocar nosso texto no centro. Podemos colocar nosso texto no centro. Posso colocar nosso texto no centro. E então podemos adicionar um raio de borda, cinco pixels aqui, um pouco de raio de borda. E também podemos fazer isso dessa maneira. Portanto, este é o retângulo que podemos dizer sobre o item, sobre o item. E este será sobre o texto do item. Então, sobre o item, sobre o texto do item. E aqui precisamos nos deixar mudar a cor de fundo primeiro. Podemos escolher essa cor de fundo e, para o texto, podemos escolher essa cor do texto. Rápido. Então, temos essa e essa cor. E aqui podemos colocar um ícone. Podemos puxar para um ícone aqui. E aqui vamos nós. Podemos colocar o ícone 21 aqui. Então, novamente, podemos tomar a saúde do nosso, esse plugin de ícone que instalamos é chamado ícone de filtro. E vou escolher isso. Vou escolher esse ícone aqui. E vou arrastá-lo para aqui. Vou colocá-lo aqui. E aqui vai você. Vou mudar a cor para branco. Legal. Parece bom, mas preciso colocá-lo dentro das coisas do convés. Então, vou colocar um arrastar e soltar na área de trabalho. Agora, ele deve ser capaz de fazê-lo. Então agora podemos ver que esse ícone também está aqui. Então, o que podemos fazer agora? Também podemos renomear o nome de diacrônico pode dizer sobre eles seta para baixo. Então, temos sobre o item que sempre toma átomo e sobre o item, este. Essas são as três coisas que agora podemos fazer. Grupo Vou pressionar Command Z e vou dizer Sobre o item. Podemos dizer sobre eles cartão, legal. Portanto, temos este cartão de item do aeroporto, e agora podemos adicionar isso sobre o cartão de item aqui. E podemos adicionar esse cartão de item de morada aqui. Vamos adicionar o descarte de tempo múltiplo. Ou podemos fazer uma coisa. Não precisamos ter essa coisa. Acho que podemos deixar-me tentar duplicá-lo. Como parece. Agora podemos duplicá-lo algumas vezes. Agora temos este bom design de cartão. Mas para o primeiro, quero ter coisas diferentes. Quero abri-lo e quero mostrar nosso texto, ok, é uma espécie de opção de chamada. Então, para fazer isso, primeiro deixe-me colocá-lo aqui. Deixe-me tentar como parece. Ainda é que está dentro deste. E então podemos correr aqui um pouco mais. Certo? E então apenas para este item, podemos fazê-lo o, podemos nomeá-lo. Podemos MDs um sobre o colapso do item. Ok, e então vou torná-lo um pouco maior para este item. Certo? E então eu vou remover esse ícone daqui porque precisaremos de um elemento diferente aqui. E então vou colocar esse texto aqui. E então eu vou pressionar o Comando D e arrasto um pouco para baixo. E vou adicionar um texto diferente aqui com mais alguns itens. Para que possamos fazer isso. Você pode copiar e colar um pouco mais de texto aqui. Então, normalmente você vê esse tipo de design em uma seção de absorção de chamadas ou perguntas frequentes. Então, temos este agora vou diminuir o tamanho da fonte para 12º. Legal. Agora, parece muito bom. Certo, legal. Então outra coisa que podemos fazer é aqui. Podemos adicionar um diferente, podemos adicionar um ícone diferente, que será um ícone de aplicativo sobre o cartão de item. E aqui podemos adicionar, novamente **** Saúde técnica do nosso ícone chamado ícone alimentador. A partir daqui, podemos simplesmente pegar esse ícone, que será o ícone do aplicativo. E esse ícone vou copiar. E depois vou postar, vou colocá-lo aqui. Vou fazer a cor branca ghoul. E novamente ele sai do quadro. Então, vou colocá-lo aqui. Então podemos dizer, posso renomear este ou você pode dizer, eu comprei colapso de item, seta para cima. É assim que podemos verificar se eles precisam, se você tem duas sobremesas, ok, então outra coisa é perceptível que não está na mesma linha, para que possamos fazê-lo na mesma linha. Então, como podemos fazer isso? Podemos simplesmente, agora está na mesma linha. Certo? Então, quando um usuário clicar nele, quando você clica duas vezes nele, isso será aberto e, em seguida, abriremos este também. Ok, então é assim que essa seção Sobre nós nós projetamos. Tudo bem, e outra coisa que podemos tentar. Então, na próxima parte, tentaremos adicionar nosso, ok, para que possamos adicionar mais uma coisa aqui. Então, se estiver aberto, podemos simplesmente marcar esse item também. O que eu, o que quero dizer com isso. Então, normalmente, você notará que, se este cartão estiver aberto, vamos marcar este também. Então, também podemos fazê-lo. Isso não é um grande problema. Vou deixar-me tentar adicionar este. Então, antes disso, deixe-me verificar o que usamos. Usamos um raio mais cinco. Certo, legal. Então vou desenhar uma linha aqui, outro retângulo e colocá-lo cinco. E minimize o, desculpe, precisamos ter este aqui. Isso e então podemos simplesmente marcar isso. Vamos usar essa cor? Certo, legal. Então, temos este ou podemos simplesmente usar a cor branca também vai ficar ótimo aqui. Mas não, não vai ficar ótimo. Então, precisamos ajustar este desta maneira também. É de certa forma e podemos alguma cor. Talvez essa cor. Não, não parece bom Exatamente. Então podemos fazer basicamente, podemos escolher algumas cores diferentes. Sim, talvez seja bom, mas também podemos mudar o branco para talvez sete. Excel. Além disso, este está aberto e este está marcado. Mas seria bom se pudéssemos escolher uma cor muito boa, cor clara que possa ser facilmente identificável. Mas eu estou conseguindo, talvez esse bloco vai parecer bom. Certo, vou pular este aqui. Tudo bem, então finalmente projetamos essa seção média e parece muito legal. Então, é assim que podemos projetar nossa seção Sobre e essa opção de colapso aqui. Ok, então vou parar este vídeo aqui e continuaremos da próxima palestra. Vejo você na próxima palestra. 7. Design de controles deslizantes de feedback: Bem-vindo a este vídeo. Nesta parte, vamos discutir sobre a seção Sobre e não exatamente sobre seção porque em nossa parte anterior, projetamos nossa seção Sobre nesta parte. E, basicamente, quero adicionar uma seção de feedback. Tudo bem? Então, como vai parecer é que será uma espécie de opções de controle deslizante ou vamos apenas tentar dar uma aparência assim. E então podemos simplesmente projetar este. Certo? Então, para isso, primeiro, deixe-me começar a desenhar essa coisa. Certo, Cool. Precisaremos aumentar nosso tamanho do quadro, altura do quadro. Então selecione o quadro e, em seguida, podemos aumentá-lo a partir daqui. E depois legal. Então, agora, aqui vou adicionar nossa seção de comentários. No meio, vou adicionar um feedback sobre o título. E depois disso, teremos essa opção aqui. Certo, tão rápido para adicionar uma seção de comentários. Primeiro, vou adicionar um texto aqui. E vou adicionar feedback. E rápido, deixe-me mudar o tamanho da fonte para um tamanho maior, talvez 36. E podemos colocá-lo aqui exatamente. E deixe-me ver como parece. Então, vai ficar bem. Então, temos esse feedback na parte inferior e, em seguida, temos esse feedback, ok, legal. Temos isso offshore e podemos simplesmente desenhá-lo no meio deste. Certo. E podemos simplesmente adicioná-lo. Você pode tirar um pouco de espaço do topo. Eu posso apenas fazer um pouco de um espaço a partir do topo. E depois disso, o que podemos fazer? Basicamente, podemos em dois itens aqui. Um deles será o item do nosso cartão. Basicamente, teremos que projetar um cartão na parte superior do cartão, vamos mostrar a foto do aluno e depois a imagem da pupila, depois o nome e depois a mensagem. Nas outras duas coisas que queremos mostrar tão rápido, vou renomear o nome. Você pode dizer o título da bolsa. Certo, legal. Portanto, esse título de feedback. E depois disso vou projetar nosso retângulo. Talvez possamos começar daqui. Podemos começar, posso começar daqui. Então, quero mostrar dois itens. Vou pegar esse tipo de tamanho, um pouco de raio de borda, então você adicionará. E então essa opção será adicionada aqui. Acho que vai ficar bem. Então, vou me deixar ver como parece. Então, esse tamanho. E então vamos colocar um botão aqui e depois outro botão no lado direito. E então teremos que optar aqui e, na parte inferior, adicionaremos este. Ok, então vai ficar bem e teremos que, vou dizer feedback parte principal. E vou projetar, vou desenhar outro cartão. No topo. Podemos definir r. Podemos definir nossa opção de elipse aqui exatamente. Este aqui. Precisamos fazer a mesma altura e branco, um a dois. E então podemos, ok, então vamos precisar de um pouco mais de espaço do topo porque temos nosso texto aqui. Então, podemos arrastá-lo e podemos tirar desta linha. E então podemos levá-lo dessa maneira, no meio deste. Certo, exatamente. Este é o medial. Como você entende que isso é o medial? Nós vamos, você pode ver este ponto aqui. E tudo bem, legal. Então aqui vamos colocar a imagem e aqui vamos adicionar a sombra. Tão rápido, vou adicionar esse efeito. Vou mudar a cor de fundo para essa cor. E agora ele vai parecer um cartão. E não se preocupe, vamos colocar este e teremos que adicionar um nome aqui. Então, o que posso ver, vou renomeá-lo. Posso dizer Feedback. Use nossa foto de perfil de usuário do MS. E então, na parte inferior desta, vou colocar as tags. Você pode dizer John Doe, apenas por exemplo, qualquer nome que tenhamos. Ok, então e então podemos fazer uma coisa. Podemos simplesmente Ok, acho que não está no centro ou está no centro, mas podemos colocá-lo no centro deste. Certo. Agora, está no centro. Podemos simplesmente alterar o design do formulário. Podemos adicionar um design diferente para esse nome. Podemos, talvez possamos escolher, estou apenas selecionando alguns textos aleatórios. Então, se você tiver alguma preferência, se quiser usar qualquer outro, então você definitivamente pode fazer isso aqui. Isso não vai ficar bem. Então, podemos adicionar este. Não, isso não vai se parecer com isso. Então podemos escolher que não vou gostar deste. Este não. Ok, podemos selecionar este também. Mas somos Tomas parafuso. Este é bom. Podemos escolher este. Então, uma coisa que posso fazer é aqui que podemos fazer desse texto um componente. Então, de novo e de novo, não precisamos copiar de Loren Ipsum. Então, vou selecionar esse texto. Vou clicar com o botão direito do mouse e, em seguida, vou torná-lo componentes. Assim, você pode ver Criar componente. Então, o que esse componente significa? Assim que este se tornar um componente, você pode ver que esse ícone foi alterado e onde este um componente, APR, essa empresa aparece neste diretório de ativos. Então, temos isso. Agora temos esse componente, ok, que é esse. E agora, se quisermos, podemos usar esse componente quantas vezes você quiser. Então, o que posso fazer? Posso simplesmente arrastá-lo aqui. E então eu posso, posso selecionar este, e posso simplesmente mudar a cor de fundo aqui também. Ok, então desta forma, não terei que copiar e colar de novo e de novo. Então você pode, dessa forma, você pode fazer qualquer coisa. Você pode criar um componente mesmo se quiser, você pode criar um componente desse item. Digamos que componente omega, crie componente. Então, tornou-se um medo aqui. Então, agora você pode reutilizá-lo quantas vezes quiser. Certo? Então, essa é a beleza dos componentes. Então, agora você aprendeu a usar o componente, como criar um componente. Agora, se eu olhar aqui , posso ver que tenho essas opções. E esse é o feedback do usuário, mas agora não precisamos ter esse cartão grande. Então, o que podemos fazer? Posso renomear este. Posso dizer que John Doe vai ser, podemos dizer Renomear novamente, simplesmente dizer feedback, nome de usuário. Então, tudo é feedback está sob este para que possamos deixá-la fazer um grupo. Certo? Então agora este é o carro principal do feedback do carrinho. Vou minimizar este cartão um pouco mais. E agora vamos ver como ele se parece. Parece assim. Certo, então queremos colocar nossos e-mails aqui. Então, o que posso fazer? Então, posso simplesmente baixar algumas imagens, mesma foto de perfil, e então posso colocá-la aqui. Agora, podemos simplesmente colocar nossas imagens neste cartão. Então agora não temos nenhuma imagem até agora. O que podemos fazer? Basicamente, podemos simplesmente clicar nesta imagem de lugar do Sean. E então vou selecionar alguns e-mails aleatórios aqui. E agora temos essa opção. Agora, se eu clicar nele, ele vai adicionar aqui. E aqui vamos nós, devemos ser capazes de ver a imagem aqui. Leva algum tempo para carregar a imagem. Ou podemos simplesmente o que aconteceu aqui. Está aqui. Então podemos ver esta foto de perfil, imagem de perfil aqui. E agora preparamos este cartão perfeitamente. Certo? Então agora o que temos, esta é a primeira imagem, e esta é a foto do perfil. Temos esse feedback. Temos esse feedback, nome de usuário, cartão de feedback, feedback do cartão principal de feedback do título não está sob este. Então, essas são as quatro coisas que precisamos para fazer grupos. Então, vou pressionar Command G e, em seguida, posso simplesmente renomeá-lo e posso dizer feedback, ou seja, cartão. Legal. Agora, podemos fazer isso dessa maneira. Então agora temos essa coisa. Vou fazer isso duplicado. E a partir daqui podemos adicionar este dessa maneira. Temos este cartão desativado desta forma, mas não está no meio. Tão rápido. O que podemos fazer? Temos esses dois carrinho principal. Agora podemos torná-los um grupo e, em seguida, podemos renomeá-lo. E podemos simplesmente dizer esse feedback. Todos os itens, você pode dar qualquer nome. E agora podemos reorganizá-lo. Ok, talvez este seja o ponto médio, ok, então podemos ver que esta linha está aparecendo no meio. Então este é o ponto médio deste. Um, e agora temos esse item no meio. Ok, então nós temos este, pelo menos não está no meio, mas podemos simplesmente estar neste a partir disso, podemos simplesmente colocá-lo no meio deste texto e agora está melhor. E agora, no meio deste, queremos adicionar o ícone da ferramenta. Certo, então está tudo bem e rápido. Deixe-me alterar os e-mails deste item. Então, vou selecionar outra imagem que baixei. E ele vai inicializar rapidamente. E assim que ele inicializou, então eu posso substituí-lo por este. Novamente, você só vai levar algum tempo para adicionar este. Isso não é um problema. Podemos apenas fazer este aqui. Ok, então agora precisamos adicionar, precisamos desenhar um círculo aqui. Para nossa, nossas quatro horas. Essa opção. Ou podemos fazer mais uma modificação aqui. Acho que esqueci de adicionar este. Podemos adicionar uma borda deste. Então, vamos adicionar uma borda para que ela pareça muito melhor. Então, vou adicionar uma borda aqui. Então podemos dizer que o derrame será três. E então, ok, então o que eu fiz aqui basicamente, então eu acho que adicionei essa borda para isso, para este retângulo. Ok, então adicionamos nosso retângulo aqui por engano. Então, vou controlar o Chet. Precisamos fazer isso exatamente com os e-mails aqui, este MS principal, e aqui posso adicionar essa imagem. Vou colocá-lo em C, e depois vou mudar a cor para branco. E aqui vamos nós. Acho que o branco não é viável porque nosso fundo é branco. Assim, podemos escolher esse plano de fundo. E então ele vai parecer, ok, então temos o mesmo design para ambos os itens. Legal, parece muito bom. E agora, o que podemos fazer? Podemos desenhar um botão de vida para avançar em um ciclo de vida, o botão para trás. E eu posso colocá-lo no meio. E parece usar o tamanho perfeito aqui. Então, vou fazer o hidrogênio observá-los. Então ele já tem 36 por 36. E então vou deixar a cor branca. E então vou adicionar o efeito aqui. E então eu posso colocar esse ícone de seta aqui. Então, temos nosso ícone de seta em nosso plugin peck. Então, vou adicionar este é chamado ícone de filtro e, em seguida, vou escolher este ícone aqui, aparece aqui. Então, menos do que arrastá-lo aqui, coloque-o aqui e arraste-o aqui. Então, temos este e este, ambos os dois. Então, podemos simplesmente torná-los um grupo. Você pode dizer a seta de feedback à esquerda fria. Então, agora temos essa seta de feedback na esquerda exatamente no mesmo tamanho. Eu acho, eu acho que está na mesma posição porque, ok, então deixe-me consertá-lo. São estatísticas com 36. Então agora está no grupo. Então, o que podemos fazer? Podemos apenas medi-lo dessa maneira, então é desse tamanho. Agora, ok, para que possamos fazer uma duplicata. Então, vou fazer uma duplicata. E então podemos colocá-lo da mesma forma, da mesma forma. Certo? Acho que estamos no mesmo botão de posição agora podemos simplesmente girar em vez de usar um ícone diferente. Certo? Então, precisamos girá-lo dessa maneira. Legal. Então agora parece exatamente a mesma coisa, é a mesma imagem, o mesmo ícone que estamos usando aqui. Então, parece muito bom. E agora o que posso fazer? Ou podemos adicionar nosso ci dot aqui, na verdade três elipse aqui. Então vou ajudar essa elipse, e então vou desenhar essa elipse aqui. E o que posso fazer? Posso simplesmente dizer dez por dez e vamos tentar. Vamos ver como ele se parece. Sim, parece bom, mas será bom se pudéssemos adicionar mais alguns , 151515 por 15. E agora, o que posso fazer? Eu posso, ok, então podemos, tão rápido que podemos adicionar cores diferentes. Primeiro, podemos adicionar uma cor diferente. E para o segundo, podemos usar, e para as outras duas cores podemos usar Nesta cor. Ok, então eu vou adicionar este, então vou duplicá-lo 234. Vamos ver como ele se parece. Então, temos cores completas e, para o primeiro, vamos mudá-lo para, vamos torná-lo ativo. Isso significa que podemos dar cores diferentes, significa que o primeiro está ativo aqui. Legal, parece muito bom. Perfeito. Então, adicionamos esta seção de feedback e boa aparência. Então, o que podemos fazer? Assim, podemos simplesmente marcar todos esses itens e, em seguida, podemos simplesmente torná-los um grupo. Então podemos renomeá-lo. Podemos dizer itens de ponto de feedback. Então, sempre que você trabalha para qualquer tipo de design, você só precisa ter certeza de que está fazendo deles um groove para que depois você possa reutilizá-lo e não quebrar nada. E você não quebra nada à direita. Então, vou parar este vídeo aqui e continuaremos a partir da próxima palestra. Vejo você na próxima palestra. Tchau. 8. Seção de assinaturas de design: Bem-vindo a esta palestra. Nesta parte, vamos projetar nosso sistema de boletim informativo por assinatura. Então agora, até agora nós projetamos essa parte. Então eu realmente gostei desse design. Espero que você tenha gostado e aprenda muito. Agora. É hora de adicionar nosso sistema de assinatura aqui. Então, como você pode fazer isso? Portanto, é um sistema de tecidos moles muito básico que vamos projetar. Nada extravagante e não é uma tarefa difícil. Tão rápido vou adicionar nosso quadro. Vou projetar um retângulo aqui. Vou adicionar um retângulo logo após este. Acho que vou desenhar um retângulo aqui. E deixe-me ver como ele parece aqui. Então este retângulo e aqui podemos adicionar ou podemos colocar nosso EMS, ou podemos colocar um MAs de fundo, então podemos simplesmente adicionar nosso campo de entrada e em seguida, o fundo, podemos adicionar. E para isso, o que podemos fazer? Basicamente, vamos adicionar nossa imagem de fundo ou podemos simplesmente adicionar talvez alguma cor aqui em vez de imagem de fundo. E então podemos simplesmente, o que podemos fazer? Podemos simplesmente adicionar este onde ele está. Então, podemos simplesmente mudar os APRNs um pouco isso, ou talvez 10%. Então isso nos dará sombra a esse tipo de estudiosos, mas talvez 80%. E então podemos tentar adicionar novamente, pois eles têm algumas outras opções. Por exemplo, você pode escolher essa tela. Você pode escolher essa luz e cor. Você pode escolher essa luz dura e algumas outras opções que eles têm. Mas normalmente ele é passado. E então aqui podemos simplesmente selecionar 20 por cento vai nos dar esse tipo de coisa. Certo, legal. Então, temos essas opções, mas em vez desta, podemos selecionar essa cor, talvez possa alguma cor linear. Então, escale, a cor não ficará bem aqui. Então, o que posso fazer aqui? Sinto muito. Preciso, podemos simplesmente adicionar, posso simplesmente colocar uma imagem de fundo aqui. Assim, podemos simplesmente colocar um fundo humanos, talvez essas cúpulas. E vai, sinto muito. Então eu preciso selecionar este aqui. Onde está esse retângulo? Oito. Portanto, esse auxílio de retângulo será nosso retângulo de assinatura. No retângulo da assinatura, teremos que adicionar nossa imagem de fundo. Então, vamos tentar este. Então, não devemos colocá-lo em cima desse retângulo. Ok, então não sei o que, o que fizemos aqui basicamente. Então deixe-me remover este porque fizemos algumas alterações aqui. Então, a razão pela qual ele está criando problemas, então vou desenhar um retângulo aqui. E este é o nosso primeiro retângulo aqui. Agora vou colocar a imagem. Então eu vou colocar a imagem, e então vou colocar essa imagem vai mostrar aqui, legal. Então, parece muito bom. E então eu vou remover o nome de você. Podemos dizer assinatura. Então, o nome será subscrito mostrado e ligado. Deixe-me ver como parece. Parece muito bom. E, por cima, podemos adicionar uma, essa opção. Um campo de entrada. desenhar nosso campo de entrada usando nosso retângulo. Vamos adicionar raio de borda, então, talvez um pouco mais, talvez 20 pixels. E então temos este. E então temos este no centro. Nós temos isso. Certo, legal. E o que podemos fazer? Podemos simplesmente adicionar este. E talvez possamos tentar adicionar alguma borda. Podemos adicionar alguma borda será C. E podemos mudar a cor da borda para branco. E agora não precisamos ter este. Podemos mantê-lo branco, cinza claro. Ou podemos remover essa cor de fundo. Podemos manter este aqui dessa maneira. E vamos primeiro adicionar um texto de espaço reservado aqui. Então podemos dizer IMO, na verdade, comer só é visível aqui porque temos uma imagem de fundo. Portanto, devemos adicionar, devemos adicionar uma cor de fundo aqui. Portanto, devemos adicionar uma cor de fundo aqui. Então, vou habilitar essa cor de fundo. E então isso, então esse dx vai colocar no centro. Agora, podemos identificar nosso texto, mas o que podemos fazer? Podemos simplesmente aumentar o tamanho da fonte no texto e , em seguida, podemos simplesmente reorganizar. Pode ser daqui, e-mail. E então talvez possamos definir nosso botão Enviar aqui. Podemos definir nossos diferentes botões. Então, essa cor está muito bonita. Não quero mais mudar essa cor. Então, aqui podemos adicionar um botão e a altura do botão e o que vai ser o mesmo. Então, o que posso fazer? Posso simplesmente duplicar esse retângulo. E vou colocá-lo no mesmo nível, da mesma forma. Mas vou minimizar, no entanto. Vou minimizar o peso deste. E então definitivamente precisamos mudar a cor para uma cor clara, essa cor. E então ficará ótimo. Então, não precisamos ter esse derrame aqui. Não precisamos ter essa fronteira. A cor de fundo é este raio moderno para este, esta borda. Mas para que serve isso? Vou removê-lo chamado entrada do botão Subscribe . E aqui teremos que colocar um texto. Ok, então primeiro deixe-me fazer deles um grupo, inscrever entrada, preencher e inscrever entrada para o grupo McDermott, vou dizer entrada de assinatura. E daqui vou adicionar nossos textos. Você pode dizer se inscrever. Posso colocar este subscrito aqui. Este é o texto de assinatura. Portanto, temos esse campo de entrada e, em seguida, temos esse texto. Parece muito bom. Vou fazer deles um grupo. Então, este botão Inscrever-se, vou torná-los um grupo. Vou renomeá-lo. Vou dizer botão Subscribe. Aqui vamos nós. Portanto, temos o botão de inscrição e temos essas assinaturas projetadas. Perfeitamente. Legal. Então , parece muito bom, e eu realmente gostei desse. E na próxima parte, vamos projetar nossa seção de rodapé. Então vou parar este vídeo aqui e continuaremos a partir da próxima palestra. Vejo você na próxima palestra. Tchau. 9. Design de seção de rodapé: Bem-vindo a esta palestra. Nesta parte, vamos começar a projetar nossa seção de rodapé. Então, fizemos tantas coisas até agora. Mas agora é hora de projetar nossa seção de rodapé aqui. Então, para fazer isso rápido, acho que não precisamos ter essa massa de espaço em nosso rodapé. Então, podemos simplesmente minimizá-lo um pouco. Vou selecionar esse texto desativado e, em seguida, vou minimizá-lo um pouco mais. E então, a partir daqui, acho que posso adicionar essa opção de venda. Então, vou tirar um design retangular daqui. Então eu posso projetar este aqui. Legal. E então rápido, vou adicionar essa cor de fundo. Não exatamente essa cor. Acho que essa cor. Deixe-me ver como parece. Eu queria usar essa cor. Acho que acho que estamos usando essa cor ainda é, é realmente grande. Não precisamos que não precisamos desse tamanho maior do nosso rodapé. Podemos minimizá-lo. E então eu posso provar. Sim, é. Certo. Agora, está muito bonito ou podemos usar uma cor diferente, talvez. Deixe-me tentar como parece se eu usar uma cor diferente em vez dessa cor, essa cor é um pouco escura. Eu acho. Não parece ruim. Parece bom. Vou ficar com este. E agora, agora o que posso fazer aqui? Então, basicamente, podemos adicionar duas partes diferentes, duas seções diferentes para esta. E talvez eu possa adicionar um título aqui. E então podemos simplesmente adicionar a opção de colapso, observe a opção de colapso aqui. Então, o que posso fazer primeiro? Primeiro mude para Rodapé, retângulo de rodapé, seja lá o que for que estamos escrevendo. E depois vou adicionar um texto aqui. Então, vamos chegar à seção. Vamos começar com isso , desta grade. Vou adicioná-lo. Podemos dizer serviços e torná-lo um pouco maior. Ok, Então, em vez de, podemos dizer 24 talvez, e então podemos adicionar, tudo bem, então 26. E então, antes e então, podemos traduzir para ajustar a família de fontes desta. Podemos escolher exatamente essa cor, essa, eu acho. E, hum, mas na parte inferior, também podemos adicionar um comprimento desconhecido. Então, como podemos projetar isso sublinhado? Acho que podemos escolher um diferente. Acho que este podemos escolher. E eu queria ter algo muito ousado ou algo realmente único. E sim, parece bom, mas depois terei que torná-lo um tamanho maior. Ok, então fique com este. Então agora, depois disso, vou adicionar nosso sublinhado. Então, para desenhar um sublinhado, normalmente prefiro usá-lo dessa maneira em vez de usar a ferramenta de linha. Porque a ferramenta de linha às vezes é um pouco difícil de projetar. Então, vou adicionar o raio de borda 20, e então a altura será três. Em seguida, podemos selecionar a cor para branco ou executar essa cor. E então eu posso, eu posso, eu posso desenhar isso. Eu posso arrastar essa cor apenas, na parte inferior deste serviço. Legal, parece bom. Então agora também posso diminuir a altura para dois pixels. Está parecendo bom. Agora, posso adicionar aqui alguns itens. Serviços que podemos dizer. Agora aqui posso dizer daqui que posso começar a escrever. Posso dizer, posso dizer nova casa, mas definitivamente o tamanho da fonte será muito pequeno aqui. Talvez 161616 seja muito pequeno. Talvez 2424 seja bom. Então, casa vai ser 24. Agora, eu vou, vou adicioná-lo daqui e vou duplicá-lo. Acho que neste espaço. Parece bom. Ok, então vou duplicá-lo mais algumas vezes. Frio. Então, temos este. Podemos dizer nova era nova propriedade de casa. Propriedades da propriedade. E estou apenas escrevendo alguns serviços aleatórios. Só para adicionar algum texto aqui chamado empréstimo bancário de suporte. Você pode adicionar a qualquer texto o que quiser taticamente, na verdade, não importa. Em seguida, empréstimo bancário, então podemos adicionar cartão de crédito. Portanto, deve ser banco não L, deve ser empréstimo bancário. E, em seguida, criar cartão de crédito, torná-lo capital. Tudo bem, então parece muito bom. Então, o que podemos fazer agora? Podemos fazê-los em grupo. Então toda essa parte guarda de portão, empréstimo bancário chamado apoio e o novo grupo McDermott casa. Vou fazer deles um grupo. Vou fazer deles um grupo. E então vou dizer TI. Item de serviços. Então eu posso. Ok, então outra coisa que precisamos fazer grupo para este e este, desculpe, estes para torná-los um grupo também podemos dizer comida ou título. O título e depois vou fazer uma duplicata. E eu posso colocá-lo aqui. E então eu posso duplicá-lo também. E aqui vamos nós. Então essa é a beleza dessa coisa. E agora, em vez de serviços, para que possamos simplesmente dizer produtos, serviços de incidentes, podemos dizer produto. E aqui vamos nós. Então, temos essas superfícies, temos essas características do produto, temos essa opção também produto, e então podemos mudar algo daqui que podemos dizer que será que podemos dizer todos os imóveis. Imóveis e depois Parte D, depois se veste. E então você pode dizer shopping center. Em seguida, shopping center e acima. E então podemos adicionar cartão. E então podemos dizer telefone e apenas escrever algum nome aleatório, telefone de jardim. Então, cartão de produto e telefone. E aqui podemos adicionar outra coisa. Nós podemos. O que podemos fazer? Normalmente, temos esse tipo de coisas na foto, mas podemos adicionar mais 21 textos e mais uma descrição aqui na verdade. Então, talvez possamos, podemos editar o texto aqui. Podemos simplesmente adicionar um texto. Podemos dizer meta futura. Objetivo futuro. Ok, Então basicamente, em vez disso, podemos simplesmente duplicar o título desta pasta. Ok, então temos este título de foto aqui, para que possamos arrastar este desta maneira. E então eu posso simplesmente dizer objetivo futuro ou futuro, objetivo futuro. E então, como parece, vai ficar ótimo, mas não precisamos ter, ok, está tudo bem. Podemos simplesmente, por que podemos simplesmente dizer 80 ou talvez um 100? E então podemos adicionar nosso texto aqui. Podemos dizer, nosso objetivo futuro é que o Congresso seja descrito aqui. E então o que posso fazer? Basicamente, posso diminuir o tamanho da fonte para 40. E como eu disse anteriormente que temos o nosso, criamos esse ativo aqui. Então, vou arrastar isso. Texto aqui. E eu posso colocá-lo lá. Legal. Então agora temos essas três opções. Então, podemos simplesmente fazê-lo ou podemos simplesmente adicionar mais alguns textos, mas acho que não precisamos adicionar mais texto aqui. Mas a única coisa que podemos fazer aqui, definitivamente podemos adicionar alguns dos nossos ícones aqui. O que quero dizer com isso? Então temos isso, temos isso, nosso, temos nosso plugin aqui. Então, ícone de filtro. Então, podemos simplesmente dizer facebook. Então podemos dizer Instalar, então podemos dizer Twitter, LinkedIn. Ok, então temos esse ícone aqui. Para adicionar esses ícones. O que posso fazer? Posso simplesmente pegar ajuda das ferramentas Ellipse e, em seguida, posso desenhar esse ícone. Portanto, certifique-se de que ele pareça o mesmo. Então, vai ser tardy muito atrasado. Em seguida, ele deve começar do mesmo tamanho e , em seguida, como ele parece agora. Portanto, não está atrasado. Vamos adicionar um 35 por 35. Aqui vamos nós. Então, em vez disso, vou escolher essa cor branca para que ela fique muito bonita e tenhamos essa. Então, o que você quer dizer com isso? Então, agora vamos tentar adicionar este plugin, esse ícone rapidamente. Então, temos esse ícone. E podemos dizer rápido, Facebook. E vou colocá-lo aqui. E deixe-me tentar. Vou arrastá-lo para dentro da caixa. Então eu posso ver que esse ícone do Facebook está aqui. Agora, como temos nosso ícone, temos nossa elipse. Vamos torná-los um grupo. Então podemos dizer ícone social. Agora, duplique. Então, Comando D, e eu vou colocá-lo neste espaço. Antes disso. Deixe-me ver como parece. Agora, posso duplicá-lo mais quatro vezes, então precisamos de um é para Facebook, instagram, Twitter e LinkedIn. Agora, deixe-me remover esse ícone rapidamente. Então, vou adicionar agora o ícone do Instagram. Então esse plug-in, esses ícones de preenchimento. Então, vou adicionar o Instagram. Então, vou adicionar o Instagram. Então o Instagram dele vai aparecer aqui. E vou colocá-lo aqui. E então eu vou remover esse ícone rapidamente. E depois vou adicionar o Twitter. Acho que há aqui. Então eu posso simplesmente arrastar este Twitter. E daqui eu posso remover este também. Então, o tutor estará no LinkedIn. E eu posso fazer isso linkedin também aqui. Ok, então podemos ver qualquer um desses porque tudo é epi ou fora deste quadro. Então, o que eu preciso fazer, eu preciso arrastar tudo para dentro desse quadro. Agora, devemos ser capazes de ver nosso ícone. Legal, parece muito bom. Gostei disso. Tudo bem, então implementamos com sucesso esta seção de rodapé, e ela parece ótima. E na próxima parte, vamos projetar nosso ritmo de login e inscrever-se. E então teremos que adicionar a seção de prototipagem. Então vou parar este vídeo aqui e continuaremos com a próxima palestra. 10. Design de página de login e login: Bem, bem-vindo de volta mais uma vez. Nesta parte, começaremos a projetar nosso login paga uma experiência do usuário. Então, normalmente vamos projetar essa coisa. Então, em nossa página de inscrição, teremos três de shows. E na página de login, teremos duas opções. Então, antes de tudo, o que eu adoraria ter, eu adoraria. Então deixe-me desmoronar este. Então, precisaremos de mais um quadro. Deixe-me tentar, dar uma olhada nele, nesse, nosso design principal, se alguma coisa estiver faltando aqui, está tudo bem. Não precisamos fazer nada aqui. Tudo está ótimo. Não queremos mudar nada. Perfeito. E agora aqui, clique no quadro. Precisamos adicionar mais um, que é chamado Índice TO 14 por 14. E aqui vai você. Aqui. Primeiro vou arrastar, vou, vou projetar, vou pegar um retângulo saudável. Então, vou adicionar um retângulo deste lado. Então, mas antes disso, deixe-me tentar. Acho que precisamos ir para este lado um pouco que possamos ver que a média é colar. Então, em vez de 47 por cento, vamos fazer 70 por cento para que tenhamos uma tela maior e maior. Ou podemos simplesmente executar este. Então, só quero correr novamente simplesmente. Certo, então vamos mudar o nome. Podemos dizer se inscrever. Isso vai ser todo o ritmo de inscrição. Então, vou executar o ritmo do designer para que possamos ver exatamente o tamanho do nosso retângulo em nossa pasta de inscrição. Ok, então leva tempo. Ok, então tomamos mais espaço para este. Então, vou, vou, o que vou fazer, vou selecionar este retângulo. Ok, vamos clicar no botão para baixo primeiro. Vou fazer essa coisa dessa maneira. Então, temos mais espaço no lado direito. Agora, para este retângulo, vou adicionar aos nossos MAs, ok, então vou adicionar uma imagem para esta. Posso escolher este. Deixe-me tentar quem quer ficar bem? Então agora temos este. Vou pressionar este. Certo, não parece bom. Então, vou remover este. Talvez o outro. Podemos escolher este ou talvez possamos experimentar este. Então, o que aconteceu aqui? Então, por que pressionamos isso? Ok, então eu removi o em vez de imenso, eu removi a coisa toda, então eu não deveria fazer isso dessa maneira. Então deixe-me substituir a bagunça. Então, vou substituir isso por este. Então, parece bom. Agora, acho que parece melhor que o anterior, mas cria um pouco de sombra. Mas podemos escolher mais uma imagem, que é confusão DC. Talvez possamos tentar este TMS ou o outro. O outro também é bom. Talvez este se encaixe exatamente nesta tela pequena e menor. Sim, vai caber. Então, vou ficar com este. E agora vou ajudar este retângulo, ok, primeiro precisamos ter um texto aqui. Então, vou colocar uma mensagem aqui. Podemos dizer sign-off. Podemos dizer aprovação. Deixe-me aumentar o tamanho da fonte desta. Então, teremos que adicioná-lo, talvez 2032, não lá. E aqui, podemos adicionar este aqui. Ok, então se quisermos, também podemos mudar a cor deste, talvez assim. Agora, o que podemos fazer? Podemos simplesmente adicionar um retângulo aqui. E podemos mudá-lo para 20. Um pouco mais. Talvez seja saudável. E então podemos adicionar nossa fronteira aqui. E podemos mudar o fundo para branco. Legal, parece bom. Então, o que posso fazer agora aqui? Podemos simplesmente adicionar um nome aqui vai ser nomeado é um tipo de texto de espaço reservado. Então, vou arrastá-lo aqui. E para esse espaço reservado, não precisamos adicioná-lo. Talvez precisemos ter 16. E aqui vamos nós. Temos este. Agora vou torná-los um comando de grupo G. Podemos dizer que o nome do grupo é, podemos dizer nome, entrada, flutuação, entrada, filtro. E mais 21 coisas que eu quero fazer. Eu quero fazer isso. Faça dele um componente porque, para o mesmo design, precisamos da nossa fase de login para que possamos reutilizá-lo. Portanto, faça um ótimo componente ou controle ultra k, ele vai fazer componentes. Então o ícone foi colorido, ícone foi alterado e, no ativo, também poderemos ver isso. Ok, então agora deixe-me duplicar mais 11 coisas que precisaremos. Então este é para o nome e este será para o nosso e-mail que vamos tirar de quê? Usuário? E-mail. E então vamos pegar, para este, vamos dizer senha. Ok, então vamos pegar a senha e também podemos adicionar uma caixa de seleção tipo de coisas aqui se quisermos marcar caixa, por que não? Então, para isso, deixe-me tentar ativar essa grade de layout rapidamente. Portanto, esse layout de grade será 50. E podemos adicionar nossa caixa de seleção aqui. Então eu posso simplesmente desenhar a caixa de seleção logo abaixo aqui. Talvez aqui possamos. Posso desenhar uma caixa de seleção tipo de coisas aqui. E então eu posso combiná-lo com o mesmo tamanho. Quero dizer, o ponto de partida, podemos igualá-lo. Agora, parece assim, mas deve ter a mesma altura e peso. Então começamos por 30. É 30 por 30. E talvez possamos adicionar uma borda. Deixe-me amarrar como parece. Se eu adicionar uma borda aqui e ela se parece com D. Então, talvez possamos mudar o tamanho da borda e então vamos mudar a cor para branco. E como parece. Parece assim. Mas o cinza parece bom. E vou dar um pouco de raio fronteiriço aqui. Legal, parece bom. Aqui. Teremos que adicionar um texto. Talvez possamos simplesmente dizer concordar com termos e serviços, termos e condições. Portanto, concorde com os termos e condições. Vou colocá-lo no correio. E vamos ver como ele se parece. Portanto, concorde com os termos e condições. Parece bom que começamos a partir do ponto de partida deste. E legal. Ok, então agora precisamos adicionar mais um botão. Então, por que não adicionamos do nosso componente, do nosso, do nosso componente que criamos? Porque nós, nós, eu quero, porque eu quero ter o mesmo, porque eu quero ter o mesmo botão de tamanho. Então, em vez desse nome. E primeiro acho que não preciso ter jejum. Deixe-me mudar o plano de fundo deste. Vou adicionar esse plano de fundo. Não preciso ter isso não preciso ter essa fronteira aqui, então vou remover a fronteira. Certo, então não preciso dessa fronteira. Deixe-me ver como posso ver aqui? Parece que ainda tenho essa fronteira. Não sei por quê. Eu tenho essa fronteira. Ele foi removido agora. Sim. Certo. Então esse traço vai removê-los agora. Certo. Então, eu não tenho nenhuma fronteira agora. Então, o que posso fazer agora? Talvez possamos tentar mudar a cor do botão, um pouco dessa cor. Sim, podemos tentar. Você pode manter este e então eu vou editar o texto aqui e a iluminação do meio, podemos dizer, inscrever-se. Legal. Então, vamos adicionar esses textos de inscrição no centro. E teremos que adicionar Este texto um pouco maior, talvez 24. E aqui vamos nós. Podemos ver aprovação neste espaço. Parece muito bom que tenhamos projetado nosso ritmo de inscrição. Agora, o que podemos fazer aqui? Também podemos adicionar mais algumas coisas, para que possamos simplesmente duplicar esta e, em seguida, podemos manter a mesma coisa para nosso login, tudo bem, e faremos algumas modificações. Então, o que posso fazer? Vou duplicar todo esse quadro, vou duplicar esse quadro inteiro. Comando D. Cool. Então eu vou mudar o nome para entrar nisso, então a página de login. Então aqui vou fazer as alterações. Então, em vez de me inscrever, vou fazer o login e não preciso ter o Nim na minha página de login ou sinto muito. Não preciso ter o nome preenchido. Então, o que posso fazer agora? Vou apenas puxá-lo um pouco mais perto deste. E também não precisamos ter essa caixa de seleção aqui. E em vez disso. Certo, então acho que não fiz este. Este e este só para fazer dele um grupo pausado. Posso dizer que o login do botão de eu poderia fazê-lo na página de inscrição, mas esqueci de fazê-lo. Assim, você pode fazer com que ele se agrupe para que possamos rastreá-lo facilmente. Agora o login. Portanto, ainda não é grupo. Portanto, esse login inferior e esse deck de login e este lado inferior e não é Desagrupar. Agora acho que é. Ok, então agora podemos apenas trazê-lo um pouco mais perto e deve estar na mesma linha. E então também podemos ajustá-lo dessa maneira. Certo, vamos ver o que podemos ver agora? Legal. Devemos ser capazes de ver este aqui. Mas não sei exatamente o que está acontecendo. Portanto, esta é nossa pasta de login e temos nossos e-mails, e esta era nossa página de inscrição. Portanto, temos nosso pagamento de login, nossa base de inscrição e temos nosso texto. Isso não vai ser decks para mim em vez de desktop, vou mudar o nome para, podemos dizer em casa. Tudo bem, então aqui vou fazer um pouco de modificação deste. Portanto, isso leva deve estar no nó central na parte superior, neste. Ok, então talvez dessa forma. Deixe-me executar este e vamos ver como ele se parece. Vou selecionar este. E se executarmos este, devemos ser capazes de ver. Agora podemos navegar para ritmo diferente porque ainda não temos a prototipagem, mas espero que possamos fazê-lo. Então, na próxima parte, agora parece bom. Então, faça login. E outra coisa que esqueci de adicionar aqui é que podemos adicionar um texto aqui. Posso dizer, esqueci de adicionar este. Então, devemos ter um texto aqui e devemos adicionar um texto aqui. E podemos dizer que já tem login na conta, faça login aqui. Então, podemos simplesmente começar desse lado e eu vou duplicar. Então vou levá-lo para a próxima parte aqui no ritmo de login porque precisaremos ter mais um texto aqui. Podemos dizer, não tenho uma conta, inscreva-se aqui e só preciso alterar o texto. Podemos dizer que não tem conta. Posso dizer que nunca venha se inscrever aqui. Tudo bem, perfeito. Então vou parar este vídeo aqui, e continuaremos com a próxima palestra. Vejo você na próxima palestra. Tchau. 11. Protótipos com animação: Bem-vindo a esta palestra. Nesta parte, vamos começar a trabalhar em nossa seção de protótipos. Até agora nós projetamos isso. Há três. Reframe ou ela paga. Uma é a página inicial, então uma é a nossa página de inscrição e, em seguida, uma é nosso par de login. Então, agora podemos passar deste lugar para este login ou inscrever-se colar. Portanto, precisamos adicionar nosso protótipo aqui e vou fazê-lo nesta parte. Então, para adicionar um protótipo, você pode ver aqui ao lado desse design, temos uma guia chamada protótipo. Então, vou clicar neste protótipo. Então, assim que você clicar neste protótipo, agora você terá a opção de adicionar protótipo, ok? Então, quando o usuário clicar no ritmo de login, quando o usuário clicar na página de inscrição, queremos enviá-los para o ritmo de inscrição. Quando eles clicarem na página de login, queremos enviá-los para a página de login. Então, vamos adicionar protótipo para a inscrição tão rápido, você precisa clicar exatamente neste texto de inscrição e você pode ver que o tick foi selecionado no lado esquerdo também, não selecione o grupo inteiro, ok. Apenas os textos, apenas o grupo ou botão que você deseja fazer isso por nós. Aqui temos esta aprovação de texto. Então, agora, se eu clicar nele, poderei arrastá-lo, talvez aqui ou outros componentes. Então, se eu quisesse ir para a pasta de inscrição, posso simplesmente fazê-lo. E assim que eu derrubar este, um pequeno pop-up vai sair aqui. E aqui podemos selecionar nossa opção de protótipo. Ok, Então, por exemplo, que tipo de protótipo queremos ter onClique ou na droga, ou movendo o mouse sobre o mouse, deixe o mouse para baixo e algumas outras opções. Então, para nós, agora queremos ter desclique. Isso significa que o usuário clicará na página de inscrição. Vamos enviá-los para a pasta de inscrição. Portanto, precisamos selecionar ao clicar. Se você quiser adicionar um Jagger e arrastar e soltar, então você terá que fazer esse tipo de coisa, tudo bem, dependendo da sua exigência. Então, vou clicar no onclick. E então aqui precisamos selecionar navegar para ele é porque vamos navegar de um quadro para outro quadro. Estamos em casa e, mas queremos avançar para se inscrever no ritmo. Portanto, precisamos adicionar essa navegação e eles têm algumas outras opções. Por exemplo, sobreposições abertas, sobreposição de cotonete, sobreposição fechada de volta abertamente e algumas outras opções. Então, sobreposições abertas tipo de caixa modelo. Não vamos discutir isso aqui agora. Então, vou clicar nessa navegação até onde queremos ir. Já selecionamos esse cadastro lá em cima. A razão pela qual eles são signatários ser selecionados. Mas aqui você também pode movê-lo. Você também pode selecionar o login. Em seguida, ele selecionará nossa página de login. Mas queremos voltar para, queremos mudar para a pasta de inscrição. E agora logo depois disso, temos nossos inimigos e seção. Então, quando, enquanto nosso usuário clicar no ritmo de inscrição, se quisermos mostrar qualquer tipo de animação, então podemos fazê-lo clicando aqui, você pode ver esse instante em vez de instantâneo, podemos simplesmente dizer mover entrar, sair, deslizar para dentro, deslizar para fora. Então, vou selecionar, ou também posso, vou selecionar o slide. Vai ficar assim. E também podemos selecionar este aqui do lado esquerdo, de baixo para cima, de cima para baixo. E quanto a essas pequenas animações? Também teremos essa opção para ver isso. Isso vai nos dar esse tipo de ideia. E dissolver é assim. E sair é assim e isso. Ok, então temos essas opções aqui. E então empurrar vai ficar assim. Ok, então você também pode ver como vai se parecer. Então, vou usar esse slide no. E agora vou, agora vamos ver o que podemos ver aqui? Então esta é a nossa base e temos nossa inscrição. E se eu clicar nesta aprovação, poderemos ver nossa base de inscrição. Legal. Parece muito bom. Acabei de notar que devemos adicionar mais uma coisa aqui. Primeiro, vamos completar a prototipagem de Sean. Ok, então agora precisamos ter certeza de que, ok, e mais uma coisa que quando o usuário clicar no login, devemos enviá-los para a página de login. Então, se eu clicar nele, agora, podemos enviá-los para o nosso ritmo de login e depois desclicar para colar de login. Então deixe-me vir aqui desde a assinatura até o login, e também podemos adicioná-lo aqui. Então, vamos assinar o login. E a partir daqui, em vez de deslizar, vou dizer leve ou posso, podemos dar slide aqui, também a mesma animação. Agora vamos tentar. Precisamos executá-lo rápido. E também teremos que adicionar prototipagem daqui. Então, se você já tem uma conta, podemos simplesmente enviá-la para o ritmo de assinatura. Certo. Então, vou me certificar que você pode ver este agora eu vou clicar no login. Então, estamos projetando pasta agora precisamos adicionar prototipagem para esses dois textos. Ok, então se, se houver um ritmo de login, então nós os enviaremos. Certo. Então nós os enviaremos para você que esteja em Eu já tenho uma conta. Isso significa que ou já tem uma conta, então eles podem simplesmente fazer login. Então, vamos nos mover para navegar até o login. Então vamos adicionar esse deslizamento. E se dos pares de atribuição, se não tiverem uma conta, poderemos enviá-los para a base de inscrição. Ok, então agora devemos ser capazes de clicar nele. Portanto, não tenha uma conta inscreva-se aqui. Vou clicar. Então, estamos no ritmo de inscrição e já temos uma conta, depois faça login aqui e depois faça login. Então, agora o que podemos fazer quando o usuário clicar no botão de login? Nós lhes daremos acesso ao nosso domicílio. Ok, então quando um usuário clicar no botão Entrar, daremos acesso a ele. Vamos dar a eles acesso à nossa página inicial. Então, podemos clicar neste. E então podemos dizer onclick nunca chegar daqui para a página inicial. Então, é assim que também podemos adicionar nossa navegação. Então, por exemplo, você tem talvez 50 ou 60 páginas. Então, dessa vez, será muito difícil para você arrastar este daqui para lá para a tela desejada. Então, na interação, você pode simplesmente adicionar seu, você pode simplesmente adicionar tudo. Quero dizer, você é uma opção de prototipagem. Você pode simplesmente selecionar, clicar, navegar até a tela e depois no instante. Então, para este, a animação que vou, vou selecionar. Deixe-me tentar como vai parecer. Então, vou selecionar Dissolver. Vamos ver como ele se parece. Então, se eu clicar neste login, e aqui vai. Então, estamos agora neste cool baseado em casa. Parece muito bom. Então, adicionamos nossa prototipagem com sucesso. Agora, deixe-me tentar novamente. Estamos em ritmo de assinatura. Não tenha uma conta se inscreva aqui. Estamos em uma página de inscrição e , em seguida, já temos um login de conta aqui. E, em seguida, faça login, saia aqui. Já tem um login na conta. E a partir daqui estamos atribuindo e precisamos adicionar mais uma opção aqui. Então, se eu clicar no botão Inscrever-se, ele não fará nada. Então, o que eu quero ter quando você clica duas vezes na inscrição, significa que eles fizeram isso com sucesso. Em seguida, podemos enviá-los para fazer login paga para entrar. Assim, podemos adicionar mais uma prototipagem aqui em nossa base de inscrição. Vou escorregar este. E, em seguida, mostrada indireta. Então, o clique, então onclique e seguida, navegue para e em vez de nenhum, vou dizer fazer login. E então, em vez de instantâneo, o que posso dizer? Posso dizer deslizar. Certo, legal. Então, se eu clicar nesta aprovação, estamos assinando. E se eu clicar no login, então estamos em nossa base. Então, adicionamos essas teclas de seção de prototipagem. Então, o que mais nos resta? Acho que fizemos tudo o que queríamos ter em nosso projeto. E espero que vocês tenham aprendido muito este curso porque criamos nossa web completa. E isso vai te ajudar muito. Ele adicionará seu próximo disponível em seu portfólio. Portanto, este é o nosso UX de interface de usuário de design completo totalmente funcional que acabamos de terminar. E nossa prototipagem também está funcionando. E tudo está funcionando perfeitamente. Nenhum problema. Tudo bem, então obrigado por inscrever este curso. Adeus. 12. Exporte seu design e compartilhe o link: Bem-vindo de volta mais uma vez. Nesta parte, vou mostrar como podemos exportar e compartilhar nosso design. Concluímos nosso projeto, projetamos tudo. Fizemos nosso protótipo. Agora, é hora de compartilhar nosso design com a equipe ou as pessoas em todo o mundo. Ou talvez você esteja trabalhando em equipe. Então você terá que compartilhar o link ou terá que compartilhar o design com a equipe de desenvolvimento que eles possam construir o aplicativo e escrever sua programação e outras coisas. Ok, então agora como ele pode fazer? Não há nada para aura é muito fácil. Então agora vou passar para essa parte de design. Portanto, este é o nosso aplicativo e tudo está funcionando perfeitamente. Nada muito cedo. Então fizemos tudo e depois entramos, depois tudo. Então, temos três quadros, então agora podemos exportá-lo, por exemplo, princípio, vou exportar esta página inicial. Certo, então como posso fazer isso? Então selecione o quadro e, na parte inferior, você terá uma opção Exportar. Agora, a partir daqui, você pode selecionar opções de exportação. Então, que tipo de formato único, talvez PNG JPEG ou SPC. Digamos que eu queira JPG. E então eu vou clicar em Exportar casa. Em seguida, ele vai baixar. Agora, se eu clicar nele, poderei ver o design. Ok, este é o formato e eu posso simplesmente ampliar, e então eu posso simplesmente ver todo o design no formato JPEG. Você também pode tentar outro formato. E parece muito bom. Ok, então, desta forma, você pode baixar cada quadro que você projetou. Agora, vamos baixar o quadro de inscrição, então o quadro de aprovação elegante. E na parte inferior, você pode simplesmente dizer Exportar novamente, JPEG, e então você pode exportar, inscrever-se ritmo. Agora, se eu clicar na página de inscrição, agora podemos ver nossa página de inscrição foi baixada. Nós baixamos nossa página de inscrição. Agora clique na página de login e ela vai mesmo. Portanto, não importa quantos você tenha. Você pode simplesmente selecionar seu quadro e, em seguida, você pode baixá-lo. E você também pode, você também pode baixar duas vezes, três vezes, quatro vezes talvez você precise arquivar e você pode simplesmente selecionar, você pode adicionar várias vezes, então ele vai baixar três vezes. Então eu preciso de apenas um. Então, vou selecionar JPEG e, em seguida, exportar o login. E deixe-me verificar para que possamos ver que nossa página de login está aqui. Agora, o mais importante é que como compartilhar esse arquivo com qualquer pessoa. Então você poderá ver a opção chamada Compartilhar, clicar nela. E então aqui você pode ver algumas instruções. Então, apenas para lê-lo com atenção. Aqui eles estão dizendo que, para adicionar editores, mova rapidamente esse arquivo de trabalhos para um projeto. Você pode fazê-lo em um arquivo de projeto e , em seguida, você pode adicionar tipos diferentes. Assim, você pode adicionar o endereço de e-mail das pessoas e, em seguida, elas recebem um convite. E aqui você pode ver Definir papel dele. Por exemplo, você pode apenas dar permissão a eles para ver. Você não quer dar permissão a eles para editar. Ok, então agora se você selecionar pode comê-lo e se você colocar o Emulab e, em seguida, se você enviar o convite , a pessoa receberá o convite terá acesso ao seu, este quadro para todos os seus arquivos neste projeto para editar e atualizar. Certo? Se você quiser apenas mostrá-los, então você pode simplesmente clicar em pode visualizar. E então você também pode selecioná-lo. Qualquer pessoa ouvindo, apenas pessoas convidadas para este arquivo e muita opção de segurança que eles têm. E, mas, em geral, você também pode clicar no link Copiar. Então, para terminar com este link, você pode compartilhar e, em seguida, qualquer pessoa pode acessar esse link. Por exemplo, se eu adicioná-lo aqui, terei uma opção. Então, já estou neste navegador. Então, definitivamente, eles terão uma opção, mas vamos abrir um navegador de pássaros diferente no navegador cognitivo. E aqui vou colá-lo. E vamos ver o que podemos ver aqui. Então, ele vai carregar a peça. E espero que possamos ver nosso projeto aqui. E ainda está levando algum tempo. Certo, legal. Então, aqui está nosso arquivo completo. Você pode ver que este é o nosso arquivo completo. Não estamos presos. Figma está nos perguntando o que podemos ainda acessar nosso design, acessar nosso arquivo e, em seguida, podemos vê-lo, mas não temos acesso para editá-lo. Podemos fazer qualquer alteração aqui. Podemos mudar qualquer coisa aqui. Podemos apenas vê-lo aqui. Podemos apenas vê-lo aqui. Legal. E então eu posso fazer isso. Esta é a página inicial, este é o ritmo de inscrição, e este é o par de login. Certo? E é assim que vai parecer. Então, é assim que você pode compartilhar seu projeto. Você projetará com qualquer pessoa, você pode baixar, você pode dar acesso ao seu projeto a qualquer pessoa. E é assim que funciona principalmente. Espero que você tenha plantado e obrigado por se inscrever neste curso.