UI/UX do Figma: crie um projeto completo de aplicativo de comércio eletrônico de loja de sapatos com prototipagem avançada

1. Apresentação: Bem-vindo a esta aula. Você está animado para dar vida às suas ideias de design de aplicativos no FiCMA Se você é completamente novo UIUX ou já tem alguma experiência em design, esta aula foi projetada para guiá-lo passo a passo, ajudando você a transformar conceitos em reais de aplicativos móveis profissionais Olá, meu nome é YatanHotri e estou entusiasmado por co-ministrar esta aula com Abdu Salamhab Nós o guiaremos desde o básico do FIGMA até o design de protótipos interativos avançados que você pode exibir com orgulho em seu design estou entusiasmado por co-ministrar esta aula com Abdu Salamhab . Nós o guiaremos desde o básico do FIGMA até o design de protótipos interativos avançados que você pode exibir com orgulho em seu portfólio. Na primeira parte do curso, apresentarei os fundamentos da FIGMA Você aprenderá como configurar seu projeto com eficiência, explorar todas as ferramentas essenciais e criar alguns protótipos de Paul que ajudam a dar vida às suas ideias Essas habilidades fundamentais facilitarão que você enfrente desafios de design mais complexos posteriormente no curso Em seguida, Abd Sala Mahbub assumirá e o guiará na criação um aplicativo móvel completo de comércio eletrônico para lojas de calçados Você aprenderá como estruturar um aplicativo do início ao fim seguindo as práticas baseadas no setor e criando uma experiência de usuário aprimorada Ele mostrará como projetar componentes reutilizáveis, manter projetos de sistema consistentes e criar protótipos interativos avançados que parecem um Ao longo desta aula, também nos concentraremos na criação de guias de estilo abrangentes, implementação de tipografia e sistema de cores e na organização de elementos de design de forma tornar seu trabalho escalável Você trabalhará em todas as telas importantes de um aplicativo de comércio eletrônico do mundo real , desde listas de produtos e páginas de detalhes do produto até o cartão, o SARS de checkout e a tela de navegação por categoria No final deste curso, você terá apenas um protótipo de aplicativo finalizado terá o conhecimento e a confiança para criar seu próprio projeto a partir do STRS Você entenderá como criar um sistema de design coeso, criar uma experiência de usuário suave e apresentar protótipos profissionais interativos que podem melhorar seu portfólio e impressionar clientes ou empregadores em potencial. potencial Então, se você estava pronto para mergulhar no FICMA, melhore suas habilidades de UIUX e crie um protótipo completo e completo melhore suas habilidades de UIUX e crie um protótipo completo e completo . Essa aula é para você. Junte-se a nós e vamos levar suas habilidades de design para o próximo nível. Estamos ansiosos para ver o que você criará. Vamos começar. 2. Crie um arquivo e estrutura básica do Figma: Bem-vindo a esta palestra. Nesta parte, vamos começar a trabalhar em nosso Figma. Portanto, ao fazer login neste site da Figma, você deve ver esse tipo de interface Se você é novo e não trabalhou em nenhum projeto , deve ver algum espaço vazio ou talvez algum projeto Figma embutido Mas, em geral, na parte superior, você deve ver esse tipo de opção e, a partir daqui, clicar no design para começar com o projeto Figma Então, quando você estiver aqui, verá esse tipo de interface. Então, em primeiro lugar, vou dar uma visão geral do Figma para que vocês possam entender como ele funciona e que tipo de opções temos aqui Por exemplo, no site, temos essa seção onde podemos ver as páginas, as camadas. No lado direito, teremos esse design e alguns estilos variáveis e algumas outras opções que aparecerão aqui e também o protótipo, e na parte inferior, temos essa barra de ferramentas Então, primeiro, vamos falar sobre essas poucas coisas, como as básicas. E depois de praticar todas essas coisas básicas, começaremos a trabalhar em um projeto real do Walt para que vocês possam ter ideias claras de como esse figma funciona e como trabalhar em um projeto real No lado esquerdo, você tem essas opções. Um é chamado de arquivo e o outro é chamado de ativos. Portanto, dentro dos ensaios, teremos todas as bibliotecas e os componentes que prepararemos E na seção de arquivos, teremos duas opções. Uma são páginas e a outra são camadas, você pode adicionar várias páginas. Você pode ter quantas páginas quiser, por exemplo, talvez uma página queira preparar a tipografia em uma página, você queira preparar cores e uma você queira preparar cores passe por um design de baixa fidelidade e outra pague um design de alta qualidade, ou você pode ter E, claro, você pode renomear essas coisas. Então você tem essas opções. Você pode renomear o nome do ritmo. Por exemplo, vou dizer que o sobrenome é a cor deste, algo assim. E então é assim que funciona. E na parte inferior, temos todas as ferramentas disponíveis no Figma Por exemplo, aqui você pode ver a ferramenta manual, essas coisas, e aqui temos essa seção de moldura e a ferramenta de corte E aqui temos linha retangular, seta, ponta, polígono, éster e imagens Cada uma das ferramentas tem diferentes tipos de uso. Então, aprenderemos todas essas coisas uma por uma, e então isso é para a ferramenta de texto, e isso é para comentários e ações, e essas são as opções. E na barra lateral direita, você terá algumas opções. Você pode ver nos estilos, texto, efeito de cor e mais opções que aparecem quando adicionamos qualquer tipo de moldura. Para começar, por exemplo, digamos que estamos na fase dois agora. Ok. Então, para começar com o projeto Figma de verdade, por exemplo, se você quiser criar um aplicativo móvel, UIUX ou se quiser criar um aplicativo web, UUX, então, primeiro, você precisa E aqui você verá essas opções. Então, ao clicar na moldura na barra lateral direita, você verá muitas opções APR aqui. Por exemplo, para telefone , eles têm essas opções, Android, iPhone, e você pode escolher qualquer uma delas. Para tablet, eles têm essas opções. E para o Dkstop, por exemplo, se você estiver trabalhando para design de projetos web, poderá ter essas opções Você pode escolher qualquer um desses papéis, mídias sociais, comunidade Fika ou qualquer coisa Ok. Então, eles têm muitas opções aqui. Então, primeiro, vamos ver como é a aparência de uma moldura de telefone. Por exemplo, se eu selecionar iPhone 16 P e clicar nele, você verá uma moldura aparecendo aqui. Então esse é o layout. Esse é o quadro que você pode definir. E você tem a opção de aumentá-lo, diminuí-lo ou qualquer coisa, você também pode remover este, basta selecioná-lo no teclado, basta pressionar o botão Voltar ou o botão Deliciar. Então, novamente, vou adicionar uma moldura aqui e, digamos que desta vez, vou escolher o iPhone seis. É assim que a moldura seis do iPhone ficará. Então, dessa forma, você tem várias opções. Eu posso adicionar mais moldura aqui. Por exemplo, vou adicionar aqui o Android Android medium. Então é assim que vai ficar. Então, dessa forma, você pode ter vários quadros. Vamos remover esse. E se você, por exemplo, digamos que eu queira ter um iPhone 14 plus, então ele ficará assim. Você pode simplesmente adicionar um tipo diferente de quadro clicando nessas opções ou também pode duplicar um quadro Por exemplo, digamos que em nosso projeto de aplicativo móvel, queremos ter o mesmo quadro para toda a tela, todas as páginas. Então, nesse caso, o que faremos é simplesmente selecionar este e pressionar Control D para duplicar este Então agora eu tenho dois. Então eu posso novamente duplicar isso. Eu posso pressionar Control D no teclado, então funcionará. Isso duplicará a mesma coisa. E você também pode fazer isso daqui, por exemplo, iPhone 16 assim, ou era assim. E se você soltar essas coisas, Pigma mostrará esse tipo de coisa, como o espaço e tudo Agora, ao selecionar um quadro aqui, você terá muitas opções aqui. Por exemplo, você tem opções para posicionar esse item, rotação, layout, conteúdo do clipe, aparência, cor e efeitos de traçado. Então, todas essas opções você terá que usar quando quiser criar algo. E a partir daqui, você também tem opções para renomear este Está bem? Então você pode simplesmente usar este e colocar um empréstimo Por exemplo, este é para a página inicial. Talvez possamos dizer página inicial ou tela inicial ou o que você quiser E então, talvez nesta , possamos dizer detalhes, tela de detalhes. E talvez esse seja o nome? Talvez uma tela. Apenas um nome aleatório, nome real. Só estou dando uma ideia de como funciona, ok? E deixe-me remover esse, não precisamos de tudo isso. Então agora temos essa tela de árvore aqui, ok? E aqui, podemos ter vários designs. Por exemplo, digamos que queremos ter um círculo. Então, para ter um círculo, temos uma ferramenta chamada ferramenta Ellipse. Então, quando você deslizar sobre ele, terá esse tipo de cursor no mouse, e então você pode simplesmente adicionar esse chef redondo. Você pode simplesmente desenhar isso. Você pode brincar com isso. Você pode simplesmente fazer essas coisas. Você pode ter esse. Por exemplo, quando estiver aqui, você também poderá personalizá-lo assim, conforme desejar. Então, agora temos esse. Então, por padrão, ele terá uma cor e, nesse caso, a cor é cinza. Agora, quando você vende este na barra lateral direita, não só para este Qualquer coisa que você adicionar em sua moldura ou em qualquer lugar ou talvez esteja criando um componente, você terá todas as opções de design no lado direito. Então você verá essas opções aqui. Você pode ver a dimensão aqui e a aparência e também a cor. Por exemplo, digamos que queremos mudar a cor. Está bem? Então este é o item, então eu vou clicar nele, e então uma cor pld aparecerá aqui, e então você tem opções para mudar a cor Agora, veja se a cor está mudando. Então, dessa forma, você pode adicionar cor. E digamos que queremos ter uma borda ao redor desta nas rotas, como em todos esses cantos. Então, como podemos fazer isso. Então, para adicionar uma borda, você tem essa opção chamada Estrok clica neste ícone de adição Ok. E você terá opção de escolher o estroklor Por exemplo, digamos que eu queira ter isso como estroquelor e então não esteja claramente visível no momento porque é muito pequeno Então, o que podemos fazer aqui? Precisamos mudar o peso do traço. Então, digamos que sejam cinco agora. Ok. Agora, você verá que temos esse tipo de derrame. Ou talvez vamos mudar a cor do traço para preto, talvez ou vermelho. Sim, digamos que seja vermelho, então você vê essas coisas. Está bem? Agora, teremos essas opções para surtir efeito. Por exemplo, queremos ter uma sombra. Então, o efeito é algo que temos aqui. Como se você pudesse ver a sombra projetada. Aparecerá essa sombra projetada, desfoque de fundo, ruído e outras opções Então, digamos que temos essa sombra. Agora ele criou uma sombra. Deixe-me remover esse bastão. Então, agora, depois de adicionar algo e se quiser remover este , você terá essas opções. Portanto, há uma remoção, há um ícone de sinal de menos, então você pode simplesmente clicar nele e continuar Está bem? Agora temos isso e você pode ver essa pequena sombra. E vamos adicionar essa sombra. Você tem essa opção para posicionar a sombra. Assim, você pode alterar o valor, por exemplo, cinco e depois cinco e depois cinco. E também tem essas opções. Você também pode usar a biblioteca, o e então você tem opções para ter a cor da sombra. Então, agora a sombra está assim. Dessa forma, você pode personalizar essas opções. Tudo bem Agora, digamos que queremos ter mais opções aqui. Talvez queiramos ter alguma coisa. Digamos que queremos ter um texto dentro desse círculo. Então, para adicionar um texto, basta clicar nesse T e depois pressioná-lo. Então, quando você pressionar, teremos opções para escrever o texto em um momento. Então, é selecionado assim. Então, primeiro, vamos selecionar o e depois selecioná-lo aqui. Então você verá esse indicador e poderá adicionar o texto aqui. Por exemplo, digamos que queremos dizer Apple. Oh, desculpe. Então, digamos que é maçã. E agora, quando essa maçã aparecer aqui , podemos arrastá-la para o centro. Mas você notará que é muito pequeno, então podemos aumentar o tamanho. Então aqui, no lado direito, novamente, como eu disse, qualquer design que você fizer, ele vem no lado direito. Então aqui você verá as opções 12, você pode aumentar o tamanho. Digamos que 24. Ok. Então, se eu perder 24 , terei essas opções aqui Então, a Apple está agora no centro desse círculo. E você também tem muitas opções. Por exemplo, você pode simplesmente alterar o estilo tipográfico. Então, por exemplo, você pode alterar esse parafuso semirroscado, e ele tem muito estilo de fonte Então, você pode definitivamente escolher todas essas opções aqui. E tem algumas outras fontes. Portanto, você pode definitivamente escolher essas fontes se quiser usar. Ok, por exemplo, isso , isso e talvez isso. Então, vamos usar uma fonte extra em negrito normal por enquanto. Tudo bem, agora temos essa maçã e esse círculo. Então, você aprendeu como criar um projeto e como ter várias páginas, adicionar moldura, usar algumas ferramentas e adicionar esta. Então você tem algumas ideias básicas. Ok. E no site do laboratório na camada, ele adicionará todos esses itens que você adicionar. Então você vê essa tela A, tela inicial da tela traseira. Dentro da tela inicial, temos duas opções. Um é esse texto e o outro é esse banquinho LLF. Então isso aparece no seu lapsit. Portanto, você também pode segmentar essas opções aqui e, se quiser, também pode alterar o nome a partir daqui. Ok. Então, vou parar este vídeo aqui para esta palestra, e continuaremos a partir da próxima palestra 3. Usos das ferramentas do Figma: Bem-vindo de volta mais uma vez. Nesta parte, continuaremos trabalhando novamente. Então, em nossa parte de prefácio, discutimos como podemos criar o projeto FIMA e essa estrutura básica definida Ok, agora nesta parte, discutiremos mais sobre essas ferramentas da FICMA Então, vamos falar sobre essa ferramenta retangular. Então, a ferramenta retangular é algo que pode gerar um retângulo como Ok. Então você pode ter dessa maneira. Se você tem, por exemplo, um botão, um botão se parece com isso. E depois de selecionar isso, você pode fazer esse tipo de design usando um retângulo E no lado direito, você terá muitas opções. Assim, você também pode personalizar o branco a partir daqui. Por exemplo, eu quero ter 100 brancos e depois colocar 100 aqui, e então isso reduz aqui. Então é assim que você também pode controlar suas ferramentas ou qualquer design a partir da opção de layout. Assim, você também pode aumentar um pouco. E no campo, você tem essas opções para adicionar a cor de fundo ao botão. Você pode escolher qualquer cor que quiser. Isso não é um problema. Então esta é a placa colorida para isso, e você tem essas opções. Agora você também tem opções para jogar com esse tipo de gradiente que tem, por exemplo, gradiente linear radial radial, e esse tipo de coisa você E talvez angular assim e o diamante fique assim. Então, esse tipo de chef você também pode adicionar a partir disso. Está bem? Então você clica nele, vai até esse campo e escolhe a cor daqui, e então você tem essas opções aqui. Você também pode escolher a cor desse design, e ele tem algumas outras opções aqui para imagens e tudo mais. Então, se você quiser, por exemplo, escolher esse rádio, parece que agora você também pode mudar a cor daqui para aquele chef radial em particular, ok? Dessa forma, você também pode jogar com isso, ficará assim agora. Tem muitas opções, então você pode escolher o que precisar. E tudo bem, então deixe-me voltar para o vermelho. Está bem? Essa pequena luz, e parece melhor. Ok, agora você tem esse retângulo e também pode adicionar uma borda a partir daqui Você também pode fazer o efeito, por exemplo, a sombra aqui, podemos adicionar sombra projetada e, em seguida, podemos escolher o raio da borda Por exemplo, eu quero ter um raio de borda dos quatro cantos Então, aqui você verá que existe uma opção chamada raio de canto Então, aqui, se eu escolher 20, obterei uma borda de todos os cantos. Ok. Mas você também tem a opção de escolher o canto. Então, se você clicar nele, não aqui, aqui, ao clicar nele, então você tem essa opção para controlar a borda. Por exemplo, no canto esquerdo, quero ter apenas dois e, em seguida, a parte inferior ficará assim. Digamos que eu também queira ter dois no canto inferior direito. Digamos que dois. E agora o botão ficará assim. Dessa forma, você pode personalizar seu design. Então você clica nele e depois brinca com essas coisas. Então você também tem essas opções para mudar o oposto disso, mas tudo bem, eu acho que por enquanto Por isso, aprendemos a usar a maioria dessas opções aqui. Nós temos o layout. Essa é a largura e a altura, e essa é a posição. Então, se eu arrastar essa coisa, você pode ver na posição que essas coisas estão mudando. Então, essas são as posições, e você também tem as opções de girar a partir daqui Então, se eu fizer assim, assim, você pode girar essas coisas E então você verá que essa rotação está sendo alterada e você também tem opções para jogar com esta. Então você está aprendendo os usos de todas as ferramentas. Então você também pode gostar disso. É para o flif horizontal e para a partícula flaif Então você também pode controlar essas coisas assim. E essas são as opções de alinhamento. Então, se você quiser alinhar, por exemplo, deixe-me girá-lo. Vamos fazer com que seja zero, como um normal. E se eu colocar zero e ficar assim, digamos que você tenha esse botão aqui digamos que você tenha esse botão aqui e agora queira alinhá-lo corretamente Então, aqui você tem a opção chamada alinhamento. Então, se eu for a primeira coisa, por exemplo, não quero criar nada para este. Eu quero ter um design para este. Ok, então eu coloco este aqui e depois clico no alinhamento Então eu clico no alinhamento. Esquerda, vai para a esquerda. Eu clico na parte superior, como no centro, Alinho o centro horizontal, veja, ele vai aqui e vai para o lado direito E vai para o topo, se eu colocar este. E tem o nome. Você pode ver alinhar a parte superior e a partícula alinhada e, em seguida, alinhar a parte inferior Veja, isso chama alinhar fundo. Está bem? Dessa forma, você também pode usar essa ferramenta de alinhamento e, em seguida, dizer no centro Está bem? Agora aprendemos esse uso dessa ferramenta aqui, alinhamento, posições, rotação, layout, aparência, cor, traçado e também esses raios de canto Ok. Então, aprendemos o UJS da ferramenta retangular Agora, vamos falar sobre já usarmos a ferramenta Ellipse. Então, as ferramentas de linha são assim. Então, é só desenhar uma linha. E depois de ter uma linha, você também tem as opções para controlá-la. Então, o peso está aqui, digamos, eu quero colocar cinco. Então é assim que a ferramenta de linha funcionará. Agora temos essa ferramenta de seta. Então, a ferramenta de seta tem esta aparência. Basicamente, ele projetará uma flecha. E depois de selecionar essa ferramenta, você também tem opções para alterá-la. Digamos que o peso seja cinco. Agora vai ficar assim. E da mesma forma, você também tem todas essas opções para jogar. Agora, já trabalhamos com a ferramenta Ellie. Agora vamos falar sobre a ferramenta de polígono. Então, a ferramenta poligonal tem esse tipo de chef, esse tipo de formato E ao clicar duas vezes nele, você terá opções como a exibição de quatro cantos e, em seguida, você pode simplesmente alterar a aparência dessa forma, se quiser. E então você tem isso. E agora, da mesma forma, você também pode alterar a cor de fundo das ferramentas dessa forma. Agora temos isso e você também pode aumentá-lo fazendo essas coisas. Então, agora vamos usar a ferramenta Ester, então ela basicamente criará um chef Ester, nada mais. Então, depois de criar esse chef Ester, tudo bem, você terá opções para mudar a cor. Tipo, você tem as opções. Você pode mudar simplesmente para mudar a cor. Além da contagem, por exemplo, temos cinco cantos agora, um, dois, três, quatro, cinco, então você pode mudar esse canto, digamos oito, e então eu coloco assim. Em seguida, mudou para oito cantos. Nós temos essas coisas. Além disso, você pode alterar o alto Timon mostrado, rotação e o alinhamento e tudo Então, aprendemos a maioria das ferramentas aqui e, em seguida, temos uma ferramenta de texto. Essa ferramenta de texto é usada basicamente para adicionar um texto. Então você quer adicionar um texto, seleciona nele, depois clica nele e pode simplesmente escrever qualquer texto, um novo texto. Ou qualquer texto que você queira adicionar. Depois de adicionar um texto, basta arrastar e soltar e posicioná-lo em qualquer lugar. E aqui temos uma ferramenta para caneta e uma ferramenta para lápis. Então, uma ferramenta de caneta é algo que você pode desenhar assim. Então, talvez você esteja em uma situação em que precise de uma área ou círculo personalizado para desenhar assim, ao redor da forma, ao redor de uma forma como esta, assim. Então, você pode simplesmente clicar na ferramenta de caneta e depois desenhar seu desenho como desejar e finalizá-lo no final. Agora você terá esse f e o fechará. Agora você tem esse círculo. E agora, depois de ter essas coisas, você pode simplesmente adicionar todo o design. Você também tem essa opção. Ok, vamos fazer essas coisas e agora você pode simplesmente alterar a cor do traçado. Então, essas linhas são chamadas de traçado. Está bem? Então você pode simplesmente mudar a cor assim. Essa é a cor do traçado e também podemos alterar o peso do traçado. Então é um, e se eu colocar cinco, ele ficará assim. Então, o traço se parece com isso. Está bem? E agora você também terá a opção de adicionar o preenchimento. Então você pode simplesmente preencher este item. Então, dessa forma, você pode ter um design personalizado. Você pode inserir este item usando essa ferramenta de caneta, e essa é a ferramenta de lápis Então você pode simplesmente desenhá-lo como um lápis normal. Nada mais. Depois de desenhar algo com isso , você também tem opções. Você pode simplesmente alterar a cor do traçado a cor úmida e depois essas coisas. Por exemplo, OK, desculpe, vamos selecionar isso e, em seguida, você tem essa caneta. Assim, você pode escolher a cor da caneta dessa forma, apenas uma caneta normal que temos em outro software. Então, isso é tudo por enquanto para todas essas ferramentas básicas. Espero que vocês tenham ideias gerais de como podemos usar essas ferramentas e como podemos. Então, uma vez que você deslize essas ferramentas, seu mouse sempre terá essas opções Então, em geral, você pode clicar neste. Então você terá essas opções regulares, teclado normal do mouse, como o símbolo do mouse. Então, espero que vocês tenham aprendido todas as ferramentas e, na próxima parte, começaremos a aprender mais técnicas. Então, eu vou parar essa palestra aqui mesmo. Nos vemos na próxima palestra. 4. Agrupando itens no Figma: Bem-vindo a esta palestra. Nesta parte, começaremos a aprender algumas outras técnicas e ferramentas. Por exemplo, então aprendemos todas as ferramentas. Então, agora precisamos aprender alguns atalhos e as dicas básicas ou técnicas básicas para criar um aplicativo móvel complexo, UIUX ou WebApp UIUX Então, uma coisa normal que precisamos aprender é o agrupamento. Ok, então o que é um agrupamento? Então, quando usamos vários itens, como várias ferramentas, e queremos agrupá-los para repetir essas coisas. Por exemplo, temos essa maçã aqui e um texto aqui. Agora, isso não é um grupo no momento. Então, se eu quiser duplicar essas coisas, por exemplo, a mesma coisa que preciso escrever aqui duas vezes, talvez três vezes, quatro vezes, então eu não posso fazer isso Se eu remover este, por exemplo, ops. Então, se eu quiser remover este, você verá que o texto não está aqui e o texto está aqui, ok? E esse é o círculo. Então, precisamos agrupar esse texto e a elipse, círculo redondo. Então, como podemos fazer isso. Então, deixe-me colocá-lo na posição anterior. Então, agora temos essa posição. Então, eu quero agrupar essas duas coisas para que eu possa reutilizá-las ou colocá-las juntas em qualquer lugar Então, para fazer essas coisas, preciso selecionar essas duas opções. Podem ser vários itens, não apenas dois. Então, por enquanto, temos apenas essas duas opções, como esse texto e essa elipse Assim, podemos simplesmente pressionar Control e selecionar isso e também o texto. Ok, ou você também pode selecioná-lo aqui. Por exemplo, você pode pressionar Control, selecionar o texto e a elipse e, em seguida, esses dois são Agora você pode clicar com o botão direito do mouse. Então, ao clicar com o botão direito do mouse, você verá muitas opções. Então, aqui você descobrirá a chamada seleção de grupos. Então, aqui você também pode ver a tecla de atalho. Assim, você pode simplesmente pressionar Control plus G no teclado para agrupar essas coisas, ou você também pode selecionar essas duas opções ou quaisquer itens que deseja ter em um grupo e, em seguida, pressionar essa seleção de grupo. Está bem? Agora, essas coisas se tornam um grupo. Então, aqui você pode ver o grupo e agora, se eu clicar nele, essas duas coisas estão no grupo e, por padrão, ele fornece um nome de grupo. Então, se quiser, você também pode alterar o nome do grupo. Então você terá essas opções chamadas nome. Então, em vez do grupo um, você sempre precisa escrever um nome significativo. Por exemplo, quando você está trabalhando em um projeto real , você terá um cenário diferente. Você terá que agrupar itens diferentes. Então, obviamente, você colocará um nome significativo para que, posteriormente, possa sempre identificá-lo e editá-lo ou atualizá-lo com base nos do seu cliente ou nos requisitos do projeto. Então, se você colocar aleatoriamente grupo um no grupo três, os diferentes, então você sabe realmente o que está dentro de um grupo um ou o que é um grupo dois Então, precisamos dar um m significativo. Por exemplo, podemos dizer, hum, podemos dizer círculo ou talvez possamos dizer itens de frutas da lista de frutas. Qualquer coisa que seja significativa para nós temos a maçã como fruta e podemos dizer sobre frutas. Simples. Agora, uma vez que eu agrupo essas coisas , você pode observar aqui sempre que eu clico nessas coisas, ele seleciona a coisa toda. Então eu posso simplesmente arrastá-lo aqui, eu posso arrastá-lo aqui, eu posso arrastá-lo para qualquer lugar Portanto, esse é o benefício do agrupamento. Então, ele agrupa todas essas duas coisas. OK. Agora eu também posso dizer que eu quero ter dois, três ou quatro itens aqui, como eu posso fazer essas coisas. Então, eu posso simplesmente selecionar este como seu grupo. Agora eu posso pressionar Control D para duplicar este. Então, pressionei Control D no meu teclado e ele duplicou dois itens Como você vê, são itens duplicados. E agora, se eu pressionar Control D novamente, ele adicionará mais opções aqui como esta. Eu posso duplicá-lo. E você também pode ver isso especialmente. Agora, se eu pressionar Control D mais uma vez , ele duplicará mais opções, mais itens como este Dessa forma, você pode duplicar itens. A mesma coisa que você pode duplicar. Então, agora deixe-me reorganizar. Deixe-me remover essas coisas. Eu acho que é melhor. Não precisamos mais disso. Então, vou remover essas coisas e depois colocá-las como aqui. Agora podemos duplicar isso assim. Então, se você pressionar Control D e, novamente, pressionar Control D. Será assim. Está bem? Curta isso e você pode reorganizá-lo da maneira que quiser. Está bem? Esse é o benefício do agrupamento. Você pode ter assim. E agora você quer, se quiser ter uma cor diferente para cada item do grupo, então, definitivamente, você pode fazer isso. E aqui, você verá que, à medida que duplicamos a mesma coisa várias vezes e, dentro disso, você verá que esse grupo é duplicado várias Dentro de cada grupo, temos essas opções. Agora também podemos fazer uma coisa. Também podemos mudar a cor desta. Então, por exemplo, queremos ter uma cor diferente para esse grupo. Então, definitivamente, você pode mudar a cor desse grupo, para que possamos ter esse grupo também. Da mesma forma, você também pode alterar a cor ou o estilo do texto, então você pode simplesmente alterá-lo a partir daqui. Dessa forma, você agrupa essas coisas duplicadas e ainda tem todas essas opções para duplicá-las ou fazer qualquer tipo de design Então esse é o benefício de agrupar itens, ok? Tudo bem, então aprendemos como podemos agrupar coisas, como podemos duplicar itens e como também podemos mudar esse nome e todos esses itens Está bem? Agora, queremos discutir sobre, hum, como podemos criar um componente e usar esse Por exemplo, agora estamos na fase um. Talvez na fase três, tenhamos uma tela diferente. Então, vamos criar outro quadro na fase três. Por exemplo, neste quadro, podemos dizer Iphone 16, e esse é o quadro. Digamos que temos e podemos dar a ele um nome de produto ou algo assim. Está bem? Então, na página três, também podemos dar um nome a ela. Então, vamos renomear isso em vez de pausar. Podemos dizer fase do produto, por exemplo, por enquanto, e podemos chamá-la de fase inicial mínima Ritmo principal ou qualquer outra coisa. Por enquanto, vamos dar esse nome aleatório. Mas quando trabalhamos em um projeto real, teremos opções como cor, tipografia, baixa, alta velocidade e, em seguida, design do sistema e nome Tudo bem, então aprendemos como podemos duplicar essas coisas, esses itens e tudo mais, como podemos ter vários Agora, eu quero ter uma coisa. Quero te ensinar uma coisa, por exemplo, esse design ou talvez um botão que precisamos usar em várias páginas em vários quadros, como podemos fazer isso. Obviamente, não faz sentido criar a mesma coisa repetidamente. E por esse motivo, temos opções chamadas preparar componente que aparecerão aqui, e então teremos uma opção ou você pode dizer que é uma espécie de biblioteca, e então podemos usá-la em qualquer lugar nosso projeto ou páginas. Então, discutiremos isso na próxima palestra. Vou parar aqui e ver vocês na próxima palestra. 5. Aprenda a criar componentes reutilizáveis no Figma: Oh, bem-vindo de volta mais uma vez. Nesta parte, aprenderemos como podemos preparar um componente. Então, o que é um componente? Um componente é uma espécie de biblioteca para que possamos reutilizá-lo em várias páginas Por exemplo, temos essa página de produto e, agora, se quisermos ter o mesmo botão, não temos a opção de acessar nenhum design dessa página. Está bem? Portanto, essa é a razão pela qual precisamos aprender como criar um componente para qualquer coisa. Por exemplo, pode ser um botão, pode ser uma barra inferior, uma barra navegação ou qualquer coisa que seja reutilizada em várias páginas ou em vários quadros. Então, aqui no ativo, nosso componente aparecerá. Então, no momento, não temos nenhum componente. Esses são apenas um componente embutido em bibliotecas que vem da Figma Então, agora, primeiro, eu vou vir aqui e vamos criar esse componente de botão. Então, primeiro, vou adicionar um texto para esse botão. Então, vou definir esse texto aqui. Então, posso dizer que é um envio. Ok, então este é um botão de envio. Eu posso colocá-lo aqui no centro. Agora, não é um grupo, então você pode ver o texto e o retângulo separados Então, primeiro, antes de fazermos ou prepararmos qualquer componente, precisamos transformá-lo em um grupo. E então eu vou fazer disso um grupo. Podemos dizer seleção de grupos. E aqui, eu vou renomear este. Então, posso simplesmente dizer que é um botão de envio. Agora, como grupo, posso simplesmente arrastar e em qualquer lugar, e continua o mesmo. E eu vou duplicar essas coisas. Então, vamos criar outro botão Voltar. Então, eu vou dizer que este é um botão B. Então esse é um botão Voltar, e eu vou colocá-lo no centro. Além disso, vamos mudar o nome do grupo porque esse não é o botão Enviar, então preciso colocar um nome significativo. Em vez do botão de envio, será nosso botão Voltar. Então, será nosso botão Voltar. Agora eu quero ter uma cor de fundo diferente para o botão Voltar, selecione o botão B, e então você pode vir aqui na seção de cores, e aqui você pode mudar essa cor. Então, talvez eu escolha essa cor. Parece bom. Então, essa cor só para ter uma aparência diferente. Certo, agora isso é um grupo e esse é um botão de grupo, mas não é um componente no momento. Então, para torná-lo um componente, primeiro, preciso clicar nele e, em seguida, vou ver aqui uma opção chamada criar componente. Então, vou clicar nesse componente Criar. E então ele se torna componente, e então você vê que tem um ícone diferente e diz que é um componente. Agora, se eu chegar a esse diretório de ativos , aqui você verá um componente criado neste arquivo, eu clico nele e você verá essa opção aparecer aqui. Agora vamos fazer desse botão também um componente similar. Então, vou criar um componente e ele aparece aqui. Então, esses dois botões serão um componente aqui. S, e o ícone também foi alterado. Agora, a partir desse arquivo de ativos, posso reutilizar este Por exemplo, esse botão Voltar eu quero colocar neste espaço, e esse botão Voltar eu quero colocar neste espaço. Assim, podemos usá-lo quantas vezes quisermos. Agora, se eu chegar a essa base de produtos aqui, e à base de produtos, não temos nada. Não temos nenhum design aqui, mas agora temos um componente. E podemos simplesmente usar esse componente aqui. Agora temos essa opção. Então, vou adicionar esse botão de envio aqui. Tudo bem Dessa forma, você pode reutilizar seu componente E você pode ver que isso é um componente neste espaço e aparece aqui e em todas essas coisas. E, claro, você tem opções para mudar essas coisas. E não é só para o botão, pode ser para qualquer coisa. Por exemplo, eu quero fazer deste um componente único. Então já é um grupo, viu? Podemos movê-lo e, em seguida, vou clicar nele e, mesma forma, criar um componente. Agora chego a esta página de arquivo. Então, se eu abrir esta página do produto aqui e clicar no ativo, agora veremos três componentes, e um é esse, e eu posso simplesmente arrastá-lo aqui. E da mesma forma, posso duplicá-lo para ter várias opções Então, colocá-lo várias vezes e eu quero ter mais assim e depois mais assim. Mais como isso. E aqui assim. Dessa forma, você pode reutilizar seu componente e também tem opções para alterar a cor ou o design, se desejar Por exemplo, eu quero ter uma cor diferente para isso. Digamos que esse. E também para este, eu quero ter uma cor um pouco diferente, talvez essa cor. Assim. Dessa forma, você pode reutilizar seu componente e também personalizar o design Então, você aprendeu como preparar um componente para qualquer projeto e reutilizar esse item No próximo caminho, mostrarei como podemos fazer a rolagem horizontal que você frequentemente precisará ao projetar um aplicativo Então, vou parar esse vídeo aqui e começaremos a trabalhar na próxima palestra. Nos vemos na próxima palestra. 6. Prototipagem básica no Figma: Bem-vindo de volta mais uma vez. Nesta parte, começaremos a trabalhar em nossa prototipagem. Eu queria adicionar palestras sobre rolagem horizontal, mas essa visualização de rolagem horizontal está relacionada algumas outras coisas, como uma visualização de rolagem horizontal específica e como podemos somar todas essas coisas Então, decidi adicionar isso ao projeto real em vez de adicioná-lo separadamente , porque só é possível entender o cenário real dele. Então, em vez disso, vou mostrar a parte básica da prototipagem nesta palestra que é muito importante, mas aprendemos a prototipagem avançada em nosso projeto real que faremos Então, nesta palestra, vou dar uma ideia geral para que você tenha uma ideia de como essas coisas funcionam E então aprendemos os usos avançados e reais do protótipo em nosso aplicativo do mundo real que você projetará Nesse projeto que você criará, você terá muitas opções, como alterar o tamanho dos sapatos e também mover uma peça para outra com animação e várias opções. Mas antes de fazermos as coisas avançadas, precisamos aprender o básico da prototipagem Então, vamos começar com o básico. Então, temos três telas agora. E dentro das três telas, eu só quero ter uma prototipagem Ok. Então, antes de fazermos isso, eu só quero adicionar um texto simples aqui para que fique mais organizado ou possamos entender em que espaço estamos. Então, primeiro, vou adicionar um retângulo aqui, um retângulo simples, e depois vou adicionar uma sombra de borda aqui, e depois vou adicionar um texto Então, vou dizer que é uma tela de detalhes. Aqui está a tela de detalhes ou podemos dizer espaço detalhado. E a mesma coisa que precisamos. Então, deixe-me mudar o design, como a cor de fundo. Talvez essa cor de fundo. E para o texto, vou mudar a cor agora. Em vez de preto, a cor será branca, e eu posso simplesmente fazer um pouco grande aqui. Então, o tamanho da fonte, eu vou mudar para talvez 32. Eu fiz assim. Então, vamos mudar para 32. Oh, desculpe, eu vou remover esse branco que eu escolhi. E vamos fazer com que seja 36. Então, detalhe o espaço. E vou fazer disso um grupo para que eu possa duplicá-lo para este Então, vou dizer esse retângulo e, em seguida, esse espaço de detalhes e, em seguida, pressionar G. E eu posso simplesmente mudar o nome aqui Posso dizer que é um título em fase, só um exemplo. E eu vou duplicar isso aqui também. Em vez de espaço detalhado, posso dizer que se trata de pausa Então, vou clicar duas vezes e aqui vamos mudar para sobre Perfect ups. Ok, então temos essas duas coisas. Então, talvez também possamos mudar a cor de fundo um pouco diferente. Ok. Então, agora vou te ensinar como podemos adicionar alguns protótipos básicos entre essa tela e deixe-me remover esse botão Ok, podemos mantê-lo fora desta aqui. Está bem? Então, talvez, caso você não saiba, você também pode colocar seu ícone ou design fora da moldura, e você pode ver que ele aparece assim e todo esse ícone porque o preparamos para o componente, e é por isso que temos esse símbolo. Está bem? De qualquer forma, agora, para adicionar um protótipo entre essas páginas, temos essas opções de protótipo Então você chega a essas opções chamadas protótipo, e aqui, obteremos todas essas opções Então, por exemplo, desse espaço para esse espaço, queremos ter um protótipo Então, deixe-me ter um pouco de espaço aqui. Então, ao clicar no botão enviar e adicionar um protótipo, primeiro você precisa estar nas opções de protótipo Ok, então como queremos fazer o protótipo. Você precisa pensar sobre isso. Então, eu quero ter um protótipo. Quando o usuário clica no botão, queremos ir para esse espaço, ok? E então, se você estiver nessa fase de protótipo, então você terá que mostrar essas opções, viu Então, qualquer pessoa que você passar o mouse sobre esse botão, verá essas opções, esse botão de adição e essas opções aparecendo dos quatro cantos dos quatro lados Mas se você está na fase de design, então está em terra. Então, o que você aprendeu, você aprendeu quando estamos na fase de protótipo, temos essas opções Agora eu posso simplesmente clicar nele, e então eu posso simplesmente conectá-lo a esse espaço. Então, ele está conectado com esse espaço agora. Então, isso significa que quando clicarmos nesse botão, navegaremos até esse espaço, e agora, como queremos navegar até esse espaço? Então, eles têm muitas opções. Ele chama interação, um pop-up se abrirá e aqui você terá a opção de personalizar essas opções. Por exemplo, no gatilho. gatilho significa que, quando clicamos nele , pressionamos ou passamos o mouse sobre ele, há muitas opções que eles têm Mas, por enquanto, vamos manter tudo sob controle. Agora navegue dois. Isso mostra que navegue duas ou B ou encadeie ou role até várias opções que eles têm, mas queremos navegar até. Isso significa que queremos passar desta página para aquela página. E aqui diz o destino. Então você pode ver que todas as páginas que temos, toda a moldura que temos, estão aparecendo aqui. Podemos dizer que temos essa tela de detalhes. Também temos essa tela acima. Ok, também temos opções para conectar esse botão. Então, para isso, queremos ir para o espaço de detalhes, e ele é detectado porque o arrastamos daqui para aqui. Agora, animações, ele vem com muitas opções de animação. Então, eles têm essas opções. Por exemplo, em mover para fora, empurre, deslize , deslize para fora. Digamos que eu escolha o deslizante e, quando estiver deslizando, você poderá ter a opção de ver como fica Então, deslizar significa que ficará assim. E então temos essas opções para alterar a duração. Você pode jogar com a duração. Você pode aumentar a duração. E então tem fácil entrada, saída fácil, entrada e saída fáceis e muitas opções. Então, assim, ele funcionará assim se você escolher assim. E isso te dá uma prévia. Mas se você escolher genta , ela funcionará assim, assim Então você pode simplesmente jogar com isso. Então, para os limites, ficaria assim. Então, podemos simplesmente brincar com isso e entrar EZ, eu vou escolher assim. Está bem? Agora, vou rodar esse protótipo Então, como podemos executar o protótipo? Então, cortamos o quadro inteiro, depois chegamos aqui e clicamos na pré-visualização Então, quando você clicar na pré-visualização, ela mostrará que estamos nesse ritmo. Agora, se tivermos, por exemplo, quando eu pulo neste item, ele não aparece, não mostra símbolo da mão, que é uma espécie de símbolo clicável Mas não está sendo exibido pelo mouse para este item porque não adicionamos nenhuma prototipagem para todos esses Mas adicionamos prototipagem para esse botão. E para esse botão, diz que, como este símbolo de mão, você pode ver. Então, quando eu clico nisso, vamos para esse espaço de detalhes. Mas agora, se eu clicar no botão Voltar, ele não está fazendo nada, ok? Então, não está fazendo nada porque não adicionamos nenhuma animação ou prototipagem para Então, agora eu quero passar do espaço de detalhes para o ritmo inicial ao clicar no botão B. Então, como eu posso fazer essas coisas, eu posso simplesmente clicar no botão Voltar, e então ele vem aqui, e então eu posso simplesmente ir para a tela inicial. E então, novamente, esse pop-up aparece. E nesse caso, vou dizer que é fácil sair assim. E você definitivamente pode escolher qualquer coisa. A animação é um slide in. A animação é deslizante. Eu posso escolher ou talvez empurrar ou talvez. Ok, vamos manter isso assim. Agora vou executar essa prévia, clique no botão enviar. Ele chega ao ditaspace clica na parte de trás e vai para a página inicial Isso. Vê? Então, dessa forma, você pode jogar assim. Agora, digamos que queremos adicionar mais um botão aqui e chegar ao design aqui, e então eu vou duplicar isso Eu posso duplicar isso e vou adicioná-lo aqui. E em vez de enviar, vou dizer que é para, digamos que é por cerca de. Está bem? Então, quando você clica nesse botão A, queremos passar para a tela sobre. Está bem? Agora chegamos ao protótipo, clicamos nesse botão e, tudo bem, isso mostra que ele já está aqui porque duplicamos o mesmo Então, primeiro, vou remover esse. Está bem? Então, agora não está conectado com isso. Mas este está conectado à tela de detalhes, mas esse botão não está conectado à tela digital Então, o que eu posso fazer é simplesmente selecionar esta e simplesmente acessar esta tela. Agora está conectado a essa tela, e você pode simplesmente fazer essas coisas de animação. E quando estamos na última página, quando você clica no botão Voltar, para essa tela, queremos ir para a tela inicial. Sim. E então aparece aqui, estamos indo para a tela inicial e também estou, podemos dizer dissolver, só por exemplo. Dessa forma, você sempre pode controlar a animação. E eu clico nesse. Então, agora vou clicar no botão do cume. Estamos no espaço e agora ele mostra todos os conectados Em seguida, clique no botão B, clique no botão Voltar. Mostra o botão Enviar, botão Summit. Estamos no Ditilspace, clique no botão B. Estamos na página inicial. E agora, se eu clicar no botão Ace About, estamos no At paseo E agora, se eu clicar no botão Voltar, estamos na página inicial Então você vê, ele tem uma animação diferente, mas tem uma animação diferente, mas tem uma animação diferente. Então é assim que você pode adicionar prototipagem, e você também pode adicionar animação e Portanto, se você precisar atualizar ou assim ao adicionar prototipagem entre toda a tela, ela sempre será exibida assim Então este está conectado com este, este está conectado com este, este está conectado com este, e também este botão está conectado com este. Então, digamos que você adicionou um protótipo e, mais tarde, queira fazer algumas alterações, talvez para animação ou para qualquer coisa Então você pode simplesmente clicar nessa linha. Você pode ver essa linha. Em seguida , essa caixa aparecerá novamente aqui e você poderá simplesmente mudar para uma diferente. Por exemplo, agora está deslizando. Está bem? Agora, se eu executar este , clico no corpo, agora ele tem um deslizamento diferente Dessa forma. Então, dessa forma, sempre aparecerá assim. Então, espero que você tenha pequenas ideias sobre essa prototipagem, como você pode se conectar, como você pode usar animação, como você pode escolher diferentes tipos de animação e todos os significados desses itens e como Mas é só para dar uma ideia geral como você pode simplesmente saber que todas essas coisas estão disponíveis aqui na seção de protótipos e você pode simplesmente se conectar e fazer a configuração básica com isso Mas teremos detalhes, explicações para toda a seção de protótipos Com um aplicativo do mundo real, você aprenderá muitas coisas com exemplos do mundo real que definitivamente ajudarão você a entender todo o cenário. Além disso, você praticará diferentes tipos de coisas, desde o gatilho, ações, animações e muito mais Então, vou parar esse vídeo aqui e nos vemos na próxima palestra. 7. Configuração do projeto do aplicativo de comércio eletrônico Figma de lojas de sapatos: Olá, pessoal. Espero que todos estejam bem. Nesta série de vídeos, vamos criar um aplicativo de sapataria do zero. E o software que vamos usar para criar nosso aplicativo se chama Figma E no Figma, veremos como podemos criar um aplicativo do zero Então, para trabalhar no Figma, primeiro precisamos criar um novo arquivo de design, certo? Então, depois de chegar ao Figma, veremos esse tipo de interface E, primeiro, precisamos criar um novo arquivo de design. Então você clica aqui e essa janela vai aparecer, certo? E esta é a nossa prancheta. Trabalharemos aqui. Então, posso renomear esse título como sapataria ou aplicativo móvel de sapataria, certo? OK. Então esse é o título do nosso projeto. Então, para criar um aplicativo de sapataria, precisamos organizar nosso projeto, certo? Então, a princípio, no canto esquerdo, podemos ver aqui algumas páginas. Então, temos que criar algumas páginas sozinhos. Então, na primeira página, eu darei o nome. Será um guia de estilo. E o próximo, podemos dar o nome ao quadro de baixa fidelidade. Em seguida, podemos fornecer wireframe de alta fidelidade. E o último será nosso sistema de design, certo? Então, sim, trabalharemos nessas quatro páginas ou quatro guias e criaremos manualmente nosso guia de estilo, Wareframe de baixa fidelidade, Wareframe alta fidelidade e um sistema de design Então, eu já criei o design do aplicativo. Deixe-me mostrar que nosso aplicativo final ficará assim, algo assim. Sim. E criaremos ou projetaremos esses aplicativos inteiros do zero. Então, esse vídeo, eu vou entrar aqui. Neste vídeo, acabei de mostrar como podemos criar um projeto no figma e o que realmente precisamos criar para iniciar nosso projeto Então veja no próximo vídeo. Até lá, cuide-se. Tchau tchau. 8. Crie um guia de estilo de cores: Olá, pessoal. Bem-vindo de volta. Nesta palestra, veremos como podemos criar nosso guia de estilo para este projeto Portanto, para criar um guia de estilo, devemos ter em mente que um guia de estilo consiste basicamente em dois tipos de elementos, que são um guia de estilo de cores e um guia de estilo tipográfico Então, nesta palestra, veremos como podemos criar um guia de estilo de cores Então, para criar um guia de estilo de cores, primeiro pegaremos uma moldura como essa e talvez possamos renomeá-la como Clortyle Okay, então, em um guia de estilo de cores, precisamos ter alguns tipos de Temos que decidir alguns tipos de cores. Nós usaremos neste projeto. Suponha que temos que ter alguma cor primária, temos que ter algumas cores secundárias, terciárias e algumas cores cinza Então, a princípio, escreverei rapidamente esses nomes. Esses tipos de cores que usaremos. Tudo bem, então eu já anotei todos os tipos de cores que quero usar neste projeto. Tudo bem, então eu já anotei todos os tipos de cores que quero usar neste projeto. Então, agora temos que criar alguns tons acordo com nossas cores escolhidas. Então, como podemos criar esses tons? Então, para isso, usaremos um plug-in e, para usar esses plug-ins, precisamos ir para a seção de plug-ins. Então, se notarmos no canto superior esquerdo, veremos esse ícone, clicaremos aqui e veremos que há opções de plug-in e procuraremos por tailwind Gerador de cores CSS, certo? Então, veremos esse plug-in e clicaremos duas vezes aqui. E aqui temos que colar nosso código de cores que queremos usar. Então, para este projeto, decidi usar essa cor. Então, suponha que para a cor primária, eu use essa, para a secundária, eu use essa, e para a terciária, eu use essa Então, vou copiar este. E eu vou colar aqui. Então você notará que ele gera automaticamente alguns tons acordo com nossa cor primária. Então, vou renomeá-la como cor primária. Vou pegar essa marca e escolher estilos de corte. Então, depois que eu clicar nisso, ele gerará automaticamente as sombras, se você notar. Então, o que podemos fazer redimensioná-lo para caber em nossa tela Então, algo assim. OK. Então, aqui está nossa cor primária. Da mesma forma, criaremos nossa cor secundária terciária e cinza Então, vou acelerá-lo para economizar nosso tempo. Ok, então criamos as camisetas para nossa cor primária, secundária e terciária, e para a cor cinza, selecionaremos aqui tons de preto e ele gerará automaticamente as camisetas de cor cinza para Então, nomearemos essa cor cinza e geraremos estilos. Ok, então vamos pegar nossos tons de cinza e eu vou colocá-los e ajustá-los. Sim. Assim, podemos ajustar a etiqueta com o ajuste adequado. Ok, então vamos lá. Já criamos nosso guia de estilo de cores. E dessa forma, usando esse plug-in, podemos criar facilmente nosso guia de estilo de cores. Então, vou terminar esta palestra aqui e, na próxima palestra, veremos como podemos criar nosso guia de aço de tipografia Então, até lá, até lá. Tchau tchau. 9. Crie um guia de estilo de tipografia: Todo mundo vai voltar. Na última palestra, criamos nosso guia de estilo de cores Portanto, nesta palestra, tentaremos criar nosso guia de estilo de tipografia Então, sem mais delongas, vamos criar nosso guia de estilo tipográfico Então, primeiro, vou tirar uma moldura. Vou renomeá-lo para Agora vamos usar um plug-in. Então, vamos até aqui, vamos até a guia de plug-in e pesquisaremos as escalas de tipo desta. Então, vamos clicar duas vezes aqui. Então esse pop-up virá. Então, vou manter o tamanho da base como 16 e vou manter a escala 1,2 e a altura da linha, vou torná-la 1,4, e então vou clicar em gerar. Então você pode ver uma moldura já foi criada, certo? Portanto, não precisamos dessa moldura. Então, podemos deletar isso. Então, eu posso mantê-lo aqui e renomeá-lo para Typo gra Então, agora o que vou fazer é selecionar todas essas camadas, esta, e pressionar Control Shift para poder selecionar cada uma dessas camadas, duas, três, quatro. E vou duplicar tudo isso, então vou pressionar alter e colocar tudo isso fora desse quadro E então eu pressionarei Shift A para tornar tudo isso um Oto. Turno A, certo? Agora está embaixo de uma moldura, depois vou preenchê-la e também posso fornecer um pouco de acolchoamento dos dois lados, algo como 2020, algo como 2020, posso ajustar a moldura para que ela se encaixe bem Portanto, não precisamos mais dessa moldura. Então eu posso lidar com isso, certo? Então, vou ajustá-lo aqui e depois posso renomeá-lo Então eu copiei o nome, agora vou colá-lo. Então, até o estilo tipográfico que. Então, agora o que faremos, se clicarmos aqui, podemos ver no canto esquerdo que temos nove camadas de texto diferentes, à direita, então precisamos renomear isso Então, primeiro, selecionarei o 51, depois pressionarei Control para selecionar. Então, dois, três, quatro, cinco. Então eu pressionarei Control R. E agora esse será o nosso rumo, certo? Então H, então eu darei ao cifrão o dólar N, certo? Assim, você pode ver que ele criou automaticamente o número de série. Então renomeie. Então, esses cinco serão nosso cabeçalho um, dois, três, quatro, cinco, depois os próximos dois. Então, vou selecionar esses dois, Control R. Será nosso título. Aquele cifrão. E então, tudo bem. Então, esse será o nosso corpo de texto. Essa será nossa legenda. Texto. Ok. Então, agora o que vou fazer selecionar a moldura. Vou pressionar Enter para selecionar as camadas internas. Entrar. E agora precisamos de estilos de texto em negrito para todas essas nove camadas, certo? Então, pressionarei Control D para duplicar todas essas camadas novamente. E agora o que vou fazer, vou torná-lo ousado. Certo. E também precisamos renomear isso, certo? Então, pressionarei Control R. Vou pegar o nome atual de todas essas camadas de texto e adicionarei negrito no final. Então, outra coisa que precisamos fazer é mudar o nome do nosso estilo de texto. Então, selecionarei o quadro, pressionarei Enter para selecionar tudo isso e o alteraremos para Hopins Ok. E então podemos abordar o quadro. Ok, até agora tudo bem. Então, quase criamos nossos estilos de texto para nossa tipografia. Mas para a documentação adequada, usaremos outro plugin que será chamado gerador de blocos de texto. Então, vou aqui, gerador de têxteis, e selecionarei gerar têxteis Assim, você pode notar que ele criou automaticamente nossos tecidos. Portanto, agora usaremos outro plug-in para criar uma documentação adequada para nosso guia de estilo de tipografia Então, vou pesquisar o estilo de tipografia. Então, vou selecionar isso. Agora você pode ver que ele gerou automaticamente uma documentação tipográfica adequada para nós Então, não precisamos desse. Vou apenas copiar o nome. Vou deletar essa moldura, e vou colocá-la aqui, certo? Portanto, se você perceber que ele criou automaticamente uma documentação adequada para nosso guia de estilo de tipografia com o título adequado, nome do tecido, pixel, úmido, Então é assim que podemos criar nosso guia de estilo de tipografia e, com isso, terminamos de criar nosso guia de estilo Então, vou terminar essa palestra aqui. Na próxima palestra, veremos como podemos criar nosso wireframe de baixa fidelidade. Então, até lá, até lá, até lá, se cuide. Tchau tchau. 10. Criando uma tela splash e tela inicial: Olá, pessoal. Bem vindo de volta. Na última palestra, criamos para nosso guia de estilo de cores e guia de estilo de tipografia E a partir desta palestra, começaremos a criar nossa estrutura de som low Fiddle Portanto, antes de começarmos projetar nosso design principal ou estrutura de passeio altamente complicada, precisamos criar nossa estrutura de nível baixo Então, eu já criei nosso alto fdlturframe, certo? Portanto, nosso design principal ficará assim. Sim. Então, a princípio, temos nossa tela inicial, tela inicial de detalhes do produto e tela de cartão E finalmente temos nossa tela de pedidos feitos com sucesso, certo? Portanto, para a tela inicial, temos uma imagem de fundo completa por trás Há um texto aqui. Temos um texto também no meio e um botão. Então, primeiro, vamos projetar nossa tela inicial, baixo nível para WRFrame Então, vamos direto para a página Wireframe. Vamos pegar uma moldura que será nossa mais de 14. Vou mudá-lo para tela inicial. Então, podemos mudar a cor para algo como cinza. OK. Portanto, temos uma imagem de fundo em tamanho real, para que eu possa escrever uma imagem de fundo em tamanho real. Cc, então será nossa imagem de fundo de célula completa. Então, temos algum texto aqui, para que possamos indicá-los por uma linha reta. Então, primeiro, selecionarei tudo isso e entrarei aqui, e selecionarei distribuir espaçamento vertical, certo? Então, vou apenas diminuir o LN. Vou apenas diminuir o LN. OK. Então, do lado esquerdo, teremos 32 espaçamentos. OK. Então, no meio, temos também um texto. Então, vou dar uma mensagem de texto. Ok, então temos um botão aqui, certo? Então, vou pegar um retângulo para indicar esses botões. Esse botão ficará assim. Vou mudar a cor para algo assim. Ok, até agora tudo bem, criamos nosso wafme de baixa fidelidade com tela inicial Em seguida, teremos nossa tela inicial. Então, vamos ver como será a estrutura da nossa tela inicial. Nós vamos aqui. Na tela inicial, temos um ícone de menu aqui. O logotipo aqui, temos um ícone de cartão aqui, depois uma barra de pesquisa, depois nossa seção de categorias, seção de mais vendidos com alguns cartões e, finalmente, temos uma barra de navegação inferior Então, vamos criá-lo. Iremos ao nosso LofilFrame, pegaremos uma moldura do iPhone 14 plus mudaremos o nome para tela inicial Mude a cor para esta. Ok, agora temos o ícone aqui, ícone principal, um logotipo e um cardagão Então eu os indico com este ícone mínimo aqui, mudo a cor. Essa. Então temos um logotipo aqui. Bem, será o logotipo aqui. Então, temos um ícone de cartão aqui. Do lado esquerdo, serão 32. Então, do lado direito , serão 32. Do lado esquerdo, também será 32. Em seguida, temos uma barra de pesquisa. Então, vamos indicar essa barra de pesquisa. Então, esta é a nossa barra de pesquisa. 32, 32, mude a cor. Essa. OK. Depois, temos nossa seção de categorias. Vou escrever a categoria. Na seção de categorias, temos uma opção de rolagem horizontal Então, vou apenas indicá-los com vários retângulos. Então temos nossa peça mais vendida, certo? 32. OK. Então, será nosso best-seller. Então, best-sellers. Então, no best-seller, temos alguns cartões. Então, eu os indicaria com um retângulo grande. OK. Então, vou selecionar esses dois e deslocar A, dois e deslocar A, e vou selecionar este e este e deslocar A. Agora vamos ajustá-los 32, 32, um pouco. 22. Vou selecionar tudo isso e deslocar A para fazer o layout, para cima. OK. Então, finalmente, temos nossa barra de navegação inferior, certo? Então, vou criar um retângulo. E temos cinco abas aqui, certo? Então, vou indicá-los com letras pequenas. Vou selecionar tudo isso pressionando shift. E então eu pressionarei Shift A para fazer o layout automático, diminuir o espaçamento entre eles. OK. Então, sim, criamos tela inicial e nossa tela inicial com wireframe de baixa fidelidade. Então, vou terminar essa palestra aqui. Na próxima palestra, continuaremos criando nosso wireframe de baixa fidelidade a partir daqui Então, até lá, tome cuidado. Tchau tchau. 11. Criação de tela de detalhes do produto, tela de carrinho de compras e tela de sucesso de compras: Eon, bem-vindo de volta. Na última palestra, criamos nossa tela inicial e telas iniciais, com diaframe low Fiddle Então, nesta palestra, criaremos o diaframe baixo de violino do resto da tela Portanto, nossa próxima tela será a tela de detalhes do produto. Então, vamos pegar o quadro ou podemos realmente duplicar esse quadro para Controle D. Podemos mudar o nome para o quadrado de detalhes do produto Podemos selecionar isso e pressionar ender para selecionar todo esse item interno. Podemos deletar isso pressionando a perna, certo? Então, tudo bem. Então, agora, a maior parte da coisa na parte superior é a mesma. Então, podemos copiar essas três coisas e colá-las aqui. Temos uma grande imagem no meio, certo? Então eu posso indicar isso com um retângulo maior. Agora temos um grande texto aqui, a descrição. Em seguida, temos a cor do sal, selecionamos o tamanho, a etiqueta de preço e um botão. Então, podemos indicar que então temos algum texto. Texto pequeno, certo? Um para. Em seguida, temos nossa seção de cores selecionadas. Então, será nossa cor selecionada. Temos algumas opções aqui, certo? Então, eu os colocarei no envio automático A. Então, temos nossa opção de seleção de tamanho. Vou copiar essa seção inteira mais uma vez. Selecione o tamanho. E na opção de seleção de tamanho, temos várias opções para selecionar. Então, vou selecionar o último e pressionar Control D para duplicar muito tempo Um, dois, três, quatro. Agora, temos uma etiqueta de preço aqui e um botão de confirmação. Então, vou torná-lo um pouco menor. Vou selecionar o botão inferior colocá-lo um pouco para cima. Então temos uma etiqueta de preço aqui, certo? Vou copiar esse preço certo. E o preço, podemos indicar essas linhas retas. Então, temos um botão confirmado aqui. Vou apenas fazer um botão. Ok, até aí tudo bem, criamos nossa tela de detalhes do produto, uva de baixa fidelidade. Então, na verdade, temos nossa próxima tela que será a tela do nosso cartão. Então, vou duplicá-lo mais uma vez. E eu pressionarei Enter para selecionar os elementos internos e pressionarei Delight. Então, vamos mudar o nome para tela do cartão. Copiaremos esses itens novamente. Controle C, e vamos testá-lo pelo Controle V. Então temos nossa lista. Assim, podemos indicar que, com o emaranhado na lista, temos a imagem aqui, depois temos um título, o tipo, depois temos um botão de aumentar ou diminuir e temos nosso preço aqui Então , vou selecionar tudo isso e criar um grupo. Então, Controle G, vou duplicá-lo mais uma vez. E vou duplicá-lo outra vez pressionando Control G. Então temos nossa seção total Só então teremos então teremos nosso botão de dor confirmado. Ok, até agora tudo bem. Então, criamos nossa moldura de baixo teor de material para a tela do cartão Agora, deixamos apenas uma tela que será nossa tela de sucesso do pedido. Então, vou duplicá-lo mais uma vez. Vou alterá-lo para fazer o pedido com sucesso. Tolo, ok. Vou pressionar Enter e excluir tudo isso. Temos um grande ícone aqui. Temos um grande texto aqui, certo? Temos um pequeno texto aqui. Em seguida, temos nosso botão de voltar para casa. Então, sim, nossa tela de pedido de pedido bem-sucedido terá a seguinte aparência. Então é isso. Criamos todas as nossas telas para nosso waframe de baixa fidelidade e eu terminarei esta palestra aqui e, a partir da próxima palestra, partir da próxima palestra continuaremos criando Então, nos vemos na próxima palestra. Até lá, cuide-se. Tchau tchau. 12. Criando uma tela splash: Olá a todos. Bem-vindo de volta. A partir desta palestra, começaremos a criar nosso design de alta fidelidade ou design de alta fidelidade. Então, primeiro, vou para o high fiddltyerfame, depois vou pegar uma moldura que será uma tela inicial Então, vou dar a curva para 30 ou 50. OK. Então, agora teremos uma imagem de fundo completa, certo? Então eu vou aqui. Eu vou para essa opção de imagem. Eu vou escolher a imagem. Eu já baixei a imagem. Essa. Então veja, agora temos uma imagem de fundo completa. Agora, para torná-lo um pouco mais escuro, podemos usar um retângulo Vou deixar uma curva para 50, tornarei a cor preta e diminuirei a opacidade para algo como quatro a quatro Ok, então agora temos uma mensagem aqui, certo? Então, vou pegar uma mensagem. Ok, podemos usar essa fonte busts. Você usa essa fonte. Você aumenta o tamanho. Da esquerda, dê o preenchimento para 32. E se quisermos, podemos diminuir isso. Ok, até agora tudo bem. Então, agora vamos dar uma cor gradiente. Então, vou escolher esse gradiente. Vou escolher essa cor com algo como Sim, laranja. Certo? Nós podemos fazer isso assim. Podemos aumentar um pouco o tamanho. OK. Ok, até agora tudo bem. Agora temos uma mensagem aqui, certo? Então, vou pegar uma mensagem. E eu vou diminuir o tamanho. Eu copiei o texto e vou testá-lo aqui E isso está aqui. Ok, então temos nosso texto. Podemos diminuir um pouco. E agora temos que criar nosso botão. Então, vamos criá-lo. Vou pegar um retângulo. Vou fazer um círculo. Agora eu tenho que trazer um ícone. Então, de onde podemos ter algum ícone. Então, vamos aqui. Iremos ao nosso plugin e procuraremos ícone de pena, certo? Então, vamos clicar duas vezes aqui. Agora, usaremos esse ícone. Vou clicar aqui. Você pode ver que temos nosso ícone aqui. Então, vou colocá-lo aqui. Então, podemos colocar aqui. Vou mudar a cor disso. Eu seleciono esses dois e vou mudar a cor para este. E agora vou selecionar este e esse círculo e o Controle G para formar um grupo. OK. Então, agora vou escrever um texto aqui. Será nosso começo. Isso mesmo. Vou aumentar isso para torná-lo um pouco ousado. Então, agora, vou selecionar este, deslocar este, mudar este e torná-lo um controle de grupo G. Então temos nosso botão, então será nosso botão e o botão de início do bit, certo? OK. Então, criamos nosso botão. Portanto, este é o design de alta fidelidade da nossa tela inicial. Então, vou terminar esta palestra aqui e, a partir da próxima palestra, tentaremos projetar nossa tela inicial Então, até lá, tome cuidado. Tchau tchau. 13. Criando uma barra de pesquisa: Vivon, bem-vindo de volta. Na última palestra, criamos nossa tela inicial e, nesta palestra, tentaremos projetar nossa Então, primeiro, vamos ver como será a aparência da nossa tela inicial. Então, se virmos nossa estrutura de baixa fidelidade, podemos ver aqui que temos um ícone principal, aqui temos um logotipo e, no canto direito, teremos outro ícone de cartão Em seguida, temos uma barra de pesquisa, depois uma seção de categorias, depois nossa seção de best-sellers e, em seguida, temos nossa barra de navegação inferior. Então, vamos projetar. Então, primeiro, vamos tirar uma moldura. Vamos chamá-la de tela inicial. Vamos dar um limite para 50. Então, na verdade, precisamos de uma barra superior aqui. Portanto, não precisamos realmente projetar nossa barra superior. Podemos obtê-lo em nossa comunidade Figma. Então, podemos ir aqui, nossa tela inicial. Podemos explorar a comunidade. Podemos pesquisar aqui IOS 14. Você é o Figma, para que possamos clicar duas vezes nele. Então, podemos abrir no Figma. Então, aqui podemos pesquisar nosso melhor Nevar. Podemos ampliar e ver se podemos obtê-lo daqui. Então, vamos tentar obtê-lo. OK. Vamos apenas copiá-lo. Controle C. Voltaremos ao nosso design. Podemos simplesmente colocá-lo aqui, Control V. C, e então podemos simplesmente ajustar. Certo. Então, podemos dar uma escultura a 50 Podemos remover isso se quisermos. Então, basta removê-lo. E eu acho que esses 50 carboidratos são muito, então vamos dar a curva para 30 E para este, também, daremos a escultura a 30 Dê a curva a 30. OK. Até agora tudo bem. E para a altura, podemos chegar a 44, certo? E para a cor de fundo, podemos dar um pouco de cinza à cor de fundo. Então eu escolho este. Ok, agora temos um ícone de menu. Então, para o ícone, vamos aqui. Iremos ao nosso ícone de penas. Escolheremos um menu. Então, talvez possamos escolher esse. Então escolha este. Então, temos nosso ícone de menu, então temos nosso logotipo. Então, eu já colecionei todas as fotos, já fiz nosso logotipo e as mantive em nosso sistema de design. Não se preocupe Mostrarei como obter essas fotos e também mostraremos como podemos projetar nosso sistema de design. Não se preocupe Temos nossas palestras sobre sistemas de design brevemente. Então, por enquanto, acabei de coletar todas as fotos que vamos usar nesta série. Então esse é o nosso logotipo. Vou apenas copiá-lo daqui e vou voltar para nosso quadro escondido e vou colá-lo aqui Ok, então vou colocá-lo no lugar certo. OK. Em seguida, temos o ícone do nosso cartão. Eu vou ao Feather Icon novamente. Vou procurar por Card. Vou selecionar isso. Vou arrastá-lo para a tela inicial. Temos que ter outra coisa em nosso cartão que seja nosso número, certo? Então, vou desenhar um círculo aqui. Pode ser dessa cor, e podemos ter um número aqui. Será zero. Então eu posso diminuir o tamanho. E coloque-o aqui. Eu vou fazer dele um grupo, controlar o G. Eu vou fazer dele um grupo com isso também, então controle o G. Então agora temos nossa carta. Ok, até agora tudo bem. Então, agora estamos quase terminando com nossa parte superior. Então temos nossa barra de pesquisa, certo? Então, vamos criar nosso quadro de pesquisa. Vou pegar um retângulo Ok, 25 está bem, eu acho Então, agora teremos nosso ícone de pesquisa. Eu vou aqui. Pesquisa adicional de ícones. Então, vou clicar nesse retângulo. Vou pressionar Control alter G para torná-lo um quadro. E esse ícone de pesquisa será arrastado para baixo desse quadro. Então, agora está sob essa moldura. Vê? Não, ainda não, então vamos arrastá-lo até aqui. Agora está embaixo da moldura. OK. Vou colocá-lo no lugar certo e darei a ele um pouco de cor cinza escuro. Aposto que esse. Oh, cara, essa está bem. OK. Então, agora teremos um texto. Então, eu clicarei neste e clicarei neste e pressionarei Shift A para sair. OK. Por isso, criamos nossa barra de pesquisa. Então eu posso renomeá-lo para barra de pesquisa, certo? Então, vou terminar essa palestra aqui. A partir da próxima palestra, continuaremos projetando nossa tela inicial a partir daqui Então, até lá, tome cuidado. Tchau tchau. 14. Criando uma seção de categorias: Todo mundo. Bem vindo de volta. Na última palestra, acabamos projetando aqui Então, a partir desta palestra, continuaremos projetando nossa tela inicial a partir daqui Então, vou pegar um texto, consultar e selecionar nossos têxteis aqui, algo parecido com este Em seguida, temos nossa seção de categorias com rolagem horizontal rolagem Então, vamos projetá-lo. No começo, vou pegar um retângulo. Então vou desenhar um círculo aqui. OK. Então eu a tornarei também branca, e eu lhe darei uma sombra projetada, não uma sombra interna, e serão duas. E será algo assim. E vamos colocar a foto aqui. Então, vou ao nosso sistema de design, tirarei uma foto. Esse, eu vou copiá-lo. Passe aqui, e eu vou colocá-lo aqui. Então, 24. Quatro. Não, serão 24 e 20. OK. Então, sim, vou clicar neste e neste círculo e transformá-lo em um grupo. Vou fazer dele um quadro, então controle a alteração G, e vou colocar este dentro do quadro três e torná-lo de categoria um. Vou escrever aqui o nome da categoria, então será nosso estilo de vida. Podemos mudar isso para isso. Assim, podemos mudar a cor para algo cinza. E não vamos fazer com que seja ousado. Vamos simplificar, certo? Ok, então podemos torná-lo um pouco menor? Isso é bom. Sim, acho que está tudo bem. Parece bom. OK. Agora está perfeito. Então, vamos criar, então a categoria um. Então, agora vou duplicá-lo mais uma vez. 16, duplique mais uma vez. E eu vou dar o nome. OK. Vou dar o nome a este futebol de uma página. Eu vou deletar. Essa foto, eu vou deletar essa foto. Vou tirar outras duas fotos do nosso sistema de design, então talvez eu traga aquela, a cópia. Postagens 24, 20. Vamos, aqui está tudo bem. Então temos nossa bola de futebol. Vamos trazer esse. Lidar. Postagem 24. Cintilar Então, agora vou selecionar, este e este, fazer com que saia automaticamente. Shift A, Alt, seção cat Cory. Então, se eu quiser, posso duplicar outro Então, vou duplicá-lo mais uma vez. Controle D, certo? Então, agora vou tirá-lo da moldura. Eu posso mudar o nome para basquete. OK. Agora vamos deixar essa foto trazer outro sapato, copie isso. Então, agora vou selecionar tudo isso, torná-lo lote automático novamente e renomear a seção de categoria Agora vou colocá-lo no lugar certo. 32 28. Vou clicar em Control e redimensioná-lo assim. E eu vou até o protótipo e habilito a rolagem horizontal Ok, então agora ele será rolável horizontalmente, certo? Ok, então encerraremos esta palestra aqui e continuaremos projetando o resto da parte da tela inicial na próxima palestra Então, até lá, tome cuidado. Tchau tchau. 15. Como criar uma seção de carrinho: Todo mundo vai voltar. Na última palestra, acabamos aqui. Agora, depois da nossa seção de categorias, temos nossa seção de best-sellers. Então eu vou escrevê-lo. Então temos que criar algumas cartas, certo? Então eu vou pegar o retângulo. Agora, temos uma imagem grande aqui, depois temos nosso título, o tipo de sapato e nosso preço. E temos nosso padrão de aumento ou diminuição. Então, agora vamos tirar a foto. Então, vou apenas copiá-lo. Vou para o alto FiideltorFrame, colo aqui. Ok, agora temos que escrever o nome do sapato, então será nosso Então, temos outro texto, será. E temos nosso preço aqui, certo? Então, vou colocar este no layout automático. Controle A. Ok. Agora temos nossa manteiga para aumentar ou diminuir. Então, vou inventar um pouco. Vou fazer desse retângulo uma moldura, controle alterar um G. Eu coloco todos os elementos dentro desta carta Então, agora temos que criar nosso botão de aumentar ou diminuir. Então, vou marcar vou dar a esta e a esta uma cor de preenchimento desta e a esta eu darei. Agora temos que trazer um ícone de mais aqui e um ícone de menos aqui Então, vou aqui mais um ícone, mais e menos. Então, temos uma textura, certo? Então, seria zero. Eu o coloco no lugar certo. Vou fazer isso para um grupo. Então será isso. OK. Então, agora vou selecionar este. Essa. Não. Esse grupo, esse grupo, esse grupo. Vou criar um cartão BR, certo. Vamos ver se está funcionando ou não. Sim. Então, agora vou verificar se está funcionando ou não. Então, sim, criamos nosso primeiro cartão. Agora vou apenas fazer uma duplicata disso, selecione esses dois Turno A, vou duplicá-lo novamente. E vou selecionar este e este e trocá-lo novamente. Então, será nossa seção de cartões. Por isso, criamos nossa seção de best-sellers. Agora acabamos de sair da nossa navegação inferior. Então, vou terminar essa palestra aqui. Continuaremos projetando nossa navegação inferior na próxima palestra. Então, até lá, tome cuidado. Tchau tchau. 16. Como criar uma barra de navegação inferior: Todo mundo. Bem-vindo de volta. Na última palestra, criamos nossas seções de best-sellers Agora, acabamos de criar nossa barra de navegação inferior na tela inicial. Então, sem mais delongas, vamos projetá-lo. Então, primeiro, vou pegar um retângulo. OK. Agora, a princípio, temos nossa guia inicial, então vou pegar um ícone inicial. Vou levar para casa. Em seguida, temos o ícone do nosso cartão. Então não temos nenhuma notificação. Com isso, temos nosso ícone de pessoa, certo? Portanto, temos quatro guias, não cinco. Então, vou apenas separá-los. Então, a princípio, este é o nosso carro doméstico, certo. Então, o que eu vou fazer é fazer um círculo aqui. Primeiro, vou fazer um círculo, que será 46 46. Vou mudar a cor para isso. Agora vou pegar uma elipse e vou fazer 11, duas, 72 Vou te dar um derrame, e será assim. Então, vou copiar isso e clicar várias vezes aqui e colar aqui. Então, agora podemos fazer isso ver? Nós podemos fazer assim. A partir daqui também. Para gostar disso. Sim. Temos que colocá-lo na frente do epsi. E agora podemos preenchê-lo, remover o traçado, e esse preenchimento deve ser esse. Agora, veja, parece assim. Podemos diminuir um pouco. Podemos fazer com que esteja um pouco bem. Então, agora podemos trazer este. Depois para o meio. Podemos colocá-los em um grupo Konto G. Além disso, neste caso, podemos colocá-los em um grupo, Konto G. Será nossa casa Então temos que colocar e depois colocar nossos outros ícones. Então, vou selecionar esses três e inserir Shift oito para torná-lo layout automático. E se eu quiser, posso simplesmente remover o layout automático e desagrupar OK. E aqui temos um texto. Então, vou escrever o texto para segurar Ok, então vamos selecionar esse retângulo e transformá-lo em uma moldura Então, controle alter g, e eu colocarei todos os elementos na moldura. Então, nesta casa, estará no quadro o texto deste ícone. Então, tudo isso estará no quadro. E vou mudar para a barra inferior esquerda. Veja agora, criamos nossa barra de navegação inferior dessa tela inicial. Então, finalmente projetamos nossa barra de navegação inferior. E com isso, terminamos de projetar nossa tela inicial. Então, vou terminar esta palestra aqui e, na próxima palestra, projetaremos nossa tela de detalhes do produto Então, até lá, tome cuidado. Abelha. 17. Criando uma seção de imagens: Olá, pessoal. Bem vindo de volta. Na última palestra, projetamos nossa tela inicial. Nesta palestra, tentaremos criar nossa tela de detalhes Sem mais delongas, vamos começar. No começo, vou pegar uma moldura. iPhone 14 plus. Eu vou dar 113. Eu sou nossa tela de detalhes do produto. Vou apenas copiar este e testá-lo aqui, certo? Ok, então se notarmos a tela dts do nosso produto, temos um ícone aqui Será nossa flecha traseira. Temos algum texto aqui e temos outro ícone aqui. Será nosso ícone rígido. Em seguida, temos uma imagem grande, depois um texto, cores Silet, silt, seção seleção de tamanho, preço e botão Então, vamos projetá-lo. Então, vou ao nosso ícone de penas. Escolheremos essa seta B. Vou fazer 32 ou 36. Vou colocá-lo aqui. Ok. Vamos ver. Deveria ser. Ok. Então temos um texto aqui e temos um ícone aqui. Então, vou adicionar o ícone primeiro para que possamos voltar ao ícone da pena. Podemos pesquisar o coração. Eu vou ficar bem. Então temos uma textura, certo? Então, sua cama. Então. Podemos selecionar o texto. Faça esse. Spur, escolha este. Pense. Sim. Ok, então vou colocá-lo no meio, mudar a cor para este. Ok, então temos uma imagem grande, certo? Então, vou para o sistema da Artisan, onde guardei nossas imagens. Vou apenas copiar isso. Vou testá-lo aqui e vou aumentar o tamanho. Tipo de coisa assim. Então temos uma sombra aqui, certo? Então, vou adicionar uma sombra. Vou adicionar um traçado, sombra projetada ou desfoque de camada. Vou fazer com que seja assim. E eu vou apenas diminuir a cor. Ok. Então agora temos uma seta, seta circular para girar esse sapato Então, como posso concordar com isso? Podemos criar isso por meio de uma elipse ou círculo Então essa cor, vou atribuí-la ao gradiente. Portanto, este deve ser branco. E este, deve ser retirado do sapato. Então seria esse. Ok. Então, podemos fazer isso assim. Ok, sim. Nós podemos fazer isso assim. Então temos que criar uma seta circular aqui. Então, vamos fazer um círculo. Então eu vou pegar esse grupo e esse outro, e fazer dele um grupo novamente. Vou colocá-lo embaixo disso. Ok, até aí tudo bem, criamos nossa parte superior. Então, vou encerrar essa palestra aqui e, a partir da próxima palestra, criaremos o resto da parte dessa tela Então, Tin, cuide-se. Tchau tchau. 18. Criando uma seção de detalhes do produto: Todo mundo. Bem vindo de volta. Na última palestra acabamos aqui. Agora continuaremos nossa palestra a partir daqui. Então, depois dessa parte, temos nosso título de Shom. Então, vamos escrevê-lo e depois temos o texto reduzido, vou apenas escrevê-lo. Vamos selecionar este e torná-lo pequeno ou podemos simplesmente colocar isso em uma placa. Nós podemos copiar isso. Nós podemos colá-lo. E podemos simplesmente selecionar esses dois e fazer ou retirar Shift A, diminuindo para quatro. Podemos torná-lo ousado. Ok. E podemos mudar essa cor para cinza. Esse cinza. Então, vou colocá-lo aqui, e temos um ícone de estrela aqui, certo? Então, vamos criá-lo. E podemos eliminar isso também e fazer isso de novo. Eu posso fazer isso. Quatro. Ok. Até agora, tudo bem. Então temos um texto descritivo, certo? Eu copiei o texto da descrição, então agora vou testá-lo aqui Então temos nossa seção de cores selecionadas, certo? Então, vamos criar. M. Agora, eu posso selecionar um, este e este e mantê-lo automático para você. Vou apenas copiar este. Basta escrever. Então, agora temos que criar nossa opção de tamanho. Vou pegar um retângulo. Então, agora, vamos fazer disso um grupo. Então, vou duplicá-lo uma vez. Vou diminuir o tamanho para 38 e vou diminuir o tamanho do texto para este. Estará aqui. Vou copiá-lo apenas uma vez e vou duplicá-lo várias vezes. Então, agora vou apenas mudar o nome ou alterar o número. Vou guardar tudo isso. Mamãe, hmm. Mamãe, hmm. Fora da moldura e faça com que esteja. Turno A, vou mudar para 45, certo? Então, vou trocar por este, vou dar uma ideia. Remova o traçado, a cor de preenchimento será a cor do texto será branca. Vou colocá-lo aqui. E eu vou ajustar este. E vou até o protótipo e habilitarei a rolagem horizontal Ok. Então agora temos nosso preço aqui e temos nosso botão confirmado, certo? Então, vamos ao preço. Será então que teremos nosso botão confirmado, certo? Faça disso um grupo. Mas foi assim que terminamos de projetar nossa tela de detalhes do produto. Então, vou terminar esta palestra aqui e, a partir da próxima palestra, começaremos a projetar nossa tela de cartão, certo Então, até lá, tome cuidado. Tchau tchau. 19. Criando uma tela de carrinho de compras: Olá, pessoal. Bem vindo de volta. Na última palestra, projetamos a tela TTS do nosso produto Então, nesta palestra, começaremos a projetar nossa tela de carrinho Então, primeiro, vou duplicá-lo. Vou selecionar dentro dos materiais, então selecionarei a moldura e pressionarei Enter, e ela selecionará tudo isso. Então, vou deletar tudo isso. E eu vou apenas copiar, este e este e este. Vou apenas duplicar tudo isso e colocá-los em seus lugares Ok. Então, vou deletar este. Vou escrever o checkout. E aqui temos que fazer com que nossos itens contem. Então eu vou pegar esses 10. Bem, duplique, escreva itens. Vou alterá-lo para Então, vou colocá-lo aqui. Vou apenas colocá-lo aqui. Vou selecionar esses dois e pressionar Shift A para torná-lo uma contagem de tribos de layout Ok, vou apenas colocá-los. Ok, até agora tudo bem. Agora, temos que ter nossa lista. Então, primeiro, criarei um cartão de ícone quando nossa tela de cartão de arte estiver vazia. Então eu vou pegar um retângulo. Então temos que trazer um ícone de compras. Eu vou aqui, vá, cartão. Então, este será nosso ícone, faça deste retângulo a moldura para controlar ter G. Então eu vou colocar este aqui e colocar este carrinho de compras sob este quadro Isso e eu aumentaremos o tamanho para 40, algo assim. Ok, até agora tudo bem. Em seguida, temos que criar nossa lista de cartões adicionados. Então, h. Então temos nosso Nemo pho Certo. Então temos nosso tipo disso, claro. Em seguida, temos que trazer esse ícone da nossa tela inicial. Então, vou pressionar alter e duplicá-lo nesta tela e tentar colocá-lo aqui Então, ele será colocado. Ok. Então temos nosso preço. Então, o preço aqui. Ok, até agora tudo bem. Então, vou duplicá-lo mais duas vezes. Em seguida, selecionarei este, este, este e este e pressionarei Shift A para torná-lo um layout. Vou diminuir a diferença entre eles. Vou remover este. Então, temos que fazer nossa seção total. Eu gostaria que então então tivéssemos nosso pagamento confirmado. Então, esse botão ficará assim. Vou apenas copiar este. Vou aumentar o tamanho dos dois lados. Então, criamos com sucesso nossa tela de carrinho. Vai ficar assim. Então, vou terminar esta palestra aqui, e na próxima palestra, criaremos nossa última tela Essa será nossa tela de sucesso do pedido. Então, nos vemos no próximo vídeo. Tim, então, cuide-se. Tchau tchau. 20. Criando uma tela de sucesso de pedidos de lojas: Todos, bem-vindos de volta. Na última palestra, projetamos nossa tela de cartões Portanto, nesta palestra, projetaremos nossa última e última tela que será nossa tela de sucesso do pedido Vou selecionar este e duplicá-lo mais uma vez. Vou apenas escrever Let's order That's good. Ok. Agora, vou selecionar a moldura e pressionar Enter para selecionar todas as coisas e pressionar a tecla ainda. Ok. Agora vamos tentar pesquisar o ícone de celebração ou marca de verificação. Então, vou ao Chrome e procuro o ícone do Plat. Então, aqui eu posso pesquisar por acento circunflexo. Assim, podemos escolher qualquer um dos ícones que quisermos. Então, eu vou escolher este. Então, aqui está um truque. Como podemos baixar o ícone no formato SVG? Para baixar qualquer ícone do ícone plano no formato ABG. Precisamos comprar a versão premium, mas há um truque. Podemos fazer isso de graça. Então, vamos para esse ícone de edição. Em seguida, examinaremos e tentaremos encontrar a tag SVG Então eu encontro aqui. Então, vamos clicar aqui e copiar o Control C. Voltaremos ao nosso Figma e testaremos aqui pelo ControlV Vê? Agora, esse ícone chegou em nosso formato SVG Então, vou apenas redimensioná-lo. Agora vamos procurar outro ícone que será nosso ícone de celebração ou algo assim, er. Então, vamos colocar o ícone rachado na frente desse ícone de celebração E o que faremos, selecionaremos isso e isso e isso o tornará um pouco menor. Nós podemos fazer isso assim e podemos trazer aqui. Pode ajustar o tamanho. Então, da mesma forma, podemos selecionar isso. Vou selecionar isso. Vou apenas redimensioná-lo assim Vou trazê-lo aqui. Vou encarar isso assim. Traga-o aqui. Ajuste então sim, até agora tudo bem. Então temos uma mensagem aqui. Então nosso texto será , agora temos outro texto aqui. Então, finalmente, temos nosso botão de voltar para casa, e esse botão é mais ou menos assim. Vou apenas copiá-lo daqui para aqui. A altura, vou aumentar a altura em quatro. Vou aumentar a largura, algo assim. Faça com que seja o centro. Eu escreverei isso. Ok, então acabamos de criar nosso ok, podemos aumentar a altura um pouco em quatro. Ok, então criamos com sucesso nossa tela de fazer pedido com sucesso. Com isso, acabamos projetando todo o nosso design de TV badalado. Então, a partir da próxima palestra, começaremos a projetar nosso sistema de design Então, vou terminar essa palestra aqui e veremos no próximo vídeo Até lá, cuide-se. Tchau tchau. 21. Criando componentes de imagem e ícone: Olá, pessoal. Bem-vindo de volta. A partir desta palestra, começaremos a criar nosso sistema de design Portanto, antes de criar nosso sistema de design, precisamos saber por que realmente precisamos de um sistema de design. Portanto, um sistema de design é basicamente feito de muitos componentes, variáveis e variantes. E se notarmos nosso entusiasmo em nossa moldura, temos muitos botões, cartões, alguns elementos, algumas listas de cartões e outras coisas Então, ícones. Então, alguns ícones e botões são repetidos várias vezes e nós realmente criamos. Então, na verdade, criamos nosso sistema tian para que não precisemos fazer a tarefa repetida várias vezes. E podemos mudar os elementos ou modificar algo se precisarmos com tanta facilidade. É por isso que precisamos do nosso sistema tian. Então, vamos começar a projetar nosso sistema de design. Então, vamos começar a criar nosso sistema de design. Então, se você notar, na verdade criamos nossa imagem no sistema de design, as imagens que usamos, mas precisamos convertê-las nos componentes para que possamos substituir ou modificar algo facilmente. Então, se notarmos em nosso quadro de imagem, temos algumas imagens. Então, primeiro, vou clicar. Então, primeiro, vou clicar em um, e aqui na parte superior, podemos ver criar componentes. Vou apenas convertê-lo em um componente, então vou clicar no componente. Eu farei isso para todas as fotos. Então, criamos componentes para nossas imagens. Agora temos que criar uma coleção de nossos ícones. Esses foram usados em nosso design de alta fidelidade, certo? Então, pegaremos uma moldura e a chamaremos de ícones. Então, vamos ver quais ícones usamos. Então, a princípio, usamos esse ícone. Então, nós apenas copiamos e colamos em nosso sistema de design. Este é o nosso único ícone. Vou apenas convertê-lo em componente. Então voltaremos para aqui. Temos um ícone de menu. Vou apenas copiá-lo e colá-lo em nosso sistema de design. Componente. Da mesma forma que faremos com cada um deles. Mãe, hmm. Mamãe. Mamãe. Mamãe. Mamãe. Mamãe. Mmm. Mmm. Mamãe. Mamãe. Mmm. Então, criamos com sucesso os componentes para nossos ícones. Agora podemos usá-los facilmente em nossa guia de ativos. Você pode ver se acessarmos o ativo nos ícones, podemos ver todos os ícones que temos. Então, podemos simplesmente usá-lo arrastando isso. Então, vamos usá-lo mais tarde. Então, agora vou terminar esta palestra aqui e continuaremos criando nosso sistema de design a partir daqui Então veja no próximo vídeo. Diga a eles, cuide-se. 22. Criando componentes de botão: Cara, vamos voltar. Na última palestra, criamos nossos componentes para imagens e ícones Agora vamos começar a criar nossos componentes e variantes para nossos botões, cartões e outras peças. Então, vou pegar a moldura renomear seus comprimentos e variantes, certo Então, agora vamos primeiro criar nossos componentes para nossos botões. Então, vamos ver que tipo de botões temos. Então, primeiro, temos esse botão de começar, depois temos esse botão confirmado, depois confirmamos o pagamento e, em seguida, voltamos ao botão C. Então, vamos pegar. Vou apenas copiar este. Vou voltar ao nosso sistema de design e colá-lo aqui. Agora, vou apenas convertê-lo em um componente, certo? Então, sim, agora vou fazer três variantes disso. Então, vou pressioná-lo novamente. OK. Defina primeiro. Essa variante também será assim. Você estará aqui. E esse texto será nosso bem-vindo. Texto, estará no meio. Ou, se eu quiser, posso fazer um pouco aqui. Então, finalmente, podemos criar uma variante e excluiremos essa. Nós não precisamos disso. Mudaremos a cor deste para branco demais e mudaremos a cor do texto para isso, adicionaremos isso a esse retângulo, podemos adicionar um traço, direi um traço dessa cor. OK. Ok, agora vamos renomear todas essas variantes. Portanto, essa variante é nosso padrão. Este será o nosso deslizamento quando estivermos deslizando esse deslizamento, e esse será o nosso Por isso, criamos os componentes e as variações do botão de data de início Agora, vamos criar nosso botão de confirmação. Vou apenas copiar isso. Vou testá-lo aqui. Torne-o componente, criarei uma variante disso e darei o nome a Ela. Quando estivermos pairando sobre ele, ficará um pouco mais escuro do que isso, e deve haver OK. Então, criamos uma variante para isso. Outro, isso confirma o pagamento. Copie e crie um componente, adicione uma variante da mesma forma que faremos isso, haverá um efeito e o nome desse estado será Huber OK. E, finalmente, temos que parar para voltar para Hamby É uma cópia. Transforme o componente na variante acima. Eu apenas mudo a cor disso para branco e desta para preto e dou um traço externo. Disso. OK. OK. Então, agora criamos todos os componentes e variantes para nossos botões. Então, agora vamos substituir esses botões pelo nosso alto fdltalframe Então, vamos para nosso quadro duplo de alto fdl. Iremos para essa guia de ativos e acessaremos nossos componentes locais, e veremos que todos os componentes e variantes foram adicionados aqui. Vou apenas arrastá-lo até aqui. Vou apenas cortá-lo. Vou até aqui e selecionarei um local para substituir, que ele seja substituído automaticamente. A mesma coisa que faremos com o resto dos botões. Por isso, substituímos todas as coisas automatizadas. Então, nesta palestra, criamos componentes e variantes para nossos botões, e eu terminarei esta palestra aqui Na próxima palestra, criaremos componentes e variantes para o resto das coisas Então, até lá, tome cuidado. Tchau tchau. 23. Criando um componente de seção de categoria: Um voltará. Na última aula, criamos o componente e a variância de nossos botões E nesta palestra, criaremos componentes da seção de categorias e essa barra de navegação inferior Então, vamos projetar nossos componentes para essa categoria e a navegação inferior p. Então, vamos apenas copiar essa conta C e melhorá-la aqui. Vamos ajustar o tamanho da moldura. OK. Agora, vamos torná-lo componente e, em seguida, adicionaremos variantes. Um. OK. Então, este, vamos torná-lo dessa cor, esse texto, vamos torná-lo zero. E podemos fazer com que seja selecionado, certo? Então, podemos nomear essa segunda variante que a vida é selecionada, certo? Então faremos outro. E a variante, certo? Então, vamos selecionar este e ir até ele da mesma forma que criaremos isso, a cor, daremos ao branco, daremos uma sombra. OK. Nós daremos esse nome. Essa variante Running. Em execução, selecionado. Certo? Então, da mesma forma que podemos criar outra variante. Assim, mude a cor para isso, cor do texto para isso. E podemos dar um efeito disso. E, finalmente, faremos outro. Então, basta criar outra variante eLepth one, por que Essa. Até aí tudo bem, e esse aprendizado vai dar Basquete. E esses quatro Ok, então criamos esta seção de componentes e variantes da categoria. E agora, o que faremos, iremos até nossa estrutura superior Iremos até nosso ativo e podemos ver aqui que temos nossas seções. Vamos apenas arrastá-lo até aqui, cortá-lo. Vamos aqui e vamos substituí-lo por isso e vamos ajustá-lo por isso. E vamos habilitar o deslizamento horizontal, certo? Então, já colocamos ela em um bolinho. Então está tudo bem. Por isso, criamos nossos componentes e variantes da seção de categorias e, na próxima palestra, tentaremos criar nossa barra de navegação inferior Então, até lá, tome cuidado. Tchau tchau. 24. Criando um componente de barra de navegação inferior: Um voltará. Na última palestra, criamos nossos componentes e variantes para a seção de categorias Agora, nesta palestra, criaremos nossos componentes para a barra de navegação inferior Então, vou copiar este e ir para o sistema de design, aumentar o tamanho do quadro e colá-lo aqui. Então, essas serão nossas barras de navegação inferiores. Eu vou fazer disso um componente. Eu vou fazer uma variante disso. Agora, o que vou fazer é selecionar esse círculo e esse. Eu vou aqui. OK. Então eu vou apenas selecionar isso e vou movê-lo aqui. Vou mudar a cor disso para branco. E eu vou movê-lo também para cá. Cartão apenas alinhado. E sobre esta casa que eu puder, vou mudar a cor para cinza. Vou movê-lo para cá. Ok, então esta é a aba do nosso cartão. Esta é a nossa guia inicial. Ok, então criaremos outra e criaremos outra variante disso. Da mesma forma, selecionarei esse círculo, esse e esse e arrastarei o círculo daqui para aqui. Vou selecionar isso, colocá-lo no meio. Mude a cor para branco, mude para que não seja um cátion de desbotamento Mude a cor para cinza Coloque-o no meio. OK. Ok, agora vamos renomeá-lo para toque de notificação. Então, criaremos nossa última variante que será nossa pessoa selecionada, certo? Da mesma forma, selecione este círculo Este e este. Coloque-o aqui. Branco. Eu conto para fazer o alinhamento certo E vamos colocá-lo. Mude a cor para cinza. Ok, agora vou renomeá-la para a guia Conta. Agora, criamos nossos componentes e variantes da barra de navegação inferior. Então, vou voltar ao nosso quadro de alta fidelidade, ir até o ativo, arrastá-lo até aqui, cortá-lo e vou substituí-lo Substitua isso Ok, até agora tudo bem. Por isso, criamos com sucesso nossa parte desta peça para componentes e variantes. Na próxima palestra, continuaremos criando outros componentes e variantes para nosso sistema de design Então, até lá, tome cuidado. Tchau tchau. 25. Criando componentes de cartão de seção selecionar tamanho: Todos, bem-vindos de volta. Na última palestra, criamos nossos componentes e variantes para essa barra de navegação inferior na tela inicial Agora, nesta palestra, criaremos o componente e a variante de categorias de tamanho selecionadas componente e a variante de categorias de tamanho Então, vou apenas copiá-lo daqui. Eu vou testá-lo. Aqui. Alguns são assim. Vou ajustar o tamanho. Ok. Então, agora vou fazer disso um componente, depois vou fazer uma variante disso. E vou apenas selecionar isso e alterar esses itens. 38. Serão 39. Depois, o companheiro. Serão 39, depois serão 40. Em seguida, outro Então criamos nossos componentes e variantes para isso e , então eu vou voltar para nossa estrutura Dover de alto campo, e vou apenas para nosso ativo Vou arrastá-lo até aqui, cortá-lo. Vou apenas substituí-lo. Vou ajustar o tamanho e ir até o protótipo, e ele já está se quadrando horizontalmente Então, criamos nossos componentes para isso. Agora, vamos tentar criar componentes para esse cartão. Então, vou dar uma olhada no sistema de design. Vou colocá-lo aqui. Nesta imagem, temos que usar a imagem dos nossos componentes. Então, vamos usar esse. Vou apenas copiar isso e colar aqui, substituir, certo? Então, agora eu seleciono esta placa, eu a faço componente. Em seguida, faremos desse título essa categoria, texto, preço, tudo, alterando automaticamente os componentes. Então, como podemos fazer isso? Então, para isso, precisamos criar variáveis locais. Ok, então iremos para as variáveis locais ou criaremos uma coleção. Então, vou renomear essa coleção para o produto Okay. Então, vamos criar uma coleção. Então, vamos criar uma variável. E o primeiro nome da variável é ducto, A. Então eu vou chamá-la de ni ax tom set e zero. E eu darei o nome de todos ao mesmo. Então eu vou criar outro. Será nosso hype. Então, o primeiro será nosso Don So. Ok. Então temos nosso preço. É um número, certo? Calcule o preço, será 220, certo? Em seguida, temos nossa contagem de itens. Esta é a nossa contagem de itens. Então, vou fazer com que outro item conte zero. E outra que temos que fazer é se esse item é adicionado ao cartão ou não. Portanto, temos que criar uma propriedade de ouro ou variável de bollan que é adicionada ao cartão Então, deveriam ser peles. Ok, então agora temos que criar para todas essas quatro cartas, certo? Um, dois, três, quatro, então vamos criar. Então, outro, podemos nomeá-lo. Soren M é redondo. Esse, será nosso sapato de tiro. O preço será de 350 e será o mesmo. Vamos criar outro. Até agora, tudo bem. Criamos todas as variáveis de que precisamos. Então, agora o que faremos? Iremos até este texto. Vamos até aqui e vinculá-lo ao nome do nosso produto. Para este, vamos vinculá-lo ao nosso produto. Tipo. Aqui temos que modificar um pouco, o que será . Isso fará uma duplicata disso e eu ainda vou fazer isso E por isso, vou fazer isso. Então, essas são nossas duas etiquetas, certo? Vou vincular este com a imprensa. E vou aplicar uma variável a esse texto com nossa contagem de itens. Ok. E outra coisa que temos que fazer aqui para a imagem, aplicaremos a propriedade de troca instantânea Então, vou selecionar a imagem. Eu vou aqui. Vou escrever a imagem e adicionar a coleção para os sapatos WinShrt Aquele em que vou aplicar este e esse sapato azul. Sim. Vou apenas criar essa propriedade. Então, agora voltaremos à nossa alta fidelidade ou quadro e iremos para o ativo, adicione-o aqui Corte e eu selecionarei tudo isso. Um, dois, três, quatro, e eu vou substituir em tudo isso. Então este já está aplicado às variáveis. E agora vou selecionar isso e podemos ver que podemos trocar o sapato. Podemos ir aqui e acessar os produtos e selecionar o segundo, ele mudará automaticamente o título, o tipo de sapato e tudo mais. A mesma coisa que faremos aqui. Veja como podemos pesar componentes com facilidade. Pelas variáveis locais, podemos facilmente alterar e modificar nossos cartões. Então, vou terminar essa palestra aqui. A partir da próxima tectura, continuaremos ajustando nosso sistema de design a partir daqui . Então, até lá, tome cuidado. Tchau tchau. 26. Criando componentes de lista de carrinhos: Ian voltará. Na última palestra, criamos esses componentes e variantes do cartão com nossas variáveis locais Agora, voltaremos ao nosso design de hypedl. E nesta palestra, criaremos esses componentes da lista de cartões Então, vou apenas copiar isso. Vou testá-lo aqui. Então, agora o que faremos com essa imagem, vamos substituí-la pelos componentes que criamos. Então, apenas copiando isso, eu vou aqui. Vou apenas substituir isso. OK. Na verdade, criaremos outras variáveis locais para a tela do nosso cartão. Então, vou apenas criar uma coleção. Será nosso cartão. Agora, o que faremos criar outra coleção de cartas. Então, vamos chamá-lo de cartão e, em seguida, criaremos algumas variáveis. Então, uma das variáveis, na verdade, está vazia ou não. Portanto, tornaremos isso verdadeiro por padrão. Então, agora o que vamos fazer, vamos vincular este e aplicar a variável no nome do produto, esta, o tipo de produto e esta com o nosso preço. E este vamos vinculá-lo à nossa contagem de itens, certo? Então, se você notar aqui, não temos nosso cifrão. Então, o que faremos é criar um sinal de $1 e ajustá-lo aqui. E podemos ajustá-lo um pouco aqui. Podemos ajustar isso, certo? Então, até agora tudo bem. Então, agora vamos torná-lo um componente. Para esta imagem, temos que aplicar nossa propriedade de troca instantânea Então, clicaremos aqui nas imagens. Adicionaremos uma coleção para este. Este e nossa coleção de sapatos pretos, certo? Eles são pequenos, certo? Ok, ótima propriedade. Agora, o que faremos, iremos para nosso intervaframe de pedais altos Vamos até nosso ativo. Vamos arrastá-lo até aqui, vamos cortá-lo. Selecionaremos esses dois e os substituiremos assim. OK. Então, agora, o primeiro a está bem. Mas o segundo, podemos ir aqui e selecionar este. E para isso, podemos simplesmente selecionar o segundo trabalho. Veja, ele é alterado automaticamente. OK. É assim que podemos criar facilmente componentes para nossa lista de tela de carrinho. Então, com isso, acabamos criando nossos componentes e variáveis e projetamos com sucesso nosso sistema de design para este projeto. Então, vou terminar essa palestra aqui para a próxima palestra, começaremos a fazer nossa Então eu vou terminar essa palestra aqui, até lá cuide da próxima palestra 27. Tela splash, prototipagem de tela inicial: Olá, pessoal. Bem-vindo de volta. Na última palestra, concluímos com sucesso o design de nosso sistema de design A partir desta palestra, começaremos a fazer nossa prototipagem. Então, vamos começar a fazer nossa prototipagem a partir da tela inicial Então, temos um botão aqui. Portanto, sempre que chegarmos a essa tela inicial, teremos que arrastar esse botão do lado esquerdo para o lado direito e teremos um texto de boas-vindas Então, para fazer essa prototipagem, temos que voltar ao nosso sistema de design E temos que fazer essa prototipagem aqui nos componentes principais Então, o que faremos, selecionaremos isso. Vamos para o modo protótipo. Então, selecionaremos essa e rastrearemos a segunda variante. E aqui vamos selecionar a pista, certo? E selecionaremos a animação inteligente lançada, está tudo bem. Então, deste para este, selecionaremos após o atraso e ele sairá, então tudo ficará bem. Então, agora, se voltarmos e verificarmos, está funcionando perfeitamente ou não. Então, deste para este, podemos ir para nossa tela inicial. OK. Então, agora, como vamos verificar nossa prototipagem Então, vamos selecionar esse quadro. Vamos pressionar Shift space. Então, aqui, uma prévia aparecerá e podemos ver. Então, vamos arrastá-lo daqui para aqui. Você pode ver. Agora, é bem-vindo e, se clicarmos, voltaremos à nossa tela inicial. Então, sim, está funcionando perfeitamente. Então, na tela inicial, temos algumas prototipagens que precisamos fazer Então, vamos voltar ao nosso sistema de design e primeiro fazer a prototipagem aqui Então, quando selecionarmos esse estilo de vida, iremos para nossa variante de estilo de vida. Quando selecionamos essa execução, vamos para nossa variante em execução. Quando selecionarmos essa bola de futebol, iremos para nossa variante de futebol. Variante de basquete. E tudo será uma animação inteligente. Ou podemos entregá-lo instantaneamente, instantaneamente. Não é inteligente. Vamos dedicar tudo isso à transição instantânea. Será nosso instante. Será nosso instante. Então, faremos a mesma coisa com o resto do item. OK. Até agora, tudo bem, fizemos o ProTypingT one. Então, vamos verificar. Voltaremos para nossa estrutura de dote de alta qualidade. Selecionaremos esse quadro e apenas mudaremos o espaço. E podemos ver que podemos dividir esse, certo? Então, se selecionarmos este, ele será selecionado. Este, ele será selecionado. Este selecionado, este selecionado. Portanto, está funcionando perfeitamente. Ok, então podemos fazer o resto da prototipagem. Temos esse menu, essa barra de navegação inferior, certo? Então, temos que fazer a prototipagem para isso. Então, vou selecionar isso. Quando selecionamos este ícone de cartão, temos que ir até este. Instantâneo. OK. Sim. Quando chegarmos aqui, não daremos um instante. Vamos dar isso à animação inteligente. Quando formos aqui, selecionaremos essa, a animação inteligente. Este selecionará este para a animação inteligente. Então, vamos fazer a mesma coisa com o resto dessa opção. Mamãe, hmm. Mãe, ele. Mamãe. Então, vou selecionar essa tela inicial novamente, em forma de espaço. Agora, nós já fizemos isso, certo. Então, agora vamos verificar se selecionamos esse. Um. Este está funcionando perfeitamente, certo? E então temos que fazer nossa prototipagem para isso. Selecionaremos esse item e passaremos para a tela de dados do produto. OK. Então, nesta palestra, fizemos nossa prototipagem para tela inicial e tela inicial Na próxima palestra, faremos nossa prototipagem para o resto da tela . Então, até lá, tome cuidado. Tchau tchau. 28. Protótipos de tela de detalhes do produto: Todo mundo. Bem vindo de volta. Na última palestra, projetamos esse protótipo de barra de navegação inferior E agora, nesta palestra, tentaremos projetar esse componente ou tentaremos aplicar nossa prototipagem nesse Então, vamos começar. Então, antes de avançarmos, precisamos renomear todas essas variantes, certo? Portanto, a primeira variante , deve ser nomeada como 38. Este deve ser nomeado como 39. Ok, então agora o que faremos , vamos ao nosso clima de prototipagem Sempre que estivermos selecionando este 39, devemos passar para este. 40, devemos passar para este 40, e devemos mudá-lo para instantâneo. Este, também, devemos alterá-lo para instantâneo. Ok, então 41 deve nos levar até este. 42 deve nos levar até este. 43 deve nos levar a isso. 44, esse, 45, esse. Ok, então esta segunda fila. Mamãe, hmm. Mmm. Então, fizemos nossa prototipagem para esses elementos e, vamos ver, voltaremos à nossa estrutura de alto nível de identificação. Vamos até nosso ativo. E selecionaremos esse. Vamos cortá-lo e substituí-lo. Vou apenas substituí-lo. Vou redimensioná-lo. Vou para a prototipagem, e ela já é rolável horizontalmente Então, agora, vou verificar se está funcionando perfeitamente ou não. Então, mude o espaço. Então você pode ver isso rolável, e podemos selecionar cada um deles, certo? Então, sim. Então, vou terminar essa palestra aqui. Começaremos a fazer nossa prototipagem a partir da próxima palestra para o restante desses elementos Então, até lá, tome cuidado. Tchau tchau. 29. Protótipos de tela com detalhes completos do produto: Todos, bem-vindos de volta. Na última palestra, fizemos nossa prototipagem desses elementos Agora, vamos até nossa estrutura fetal alta, e podemos ver que fizemos a prototipagem desta Então, nesta palestra, vamos tentar fazer a prototipagem para o resto dos elementos Então, vamos para o modo de prototipagem. Depois de clicarmos no botão de confirmação, iremos para este, certo? Vamos ver. Aplicamos prototipagem nesses botões? Não. Então, vamos voltar. Sempre que estivermos selecionando isso, devemos passar para este. Deve ser nossa animação inteligente e passar o mouse, sim. Quando estamos pairando, enquanto pairamos. A mesma coisa que faremos com o resto dos botões. Enquanto paira. Animação inteligente? Ok. Eles deveriam ser assim. Enquanto Hering. Animação inteligente. Ok. Então, agora vamos voltar. Então, fizemos a prototipagem para esta, esta, e agora temos que aplicar a prototipagem para esta seção de cores Então, o que vou fazer é criar duas outras páginas de variantes para esta página de detalhes do produto. Então, vou mover esses dois um pouco. Vou duplicar isso 12 vezes, uma, duas, um pouco mais Ok, então o que vou fazer, sempre que recebermos este, temos que ir para esta página ou tela. Está bem? Deveria ser nosso instante. Ok, até agora tudo bem. E sempre que clicarmos neste, neste preto, devemos passar para este. Então agora temos que mudar a cor e o tipo do sapato, tudo, certo? Então eu vou trocar esse sapato. Então, agora o que podemos fazer, podemos realmente excluir tudo isso. Então, vou separar um pouco essa sombra aqui. Vou deletar esse, esse e esse. Agora vou até nosso ativo. Vou selecionar este. Vou ajustar o tamanho. Vou ajustar este também para aqui, vamos ver se está embaixo dessa tela do produto. Ok. Então, agora está parecendo bom. Então, para este, vamos realmente mudar a cor. Então, vamos mudar essa cor para isso, e vamos mudar essa cor para isso, talvez um pouco mais escura Ok. Agora vamos selecionar o sapato azul. Eu vou aqui. Eu vou até este e vou arrastá-lo até aqui. Vamos ver qual é o tamanho desses 377.308. Então 377308. Ok. E vamos simplesmente arrastar essa sombra daqui para aqui, não é? Vou apenas copiar essa sombra. E eu vou colar aqui. Ok. Então é bom. Também vou colar aqui. E para este, podemos mudar a cor para preto. Este deve ser preto e este também deve ser preto. Tudo bem Então, agora vamos escolher nosso sapato preto. Então aqui está nosso sapato preto. O tamanho será 377 e 308. Ok. Acho que parece um pouco grande, então vou diminuir o tamanho um pouco mais. Ok, até agora tudo bem. Então, sempre que clicamos neste, ele nos leva para esse quadro ou tela. Sempre que clicamos neste, ele nos leva para essa tela. Então, devemos fazer a mesma coisa aqui. Então eu vou, o que eu vou fazer, vou apenas movê-lo para cá. Vou dar para essa cor, e essa, eu vou dar para essa cor. Ok. Significa que está selecionado aqui. A mesma coisa que farei , darei a essa cor preta. Vou dar para essa cor azul e vou dar para essa cor verde. Ok. Então, agora o que faremos, aplicaremos a prototipagem aqui Então, quando estamos selecionando isso, vamos para esse quadro. Quando estamos selecionando preto, devemos estar nessa tela. Quando estamos selecionando essa tela, devemos ir para essa tela. Esse azul deve ir para essa tela. Ok, até agora tudo bem. Agora estamos quase terminando essa prototipagem e, finalmente, podemos aplicar a prototipagem, aplicar a prototipagem esse botão Voltar e também à seta para trás , onde está nossa seta para trás Essa é nossa flecha traseira. Assim, quando clicamos aqui, devemos acessar a tela inicial da mesma forma. Quando estamos selecionando isso, devemos nos levar para a tela inicial. Tudo bem Da mesma forma, temos que fazer a prototipagem desse botão de confirmação Portanto, sempre que finalmente clicarmos na confirmação, devemos voltar para a tela inicial, voltar para a tela inicial, voltar para a tela inicial Então, quase terminamos a prototipagem. Então , agora vamos verificar. Vou apenas selecionar a tela inicial e pressionar Shift Space. E suponha que tenhamos selecionado esse cartão, fomos levados para essa tela de dados de produção. Agora eu posso selecionar o tamanho, selecionar a cor. E isso confirma. Ok. Então, agora, está funcionando perfeitamente. Então, agora vou selecionar tudo isso novamente e aplicar horogênio a este sic Ok. Então, vou terminar esta palestra aqui e, a partir da próxima palestra, continuaremos fazendo nossa prototipagem Então, até lá, tome cuidado. Tchau tchau. 30. Prototipagem de componentes de cartões: Todos, bem-vindos de volta. Na última palestra, fizemos a prototipagem para nossa tela de detalhes do produto Então, agora temos que fazer a prototipagem desses cartões, desses cartões específicos e da nossa tela de cartões, certo Então, começaremos a fazer nossa prototipagem a partir dos componentes principais Então, podemos abordar os principais componentes disso de duas maneiras. Podemos usar o sistema de design ou podemos selecionar este. E aqui você pode ver que podemos ir para o componente principal. Se selecionarmos isso, seremos levados ao componente principal. Então, agora vamos aplicar nossa prototipagem a isso. Então, agora o que faremos. Vou apenas copiar este, substituí-lo aqui e também aqui. Certo? Então, agora o que faremos onde quer que estejamos, como você pode ver, já criamos nossas variáveis locais. Se você perceber que temos produtos. Temos produtos, coleção. Já criamos nossas variáveis locais. Então, o que faremos, sempre que estivermos selecionando ou clicando nesses gráficos precisamos criar alguma interação Temos que acabar com isso por meio de alguma interação. Então, selecionarei esse relatório para definir a variável. E temos que fazer a adição à nossa contagem de itens. Então, contagem de itens, a contagem de itens mais um, certo? Então, fizemos nossa adição da mesma forma que temos que fazer para esta. Então interação, variável definida, itens, contagem de itens, subtração menos um Mas aqui está a guloseima. Quando clicamos no sinal de menos, isso pode nos levar à contagem de itens com valor negativo Então, temos que restringi-lo, certo? Portanto, temos que aplicar uma condição. Então, aplicaremos a condição, então vamos aqui, aplicaremos a condição se nossa contagem de itens for maior que zero, certo? Se nossa contagem de itens for maior que zero, você poderá aplicar essa variável de célula. Então, vou decifrá-lo aqui. Então, agora vamos verificar. Vamos até a moldura da nossa porta de alta alimentação. Podemos ver se selecionamos essa base de mudança, agora, se você notar que mais, veja e menos menos menos menos Mas quando você clica nele novamente, ele não volta porque definimos uma condição. Portanto, está funcionando perfeitamente. Então, agora o que faremos definir a variável para o nosso carro, certo? Então, vamos aqui, variáveis locais. Temos que ir até nossa coleção de cartas. Aqui temos que criar outra variável que será nossa carta c agora, vamos aqui e aqui. Se você ver aqui, clicaremos duas vezes nesse número. Aplicaremos a contagem de cartas. Temos que aplicar nossa contagem de cartas aqui. Mas como podemos calcular todas essas contagens de itens total de todas essas contagens de itens e mostrar isso em nossa contagem de cartas. Para isso, temos que aplicar nossa condição no botão de adição, certo? Então, vamos voltar. Agora, o que faremos, iremos aqui. Agora vamos definir uma variável novamente e desta vez é para nossa contagem de cartas, contagem de cartas. Na verdade, é contagem de itens, contagem de itens mais contagem de itens, mais contagem de itens. E essa contagem de itens é, na verdade , o primeiro item. Esse é o segundo. Esse é o terceiro, e esse é o quarto, pois temos quatro elementos ou quatro cartas na tela, certo? Então, a mesma coisa que faremos com nossa condição negativa. Vamos definir uma variável. Desta vez, nossa variável é para contagem de cartas. Será nossa contagem de itens mais a contagem de itens mais o agrupamento de itens mais a contagem de itens A mesma web, primeiro item, segundo item, terceiro item e quarto item, certo? Até agora, tudo bem. Então, vamos verificar. Quando estamos em nosso espaço de mudança de tela inicial, agora, acho que você percebe que um, está mudando, dois, três, quatro, cinco, seis. Agora, se configurarmos menos cinco, quatro, então está funcionando perfeitamente Certo? Então, finalmente, quando clicarmos neste, devemos nos levar para a tela do cartão. Isso tudo. Ok, então terminamos de digitar Então, agora vou terminar esta palestra aqui. Na próxima palestra, veremos como podemos reproduzir a prototipagem nessa tela de cartucho Então, vou terminar esta palestra aqui, até a próxima palestra Até lá, cuide-se. Tchau tchau. 31. Prototipagem de tela de carrinho: Todos, bem-vindos de volta. Na última palestra, fizemos nossa prototipagem para Agora, começaremos a fazer prototipagem operacional para a tela do nosso cartão Em primeiro lugar, vou vincular esse número à nossa contagem de cartas. Sim. E então eu seleciono esta carta do lado de fora, e vou adicionar essas coisas mais dois números primos. Desculpe. Ok, agora vou colocá-lo no meio e vou ajustar a moldura e vou mudá-la a partir daqui. Para este, vou escolher esse preto. E eu vou escolher o para este, eu escolho o azul. Eu escolho isso, eu escolho. Ok, até agora tudo bem. E o que vou fazer, vou ajustar esse lado do quadro, clicar no conteúdo. Eu vou levá-lo aqui. Você pode fazer isso. Então, agora o que faremos é aplicar nossas variáveis aqui, as variáveis booleanas Para este, eu vou aqui. Vou clicar com o botão direito do mouse neste ícone e aplicarei que está vazio. Para esta, vou aqui, aplicamos duas cartas porque é falsa, então não será mostrada aqui. Então, para este, clique com o botão direito em dois cartões. Agora podemos ver que nenhum item foi adicionado, então ele não está sendo exibido, e temos que criar outras variáveis em nossa coleção de cartas. Esse será o nosso número total, que é zero. Vou me aplicar a esse texto ou variável total. Agora, temos que controlar essa lista de cartas a partir do nosso componente principal. Então, vamos voltar. Vamos ao clima de prototipagem. E quando pressionamos nosso ícone de adição, temos que definir a variável à qual adicionamos duas cartas Desculpe, adicionar duas cartas deve ser verdadeiro ou falso, certo? E nossa, temos que definir outra variável. Nossos meios vazios devem ser falsos porque não queremos esse item de cartão vazio. Portanto, temos que fazer a mesma coisa em nossa condição negativa. Então, quando atingimos nosso ponto negativo, temos que lembrar que, se nossa contagem de itens for igual a zero, se nossa contagem de itens for igual a zero, nossa carta adicionada à carta deve ser falsa, certo Não devemos perder esse cartão, cartão específico. Outra variável que temos que adicionar é nossa carta total. Nossa contagem de cartas é igual ao O. Então está vazia. Nosso vazio não deveria ser verdade novamente. Devemos mostrar nosso cartão vazio iPhone. Então, vamos ver se está funcionando perfeitamente ou não. Então, voltaremos ao nosso quadro de alta fidelidade. Agora, podemos aplicar aqui a aqui esse homicelo. Mamãe, hmm. E, finalmente, podemos aplicar isso porque agora verifique se está funcionando perfeitamente ou não. Então eu vou aqui, mudo de espaço. Agora vamos ver que, a princípio, se verificarmos, não temos nenhum item adicionado na nuvem, então voltaremos. Se selecionarmos isso, você pode ver, um item adicionado. Se selecionarmos este C, três itens serão adicionados. Agora, se clicarmos neste, será igual a zero, certo? A contagem de itens da curva será zero. Então, desaparecerá. Vê Vanish. Isso é vanish. Veja, são dois, aqui é Ngansh e esse ícone está aparecendo. Portanto, está funcionando perfeitamente. Agora, o que temos que fazer é calcular o preço de todos os itens e mostrar o total. Então, vamos fazer isso. Então, vamos voltar aqui. E na aula, o que faremos, definiremos nossa variável. E desta vez é o nosso total, certo? Portanto, é o nosso total. E esse total é na verdade nossa contagem de itens, multiplique pelo preço mais a contagem do item, multiplique pelo preço, mais eu conto, multiplique mais, desculpe, eu conto, multiplique Temos que fazer isso quatro vezes. Por quê? Porque temos quatro itens, certo? Então, o primeiro será esse, o preço será o primeiro, o segundo. Então terceiro, terceiro, quarto e quatro. Vendo agora, temos esse cálculo. Temos que fazer a mesma coisa com R menos. Então, você sabe, vá aqui, defina nossa variável para o total. OK. Então, agora vamos verificar. Agora vamos aqui, pressionamos shift space. Então, se observarmos, não há itens selecionados, então o total é zero. Podemos adicionar um item, dois itens, três itens ou item, podemos ir aqui. Podemos ver que está aparecendo perfeitamente. Suponha que isso seja, então essa é a soma total disso. Se não quisermos isso, some tudo isso. Se não quisermos nada, então, novamente, podemos adicionar Titans Wiens e confirmar que iremos para a equipe de cinco hordas Então, finalmente, podemos adicionar isso ao nosso quadrado inicial. Então, sim. Então, vou terminar essa palestra aqui. Na última palestra, veremos como será a aparência do nosso protótipo final Então, vou terminar esta palestra aqui até lá. Tchau. 32. Protótipos finais: Olá, pessoal. Bem vindo de volta. Na última palestra, terminamos fazer nossa prototipagem para todas as telas Agora, nesta palestra, veremos como será a aparência do nosso protótipo final e como esse aplicativo está realmente funcionando Então, vou selecionar isso. Vou para o modo de prototipagem e selecionarei a classe Agora podemos ver que temos uma bela tela inicial. Agora vou arrastá-lo daqui para aqui. Vimos uma mensagem de boas-vindas. Vou clicar nele. Vamos passar para nossa tela inicial. Suponha que eu tenha selecionado este. Quero ver os detalhes desse item. Eu vou selecionar isso. Podemos ver os detalhes. Nós podemos mudar a cor. Podemos selecionar o tamanho. Nós vamos financiar. E se formos ao nosso cartão, não temos nenhum item adicionado até agora. Então, agora vamos adicionar nosso item. Assim, podemos adicionar itens a partir daqui e temos uma barra de navegação inferior interativa. Vê? Agora, o que faremos é adicionar itens. Então eu vou adicionar este, este, este, este. E vamos aqui, podemos ver que adicionamos nossos itens. Então, talvez adicionemos este também. Nós podemos ver. Temos uma escala total. Temos duas camadas, suponha que sim, então podemos confirmar. Ok. Nosso pedido foi feito com sucesso. Podemos voltar para nossa exibição. É isso mesmo. Essa será a aparência do nosso protótipo final e é assim que nossos aplicativos funcionarão Então, esse foi todo o nosso projeto, e espero que você tenha gostado desse projeto e aprenda como podemos um aplicativo completo de sapataria do zero, fazer a prototipagem avançada e criar um sistema de design interativo Então, vou encerrar essa série onde espero que tenham gostado muito. Então, até lá, cuide-se, tchau.