Como criar e prototipar uma experiência de design UI/UX móvel usando a ferramenta de design Figma

1. 1 Introdução: bem-vindo a como projetar e protótipo uma experiência de UX móvel usando a ferramenta de design Sigma. Meu nome é Aaron Lawrence, e eu sou um designer de UX principal e fundador da agência AUX chamada UX Honey em San Francisco , Califórnia Eu também sou instrutor auxiliar, onde eu ensino design avançado UX na Academy of Art University, também aqui em São Francisco. Neste curso, você aprenderá a figo HMA, uma ferramenta de design baseada em nuvem que está se tornando a ferramenta padrão de design de UX para o setor e designers de UX. Empresas como Google, Twitter, uber, Airbnb, Microsoft adotaram a Fig MMA como sua ferramenta projetada preferida devido à sua fácil colaboração e eficiência na criação de design. E a minha parte favorita é que é grátis. Então vamos mostrar-lhe o resultado deste curso. Na próxima série de vídeos, vou mostrar-lhe passo a passo, como projetar e protótipo uma experiência de pedido de chá Boba sob demanda. Você aprende como fazer uma inscrição, página uma página de login, você aprende como fazer isso. GIFs animados. Trabalharemos na experiência de compra, como criar elementos fixos como você está vendo aqui, transições para seus dropdowns móveis protótipos. Você vai aprender estados de botão. Vamos passar e criar um pagamento de saída de cheque e a compra final do chá Boba sendo entregue no meu local. E sim, eu tenho chá Boba Além disso, vamos trabalhar na página de perfil da página de histórico de pedidos, e vamos sair e criar uma experiência perfeita. Você também aprende todas as maneiras diferentes de criar transições entre telas. Quando você protótipo usando MMA de figo, aprenderemos a usar o recurso inteligente e animado. Aprenderemos como criar, mover para dentro e mover para fora telas, deslizar para cima e deslizar para baixo telas. Aprenderemos como criar um menu móvel, aprenderemos a criar modelos e também criaremos uma biblioteca de componentes reutilizáveis, estilos de cores e têxteis, tudo isso que tornam o design mais eficiente e fácil quando se trata edição. Você também aprende como criar um link para seu protótipo e compartilhar esse link com seus colegas de equipe ou com usuários para testes de usuários. Você aprenderá a convidar outras pessoas para seu design e práticas recomendadas. Quando se trata de colaboração dentro da Fig MMA, você também aprende como exportar ativos U Y para engenharia e como inspecionar códigos como CSS e HTML em seus projetos. Eu também vou mostrar-lhe todos os atalhos de teclado figo, mas como usá-los e os melhores que eu uso dia a dia. Eu também vou mostrar-lhe como baixar plugins de figment e ir online e baixar kits pegajosos . Mostrarei como você ou seus colegas podem criar comentários juntos. E por último, mas não menos importante, eu criei um arquivo Fichman para você baixar e abrir dentro de figo MMA que contém todos os projetos que você viu dentro do aplicativo de pedido Boba Tea. Já há protótipo Pronto para ir que você pode usar é uma segurança agora ou separar se você gosta e vai usar este arquivo de design para ir passo a passo e recriar o protótipo que vimos anteriormente dentro do arquivo. Você também tem todos os ativos que você viu prontos para ir. Eu digitei todas as chaves rápidas e eu tenho uma lista dos meus plugins favoritos que você poderia usar dentro Fig MMA. Também use esse arquivo para mostrar-lhe as entradas e contras de como o dedo do pé funciona dentro do figo MMA, e ele fará com que o design de aprendizagem e a figura de diversão no sentido que vai passar e criar juntos, em vez de apenas uma lista de vídeos para você assistir e fazer em O seu próprio. E você pode andar comigo enquanto recriamos toda essa experiência juntos. Este curso é ótimo para qualquer pessoa cujo design de aprendizagem e quer aprender a protótipo uma experiência de usuário ou se você é um designer e você já conhece outras ferramentas e quer aprender como funciona o fig mo. Muito bem, bem, obrigado por assistir, e espero que aproveite a aula. 2. Introdução à a primeira pessoa para figma e faça o download do arquivo do curso: Muito bem, dedão de boas-vindas. Como construir um aplicativo móvel Experiência design usando a ferramenta de design Fig., classe MMA. Meu nome é Aaron Lawrence, e serei seu instrutor para a aula antes de entrarmos no MMA e construirmos o aplicativo móvel que vou compartilhar com você em um segundo. Gosto de percorrer a agenda da aula. Então, o primeiro vídeo aqui em que você está agora é a introdução à ferramenta de design de figment e o arquivo percorrer. Então eu construí um arquivo que você vai baixar na classe e eu vou te mostrar como configurar isso , dar um passeio através desse arquivo, bem como figo MMA, e então nós podemos continuar para a próxima série de vídeos, que é como projetar a experiência do aplicativo móvel. É uma experiência de pedido de chá boba que são compartilhados com você aqui em um momento em que aplicativos se dividem em uma série de cenários que serão divididos em uma série de vídeos. Então, o primeiro vídeo que terá depois deste é como projetar o log in e inscrever-se fluxo de trabalho. O próximo vídeo será a experiência de fluxo de trabalho de compras. O próximo vídeo depois disso será a experiência de fluxo de trabalho de check-out e o próximo vídeo depois disso será a experiência de fluxo de trabalho do perfil. Eu acredito que a melhor maneira de aprender uma nova ferramenta e aprender projetado é direto para ela e se divertir. Eu acredito que a melhor maneira de aprender uma nova ferramenta e aprender projetado é direto para ela Então este não é um vídeo onde você vai ter um monte de instruções e coisas para fazer. Você vai me acompanhar e nós aprenderemos fazendo design. Então, enquanto estamos nesses vídeos e esses cenários projetando, você vai usar o dedo do pé de vira-lata. Saiba como criar e usar uma biblioteca de componentes. Você também aprenderá a criar e compartilhar protótipos clicáveis que você contesta o protótipo ou compartilhá-lo com sua equipe. Você aprenderá como convidar outras pessoas e como funciona a colaboração. Dentro da Fig. MMA. Você aprenderá a exportar ativos U Y e também inspecionar o design em busca de atributos de código, e poderá usar esses atributos de código para engenharia. Você aprenderá atalhos de teclado MMA fig. Você aprende como usar plugins de figura e como baixar kits pegajosos online. Você vai aprender a criar comentários, e você também terá alguns pensamentos finais e um futuro será o último vídeo lá. Muito bem, antes de vos mostrar os bens e os desenhos que vamos construir nesta turma, só quero falar um pouco sobre porque a Sigma se tornou ferramenta de design muito popular para as grandes empresas de tecnologia e a maior parte da indústria. E as empresas que usam essas ferramentas são empresas Sigma Tool. São empresas como o Google Twitter, uber Airbnb, Microsoft para dizer alguns? Mas por que figo MMA? A grande coisa aqui é que é um aplicativo de armazenamento de arquivos baseado em nuvem. Isso significa que armazena todos os seus arquivos nas nuvens. Não há mais gerenciamento de arquivos tentando rastrear o arquivo mais recente. Você pode acessar esses arquivos de qualquer computador pela Internet, então não existe apenas no seu computador. Você pode acessar esses arquivos de qualquer computador pela Internet, Eles existem na nuvem e estão acessíveis em qualquer lugar. Minha coisa favorita sobre Sigma ser um aplicativo baseado em nuvem é que um auto salva seu trabalho para que você nunca perca o progresso em seu trabalho. Ele está constantemente salvando seu arquivo em segundo plano, para que você nunca tenha a falha semelhante ou a falha do aplicativo, e então você perdeu o trabalho. A outra coisa, o que tem sido fortemente adotado em muitas das empresas é que ele é ótimo com colaboração, e uma das razões pelas quais ele é ótimo é que você pode visualizar vários mouses, e isso faz com que colaboração em tempo real. Então, se outras pessoas estão na ferramenta, você pode ver os mouses na ferramenta, e isso faz com que seja realmente fácil colaborar com outros companheiros de equipe. Isso também facilita o uso de engenheiros e PM. E isso é ótimo porque os engenheiros podem entrar em seus projetos e eles podem esperar, e eles podem pegar os atributos de código CSS e copiá-los e colá-los em sua base de código. A outra coisa que faz Sigma cinza, não é? A prototipagem vive na ferramenta, então você não precisa usar uma ferramenta para projetar e outra ferramenta para prototipagem? É uma espécie de, ah, uma parada para tudo isso. Isso torna esse protótipo realmente fácil de compartilhar, e ele lhe dá um link clicável que você pode compartilhar com qualquer pessoa em sua equipe ou você pode enviá-lo para usuários e você pode fazer testes com eles. Você pode vê-los passar pelo link. Você também pode baixar o aplicativo espelho de lama de figo que eu vou mostrar em seu telefone, e você pode ver seus projetos que você está criando em tempo real também no seu telefone. Ele também torna a criação de componentes e instâncias de componentes muito fácil. Eu vou mostrar isso também nesta classe, e isso torna a criação de guias de estilo e estilos de personagem e cores para reutilização durante seus projetos muito fácil também. Mas eu garanto a você, uh, certeza que você está nesta classe e faz para deixar cair comentários para que outros companheiros de equipe você mesmo pode jogar quadrinhos na ferramenta no contexto de seus projetos, que realmente torna muito fácil ver o que as pessoas estão se referindo ao momento em que estão dando comentários ao seu design, que também mostram você nos vídeos finais. Ele também tem espaço infinito de placa de arte e layout de página e tem muitos plugins que você pode usar para tornar o design mais rápido. Tudo bem, então é um pouco sobre por que figo MMA, Vamos fazer um tour pelo aplicativo que vamos aprender nesta aula. Então eu vou até o protótipo aqui e nós temos uma tela de carregamento. É a experiência de aplicação de chá Boba. E o que isso faz é permitir que qualquer um em San Francisco se abra para baixar este aplicativo e obter Boba chá encomendado para eles e entregar-lhes em tempo real. Então, essencialmente, se eu quiser Boba Tea entregue em meu escritório, eu posso pedir um chá Boba e eu posso entregá-lo em meu escritório com em São Francisco em 15 minutos. Então aprenderemos no primeiro vídeo. Depois disso, aprenderemos como construir a página de login de inscrição que você verá aqui. Você pode ver que ele tem um sistema de torneira na parte superior, esquerda e direita, e vamos em frente e fazer login. Alguém colocou meu nome ou meu e-mail minha senha em Pressione o botão de login fig. Ma também suporta GIFs animados para que você possa ver que pouco gastador de carregamento GIF. Eu vou te mostrar isso também. E aqui está a experiência de compras. Aqui está todos os três Boba ou para Boba chás, sabores que temos em oferta. Aqui temos a barra de abas aqui que permanece fixa, que significa que não passeia com todo o outro conteúdo. Eu vou te mostrar como fazer isso nesta aula também. E digamos que eu queira pedir uma dessas bebidas normais de chá Boba aqui. Eu só tenho que tocar em qualquer lugar nesta praça e abre o leite normal, compras de chá, um, configurações. E aqui eu posso mudar o leite se eu quiser, talvez leite não lácteo, leite amêndoa. Eu também posso mudar a doçura regular aqui e os ratos da mídia. Então, nesta experiência de usuário vai mudar o doce regular para um meio-amargo. Então, aqui também vai usar figment para aprender a criar um menu suspenso móvel, que é um slide aqui em cima que você pode ver. E quando eu clicar no semi doce, você pode ver que o SEMISWEET já preencheu. Então, está realmente se sentindo como uma aplicação ah riel, embora seja apenas seus projetos. E essas são as coisas que fazemos para mostrar engenharia, como construir a experiência, as transições e os pequenos detalhes que temos em nossos projetos. Então você pode ver aqui eu posso selecionar minhas coberturas. As coberturas que tenho na seleção são tapioca grande, tapioca pequena ou geléia de lichia. Eu posso ver o total aqui, e eu tenho o botão adicionar. Então vamos em frente e adicionar tapioca grande para que você possa ver ter adicionado a grande tapioca. Eu vi o preço subir um pouco e eu vou ir em frente e adicionar isso ao meu carrinho. Você pode ver a transição onde a tela caiu. Vamos aprender isso nesta aula também. E eu poderia ver agora que eu adicionei isso ao meu carrinho, eu clique no carrinho aqui. Eu vejo que eu adicionei uma bebida de leite, uma corrida, leite normal, bebida de chá, e eu posso editar. Posso remover isto. Eu também posso adicionar qualquer quantidade, mas eu sou bom com isso. Só quero que me entregue uma bebida. Aqui está o subtotal dos impostos, a taxa de entrega, o total do pedido. E estou pronto para ir. Se eu quiser fechar isso, eu comprimo o X, e ele vai fechá-lo, hum, para baixo assim e eu posso reabri-lo novamente. Então você aprendeu esses pequenos estados de transição nesta classe também. Então vamos em frente e fazer o próximo e você verá Ah, o endereço aqui. Posso colocar o endereço no meu apartamento e o meu número de telefone pronto, mas dizer que eu queria voltar. Posso pressionar a seta para trás. Você pode ver que a tela desliza da esquerda para a direita, e você também pode vê-lo entrar da direita para a esquerda. Aqui. Esses são pequenos detalhes de transição que aprenderão na aula também. E vou colocar as informações do meu cartão de crédito aqui. Imprensa feita. E eu pude ver meu total de pedidos aqui em $9.49. E eu vou em frente e pagar e nós poderíamos ver que estávamos usando aquele girador novamente no pagamento de sete ng . E você verá que agora vejo a entrega do meu chá Boba no mapa em tempo real. E bang, está aqui. Eu posso dizer, ok, entendi. E isso me leva de volta à minha tela inicial. Quero ver o meu perfil aqui. Aiken, Tab para o meu perfil. Eu vejo. Agora estou na guia do perfil ativo. Consigo ver uma foto minha. Posso adicionar uma foto. Posso editar as informações aqui. Ah, e a propósito, esta não é uma foto minha. É só uma foto aleatória que tenho de alguém usando um plug in, um, em figo MMA. Isso é muito legal. É um plug in chamado, hum, recursos de conteúdo, que eu vou te mostrar como baixar e ele só tira fotos para você realmente fácil. Além disso, há a guia de pedido aqui, e eu posso ver que meu pedido mais recente foi que um chá de leite construído regular, a data eo total lá, e eu posso clicar de volta no celular. o Sãoo ícone do chá Boba. Ouvir? Isso me leva de volta à minha experiência de compra. Posso voltar ao meu perfil, posso sair e voltar ao ecrã de início de sessão aqui. Tudo bem. Bastante incrível. Então esse é o tipo de bens que regem nesta classe e aprendem a construir. Mas seguir em frente agora é o que você vai precisar fazer. Se você ainda não é, vá em frente e vá para figg MMA, um, sigma dot com e você pode apenas fazer uma pesquisa do Google como Sigma baixar e encontrar o download de figment . Um, U R L, que é sigma dot com barra downloads e download para Mac ou Windows. Estou usando um Mac, e a maioria das pessoas que fazem design trabalha aqui usando um Mac, um Mac, então baixe o aplicativo local para seu arquivo de figment e você verá aqui pressionando o download. Ele aparece no meu canto inferior esquerdo. Eu clico duas vezes sobre isso. Ele vai mostrar, mas minhas aplicações e você pode começar a usar lama de figo. O que é realmente legal, no entanto, também é, um, você também pode acessar figo MMA através da Web também. Então você pode ver aqui eu tenho o arquivo carregado aqui na Web e eu posso ver todos os projetos que eu acabei de mostrar para você na Web. Mas para esta classe, é melhor usar o aplicativo local, então baixe o aplicativo local. E a melhor parte é que é grátis. Não te custa nada. Ok, então vá em frente e baixe o aplicativo se você, hum, já não fez e pausar o vídeo e eu vou continuar e você pode se juntar a nós depois baixar o figo. A minha candidatura. Tudo bem, agora que você tem o Sigma funcionando, vá em frente e baixe o arquivo ou pasta da classe aqui. É chamado de arquivo de figo MMA para download e uma vez que você tem que baixado, você pode ir em frente e abrir. Tem duas coisas nele. Tem a figura, um arquivo de classe que você vai abrir e criar. Vou te mostrar como fazer isso aqui em um segundo. E este é o arquivo que vamos usar para toda a turma. Além disso, ele tem as fontes para o arquivo no design que estamos fazendo para essa experiência aplicação de chá Boba . E você podia ver todas as fontes aqui. Isso já deve estar instalado em seu aplicativo MMA figo, mas apenas no caso de não ser. Você o tem aqui. Você pode enrolar isso na sua máquina. Ok. Antes de abrir esse arquivo aqui, vou para a Fig MMA. arquivo aqui, O começo de Sigma parece algo assim. Você pousa nesta página, você tem seus rascunhos, seus plugins, sua pesquisa recente. Você tem suas configurações aqui a maior parte do tempo. Estou indo para os rascunhos aqui, e estou fazendo novos quadros de arte. Seu pedido de produto provavelmente como o meu, porque ele tem. Eu já tenho muitos arquivos que estou usando, mas você poderia fazer o novo arquivo aqui e é assim que você cria um novo arquivo de trabalho aqui que você viu, como eu fiz aqui. Se você clicar no título Aqui, é assim que você cria um nome para ele. Você só diz o nome aqui e agora eu tenho um nome aqui, arquivo criado. Vou entrar no funcionamento interno da Fig Mahir. Mas é melhor abrir o arquivo que criei para você, e analisaremostodos os detalhes e aprenderemos fazendo o que acho que é amaneira mais divertida de aprender. Mas é melhor abrir o arquivo que criei para você, e analisaremos todos os detalhes e aprenderemos fazendo o que acho que é a Ok, então agora que você está aqui e você tem o arquivo, hum, se você já está em um arquivo dentro da Fig. Ma, você pode vir Teoh nesta seção aqui. Então venha a isso. Eu clico no topo, como quatro caixas aqui. Eu clico no topo, Meu aplicativo figura vem para minha casa como painel de controle. Aqui, vá para a seção de rascunho aqui, e o que você vai querer fazer é clicar e arrastar este arquivo aqui. Esta figura, um arquivo de classe, corte chá de boba neste espaço aqui para que você possa ver os destaques azuis. E é assim que você vai carregar este arquivo e eventualmente você vai ter esta figura um arquivo de classe aqui. Vou apagar o que acabei de criar chamado nome aqui. É por isso que deletar. Então, se você quiser gerenciar esse espaço, basta clicar com o botão direito em diferentes, hum, arquivos que você criou dentro da fig mond. Você pode excluí-los, duplicá-los, renomeá-los compartilhar, hum, copiar links, abri-los. Você também pode simplesmente abri-los clicando duas vezes. Então, uma vez que você tem o arquivo da classe oito aberto, basta clicar duas vezes nele e bang estavam no arquivo aqui, hum bom e me seguiu. Vamos apenas para o protótipo final aqui, e esta será a boa seção Teoh para dar uma olhada. O que eu vou fazer é eu vou diminuir o zoom fazendo ah, comando se você está em um Mac ou controlar seu em um PC menos então comando menos para mim e eu já estou fazendo alguma funcionalidade básica dentro fig mo Apenas comando menos para diminuir o zoom Plus para ampliar. E se eu quisesse também, uh, zoom in e out, eu poderia segurar Z e ver como isso me dá a minha lupa. E eu apenas clique e eu zoom, clique e selecione clique e arraste, e que irá ampliar o quadro de arte ou esta página de arte para qualquer lugar na página. Eu posso comandar menos novamente, e a próxima coisa que é importante aprender é se você segurar barra de espaço, ele lhe dá esta pequena mão, e esta mão, se você clicar e arrastar, permite que você se mova este espaço ao redor muito rapidamente. Então esses são alguns dos fundamentos de qualquer ferramenta de design. É o seu comando usando menos comando mais para ampliar e como você ampliar, você usando a barra de espaço e a mão disse para mover as coisas ao redor para ajudar a posicionar-se. E então você pode segurar Z para ampliar os lugares que você deseja ver mais. Digamos que eu quero pegar aquele Ah, este pequeno ícone de seta e eu consome aqui atrás. Ok, então vamos em frente e fazer uma caminhada através de um mahir de figo de novo como você viu antes. Se eu quiser alterar o nome deste arquivo de design, basta clicar no topo aqui. Posso mudar o nome. Eu também tenho todas as minhas camadas aqui, que eu vou mostrar a vocês como fazer isso aqui em um segundo. Para este sistema de páginas aqui. Então, qual figura permite que você faça primeiro? Primeiro, ele permite que você crie páginas aqui à esquerda. Você pode ver que eu tenho a aprendizagem. Paige, é aqui que vamos avançar e projetar que a aplicação de chá Boba tem a biblioteca de componentes. Hum, página aqui. É aqui que vamos colocar todos os nossos componentes. Isso vai reutilizar. Você está? Componentes I. Tem o protótipo final. Esta é a experiência de aplicação de chá boba real que você acabou de ver já construído . Pronto para entrar em figo, MMA. Apenas no caso de você ficar preso durante a aula ou você só quer mergulhar nos projetos já. Não vejo como os usei. Hum, isso está tudo aí para você. Tenho os produtos de design. Este é um detalhamento de todos os ícones e fotos que vamos usar para esta aula já aqui. E eu também tenho o kit pegajoso. Este é o kit gooey IOS. E isso tem todas as funções para, como, teclados para seus dispositivos iPhone. Notificações. Tudo lá. Não vamos usar tudo. Mas está lá para você, hum, para projetos futuros, se você precisar. Então, o que você poderia fazer. Vamos dizer que eu quero criar uma nova página. Este é um novo fluxo de trabalho no qual eu quero trabalhar. Basta clicar no botão de mais aqui, e você pode ver que eu tenho uma página seis. Vou chamar isso página nova aqui e agora tenho um novo espaço de arte que posso criar todos os meus projetos aqui. Então vamos em frente e ah, apague esta página aqui. Então vamos deletar esse cara aqui. Você pode ver que eu posso excluir página. Posso renomear Aiken duplicá-lo. Eu também posso fazer uma nova página também. Vamos em frente e excluí-lo. É por isso que você adiciona páginas e exclui páginas. Agora que estamos na página de aprendizagem aqui, você pode ver no topo. página de aprendizagem aqui, Aqui temos as nossas ferramentas. Você tem a ferramenta de seleção. Algumas ferramentas movem de ferramentas de escala. Você tem a ferramenta de arte aqui. É uma ferramenta de moldura na fatia para, uh, entrar nesses como nós fazemos. Eu acho que é melhor quando, um, apenas um design enquanto vamos, e eu vou falar sobre essas ferramentas Maurin habilmente ao longo dos vídeos aqui e mostrar como nós as usamos. Mas aqui está a ferramenta de forma para criar retângulos, linhas, círculos, estrelas do polígrafo. Você também pode colocar imagens. Você também pode simplesmente arrastar imagens e apenas arrastá-lo para o MMA figo em DATs. Como você pode. É assim que costumo colocar imagens nesta ferramenta. Você tem a ferramenta de caneta, que permite que você crie qualquer forma que você quiser aqui, que nós vamos entrar mais em, hum como nós usamos a ferramenta ou como nós fazemos essas séries de vídeos aqui nós temos o comentário, hum, ferramenta, que eu tenho, ah, vídeo no final aqui. Como usar isso. E então temos as mesmas configurações semelhantes aqui no topo. Temos o arquivo aqui procurando um arquivo aberto de um navegador. Você pode salvar este arquivo como ah, como um arquivo real para que você possa tirá-lo da nuvem como eu fiz aqui, Hum, para os documentos desta classe, você pode exportar um, placas de arte e você pode exportar o telas como pdf. Algumas funções básicas viciadas como o assento de comando, um comando de cópia V para colar. Hum, e então você tem algumas áreas de visualização para ver grades. Você pode ver camadas de visualização. Um monte de coisas, muito parecido com qualquer ferramenta que você não usa. Você vai aprender tudo isso. Você meio que aprendeu o básico. E, hum, você vai aprender como você precisa aprender. Então eu vou mostrar quase 90% da ferramenta, hum, que eu uso e ainda há algumas coisas dentro dela que eu não uso. Eu não acho que tudo isso útil para, mas eles estão lá algumas configurações de opções. Você tem algumas configurações vetoriais de você tem algum vetor? Nunca usei isto. Só um aviso. Você tem algumas características de texto aqui? Nunca posso usar isto aqui? Eu uso o campo de texto aqui que eu vou falar aqui em um momento. Você tem um intervalo organizando objetos. Às vezes vou usar isso, mas também uso rapidinhas para esses também. Estes ar como dedo do pé como objetos de camada em cima um do outro e organizá-los. Você tem suas janelas. Raramente. Alguma vez usei isto também? Os plugins ou frio. Eu uso muito os plugins. Então, um, eu tenho um vídeo no final aqui que apenas fala sobre apenas plugins que eu sou e como eles são incríveis e depois ajudar. Você poderia procurar qualquer coisa aqui se você quisesse Teoh, um, como teclado. E isso lhe dará atalhos de teclado aqui, que eu tenho um vídeo no final do qual vamos falar. Então, se você ficar preso, você pode, ah fazer a ajuda aqui, tudo bem, e então vamos em frente e criar um retângulo aqui. Você pode ver que eu peguei o retângulo para eu cliquei e arrastado aqui e você pode ver a coluna da esquerda. Aqui está muito a ver com minhas camadas e minhas páginas aqui que você que eu tenho a coluna direita aqui tem a ver com o que eu selecionar. Então você pode ver que isso é um básico Eu estou no quadro de arte. Está mostrando meu passado para o quadro de arte, alguns estilos locais. Vou te mostrar como configurar isso no vídeo. A próxima série de vídeos que vai fazer e eu clicar no retângulo Assista do material sobre os direitos vai mudar Boone. Então agora ele mudou para funções retangulares aqui, então eu posso mudar a largura deste. Só estou segurando. Digamos que eu quero 20. Você pode ver que vai ficar muito pequeno. Vamos lá, sei lá, 2000, se quisermos. E vamos em frente e fazer este 2000 também. Temos um quadrado. Vou ampliar isso. Então eu mudei a largura e a altura daquele quadrado. Digamos que eu quero o Teoh. Gire. Essa é a rotação. Você também pode simplesmente girar clicando no lado. Aqui, você vê, quando eu passo o mouse sobre o lado de qualquer canto, eu recebo uma ferramenta de rotação, e se eu apenas clicar e arrastar, ela gira elementos. Mas se eu quiser ser mais específico, eu posso clicar aqui para girar e ficar mais específico. Eu também posso em torno de bordas aqui doente e ver se eu subir aqui em torno das bordas e eles vão obter mais ao redor, eventualmente transformando este retângulo em um círculo. Se eu clicar nos , cantos independentes, isso permite talvez apenas arredondar um canto de cada vez. Você pode ver apenas o topo direito ali está ficando arredondado e eu vou mergulhar Mawr fundo nessas , hum características como nós continuamos com a classe. Mas eu tenho um pressentimento aqui. Posso mudar as cores. Diga que quero fazer isso azul. Eu posso mudar um sólido para um Lanier, que é um Grady int, e eu tenho duas cores. Digamos que eu queira mudar essa cor aqui e talvez algo mais Ah, roxo e ele pudesse ver sua opacidade 0%. Aqui está no passado. O controle deslizante torna transparente, e agora nós fizemos isso. Uma flor cheia era uma espécie de cor agradável. Eu tenho minhas cores de documento aqui abaixo que você pode ver também. E digamos que eu queira adicionar um traço como se eu quisesse adicionar um traço preto a isso. Então aqui está o meu derrame. Você pode ver o que eu fiz aqui foi eu pressionei o plus e eu adicionei um acidente vascular cerebral aqui. E então se eu posso fazer a espessura do curso mais aqui, você pode ver que eu também posso fazer o mesmo que eu fiz com a sensação. Posso mudar a cor. Posso mudá-lo do dedo do pé sólido. Lanier tem um brilho diferente. É divertido. Vá brincar com esses dois. O que é que eu só quero um sólido aqui. Posso mudar as cores aqui. Vamos como um azul mais escuro, ok? E então eu tenho a transparência aqui. Então, se eu quiser definir toda a imagem transparente, eu posso começar a movê-la para baixo. Eventualmente desaparece, movendo-se de volta para cima. Parece que consigo fazer a mesma coisa com a minha sensação. Você pode ver aqui. Só estou tornando o campo transparente. Bastante simples. Eles só estavam pressionando o teclado para baixo, Arrow. Para fazer isso, você também pode digitá-lo. Digamos que eu queira, tipo, 20 você sabe, eu vou voltar 200 Eu poderia fazer a mesma coisa aqui para o derrame. A comprimir a seta para baixo e estou a ver um derrame. Vá embora para o derrame. Aiken, faça um interior. Posso fazer um centro. Eu também posso fazer um fora suas coisas muito simples para os efeitos. Aqui. Você pode fazer sombras, coisas assim. Então tem uma sombra aqui. Vamos lá. Hum, aplicar. Solte a sombra aqui você pode fazer em nossas sombras. O padrão é soltar sombra. Isso é principalmente o que a maioria das pessoas usa. Vamos fazer isso. Vamos começar com talvez 70% aqui sobre a transparência. Vamos fazer 40 à esquerda ou à direita e 40 na parte inferior. O que está junto? Desfoque sobre ele e você pode começar a ver essa sombra. E se eu quiser mudar a cor da sombra, vamos eu quero colocar um pouco de azul naquela sombra cair lá nós temos um pouco de azul acontecendo. Vou apagar os traços. Aiken deletar. Eu posso pressionar o globo ocular e isso ainda mantém o derrame por apenas não consigo vê-lo e você comprime o menos aqui e eu poderia simplesmente apagá-lo. Então agora eu só tenho ah retângulo e eu tenho a sombra aplicada a ele. Eu vou ir em frente e clicar neste retângulo e se eu fizer um comando, ver ou eu vou nele aqui e eu faço uma cópia e então eu vou e faço um comando V ou editar e eu colar . Você pode ver que eu acabei de colar um retângulo aqui. Eu também posso segurar opção clique e arrastar, e eu posso copiar um retângulo aqui e se eu segurar shift enquanto eu vou fazer isso, ele mantém-lo na linha. Então está exatamente no mesmo alinhamento que o que estou copiando. Aqui. Você pode ver que eu não posso sair dessa. Mas se eu desfazer o turno, eu posso. Mas vamos em frente e fazer tudo isso um pouco não alinhado aqui. Então agora eu tenho três retângulos e você pode ver aqui no meu painel à esquerda. Aqui está eu tenho que me livrar deles. Eu só pressionei. Excluir. Eu posso selecionar esses retângulos apenas clicando nessas camadas aqui, que é útil, porque como você começa a obter muitos, muitos elementos de design indo em sua página, é bom saber que você pode apenas ir selecioná-lo Por aqui. Eu também posso manter a tecla Shift pressionada, e eu posso selecionar alguns destes. Selecione todos eles. E se eu só quiser um e três finos? Eu posso manter pressionado o comando e eu posso apenas selecionar o um e três. Eu também posso apenas clicar em Encontrar um aqui. Uh, clique no retângulo em si. Disse turno, clique em outro e você pode ver que eu tenho esses dois selecionados. Não este agora, só estes dois aqui. Posso mover estes dois. Posso segurar o turno de novo e desfazer e só tenho este selecionado. Ou eu poderia clicar e arrastar, e eu posso selecionar todos esses exatamente assim. E eu posso segurar, deslocar e clicar e arrastar novamente e ver como ele não isolou as áreas que estou clicando e arrastando. Então esses são alguns, como, realmente, realmente, fundamentos de qualquer ferramenta de design é, hum, ser capaz de selecionar elementos criar em alguma cor em alguns, acariciado em alguns efeitos, sendo capaz de selecionar vários objetos. Eles selecionam vários objetos. Outra coisa que é muito fundamental para é ser capaz Teoh, alinhar estes Então você pode ver que eu selecionei todos estes três e eu pressionei o alinhamento e bang. Estão todos alinhados no topo. Eu também posso até liderar distribuí-los para que eu possa dizer arrumado aqui, ou é para distribuir espaçamento horizontal. E faz espaçamento igual da esquerda para a direita e da esquerda para a direita aqui. Tudo bem, então você pode ver o muitas dessas funções que eu acabei de mostrar você também estava, um, organizando aqui um, configurações de objeto aqui em cima. Digamos que eu tenho Ah, eu vou fazer um desses apenas preto. Vou voltar ao sólido e fazer um preto, e depois vou fazer este aqui. Vou fazer este voltar a um sólido e só fazer este. , Qualquer cor encontrada por mim,fique rosa para este caso. Agora, você pode ver minhas camadas aqui. Então eu tenho o rosa no topo. Tenho o Grady no meio do preto à esquerda. Eu quero mudar qualquer um desses anéis de camada. Eu posso ir para opor e eu posso ir para a frente. Então, qualquer objeto que eu selecionei, eu selecionei este quadrado que eu poderia trazer para a frente e boom foram trazidos. Trouxemos esse para a primeira página. Se eu quiser trazê-lo, , vamos em frente e dizer que eu quero trazer este rosa para cima agora. Tenho que me opor. Traga para a frente e eu posso ver que isso foi para a frente. Agora, se eu quiser mandar isso para trás, eu posso ir para trás e ele cede para trás. E se eu quiser falar sobre um, vou adiantar e você pode ver como eu trouxe isso para a frente. Eu também posso fazer a mesma coisa clicando nas camadas e arrastando as camadas para que você possa ver que eu estou arrastando as camadas para cima e eu vou trazer o rosa todo o caminho até o topo aqui. Coisas muito simples. Digamos que eu queira virar este elemento aqui. O que é fazer? Vou fazer com que um dos cantos tenha uma forma diferente aqui, e quero virar. Vou fazer com que um dos cantos tenha uma forma diferente aqui, Basta ir para o objeto, ir para virar horizontal, e você vai ver que ele vai virar horizontal. Ou eu poderia virar na vertical também. E eu tenho que eu também posso fazer. Sua rotação aqui é bem, mas eu gosto de fazer a rotação apenas colocando meu mouse aqui e girando assim . Está bem, fixe. Então isso foi um pouco resumido do básico do MMA de figo, a ferramenta de design. Vamos falar um pouco sobre a estrutura deste arquivo que eu lhe dei. Então temos as páginas aqui, vamos criar tudo neste aprendizado. Paige, aqui no canto superior esquerdo. Temos a página da biblioteca de componentes para colocar todos os nossos componentes. Você tem o protótipo final aqui. Então, essencialmente, esta página de aprendizado que temos no topo acabará parecendo este arquivo aqui dividido em quatro cenários que eu rotulei aqui no topo. Estes são apenas um quadrado com texto nele. Isso ajuda-me a organizar os meus ficheiros. Então você tem o registro e o arquivo aqui. Você tem os cenários de ordem aqui. O cheque aqui e as telas de perfil aqui. Então, já estão todos no arquivo? Protótipos. Você pode ver se você clicar na aba do protótipo aqui e eu clicar e arrastar isso aqui. É assim que fazemos o protótipo das nossas telas juntas, que vos mostrarei no próximo arquivo ou no próximo vídeo aqui. Mas você pode ver que está tudo aqui para você. Mas a melhor maneira de aprender isso é que vamos recriar isso, mas é uma rede de segurança. Mas a melhor maneira de aprender isso é que vamos recriar isso, Se você precisar, eu posso ter todos os produtos de design aqui, e nós já temos sempre tudo o que você precisa aqui é bem, hum e sim, e sem mais delongas, eu acho que estamos prontos para ir em frente e iniciar a próxima seção deste vídeo, que é nós vamos aprender como começar a projetar esse aplicativo móvel, e vamos começar com, e vamos começar com, fazer login e cadastrar o fluxo de trabalho. Mais uma vez, quero agradecer-te por fazeres a aula e vejo-te no próximo vídeo. Cuide-se. 3. Crie as telas de login + criação de componentes , prototyping e animate: Muito bem, bem-vindos à próxima aula. Então esta vai ser a divertida série de vídeos onde nós começamos a projetar esse aplicativo móvel . O aplicativo de pedido de chá Boba sob demanda que você viu no último vídeo. E o que vamos fazer é começar com, login e cadastrar o fluxo de trabalho. E enquanto fazemos isso, aprenderemos a criar e usar uma biblioteca de componentes e também aprenderemos a criar e compartilhar o protótipo clicável. Vamos em frente e começar. Hum, o que nós vamos fazer aqui é ir até os produtos de design aqui que você tem e o que você quer fazer aqui é se você ampliar este quadro de arte aqui, aquele que diz que os produtos de design não clicam no interior do seu faz ar clicando em , clique no próprio quadro de arte. Você pode ver aqui estes produtos de design ou eu posso clicar na camada aqui à esquerda que diz produtos de design. E isso é clicar em todo o quadro de arte. Vá em frente e clique que você pode fazer um comando, ver ou controlar. Veja se você está em um PC. Mas comando, veja, para Mac ou você pode ir para editar cópia, ir para a página de aprendizagem aqui e ir em frente e ritmo isso. Copie isso novamente e cole aqui para que você possa ver todos os elementos que vamos usar para isso. Tudo bem. E as páginas que vamos projetar aqui são a figura do link final do protótipo . Aqui está tudo da Siri por baixo desta barra preta que diz para se inscrever e fazer login. Vocês podem ver bem aqui, então não copiem isso. Hum, eu vou trazer alguns desses elementos aqui. Só para me lembrar o que mostrar a vocês enquanto continuamos nossa jornada na construção desta aplicação. Tudo bem, vamos. O protótipo final. Vou mostrar-vos rapidamente como isto vai ficar na versão final deste vídeo . Vamos fazer uma tela de carregamento com o mapa. Nós vamos fazer o login, assinar abas como esta. E, em seguida, vamos criar estes formulários aqui e clicar ou tocar no e-mail e nome formulário toque no teclado, coloca o e-mail em, clique na senha, abre as entradas de senha que você não pode viver digite fig. MMA não tem essa funcionalidade onde eu possa, tipo, viver, digitar algo. Então você está tipo de prototipagem ou simulando como essa experiência será uma vez desenvolvida, e então você pode digitar no teclado. Mas a maioria das ferramentas de protótipo não tem essa funcionalidade a menos que você esteja usando código real. E então vamos chegar a este ponto, hum, e vamos em frente e parar por aí. Ok, então a primeira coisa que vamos fazer, hum, que vamos aprender é como criar um quadro de arte. Então vá em frente e vá para a página de aprendizagem aqui, e o que você vai querer fazer é ir para o canto superior esquerdo. Aqui. Há esta ferramenta aqui, que é chamada de moldura. Clique no quadro e você verá à direita aqui funciona como projetado. Você terá uma lista completa de, hum, hum, tamanhos de quadros de arte que você pode criar facilmente dentro de figo MMA. Então ele tem telefone tem tablets aqui, veja de iPad. Mini iPad Pro tem desktop. Você está procurando um design para um livro Mac. Livro MacBook Pro Surface. Um I Mac assistiu modelos aqui tem papel, tem mídia social para este caso você pode. Você também pode simplesmente clicar e arrastar e fazer qualquer tipo de tamanho de placa de arte que você deseja. E você poderia manipular os tamanhos com e altura aqui. Então vamos apenas dizer que eu quero que este quadro de arte seja 100 por 100 tipo de uma placa de arte menor de um zoom em que muito simples novamente. Você poderia clicar aqui, criar o quadro para o nosso, um, qualquer quadro que você quiser. Mas para os nossos propósitos aqui, eu vou selecionar estes dois são placas e excluí-los. Vamos usar o iPhone X aqui. Então vamos para o iPhone 11 Pro X e basta clicar nele e você pode ver que adicionou automaticamente o tamanho da placa de arteafiliada a um iPhone X que você tem. o iPhone 11 Pro X e basta clicar nele e você pode ver que adicionou automaticamente o tamanho da placa de arte Eu também posso mover este nosso tabuleiro ao redor apenas clicando no topo e arrastando-o. Então eu vou em frente e montá-lo aqui, certo? E a primeira coisa que eu quero fazer neste quadro de arte, uma vez que eu tenha selecionado é eu quero vir para a sensação aqui, e eu quero clicar no campo e eu vou fazer isso tudo preto. Então arraste este ponto aqui, todo o caminho até a taxa inferior. E o que isso fez foi criar o fundo disto para ser preto. Você pode mudá-lo de qualquer cor, se quiser. Vamos usar preto para esta configuração. Então neste momento você acabou de aprender como criar um homem, um quadro de arte específico para um tamanho de tela do iPhone 11. Ou você pode criar qualquer quadro de arte tamanho que você gostaria. E então aprendemos como agarrar que estão entediados Aqui, você pode ver que há uma camada, hum, no nosso novo quadro de arte aqui, camada. Se você clicar nesta camada, podemos nomeá-la. Vamos dar um nome a isto. O que dizer que esta é a tela de carregamento e você pode ver aqui eu posso mudar o preenchimento, então eu apenas clique fora dele. Clique de volta para ele. Posso mudar a sensação aqui. Tudo bem. A próxima coisa que quero mostrar é como salvar ou como criar um e salvar uma cor para reutilizar ao longo desta experiência. Então temos preto, que é uma cor hexadecimal. Hum nós temos isso. 000000 é o tom hexadecimal que vamos fazer aqui é clicar nos pequenos quatro pontos aqui que você vê, e nós temos uma coisa chamada estilos de cor. Eu já tenho alguns aqui rotulados Você pode não ter nenhum agora, e isso é totalmente bom. Vamos fazer isso juntos. Então vá em frente e pressione o botão mais aqui, veja onde diz criar estilo. E o que isso vai fazer vai criar uma cor preta para reutilizarmos. Então vamos chamar isso de preto e ir em frente e pressionar o botão criar estilo sobre obedecer bada boom. E eu tenho um estilo preto aqui se eu quiser neste estilo preto, tudo que eu tenho que fazer é clicar nele. Se eu clicar no quadro de arte aqui, e eu não tenho nada selecionado na guia de design. Ele só me mostra meu painel, que mostra todos os estilos, incluindo cores e têxteis. Você provavelmente não tem têxteis ainda. Isso está tudo bem. Vamos montar isto juntos. Então, se eu quiser mudar o preto aqui, eu apenas clique duas vezes sobre o preto clique direito sobre o preto e então você verá esta pequena configuração aqui, pressione as configurações e eu posso alterar esta propriedade preta e ver como ele já muda em Meu quadro de arte. Então, onde quer que esta cor preta viva, eu tenho muitas placas de arte. Eu posso mudá-lo em um só lugar, e ele vai mudar em todas as telas, que eu vou mostrar aqui em um minuto. Ok, então, hum, agora temos nossa primeira tela com o fundo preto. O que vamos querer fazer aqui é ir para a seção de design bom e pegar a informação. São as definições, a bateria e o tempo existentes no iPhone, e pode ver a aba aqui. Consegui isto do kit pegajoso. Se você vai para a página de design aqui e você pode ver todas essas configurações aqui para a barra de status , hum, a porcentagem de configurações de tempo de bateria Wi-Fi, tudo isso mudou quando você está usando um iPhone. Eu geralmente só ir com o tempo na bateria na parte superior, e faz com que pareça mais um aplicativo riel ao vivo que você está usando, que é o objetivo dessas ferramentas é toe imitar software real, mesmo que seja apenas projetos de tela que nos permite testar e aprender rapidamente em um analfabeto rapidamente e, em seguida, eventualmente, construir essas experiências de aplicação com engenheiros com código real e eventualmente, colocar um aplicativo no mercado e criar negócios. Ok, então vamos voltar para a nossa guia de aprendizagem aqui. Eu já criei o que vai precisar. Então, apenas se você clicar nele aqui e seguir em frente e fazer um comando, ver e voltar para o seu quadro de arte aqui, você pode ver que eu estou ampliando em Z, e então eu estou usando minha barra de espaço novamente para me mover. Alguém ainda faz zoom ainda mais apertado aqui com apenas segurando em Z clicando e arrastando. E eu vou acompanhar isso. Alguém faça um comando V ou você pode ir para editar colar até você que colou isso. Aqui. Vou colocar isso aqui no topo, assim. Isso deve ser bom. Você pode ver que isso já está à direita. Selecionado. Ele tem a posição fixa ao rolar, certifique-se de que a caixa está marcada. Não queremos que esta barra de status se mova. Queríamos mantê-lo consertado. Isso sempre fica nessa posição na parte superior do seu dispositivo iPhones. Vou diminuir o zoom fazendo um comando menos aqui. E a próxima coisa que faremos aqui, se quiser. Se quiser voltar à aba final do protótipo e verificar o que somos o que estamos construindo aqui. Estamos construindo essa tela aqui. Tem o mapa. Tem a barra de status tem este ícone legal este chá Boba tem o logotipo do chá Boba e tem este texto de carregamento aqui. Vamos voltar para a página de aprendizagem aqui. Vamos pegar este mapa aqui. Eu tenho o que já foi cortado e eu vou te mostrar, hum, como cortar isso se você quiser obter esta seção aqui. Então vá em frente e pegue a imagem para a esquerda. Aqui, você pode ver que há uma colheita que eu liguei no topo. Vá em frente e clique sobre isso e eu posso puxar isso agora e eu posso cortar uma imagem que você pode ver aqui eu cortei uma imagem pressione retorno e ele corta pressione comando Z ou editar desfazer. E remonta aos passos que fiz. Se você for o turno de comando. Veja, que é refazer pode ver aqui. E espessura. - Legal. Porque tem estas teclas rápidas aqui, ao lado das suas funções. Então, como você se acostumar com isso, é melhor começar a aprender as rapidinhas. E você pode passar por isso bem rápido. Alguém é um turno de comando. Vês? E eu cortei isso aqui em baixo. Agora, se eu também quiser mover a imagem dentro deste corte para baixo, eu posso ir em frente e clicar na ferramenta de corte novamente. E apenas clicando no interior da minha colheita, posso mover esta imagem. E se eu quiser também explodir essa imagem um pouco, eu posso pegar os cantos dessa imagem, e eu posso escalá-la. Normalmente, quando você está escalando, é melhor manter o turno para que você não é melhor manter o turno para que você não deforme sua imagem. Então, se você segurar Shift, ele mantém a perspectiva de sua imagem. Alguns segurando o turno agora em arrastar meu mouse para cima e para baixo e eu estou baixando e de cabeça . Ele é que eu estou escalando minha imagem. Tudo bem. A próxima coisa aqui é que você pode ver Quando eu entrei na ferramenta de corte, ele automaticamente abriu as funções de imagem aqui, Então deixe-me falar um pouco sobre isso aqui em um segundo. Então, se eu for para o Phil aqui tem a imagem nesta caixa e eu clicar nela, você pode ver que eu estou na área de colheita agora. Eu também posso mudar isso. Posso encaixar a imagem naquele quadrado. Consigo senti-lo. Então sente a praça. Então eu escalo. É sentir que o espaço eu posso azulejá-lo, o que eu nunca realmente usaria, mas ele vai colocar a imagem em mosaico. Então, se eu reduzir isso assim, você pode ver um pouco legal todo o ladrilho que está acontecendo. O estilo é como o seu piso. Você sabe, está tomando ah seção, e está copiando tudo verticalmente e horizontalmente. Eu também tenho algumas configurações de imagem do motor aqui. Permita-me adicionar a cor dentro desta imagem, e posso retirar a transparência um pouco aqui. a cor dentro desta imagem, Nunca usei estes, , por isso costumo ficar longe destes. Hum, vamos em frente e voltar. Então, se eu voltasse e quisesse preencher esta forma da cor, você pode vê-lo, preenchê-lo com a cor voltaria para a imagem aqui. Eu sempre mantenho na imagem. Eu nunca usei azulejos com tanta frequência também. Eu costumo prepará-lo para ter ah fit e podemos voltar para a nossa colheita se você quiser cortar esse cara de novo. Eu costumo prepará-lo para ter ah fit e podemos voltar para a nossa colheita se você quiser Une Zewe para alterar suas imagens. Aqui está se eu clicar nesta imagem, ver onde ele diz escolher imagem. Posso clicar e selecionar outra imagem. Digamos que, para este caso, vou selecionar uma das minhas imagens aqui. Vamos selecionável bit t imagem assim e eu acabei de trocar esta imagem. Mas está sendo ajustado e cortado dentro desse espaço para que você possa ver que interpolou um pouco a imagem . Ok, algumas funções básicas de imagens e recortes. Vou voltar para o espaço que temos aqui. Mas para o bem do design, vamos em frente e pegar essa imagem que eu já cortei e vamos colá-la neste quadro de arte. Então, se eu quiser pagar algo para uma arte nascida de novo, eu cliquei no canto superior esquerdo que é o quadro de arte. Ah, Layer. E eu faço um comando V. Você pode ver que você pode ir colar Aqui está bem o comando V. E ali está o mapa. Agora quero definir este mapa. Hum, abaixo do ah, você pode ver que deve estar abaixo da barra de status aqui, que é. Também quero reduzir um pouco a transparência. Então você pode ver que eu vou ir em frente e mover a transparência para baixo. Digamos que cerca de 20% aqui. Só estou pressionando. Mude para baixo, mude para cima. Se você desfazer o deslocamento, ele lhe dá o ah real, incrementos. E se você segurar o turno, ele lhe dá incrementos para o décimo. Então 2030 40 50. 60. Faça 20 aqui. Isso parece bom. Ok, agora, vamos pegar o logotipo do chá Boba aqui em todo uhm rosa. Então eu vou pegar o comando de imprensa V. Eu vou voltar para o meu quadro de arte aqui. Vou colá-lo no centro. Você pode vê-lo automaticamente alinhá-lo, hum, horizontal verticalmente centrado para mim ou horizontalmente centrado. E por aí tem que ser perfeito. Assim como está tudo bem. A próxima coisa que vou adicionar para esta tela de carregamento é voltar aqui. Vou pegar isso. Boba Tea ilustração aqui. Comando pego. Vês? Copie isso. Vou aparecer aqui, e vou colá-lo em cima. Comando V segunda cópia é comando C e Colar Comando V. Da próxima vez que faremos é eu vou usar a ferramenta de texto. Então a ferramenta aqui está no canto superior esquerdo que tem o chá nele é o têxtil. Vou clicar nele. E é assim que posso criar tipografia na minha aplicação. Então agora eu cliquei nele. Vou clicar e arrastar o meu quadro de arte aqui assim. E eu vou digitar a palavra carregando e nós fazemos três pontos. Eu também vou mudar isso, Phil aqui na parte inferior do dedo branco para que você possa ver que está carregando agora. E vamos entrar em alguns atributos de texto, hum, e funções de texto que podemos fazer agora pressionando a sensação no texto aqui. Eu posso mudar isso. Qualquer cor que eu quiser. Eu tenho a barra de cores aqui. Eu arrastei este Aiken selecionar cores e eu também posso fazer transparências aqui, tudo dentro desta configuração de cores e semelhantes às cores que ah, são os, hum, os quadrados que eu mostrei a você no vídeo passado onde você poderia torná-los informações Grady perto , um, você pode fazer isso bem como texto. Embora eu não recomendasse. Eu não costumo colocar brilho e texto. A maior parte do seu projeto serve comunicação. Então, Então, quando sua tipografia tem Grady no Senado e torna difícil de ler. E o objetivo da tipografia é Teoh é lê-lo e ajudar a educar, hum, a pessoa usando este aplicativo ou dando-lhes contexto. Então, hum, de novo. E não use as formigas lineares do Grady qualquer coisa assim para o seu Texas. Você é sólido. Vou usar branco por enquanto. Agora, vamos em frente e dizer, eu quero explodir isso um pouco. Quero aumentar esse tamanho de texto. Alguém próximo. O Phil aqui que eu não tenho que fazer é selecionar a caixa de texto que eu tenho e ver aqui onde diz 15. Posso começar a bater isso. Vamos fazer 18 anos e você pode ir para baixo sobre ele também. É assim que você diminui e aumenta fontes, tamanhos de fonte, este abaixo. Chama-se espaçamento entre letras, e esse é o espaço entre as letras. Eu quero aumentar isso um pouco. Vamos fazer você gosta de oito lá um pouco mais fácil de ler quando está espaçado assim. Ok, e vamos em frente e definir este, hum, texto aqui para ter uma transparência para o seu, digamos, 50% transparente. Na verdade, não, vamos manter 100 e vamos realmente escolher. Concordo que podemos usar. Então, sempre que usamos pastagem, eu normalmente gosto de colocar um pouco de coloração azul no meu cinza versus apenas cinza. A coloração azul ajuda a adicionar um tom mais moderno ao aplicativo, então eu vou escolher. A coloração azul ajuda a adicionar um tom mais moderno ao aplicativo, Qualquer cinza azul como este é bom. Qualquer azul funcionará. Pode ser como um azul frio ou azul mais escuro, ou mesmo um azul cercado, se você quiser, mas basta ir com o azul normal. Digamos que um pouco mais tarde. OK, vamos fazer isso direito. Neste ponto, eu quero salvar esta cor, então eu quero re usar esta cor. Então, como ele fez isso antes é. Nós clicamos nos quatro pontos aqui, o menu para preenchimentos. E nós tivemos essa pequena vantagem aqui em uma imprensa plus e eu vou chamar isso de cinza legal. Você pode dar o nome que quiser, McCall Mind legal, cinza. E eu vou criar este estilo. E agora posso reutilizar este estilo quando quiser. Você pode ver quando eu clico nele, ele tem a cor cinza legal. Se eu não quiser usar essa cor, por exemplo, eu queria tentar outra coisa. Você clica neste destacamento aqui e agora ele o desprende. E eu posso voltar para a configuração de cor normal que tínhamos. Mas eu não quero fazer isso. Só quero manter a calma. Cinza, por enquanto. Tudo bem, ótimo. Então temos a tela de carregamento aqui. Vou ver a minha lista de verificação para ter a certeza de que te mostrei tudo o que passamos nesta tela sozinho. O que aprendemos foi algumas configurações de tipografia. Aprendemos algumas cores como usar Grady INTs, re dimensionamento, texto e corte de imagens, criando estilos de cores. Hum, e então nós entraremos em, hum criando alguns dos componentes no próximo verde aqui, eu só a próxima tela que vamos construir é se você clicar de volta no protótipo final aqui, eu vou mostrar a você. É o Boba? Cadastre-se e faça login na tela aqui. Vamos voltar ao nosso aprendizado da Paige aqui. Tudo bem, então agora nós já não estamos a bordo. Você pode ver aqui que tem o fundo preto e alguns, hum, hum, e a barra de status aqui é uma ondulação. Em vez de criar um outro quadro de arte usando a ferramenta de moldura aqui, o que realmente queremos fazer é apenas copiar este quadro de arte. Então há algumas maneiras que podemos copiar isso eu posso clicar no topo aqui. Você pode ver quando você clica no quadro de arte em destaques azul versus qualquer coisa que eu sou. Ah, quer clicar em e selecionar dentro do próprio quadro de arte. Mas neste caso, queremos selecionar todo o nosso quadro. 2º clique, eu posso seguir em frente, mover e arrastar que o nosso relatório ao redor. Mas eu quero copiá-lo para que um dia eu possa fazer é fazer um comando, ver, ver, e eu posso fazer um Comando V. E ele copia o quadro de arte automaticamente para mim e colocá-lo direito à direita desse, hum, a nossa prancha à esquerda. Aqui, você pode ver outra maneira que eu poderia fazer isso é que eu posso clicar no quadro de arte, Hold opção até eu obter a seta dupla. Você pode ver aqui o clique de seta dupla e arrastá-lo para a direita e, em seguida, soltá-lo. E quando eu largo, eu copiei isso também. Então, mais uma vez nessa. Eu clico e mantenho a opção até obter a seta dupla. E quando eu mantenho o turno, ele mantém isso alinhado para que eu não possa me mover. Você pode enviar mover meu mouse para cima e para baixo, mas eu não vou deixar que eu remova este quadro de arte do alinhamento onde se eu desfazer turno, eu posso movê-lo tanto quanto eu quiser para alguém ahold shift porque você quer seus nossos quadros on-line. Você quer ter um layout organizado limpo ? Certo, então agora eu tenho a nova tela de carregamento. Vamos chamar isso de carregamento. Vamos chamar isso de tela de login aqui, então se você apenas clicar duas vezes sobre a camada e você faz, Você faz login. Bem, você entra e se inscreve porque está tudo bem, legal. Então, neste ponto, vamos começar a remover algumas coisas. Então vamos remover o chá de boba. Vamos remover o mapa. Vou ficar com isto. Hum, este carregamento realmente apagaria para começar de novo. Está bem, Legal. Então vamos em frente e pegar o logotipo que temos aqui que tem o branco e ver aqui e fazer um comando. Vês? Copie isso. Eu vou. É passar para o outro quadro de arte que eu tenho aqui e fazer um comando v Tudo bem. Assim como assim. E a próxima coisa que eu quero fazer é pegar a ferramenta de texto aqui, e eu quero criar a inscrição e as abas de login. Então eu cliquei no têxtil aqui. Vou clicar e arrastar para algum lugar. O meio está bem. Vou digitar a inscrição. Vou fazer tudo que acabei de digitar com os blocos de boné. Faça este branco e você pode facilmente alterar o texto aqui fazendo. Você pode alterar todas as maiúsculas do texto aqui com o menu de texto na parte superior indo para maiúsculas originais , você pode fazer minúsculas aqui ou maiúsculas também. Quero manter o meu número. Caso. Tudo bem, legal. Então nós nos inscrevemos aqui e o que eu tenho é definido em Roboto Bold 19 pontos. Vamos em frente e criar isso como um estilo de personagem que podemos usar e reutilizar ao longo deste aplicativo. Então, como fazer isso é semelhante a como criamos o estilo de cor. Veja alguns pequenos quatro pontos aqui à direita nesta caixa de diálogo de texto. Vou clicar nele e já tenho alguns têxteis e estilos de personagens criados aqui. Você pode não vê-lo, , mas o que você poderia fazer aqui é criar um novo e vamos chamar isso. Às vezes eu só dou o nome do que são. Esta é uma altura de 19 pontos ou pixels no ponto certo, e é negrito. Lá vai você. Agora por que isso é útil é, digamos que eu use a ferramenta de texto novamente. O comando rápido Etem a ser usado para pegar a ferramenta de texto. Muito simples, seu chá e você pode ver quando você paira sobre ele. Dá-te a rapidinha. Um pouco de Presti. Se eu digitar alguma coisa de novo. Então vamos dizer que vou fazer isso fora do quadro de arte aqui. Então eu faço o texto aqui, e eu apenas digitar um. Se eu criar homens, vire este minúsculo dedo minúsculotambém. Tudo bem. E se eu selecionar essa fonte e entrar no texto aqui e pegar os atributos que criamos o estilo de caractere dizer 19 pontos em negrito, ele está configurando automaticamente esse caractere e eu posso alterá-lo para branco. E eu tenho o mesmo tamanho de fonte, caráter e têxtil que o que eu criei aqui para. Cadastre-se. Certo. Então o que vou fazer é copiar esta placa aqui. Vou segurar a opção, clicar e arrastar para a direita, e você pode ver e dizer a eles para se encontrarem bem no centro. Você pode ver bem ali, e ele vai encaixar aqueles que caixa de ligação. Aquela caixa de texto para inscrição que acabei de copiar irá encaixar na original de onde copiei . Vou pegar os dois e usar minha tecla de seta no teclado e mover para a esquerda um pouco só para que ambos estejam alinhados e vocês possam ver que ambos estão centrados na página. Neste ponto, vou digitar direito de novo. E agora eu vou quebrar este estilo e torná-lo a partir da caixa de diálogo têxtil personagem aqui e torná-lo um real regular. Vamos, vamos fazer com que seja normal. Eu também vou mudá-lo para cerca de 40% de opacidade aqui, então você pode ver isso. Então, mais uma vez eu peguei o log in. Eu o separei do têxtil que tivemos canta para o estilo destacado. Agora, isso me permite fazer qualquer falha que eu quiser. Você quer escolher outras fontes, você pode entrar e selecionar as fontes dela, mas estamos usando Roboto para este caso, e eu vou mudar para um normal. Você pode até fazer luz se você quiser. Vamos com a luz. Vou remover a opacidade para 40. Talvez fazer 50. Agora, isso parece bom. Ok, próxima coisa que vou fazer é pegar a ferramenta retangular. Então eu tenho no canto superior esquerdo aqui, e eu vou criar uma pequena linha. Então o que eu fiz foi pegar a ferramenta de retângulo. Eu ampliei um pouco e eu cliquei e arrastei e fiz uma pequena linha aqui onde eu retângulo aqui bem fina. Agora o que vou fazer é mudar esta cor para ser este rosa. Então o que eu poderia fazer é eu quero ah, cor que eu estou vendo já no meu design, eu posso tentar selecioná-lo aqui tentando combiná-lo. Você também pode simplesmente pegar o conta-gotas aqui e passar o mouse sobre qualquer cor que você quiser e clicar nele. E ele fará automaticamente essa cor para você Outra maneira. Você pode adicionar a cor aqui é que eu posso clicar sobre este elemento que eu posso copiar e ritmo. É o valor hexadecimal aqui comando. Veja, eu posso clicar neste novo retângulo que eu criei e eu posso comandar v pressione retorno no teclado, e eu tenho a mesma cor. A maneira que eu gosto de fazer isso é vamos em frente e criar um estilo de cor. Agora que tenho o carro que vou reutilizar e isto vai ser uma cor de ação, então esta é a cor que são botões. Eles serão praticamente qualquer coisa que é clicável no aplicativo que queremos criar com essa cor de ação primária. Então agora eu tenho a cor. Vou seguir em frente e clicar no nosso estilo de criação aqui, e C já tinha um criado. Ele o criou novamente. Vou chamar essa cor de ação primária. Eu vou criar aquele lá para que você possa ver esta nova cor que temos aqui na segunda linha. Está bem, fixe. Então agora temos a inscrição e o log em andamento. Vamos voltar ao protótipo final aqui. Vamos ver a placa. Então nós tínhamos primeiro nome sobrenome e-mail senha aqui. E é aqui que vamos entrar na criação de alguns componentes aqui, que este é um importante check out. Vamos criar esses campos de formulário. Vamos voltar ao nosso aprendizado aqui. E o que eu vou fazer é usar a ferramenta de linha, então eu vou para onde eu possa selecionar o retângulo. Basta clicar nele. Vês a lista? Vê a ferramenta de linha? Vou fazer uma linha, não de ponta a ponta, apenas dentro de alguns limites. Aqui. Dê-lhe algum espaço à esquerda e à direita para o quadro de arte. Se eu segurar o turno, ele vai me dar uma linha reta. Se eu não segurar o turno, você pode ver que ele dá linhas tortas. Nós queremos uma linha bem reta aqui, e eu vou em frente e fazer isso, hum, branco. Então vamos em frente e pegar branco e novamente, eu vou fazer ah branco, atributo de cor que eu poderia reutilizar e re selecionar. Então vamos chamar isso de branco. Faz com que seja muito fácil para mim selecionar isso, certo? Então agora eu tenho Branco é um estilo. É muito forte para agora. Quanto à cor, vamos puxar isso de volta em transparência. Vamos fazer isso como 20% aqui. Tudo bem, 20%. O que é muito bom? Então agora você está pegando o jeito. Hum, eu tenderei a abrandar um pouco, também, enquanto vamos. Espero que eu esteja no ritmo certo para você acompanhar quando tiver que fazer uma pausa efazer isso por si mesmo e voltar e pressionar play, tudo bem também. Espero que eu esteja no ritmo certo para você acompanhar quando tiver que fazer uma pausa e fazer isso por si mesmo e voltar e pressionar play, tudo bem É a próxima coisa que quero fazer. Aqui está eu vou apenas copiar sobre isso. Cadastre-se aqui. Imagens clicam e arrastam. Opção de espera. Copie-o assim e veja como está centrado. O que significa que tem uma configuração de parágrafo centrada. Onde se eu puxar esta caixa, vai centralizar o texto dentro dela. Eu quero deixar uma linha. Esta não é a linha do senador, mas saiu da linha. E como eu faço isso aqui é que você pode ver as guias de alinhamento à direita. Se eu fizer a coisa certa, ela alinha o centro deles. Queremos deixar uma linha. Sim, assim mesmo. Isso parece bom. E vamos nomear este seu primeiro nome, tudo em maiúsculas. Vou ao centro. Vou diminuir a altura um pouco. Ok, isso parece que parece bom. Tudo bem, então agora nós vamos realmente criar um componente. Então esta é uma peça importante de como fazer o desenho de várias placas de arte e aplicações. Realmente fácil e eficiente quando você quer fazer mudanças em mais de um quadro de arte. Então o que eu vou fazer é eu vou copiar este, uh, uh, nomear o campo de texto aqui e esta linha quando uma cópia, homem C e eu vou até a minha página que eu criei aqui chamada Biblioteca de Componentes. E vamos para lá. Vou colá-lo aqui. Você pode ver que você tem o primeiro nome na linha aqui. Agora, vou ligar. Isso iria voltar onde eu digitei o primeiro nome, e eu vou chamá-lo de título. Certifique-se de que sua caixa de texto duas escalas. O idiota com você não quer sua caixa de texto assim. Por que você quer a linha completa que temos aqui? Ok, então eu vou selecionar a linha e o título. E aqui está como criamos um componente. Vê este pequeno ícone em forma de diamante no topo? Vá em frente e clique nisso, e você pode ver faca selecionada. Mudou a seleção de um azul que você vê aqui para um roxo. Isso significa que este é o componente mestre agora, então queremos mudar este nome para formar. Vamos chamá-lo de padrão de formulário. Tudo bem, então o que nós vamos ter é que nós vamos ter esta página que é chamada de biblioteca de componentes à esquerda , e que vai abrigar todos os nossos componentes que nós vamos usar em todo este design que nós criando aqui. Ok, então eu tenho a biblioteca de componentes. Criamos nosso primeiro componente. Você pode ver aqui formulário padrão. Vamos usar este componente. Então agora estou de volta à nossa camada de aprendizagem da Paige aqui. Se eu for para ativos, você pode ver um feliz aqui, e eu clicar e arrastar este componente para o meu quadro de arte. E você vê como ele tem uma seleção roxa e não uma seleção azul, porque o roxo é meu componente. O que eu vou fazer é apagar o primeiro nome que criamos, e vou substituí-lo pelo componente. Então isso é muito comum. O que você faz é criar um elemento u I, e quando você deve criar um componente é sempre que você copiar algo. Então, se eu quiser copiar isso e dizer, agora, faça um sobrenome naquele momento, eu não deveria ter copiado este componente ou este, hum, hum, este formulário que você preencheu aqui, duplicado e mudado o nome. Nesse ponto, eu deveria ter criado um componente e começado a usar componentes. Então o que você não quer ter é que você não quer acabar com um monte de formulários como este que são todos individuais, que você não pode mudar de uma visão mestre. E eu vou te mostrar como fazer isso aqui em um segundo. Então vamos voltar para casa em um comando Z voltar alguns e novamente, Fig. deve salvar isso o tempo todo. Eu poderia ir arquivar e eu poderia dizer, um veja, não há salvamento aqui. Eu posso fazer um comando s, que é o atalho para salvar, e você verá aqui. Diz que figura figo, MMA auto salva seu trabalho e me dá um pequeno sinal de paz. E eles sempre colocam diferente. Chamo isso de “Emojis”. Sempre que você faz um comando, vê, eles apenas gostam, aleatoriamente colocar qualquer emoção que eles querem. Somos apenas simpáticos. Então eles só estão te avisando que você nem salva mais seu trabalho. Como se ele apenas salvasse automaticamente para você. Ok, então agora eu tenho meu componente de novo. O que eu como eu acesso foi que eu mudei de minhas camadas aqui para meus ativos, e eu cliquei e arrastei meu componente para o quadro de arte exatamente assim. E eu quero substituir este primeiro nome você. Por que eu fiz com o componente aqui, e eu vou clicar neste componente, e eu vou mudar o título do nome de volta para o primeiro nome. Tudo bem, então agora temos um componente quando ele fez que vive nesta biblioteca de componentes e temos uma instância que significa uma representação infantil desse componente mestre vivendo neste quadro de arte aqui. Então agora o que eu vou fazer é copiar este componente, e agora eu vou criar mais instâncias nele, e eu vou mostrar a vocês o porquê. É importante que paremos e fizemos um componente antes de copiarmos o texto original e linha que criamos anteriormente. Agora que temos o primeiro nome, vou mudar o apelido do dedo do pé, fazer isso também para ser um segundo. Tudo bem. E nós vamos copiar isso novamente e você pode ver que está me dando incrementos de espaçamento aqui. Soc no disse 12 Há 18. Está me ajudando a distribuir automaticamente o espaçamento igual quando você segura quando você copia dessa maneira . Então, quando eu clicar e arrastar e manter a tecla Shift pressionada, é por isso que eu gosto de copiar dessa maneira. Então, novamente, se eu segurar a opção e eu clicar e arrastar e eu segurar shift ele mantém alinhado. E também me ajuda. Não. Oh, isso é espaçamento de 18 pixels do último componente lá no topo. E isso é distribuição igual. Isso é o que eu quero. Ótima. Então vamos em frente e chamar este e-mail. E o último que tivemos aqui era a senha. Tudo bem, agora veja isso. É por isso que é muito importante que tenhamos feito um componente. Digamos que estou falando com meu cliente ou outro designer, e eles dizem: “Ei, quer “Ei, saber? É melhor que façamos todo esse texto de primeiro nome aqui cor-de-rosa. Eu sou como, OK, eu sei, eu vou ir em frente e te dar esse exemplo ou ir, vá em frente e mude alguma coisa. Tudo bem, vamos em frente e trocamos todos esses dois cor-de-rosa. Antigamente, nós tínhamos um clique em um desses aqui e mudar cada um rosa, então eu tive que clicar e, em seguida, selecionar o primeiro nome e mudar rosa. Então eu tenho que voltar para o sobrenome e mudar um rosa, e então eu tenho que ir para e-mail e mudar uma senha rosa de 30 e mudar de rosa. Mas quando pensamos em configurar? Você é Y e componentes como este? O que posso fazer agora é ir à minha biblioteca de componentes aqui. E este é o componente mestre que eu criei. Então todos os mestres vivem aqui. Então eu mudei essa cor do texto aqui para o rosa que fizemos aqui assim, e eu volto para o meu aprendizado Paige, assistir. Todos eles já mudaram para mim. Então essa é a beleza de por que configuramos componentes. E por que reutilizamos componentes é que ele torna a edição de um componente realmente fácil porque você faz isso em uma área, o componente mestre aqui e você vê todos eles alterados em suas placas de arte. E digamos que você tinha muitas, muitas tábuas de arte diferentes como esta. Imagine ter que mudar tudo isso. Ok, eu vou voltar para o meu componente. Não quero mudar de volta para rosa. Só estou dando esse exemplo. Quero voltar e transformar isto em branco, tal como tínhamos feito antes. Está bem, fixe. Então agora temos a página de inscrição parecendo muito boa. Hum, tudo o que precisamos fazer é adicionar este pequeno, um olho, que mostrará sua senha se você estiver digitando isso ou, hum, ele também irá disfarçar a senha, bem como o botão de inscrição, Então eu vou te mostrar como fazer isso. Tudo bem, então vamos criar um botão muito fácil e simples. Basta pegar um quadrado e vamos em frente e fazer um quadrado aqui. Qualquer tamanho é bom. Vou usar o meu. Como se eu não soubesse. Digamos que 200 por neve diriam 50. Não. Bem, este 60 deve ser bom. Tudo bem, então eu tenho um botão aqui 4. Crie a experiência de compras: Tudo bem, bem-vindo de volta. Então, nos últimos vídeos que trabalhamos no login e o trabalho de inscrição flui neste vídeo, vamos cobrir o fluxo de trabalho de compras. Então deixe-me mostrar o que vamos fazer no próximo vídeo. Então, o último que trabalhamos na inscrição, o login, e neste ponto, paramos bem aqui, que é a tela de carregamento e esta próxima série de vídeos ou este vídeo em que estamos agora, agora, vai construir este fluxo de trabalho de ter, hum, capacidade de selecionar uma bebida de chá Boba e adicionado ao seu carrinho. Então deixe-me mostrar-lhe que agora, nós também vamos construir esta barra de abas na parte inferior que permanece fixo. O que significa que não se move como eu deslizei para baixo e você pode ver se eu clicar e arrastá-lo para cima. Sigma transita automaticamente isso como se eu estivesse passando em um dispositivo móvel. Ok. E nesse ponto, o próximo trem para reconstruir este é a tela de seleção. Então você pode ver que temos um estado de transição onde isso desliza para cima. Se eu tocar no X, ele desliza para baixo como uma transição. Então, aprendemos que está bem, e também aprenderemos a criar um menu suspenso móvel. Então, se eu tocar neste doce regular aqui, você pode ver que eu tenho um slide acima sobreposição, e se eu tocar no topo, ele desliza para baixo. E se eu tocar uma seleção semi doce, você pode vê-lo atualiza a seleção onde disse doce Regular para meio-amargo. E então a próxima coisa que faremos é criar o estado ativo para as seleções de cobertura . Então, se eu clicar no grande ou tocar na grande tapioca cobertura, você pode ver lá e eu pressionar em, e isso irá adicionar ao carrinho lá. Tudo bem, legal. Então vamos em frente e vamos andando. Então vamos voltar para, hum, hum, estamos aprendendo página aqui que estávamos em. Podias ver este aqui, e lembras-te de onde parámos? Costuramos o registro, , e o botão de ir aqui para esta tela de carregamento. Vou copiar a tela de carregamento aqui. E então o que eu fiz de novo foi, hum eu clico disse Option clicou e arrastou uma vez que eu peguei as setas duplas. É o meu mouse que copiou que estão entediados e eu segurei turno, por isso mantém o alinhamento. Então, quando não tenho turno, sai do alinhamento. Quando eu mantenho o turno, ele o mantém on-line para o próximo quadro de arte. Eu vou, hum, clicar e arrastar para fora do quadro de arte. Você pode ver como eu estou fazendo isso aqui. E isso só vai selecionar as coisas dentro do quadro de arte. E vou apagar o boba no carregamento. Eu também vou selecionar a barra de status aqui. Vou comandar ver ou copiar aqui, e depois vou apagá-lo. E eu vou pegar este quadro de arte ampliado um pouco aqui, na verdade, na verdade, antes de eu diminuir o zoom, eu vou criar um guia para me mostrar a parte inferior da minha tela. Então, se você não está vendo seus governantes aqui, você pode ir para ver ou seus pixels e você pode ver, um, onde ele diz, mostrar governantes, isso vai dar, você sabe, governantes Agora mesmo. E se eu ir ver mostrou governantes novamente. Vou ver os governantes. Você quer as réguas fora porque você quer ser capaz de arrastar guias. Então, se eu estiver no quadro de arte, eu arrasto um guia que fica naquele quadro de arte. Você pode ver agora que é Onley no quadro de arte. Se eu não estiver no quadro de arte e eu estou apenas na área de design, eu perdoo arrastar um guia e ele fica fora do quadro de arte. Então ele fica em qualquer lugar, para que eu possa sempre vê-lo. Eu posso clicar nele, arrastá-lo Se eu quiser removê-lo, eu posso simplesmente deslizá-lo de volta para cima na régua, e ele excluí-lo. Então este ponto, eu quero pegar o guia, e então eu quero selecionar meu quadro de arte aqui, e eu quero torná-lo realmente longo. Não se preocupe muito com ... quanto tempo é. Apenas faça isso bem longo aqui. Como se eu tivesse o meu em 2000. Vamos torná-lo ainda mais longo como 2400 pixels. Ok, então isso parece bom. E então eu vou colar, hum, a barra de status de volta. Não, vou copiá-lo daqui. Cole de lá. Certifique-se de que esta barra de estado tem a posição fixa ao rolar aqui. Então configuramos isso no último vídeo, mas isso é muito importante. Agora que vamos ser capazes de rolar para baixo e ver o conteúdo aqui. Ok, então a próxima coisa que você quer é que nós queremos criar essa barra de abas. Então eu tenho a conta aqui sobre os produtos de design. Vá em frente e agarre. Copie e você pode pagar. Então, fora do quadro de arte, por agora é o que vai criar isso. Nós só queremos pegar esses ícones para que você possa ver que eu tenho esse status. Hum, esta barra de navegação ah na parte inferior ou barra de guias na parte inferior é definida em 375 largura e podemos fazer 8 85 alturas. Cisco, pegue um quadrado, um retângulo aqui. E vamos apenas fazer um retângulo neste quadro de arte não importa o tamanho ainda. Apenas faça o mesmo com o quadro de arte. Então você tem 375 e então vamos para os atributos de altura aqui no topo. Certo? Vamos fazer com que 85. Está bem, Legal. Então agora você pode vê-lo aqui. Parece muito bom. Vamos ir em frente e mover isso um pouco para baixo. Então agora está nivelado para o fundo deste quadro de arte. Então, o que? Queremos fazer agora é quando você clicar sobre ele na guia de design, ver onde acesso fixo posição ao passear. Vamos em frente e tocar nisso e eu vou te mostrar como isso é. Uma vez que tenhamos algum conteúdo e como isso vai ficar fixo na parte inferior enquanto você rolar para baixo. Então a próxima coisa que queremos fazer é dar a isso um fundo colorido. Então vamos em frente e dio weaken fazer um pouco de um off black. Então vamos pegar as paletas de cores azuis e vamos pegar o suficiente onde eu possa ver isso em preto. Isso parece bom. Podíamos dio-hum, 012436 como uma cor. Ou pode usar seu melhor julgamento, se quiser. Tudo bem, então agora você tem a conta, vamos. Coloque esses ícones em jogo alguém para pegar os três e eu vou colocá-los no fundo. Você pode ver que eles estão abaixo do retângulo. Isso porque qualquer posição fixa na Fig. MMA se organizará no topo. Você pode ver o sistema de camadas aqui. Tem rótulos nisto. Os nossos portos fixaram-se no topo. Tudo o que for corrigido irá automaticamente para o topo do arranjo de camadas. Tudo o que não for corrigido irá abaixo deste título de rolagem aqui, e este é o resto do conteúdo. Então o que queremos fazer é fixar a posição desses ícones e você vai vê-los saltar do sistema de camadas esquerdo aqui para as posições fixas de camadas aqui. Então, vamos tocar no clique na posição fixa ao rolar e você verá que eles foram movidos para cima da área de rolagem para a área fixa. E vamos em frente e torná-los ainda mais enfraquecer, Clique e arrastá-los entre eles estão em cima do retângulo, então agora eles estão deitado em cima dele. Vamos em frente e visualmente torná-los centrados aqui. Isso parece bom apenas usando minhas teclas de seta no meu teclado, e agora o que queremos é criar um estado ativo. Então vamos em frente e selecione o ícone do perfil aqui e o ícone do carrinho de compras e vamos empurrá-los para trás e transparência. Então vamos fazer cerca de 30% aqui. Isso parece bom. Eles ainda estão visíveis, mas dá ao usuário e indicação de onde eles estão nesta guia, nosso sistema. Então você pode ver aqui. Estamos criando esta tela aqui onde isso vai ficar fixo e a barra de status na parte superior permanecerá fixa e você vai rolar para baixo e ver todo esse conteúdo. Tudo bem, Cool. Então vamos diminuir um pouco. Você pode excluir o retângulo que tínhamos aqui. Agora que temos esta conta, nosso sistema em jogo e vamos pegar a primeira bebida de chá Boba aqui. Então este é o chá Boba normal. Apenas comando, vê? Copie isso. Já tem que dizer o, hum o com e altura para você. Basta ir em frente e colá-lo e você vai ver sentido que ele não está fixo e automaticamente estava sob a barra de status, que é bom. É o que queremos. Vamos pegar este logotipo do chá Boba aqui, Comando, a menos que apenas cole aqui. Então agora você quer mudar o texto deste logotipo do chá Boba para um texto preto Trabalho diz Boba, Tudo o que você tem a fazer aqui é apenas um clique triplo, clique triplo nele e, em seguida, mantenha a tecla shift e selecione as outras letras. Agora eu tenho a palavra bala Just Boba selecionado onde? Diz, Phil, vá em frente e mude. A cor estava ficando preta. Também podemos usar nossos estilos de cores que fizemos porque fizemos um preto aqui e selecionar preto também. Tudo bem, isso parece bom. Então a próxima coisa que queríamos acrescentar é o texto aqui que tínhamos um tom regular e doce de caramelo e chocolate, e tínhamos o preço para o seu Bem, certo. Então eu vou pegar a ferramenta de texto aqui. Eu vou digitar a palavra regular e novamente, você pode ver minha linha Teoh padrão Texas na parte inferior aqui no personagem. Caixa de diálogo de texto. É esta peça aqui que acontece às vezes. Eu gosto de tê-lo alinhado no meio e não no fundo. Isso é bom aí. Vamos em frente e fazer isso um Vamos fazer sobre uma fonte de 16 pontos e vamos pegar algum espaçamento de letras aqui. Está muito apertado agora. Você pode ver sem letras voltadas para ele. Zalkind de difícil de ler e você vai ver o que eu quero dizer quando você realmente dar-lhe algum espaçamento de letras . Agora está a menos 2%. Está logo abaixo da caixa em que você pode mudar a largura e a altura da sua diversão e vamos subir. Vamos dar-lhe 8% e você pode apenas ver como apenas um pouco de espaçamento torna apenas um pouco mais fácil de ler novamente sobre o alinhamento de parágrafo que não definimos em centrado. Vamos torná-lo um alinhado à direita. Então, se eu clicar na direita na caixa de texto aqui, você pode ver que eu tenho isso alinhado à direita. E isso parece bom. Ok, então como fizemos antes no último vídeo, vamos criar um estilo de personagem para isso. Então agora temos uma fonte de 16 pontos. Então vamos em frente e criar um novo ponto 16. Digite-o 16 pontos e é um regular. Eu acredito que você se diverte regularmente para que possamos reutilizar isso enquanto passamos por isso. Certo, a próxima coisa que queremos fazer é digitar o doce tom de caramelo e chocolate . Então, a partir daqui, vou copiar esta mesma camada. Esta caixa de texto aqui novamente, eu apertei, hum, dicas de mudança de opção que mantém o alinhamento para a direita, que é muito bom eu não quero isso fora assim. Quero mantê-lo alinhado diretamente, e vamos digitar isso. E então, neste ponto, eu realmente queria não estar centrado na caixa, mas no topo. Então eu vou fazer o alinhamento da propriedade text aqui alinhado no topo. Lá vai você. Isso parece bom. Certo, então temos uma barraca de caramelo e chocolate. Legal. Certo. Então, este ponto, o que torna este texto maior? Então vamos separá-lo do personagem têxtil que temos aqui. Então 16 vamos fazer isso provavelmente muito grande lá. Vamos fazer um 22. Isso deveria ser. Isso deve ser bom. Vou esticar isso. Então eu quero três linhas ainda fora parece bom lá. E vamos fazer disso um regular, e isso parece bom. Legal. Então agora que temos, hum, isto aos 22 nós temos o, hum, o texto do título aqui. São 16 e a descrição é tributada em 22. Vamos fazer um têxtil para isso também, que possamos reutilizar isso agora. Então agora nós estamos recebendo uma, hum uma combinação de belos têxteis que podemos usar. Temos o ponto 16, tivemos os 19 pontos que configuramos a partir das páginas de login, e agora teremos o maior, que será um 22. Então vamos pegar isso e torná-lo um ponto 22. Eu só estou digitando 22 pontos e você vai ver por que fazer isso, Hum, quando chegarmos ao próximo Siris de Boba sabores porque nós vamos digitar os sabores e as descrições e então nós podemos facilmente defini-los exatamente como este. Tudo bem, isso parece bom. Uma coisa que tínhamos que fazer era o preço. Alguém para copiar a mesma fratura normal. Vou mostrar-lhe por que usamos alguns dos estilos de personagem e assistir Realmente útil. Aqui está eu só vou datilografar. Só vou digitar para eu acho que foi para 99 e vamos dizer que eu não tê-lo alinhado aqui para este texto, mas eu tê-lo bem alinhado na configuração de parágrafo. Se eu quiser criar o alinhamento entre todos esses três elementos, basta selecionar todos os três, e você pode ver no topo aqui eu tenho esses ícones de alinhamento. Então aqui está o alinhamento à esquerda. Este foi o alinhamento centrado, mas eu quero o alinhamento certo aqui. Alguém para clicar à direita e você pode vê-lo. Ele alinhou todos estes três para o agora e o 4.99 eu quero fazê-lo. Não o 22. Mas vamos ver como fica no 19 Bold. Isso parece bom. Não fique com ele. Os 19 ousados e a última coisa que queremos usar. Vou copiar este. Vou criar o anúncio. Basta indicar ao usuário que eles podem adicionar isso ao seu carrinho e vamos dar-lhe a cor da ação aqui e enquanto Ah, que parece que parece muito bom. Tudo bem, legal. Então, o que vamos fazer a seguir? Hum, vamos em frente e costurar isso para que possamos ver como isso fica no protótipo. Então, se você se lembra, nós tínhamos o login no protótipo de tela, o botão na tela de login estava se conectando à tela de carregamento, e o botão ir no teclado levaria você para a tela de carregamento. E como aprendemos no último vídeo, a tela de carga precisa do dedo do pé. Tenha um atraso para que você não possa clicar em nenhum item dentro do quadro de arte. Para criar um atraso no quadro de arte, você tem que selecionar o quadro de arte em si mesmo. Então eu tenho a tela de carregamento selecionada. Vou clicar e arrastar o braço do protótipo da bóia, e você pode ver agora que ele está conectado à tela de compras. Vou mudar esse nome das compras ou da tela de carregamento aqui para a tela de compras porque copiamos isso. E novamente, tudo que eu fiz foi selecionar a tela aqui, peguei a camada à esquerda e apenas tripliquei, cliquei na camada, e eu poderia digitar em compras. Ok, legal. Então nós só queremos que este reboque esta interação aqui desapareça depois de um certo tempo de duração. Então, no protótipo aqui, quando eu selecionar o link do protótipo que eu tenho na torneira, vamos em frente e fazer após o atraso. E três segundos é sobre a direita ou 3000 milissegundos aqui. Um instante deve ser bom. Nós não queremos nenhuma animação inteligente ou qualquer coisa, tudo bem, e então vá em frente e pressione o botão play no topo. E agora você pode ver o protótipo. Aqui temos a tela de carregamento. Podemos apenas passar pelo login, e você pode ver quando eu toquei no botão de login, a tela de carregamento aparece por três segundos e então, sim, sim, nós temos a tela de compras com nosso primeiro sabor acima de um t aqui. Você vê, se eu clicar e arrastar para cima, ver como as coisas que são corrigidas a guia estão aqui e a barra de status aqui na parte superior, os elementos de configurações, aqueles ar tudo fixo. Isso é o que significa ter um elemento fixo é que essas coisas não vão rolar enquanto todo o outro conteúdo rola. Tudo bem, então vamos adicionar o resto dos sabores do chá Boba que tivemos aqui. Então você pode ver aqui. Eu tinha o, hum, o próximo sabor aqui e apenas ir em frente e ritmo que direito no lugar, apenas assim. E queremos um pouco de um espaçamento de um pixel no meio. Então isso fica entre as duas fotos assim, certo? E então o que queremos fazer aqui é provavelmente melhor apenas copiar este texto aqui, e você pode mantê-lo alinhado, então eu vou manter a opção. Vou clicar e arrastar para baixo e, novamente, vou segurar o turno. Então eu não vou fazer isso. Então você pode ver enquanto eu movo meu mouse por Shift. Não consigo mexer o rato. Está mantendo toda essa informação alinhada. Eu apenas espaço meio caminho até a sua imagem aqui. E eu também vou me opor e trazer para a frente aqui ela pode ver bem. E nesse sabor, o que tivemos aqui foi que temos um café aromatizado com bebida fria premium com chá preto, e é para 99. Então vamos voltar para a nossa guia de aprendizagem aqui. E vamos mudar isso aqui. E vamos ver aqui o que disse fermentação fria Premium com chá preto. Digite isso. Tudo bem, nós somos o espaçamento lá, e eu quero soltar o com para a terceira linha e ter o espaçamento lá. Legal. Estamos passando por isso muito rápido. Isso é bom. Ok, então você pode ver que esses dois, hum, hum, elementos se encaixam. Tudo da aba está para cima. Vamos pegar o próximo aromatizado aqui, que é o sabor do chá macho. E eu só comando ver, copiado e comando v colá-lo. E eu vou em frente e colocá-lo na posição certa aqui. E eu vou copiar o mesmo texto aqui sobre a opção. Clique e arraste. Segure o turno. Então, novamente, segurando opções, eu recebo a seta dupla, selecione todos esses elementos. E se eu quiser, eu posso agrupar estes para facilitar a partir de uma próxima seleção. Então, se eu apenas fazer uma seleção de grupo aqui e eu segurar a opção e clicar e arrastar Não, eu tenho eles copiados. E mais uma vez, quero trazê-los para a frente. Eu clique com o botão direito sobre eles, trazer para a frente. Você também pode usar as setas de opção de comando para cima e para baixo para as teclas rápidas para trazê-los para cima nas camadas. Tudo bem. E vamos em frente e chamar isso de machão. Uh, e o texto nele tem uma bebida fria premium. Isso foi o, hum, o café aromatizado. Então vamos em frente e apenas mudar este texto para ter uma descrição macho t. Então vamos chamá-lo de Mata Premium e Chá Preto. Isso deve funcionar. Ok, legal. Então a próxima coisa que queremos adicionar é o sabor final, que você pode ver aqui no, hum, o protótipo final aqui. Aqui em cima estava o texto aqui. Doce macho japonês Vamos voltar e adicionar isso rapidinho. Então doces japoneses muito, uh, T, que é a minha bebida favorita, a propósito, fora de todos esses, tudo bem. E o último é do Chai Tia. Bem, Bem, então vamos pegar a foto do chai aqui. Só aquele com um pouco mais. É o mesmo que o t normal. Ele só tem um pouco mais de uma cor para ele. Vá em frente e selecione. Você pode ver isso quando eu colar. Se eu não tiver meu quadro de arte selecionado, eu só gosto do ritmo. Isto não vai andar no quadro de arte. Você pode mover o quadro de arte em segundo lugar. Não combina com ele. Então lembre-se sempre, Teoh selecionou o quadro de arte e depois cole quando você estiver no quadro de arte, eu vou mover isso para baixo. Estou segurando o turno quando me mexo, então não movo as proporções. Ele já colou exatamente com o que eu queria cheio com quando eu move-lo para baixo. Assim. Ok, neste ponto, vamos em frente. E, hum, cópia. Vou mover isto um pouco para cima. Vamos copiar este texto aqui e novamente. Vou clicar com o botão direito e ir para trazer a frente ou opção de comando para cima e para baixo eu posso ir para cima para trazer para a frente e para baixo para trazer para trás Então você pode ver isso E este é o sh i t. Então a descrição para isso é feita com chá Chai Dourado. Vamos voltar ao nosso aprendizado, Paige, Paige, e eu vou datilografar isso feito com o Chuy Dourado. Acho que foi também 5 99. Certo , você estava ficando um pouco mais caro. Agora está bom. Está bem, Legal. Então agora temos esses quatro sabores em Vamos em frente e voltar aos nossos protótipos novamente. Você pode clicar no botão play, ou você pode apenas fazer o toque. Se você acabou de ter aqui, você também pode pressionar. A aba está lá no topo. E agora você pode ver como é rolar para que você possa percorrer esses sabores. Você pode ver que a linha entre o café e a mata não está lá. Então vamos voltar e adicionar isso. Mas isso parece muito bom. Vamos voltar. Hum, eu vou re selecionar então uma coisa que eu faço é, hum ir em frente e selecionar fora do quadro de arte. Inicie a seta do mouse para a direita e clique e arraste sobre apenas os elementos que você deseja selecionar no próprio quadro de arte. Então nós só temos esses sabores apenas o chai eo macho Agora selecionado uma seta na minha para baixo para você pode ver que eu criei aquela pequena linha lá para o macho t. Ok, então novamente muitas maneiras de chegar ao meu protótipo, eu posso pressiona presentes ou eu posso clicar na guia na parte superior. Vamos voltar para o topo lá, e há nos meus sabores. Ok, legal. Então, agora que temos o quadro de arte aqui, você pode ver que fizemos muito tempo. Vamos voltar e encurtar isso agora que temos todo o conteúdo em jogo. Então o que eu vou fazer é adicionar outro guia não apenas para o fundo do meu conteúdo, mas um pouco mais longe. Normalmente quer dar algum espaço para a barra de abas para que toda a informação chai o chai chá vai acima da barra de abas para que você possa ver sobre há tudo bem. Só um cheque duplo. Vou copiar isto, pegar o nosso e ver. Sim. Nós provavelmente poderíamos mover este guia um pouco para cá. Só queremos que aquele chá chai fique na extremidade mais baixa da aba ou no deslizamento . Hum, bem, sente-se em cima dessa aba. barra que são guias não ocultará o conteúdo que temos aqui. Ok, então isso é uma espécie de MMA de figo que acontece aqui. É um pouco de um inseto. Então, se eu quiser esticar este quadro de arte com conteúdo fixo dentro dele, você pode ver o que acontece. Veja como o conteúdo corrigido começa a esmagar. Veja o que aconteceu com o Boba e a barra de status. É uma coisa que acontece com números. Eu ainda não descobri isso. Então, o que tendemos a fazer é clicar e arrastar e selecionar todos os elementos que você tem. E agora Art Board, faça um comando. Vê? Basta copiá-lo e, em seguida, excluí-lo por enquanto. Então pegue o quadro de arte e encurte-o para o guia que fizemos aqui. E depois comanda V. Bem , volta ao lugar. Lá vai você. Dou-te um segundo para fazeres isso. Ok, então neste ponto, o que vai voltar para o nosso protótipo e nós podemos verificar como isso parece. Então você pode ver aqui nós temos o café normal, o machão. E se não adicionássemos esse espaço extra na parte inferior, a criança acabaria no furto inferior com este aspecto. Ou pior ainda esconderia o botão de adicionar. Mas como adicionamos esse espaço adicional, você pode ver onde vai direto para o topo da barra de navegação. Então, parece bom, Nikkan Segundo, deslize para cima e descobrir o que lhe dá essa transição de furto. Então age como se eu estivesse passando com o dedo. E se você tivesse, hum, se você baixar o aplicativo Sigma mirror em seu telefone, você pode ver por que isso faz com que pareça um aplicativo real em seu dispositivo móvel. Tudo bem, bem, isso parece bom. Hum, então a próxima coisa que queremos fazer aqui é se eu tocar em qualquer lugar não apenas no botão adicionar, mas em qualquer lugar no espaço do chá de leite aqui, ele vai abrir o motile de seleção para o leite regular milty. Então essa é essa tela aqui se parece com isso. Então vamos em frente e construir esta tela aqui, e nós vamos trabalhar no menu suspenso também para a direita aqui. Então eles voltam ao aprendizado. Paige, esta vai ser uma altura normal do tamanho da tela. Então vamos copiar a tela de carregamento que tínhamos aqui. Então, novamente, eu só tinha opção. Pegue aquele quadro de arte, segure o Shift e arraste-o para a direita. Que eu vou clicar e arrastar da direita para selecionar os elementos dentro do quadro de arte. E agora vou apagar isso quando pressionei a Elite. Ok, eu quero reutilizar esta foto. Então vamos em frente e pressionar o comando, vê? E eu vou comandar V esta foto aqui no topo, e então você pode ver aqui onde se eu mover o fundo para cima como, digamos, eu quero marcar coisas assim, e misturar a perspectiva da foto, Hum, ele não mantém a proporção e interpreta Lates a foto assim. E ele realmente não parece bom para fotos. Então o que queremos fazer é aqui você quer ir para a imagem aqui. Clique nele e você pode ver onde ele diz Imagem de corte. Vamos em frente e fazer um que diga Ajustar imagem aqui. Na verdade, o que vai encher? Lá vai você. Então, novamente nos mudamos da colheita para sentir e como eu cheguei aqui. Ele só clicou na imagem? Phil veio para onde foi cortado e eu coloquei a sensação, e agora você pode ver quando eu movê-lo, ele não me dá. Não desafia a perspectiva dessa imagem. Eu quero mover a imagem real dentro disso para cima. Então, se eu clicar na imagem novamente e eu clicar duas vezes, então há um clique. Mas se eu clicar duas vezes, eu chego à colheita aqui no topo, suprimir a colheita e você pode vê-lo. Agora eu posso pegar a imagem dentro do que eu cortei e eu posso movê-la um pouco para cima. E sobre lá deve estar bem. Talvez dar um pouco mais de espaço a isto. Então, novamente, é pré me definir de volta para cortar para que eu possa voltar agora para preencher e voltar para cortar novamente, e então apenas mover isso para cima de algumas maneiras. Você pode fazer isso. Certo, neste momento, momento, vamos nos divertir um pouco mais. Vamos fazer a seção de protótipos para isso primeiro, mas preciso fazer um botão de fechar no canto superior esquerdo. Então, quando você tocar nisso, um, você pode fechar a tela bem e voltar para a tela aromatizada com uma tela de compras . Então o que eu vou fazer é pegar um retângulo aqui que você pode ver ter um retângulo e eles clicam e arrastam Vou segurar Shift aberto, Sem Shift pressionado, Basta clicar e arrastar e eu vou arredondar as bordas. Então aqui eu tenho o raio do canto. Basta pressionar 100. Está tudo bem. E veja como ele fez isso arredondado para fora essa seleção. Uma vez que este é um elemento real, queremos que esta seja a cor acionável. Então vamos pegar nossa ação primária Cor que rosa e eu vou copiar este comando. Veja, eu vou clicar fora dele. Vou clicar de volta no quadro de arte e vou comandar V, que é uma pasta no lugar. Eu vou selecionar o que eu acabei de colar, e eu vou girá-lo 90 graus e eu tenho um botão de mais. Sonam vai selecionar ambos e eu vou clicar com o botão direito quando um grupo, esta seleção ou você também pode comandar G. Eu vou te dar um segundo para fazer isso. E agora que tenho esse botão agrupado ou mais disponível, vou girar o botão de mais. E agora eu tenho o X que eu quero. E como qualquer coisa que usarmos que será criado que será reutilizado. Vamos fazer disto um componente. Alguém de baixá-lo só um pouco. Isso parece bom. Vou copiá-lo. Eu vou voltar para a nossa biblioteca de componentes aqui, e eu vou acelerar isso aqui, mover isso um pouco mais e eu vou criar o componente. Então eu tenho que colá-lo aqui. O pequeno topo, hum, ícone de diamante criar componente. E eu vou dar um nome tão próximo e colocar um imposto perto de X assim. Incrível. Agora vamos voltar para nossa página de aprendizado aqui e voltar para o ativo de camada. Atrasador aqui no topo. Vamos para a guia de ativos e vamos pegar o componente X que acabamos de criar. E vamos colocar isso no lugar deste X agora. Dessa forma, quando usamos isso, podemos mudá-lo muito facilmente a partir da mesma área do componente mestre. E muda em todos os quadros de arte. Certo, então vamos ter a parte divertida. Vamos em frente e protótipo esta transição aqui no nosso protótipo. Então, clique na página de compras aqui. Vamos para a guia protótipo aqui e apenas selecionar apenas a imagem da probidade regular. Vamos em frente e conectá-lo ao que a tela à direita. Vamos rotular esta tela aqui. Isto é diz tela de carregamento, porque nós copiamos. Vamos chamar este de tela de seleção. Certo, agora temos essa tela de seleção. Então, mais uma vez temos as compras. Ah, tensão. Aqui selecionamos o chá Boba regular. Nós clicamos no pequeno conector protótipo pegajoso na tela de seleção, e agora temos a interação no toque apenas bom. E foi mudar-se. Às vezes, os anos podem dizer instantâneo como este. O que queremos fazer é criar um movimento no cenário, então vou mostrar como é. O que queremos fazer é criar um movimento no cenário, Estamos apenas instantâneos por agora e enfraquecemos. Faça o X aqui, volte o X na tela de seleção de volta para a tela de compras, e poderíamos fazê-lo imediatamente. Ok, então se eu tocar em qualquer lugar onde a foto estava, você pode vê-lo apenas transições instantaneamente para a tela de seleção. E se eu tocar no X de instância instantaneamente transições para a tela de compras. Nós não queremos isso. Queremos uma transição. Queremos que esta tela deslize para cima e no X para deslizar de volta para baixo. Então o que precisamos fazer é selecionar o protótipo ah. Então, ah, linha pegajosa que acabamos de fazer. Isso foi do chá Boba aqui e onde diz “instantâneo”. Queremos que isto tenha uma mudança. Então o que ele está dizendo é que esta tela aqui, esta nova tela vai se mover, e então você define como ela vai se mover. Então aqui temos o slide à esquerda. Você pode ver um exemplo disso virá do slide direito para a esquerda. Temos as gravações do slide que virão da direita. Temos o slide para baixo para entrar de cima para baixo, e temos o que queremos fazer, que é o slide para cima. Então esta tela, esta tela de seleção aqui, vai deslizar para cima da tela de compras. Então agora temos isso para ter certeza que você tem isso selecionado no MoveOn e as, hum, especificações de como ele vai se mover. Preparar em cima. Vamos ver o protótipo agora. Então, se eu tocar em qualquer lugar onde o chá de leite normal é que você pode ver como isso desliza para cima e eu acho que X ainda está no instante. Então agora queremos que este dedo do pé da tela também deslize de volta para baixo pressionando o X. É um monte de vezes quando você faz isso, eu vi é que às vezes você vai ter mover em, selecionado, e então você vai ter essas especificações definidas em Mova para baixo e faz com que pareça o que você quer. Mas deixe-me mostrar o que acontece aqui para ver como trouxe a outra tela naquela transição com ela. Então deixe-me fazer isso de novo. Você clica no chá Boba normal aqui, ele desliza para cima. Era o que queríamos. É uma boa transição. Mas quando eu pressionei o X. Você pode ver a tela vem de cima, a tela embaixo na tela de compras, e desliza para baixo novamente. Não queremos isso. Queremos que isto pareça que desliza para cima e depois desliza para baixo novamente. Então isso é causado porque nós temos a seleção aqui na animação definida como mover para dentro quando nós realmente queríamos ser um movimento para fora. É tipo, saia do caminho. Então, novamente temos a seleção regular de chá de leite chegando como dizer ao protótipo para mover esta tela para cima, mover para dentro e então nós temos o botão X sendo informado para sair e ir para baixo para expor esta tela. A tela de compras aqui. Então vamos em frente e olhar para aquela torneira lateral na seleção regular de chá de leite foto deslizar para cima. E agora que temos o slide para mover o movimento para fora, você vai vê-lo se mover para fora e apenas se move para baixo. Ele não traz a outra tela com ele, então mova-se. Isso é para cima e sair. Descendo frio. Esse é um padrão móvel muito comum, um padrão de interação. É as coisas deslizando para cima com um X e então deslizando para baixo com o X também. Quando vem da esquerda para a direita, normalmente é um botão de voltar. E teremos oportunidades na experiência do carrinho de compras para protótipos do que isso parece com o botão Voltar. Tudo bem, legal. Então, neste ponto, , queremos adicionar alguns rótulos que você está no chá de leite normal, alguém para copiar este texto normal aqui. Vou colá-lo aqui. E acho que dissemos que era 16 pontos. Vamos fazer disso um ponto 22. Como o normal lá. Isso parece bom. Vou copiar isso e chamá-lo de leite normal e vou fazer deste um dos meus intervalos. Desconecte isso e faça com que seja ousado. Isso parece bom. Tipo de centro. Isto aqui. Se você quer ter um pouco de diversão real com ele, vamos apenas aumentar o chá de leite até um monte inteiro para que você possa ver que eu fiz agora 32 e eu tenho o regular que parece que parece bom. Isso está chegando lá. Uma coisa que preciso acrescentar aqui é, um você pode ver a palavra chá de leite. Tem um monte de deixar reunião, hum, hum, espaçamento de parágrafos. Então o espaço entre a palavra leite e a palavra T este espaço aqui que é chamado de deixar ou altura da linha ou espaçamento de parágrafo. A razão pela qual se chama “deixar “foi no dia em que eles estavam fazendo tipografia. Eles costumavam ter que fazer isso de metal, e eles teriam uma máquina de tipografia onde eles cortavam letras individuais . E então eles, hum, organizavam essas cartas para fazer palavras. E eles realmente colocaram pedaços de chumbo entre cada palavra aqui para fazer o arrendamento. É por isso que foi chamado de deixar, porque você tinha diferentes tamanhos de ponto de metal. Então, no mundo das linguagens CSS, isso é chamado de altura de linha aqui. Então vamos em frente e fazer isso uma altura de linha menor. Vou dizer 50 como ponto de partida. E agora vamos descer. Então, sim, 38 é perfeito. Então agora eu tenho este conjunto em 42 do tamanho da fonte e 38 para a altura da linha e 8% para o, hum, o espaçamento de caracteres. Tudo bem, isso parece bom. Criamos um pouco de hierarquia aqui com a fonte normal e o chá de leite . Desde que criamos um 42 negrito. Eu não tenho certeza se vamos realmente usar a fonte tão grande daqui para frente, mas apenas para o caso, vamos em frente e fazê-lo. Vamos fazer um estilo de personagem de 42 pontos ou têxtil. Então agora temos um alcance muito bom de 40 42. Preciso renomear isso. Eu digitei-o. 43. É 42. Ok, então nós temos 40 a 20 a 19 e 16 é muito bom até agora. Já obtive uma variedade de estilos de personagem que enfraquecem e têxteis enfraquecem que podemos extrair. Tudo bem. A próxima coisa que vai precisar fazer é criar esses pequenos pedaços aqui para leite e gelo doce e médio. Então vamos para este protótipo aqui, ou para a tela. de Telade seleção. Vamos pegar um retângulo e fazer um retângulo. Não importa o tamanho. Eu tenho o meu definido em Vamos dio um, vamos fazer 320 com e 70 65 altura deve estar bem. Legal, e tem uma sensação agora. Não queremos ter um Phil. Queremos ter um derrame. Então vamos remover o preenchimento. Então, se eu clicar no botão de menos aqui à direita, você pode ver menos Phil e eu quero adicionar um derrame. Então eu vou pressionar o botão de mais no golpe. E agora tenho um derrame. Mas é preto, mas quero torná-lo branco e dar-lhe pontos novamente. Desde que eu selecionei Branco já e eu tê-lo definido como um estilo de personagem ou estilo de cor. Vamos pegá-lo do estilo de cor aqui. Então é fazer branco aqui e eu vou recuar um pouco. Vamos fazer, como 50%. Sim, isso parece bom. Tudo bem, então vamos ver, tivemos 19 pontos. Temos a fonte de 22 pontos. 22 deve estar bem por enquanto. Vamos pegar essa fonte normal. Vamos fazer isto branco. E, novamente, está no alinhamento certo. Então, se eu esticar esta caixa, ela se alinha à direita. Queremos que isso fique alinhado aqui, e eu vou ligar para este leite e vou centrar esta caixa oficialmente. Isso parece bom. Ok. Queremos fazer um pequeno triângulo aqui para rep 5. Como criar a experiência de checkout: Muito bem, bem-vindos à próxima série de vídeos. Então, neste vídeo, vamos cobrir o fluxo de trabalho de check-out. Então, nós apenas projetamos e protótipo o login e os fluxos de trabalho de inscrição. Fizemos o fluxo de trabalho de compras, e agora vamos passar pelo fluxo de trabalho de check-out , e para ver como isso se parece, vamos passar pelo protótipo aqui. Então já fizemos isso. Criamos a inscrição no login. Você pode colocar seu e-mail em sua senha no. Você fez login no carregamento do aplicativo. Você tem todo o chá de boba. Isto é o que fizemos no último vídeo que criamos no chá Boba, hum, sabores aqui que você pode selecionar se você tocar no chá de leite normal aqui, você pode ver que fizemos o leite o doce regular e o gelo médio cair seleções, os botões de seleção de topo. E nós também protótipos do X que fecha isso. Abra de volta. Fizemos uma seleção suspensa móvel, mas você vê aqui se você selecionar meio amargo, ele muda o semi doce. Você pode selecionar a grande tapioca você pode fazer o anúncio e então vamos para este vídeo. Vamos construir e projetar o fluxo de trabalho de check-out. Então, se eu tocar no ícone de compras, eu agora estou experimentando a experiência de check-out onde ele me mostra o aplicativo me mostra minha seleção, qual foi? Tomei meu chá de leite. Minha quantidade era uma que eu podia editar. Remova estes. Se eu quiser ouvir, posso fechar isto. Volte para trás. E se eu estiver pronto depois que eu ver meus totais, as taxas de entrega, os impostos que eu poderia ir para o próximo. Você pode ver que essa tela desliza da esquerda para a direita e a parte traseira desliza para trás . Bem, vamos fazer essa transição de protótipo também. Você pode colocar em seu endereço estes componentes de ar que já fizemos, por isso deve ser bastante simples e rápido para fazer estes imprensa Andone ir para o próximo e novamente , Se eu quiser voltar, eu posso voltar todo o caminho para o começo. Posso fechar. É um padrão de interação muito comum que usamos em dispositivos móveis. Deslize para cima com o X. Agora posso entrar em uma série de botões de trás, pegar meu endereço. Eu posso colocar na minha informação de pagamento imprensa feito. Vejo o total que pago. Está confirmando o pagamento. E então eu posso ver meu chá Boba sendo entregue para mim com uma série de telas que têm o efeito de transição de duração do tempo. efeito de transição de duração do tempo. Agora você pode ver a tela final. Meu chá Boba chegou e eu apertei OK, entendi. E eu estou de volta à tela aqui, então vamos trabalhar através disso neste vídeo. Vamos voltar ao nosso arquivo que criamos aqui. Você pode ir para o aprendizado da Paige que eu tenho aqui. Você quer começar a prototipar o que parece quando alguém clica ou o usuário toca nisso. Veja o Icahn aqui na barra de abas. Então vamos pegar desde o início aqui. Vamos pegar esta tela de carregamento aqui, Comando ver e vir aqui. Comando V. Cole e vamos movê-lo em posição. Aqui, vamos chamar este cheque para fora. Então, novamente, basta clicar no quadro de arte, clicar na camada à esquerda e digitar, check-out e vamos em frente e remover tudo o que temos lá. Uma das coisas que vamos precisar para esta tela é que vamos precisar do X então vamos pegar aquele X e colá-lo. O que está ligado ao protótipo? Certifique-se de que ele não tem nenhum protótipo pré-existente links de protótipo já definidos para ele . E faz. Então vamos em frente e pegar isso. Arraste-o e solte-o. Agora que o X não faz nada no protótipo e no protótipo final da foto aqui , você pode ver o que estamos procurando no dedo do pé aqui em cima é que queremos ter o título do check-out, o chá de leite normal com as seleções pré-definidas, a quantidade com a capacidade de adicionar mais de um. Ah, e ele removeu os botões. E então queremos colocar esses totais aqui que temos. Então vamos em frente e projetar. Esta seção aqui provavelmente irá copiar e colar thes hum, e torná-lo mais fácil. Mas vamos começar com o check-out, um, guia no topo lá. Então vamos pegar este lutado regular aqui nos deixa copiar e colá-lo aqui. Vamos torná-lo branco. Vamos centrá-lo e colocá-lo aqui. Chame esse cheque tudo bem, e isso já estava fora de 16 pontos. Estilo de cor são têxteis. Isso é bom. Reutilize isso. Vamos ir em frente e centralizar isso um pouco. Isso parece bom lá, tudo bem, e vamos em frente e copiar isso. Agora vamos mudar o alinhamento de um parágrafo centrado. Alinhar o alinhamento a uma esquerda, uma linha que parece boa. E vamos chamar isso de chá de leite normal. Temos 16 pontos, e também fizemos um 14 pontos em negrito Vamos fazer isso um ponto de 14 pontos. Negrito. Isso parece bom. Tudo bem. E vou copiar isto. Vou segurar a opção clicar e arrastar e segurar a tecla Shift. A associação impede que as coisas se movam. Alinhamento assim. Eu mantenho o turno. Não posso mais fazer isso. E vamos em frente e ver quando eu esticar a altura dessa caixa de texto, ela estava sendo padrão para um alinhamento intermediário para o texto. Vamos fazer alinhamento superior que apenas movê-lo para o topo da caixa de texto que parece bom e as seleções que tivemos para este leite regular para você como tivemos leite, tivemos um semi doce, e também tivemos o para voltar aqui e dar uma olhada gelo médio. E então também comemos a grande tapioca. Certo, vamos fazer isso um pouco maior. Vamos pegar o nosso. Vamos fazer deste o nosso 19 ponto. Sim, isso parece bom. Hum, o que é fazer? Luz de 19 pontos? Sim. Isso parece bom aí. E então vamos fazer isso a cor cinza mais clara, o cinza frio que fizemos. Tudo bem, isso parece bom. Tudo bem, este ponto. Eu vou usar o comando chave rápida comando são, ou ir para a ferramenta de forma aqui e ir para retângulo. Vou segurar Shift, clicar e arrastar e fazer uma caixa retangular aqui no centro. Meio que isso. Podemos fazer isto cerca de 60 por 60 aqui. E vamos fazer disso também o cinza legal. Então, selecione o cinza legal que fizemos anteriormente. Hum, tudo que você tem que fazer lá é clicar nos quatro esportes pontos como Phil. Aqui estão todos os nossos estilos de cores. Legal, cinza. E vamos puxar para trás a opacidade disto para cerca de 30. Isso parece bom. Certo, vamos fazer uma caixa de texto do mesmo tamanho deste retângulo. Aqui, digite um. Vamos fazer isto, hum, branco. Você pode selecionar nossos estilos de cores pré-existentes torná-lo branco. E aqui está um caso em que eu quero que seja, ah, no alinhamento do parágrafo central, mas também no meio da caixa de texto. E vamos em frente e fazer deste o ponto 42 Eu vou passar para um 22. Parece que sim, sim, vamos fazer isso 42 pontos. Eu também vou copiar o chá de leite normal e movê-lo para a direita e apenas digitar Q 2. Por quê? Para a quantidade. E vá em frente e faça a caixa de texto da mesma forma com. E lá vai você. Você pode ver a quantidade lá, certo? A próxima coisa é você. Parabéns. O, hum o X que fizemos aqui clique e copie-o. Você está apenas copiando o componente e vamos voltar e reverter isso. Então volte e faça um normal, uh, não 90 graus. E você pode ver agora que temos o símbolo mais. Vou copiá-lo aqui e torná-lo o símbolo de menos. Como você ainda não clicou em nada, o usuário Isso está desabilitado. Então vamos fazer isso a cor cinza legal e puxar isso de volta cerca de 20% de capacidade, talvez 40% de capacidade. Então isso permitiria se você adicionasse mais de um. Você pode ir até 23 e depois voltar. O Teoh. 2 para 1. Ok, e então vamos copiar este chá de leite normal aqui e vamos fazer um botão para a edição. E uma vez que isso é ervas de torneira, isso é algo que você pode se envolver com no produto. Vamos torná-la a cor de ação primária. Você pode ver isso aqui, e eu também quero fazer um para remover e fazer um pouco de espaçamento. Aqui, vamos nossa pequena hierarquia visual vamos nossa pequena hierarquia visualaqui. Vamos fazer uma linha entre estes dois. Então peguei a ferramenta de linha. Você também pode chave rápida que é L. E vamos também fazer isso o cinza legal e tonificá-lo de volta para cerca de 20% de capacidade. Oh, talvez 30% por cento de opacidade lá, certo? Bastante simples. Confira a página que estamos construindo. Vamos nos divertir um pouco e protótipo isso aqui. Então, se você selecionar o um e o círculo eo ícone do carro de compras e fazer um comando G, que é o grupo ou você pode clicar com o botão direito e ir para a seleção do grupo. Vamos para a guia do protótipo aqui. Agora vamos arrastar este pequeno braço protótipo de produto pegajoso para a tela de check-out aqui a partir da experiência de compra que temos, queríamos estar na torneira. Queremos que se mova para cá. Mude-se para cá e queríamos vir de baixo. Alguns movimentos para cima. E agora para o X. Vamos arrastar isso de volta para a tela de compras aqui, e queremos que isso seja movido e movido para cá. Então, é bom para o nosso protótipo e vamos ver como isso se parece aqui. Mas uma pressão, o botão play ou o botão presente, você pode já ter a guia aberta. Vá andando até aquela conta e você pode ver aqui. Quando eu pressionei o ícone de compras, ele desliza para cima, a tela desliza para cima, e quando eu pressiono o X, ele desliza para baixo Muito bom. Se você quiser adicionar mais telas para torná-lo para mostrar como ele se parece se você adicionou mais números aqui, pressione que ele remove. Sinta-se livre para fazer isso. Eu vou, eu normalmente escolho não fazer isso, hum, para estes apenas mais sobre ensinar a você a ferramenta. Mas podes ir fazer isso no teu tempo livre, se quiseres. Hum, este ponto, vamos apenas copiar. Essa quantidade de texto do protótipo final, você pode selecioná-lo. Essa quantidade de texto do protótipo final, Copiá-lo Agora que você sabe como usar a ferramenta de texto. Hum, você transmite Construa isso se você quiser, mas vamos apenas copiá-lo. Acelere um pouco as coisas. Basta colar. Lembre-se de selecionar o quadro de arte. Se você apenas selecionar dentro do nosso quadro, veja como ele colar? Hum, não no lugar. Mas se você selecionar a placa de arte a partir do topo aqui e pressione comando v ele colar no lugar de onde você copiou. E então fizemos uma linha aqui para esta seleção suspensa. Vamos pegar essa linha. E vamos acelerar isso aqui e dar a este uma seção no caso de você ter mais de um direito Neste ponto, o que podemos fazer é você quer ter um anúncio ou um botão de cancelamento que eles podem usar Ercan ou próximo botão e cancelar que o usuário pode envolver-se com em qualquer ponto. Então, se você quiser? Basta cancelar todas as coisas que você passa na experiência do carrinho de compras. Você pode ter isso e nós teremos os próximos botões aqui que nos ajudarão a ir para a próxima página. Então o que eu vou fazer é adicionar o botão de adicionar aqui. Vou torná-lo menos largo. Vou copiá-lo aqui. E eu acho que eles são realmente o original com pode ser ok. Vamos provavelmente para o com aqui cerca de 1 45 de largura. Agora vou copiá-lo. Isso parece certo. Ok. E o que eu vou fazer aqui é eu vou separar este componente, então eu vou removê-lo como um componente e trazê-lo de volta para apenas um elemento de design. Então, o que você faz está certo? Clique no botão. Bem, para selecionar o botão primeiro e, em seguida, direito, clique nele e pressione desanexar instância. E você pode ver que passou de um Ah roxo, seleção de caixa de limite para uma seleção de caixa de limite azul indicando que não é mais uma escolha de um componente. Agora, eu vou mudar o texto para este botão aqui para o próximo, e eu vou mudar o texto aqui para este aqui para ser cancelado. E o que eu vou fazer aqui é eu vou pegar este quarto dos fundos e eu vou adicionar eu vou remover o campo. Então veja este menos aqui à direita, mas remova o campo. Quero acrescentar outra sensação. Eu apenas pressiono o mais novamente, mas eu quero adicionar um acidente vascular cerebral, e eu quero fazer o acidente vascular cerebral. A cor primária que tínhamos para que você possa ver aqui tem o para Eu vou mover estes um pouco para a esquerda, centrá-los para cima. E agora temos um botão primário e um botão secundário. Então vamos fazer este botão secundário. Componente para que possamos reutilizá-lo. Então, de novo, peguei o botão de cancelar. Vou para a página Biblioteca de componentes aqui à esquerda e colo-a nessa página. Vou selecionar tudo. Vá para o ícone de diamante aqui, o topo criar componentes. E onde isso diz, botão primário, vamos chamá-lo de secundário. Foi mudado. Os foram cancelados para apenas um discurso de texto. E Eric, vamos voltar ao nosso aprendizado Paige aqui, e vamos colocar o componente que cancelar botão componente nessas páginas. Então pressionei a aba de ativos no topo, deixada aqui pelas camadas. Consigo ver o botão secundário. Aqui eu clico e arrasto para o protótipo. Cole bem em cima do botão de cancelamento. Exclua o botão Cancelar. Selecionei o quadro de arte aqui no topo da imprensa. Espero que não paguem em algum lugar. Um segundo. Então aqui temos o botão de cancelar. Vou copiá-lo. Meu colado no quadro de arte. Normalmente, se você não pisar originalmente este botão no próprio quadro de arte, ele não vai pagar em algum lugar como ele aconteceu antes. Então deixe-me ir em frente e mover isso para baixo. Bom. Agora, isso é certo. Em cima do botão de cancelar, eu vou comandar. Vê? E agora vou selecionar esse botão de cancelamento, que não é o componente e excluído. E agora eu vou selecionar o quadro de arte, colar no lugar, e, em seguida, mudar que o texto deste componente agora tornando-o uma instância desse componente e chamando. Cancelar. Tudo bem, então vamos em frente e fazer o botão cancelar voltar para a tela de compras original aqui que não tem a notificação para o carrinho de compras, e nós ainda queremos a mesma interação aqui. Toe deslize esta página para baixo para que você possa ver quando eu clicar nela, ele desliza para baixo. Queremos que o próximo botão vá para a próxima série de páginas aqui. Então, se você voltar para a guia camadas aqui e olharmos para o protótipo final, a próxima série de páginas aqui é configurar meu endereço. Então, a entrega do Boba ... acabará no meu endereço que introduzo aqui. Então vamos ter a seta para trás aqui, então vamos voltar ao nosso aprendizado. Paige, vamos pegar este quadro de arte aqui. O que é manter a opção Clique e arraste e mantenha a tecla Shift pressionada e vamos copiar esta página. Neste ponto, vamos pegar o ícone de seta. Então, se você for para os produtos de design que eu criei aqui e pegar este ícone de seta Pressione Command, veja, e vamos manter o X aqui por enquanto, apenas para o posicionamento da seta clique na tela de check-out que estamos aqui, o novo que copiamos. Vamos dar um nome a este endereço. Então eu cliquei no quadro de arte cliquei duas vezes na camada de endereço à esquerda e eu posso mudar o nome. Vou colar isto no lugar, colar isto no quadro de arte, colocá-lo em torno da posição do X, copiá-lo, apagar o X pressione o endereço. Eu armo no topo aqui e colo essa flecha. Agora é chamado este endereço aqui e vamos em frente e remover tudo isso. Estes elementos aqui. Então vamos protótipo isso. Então a próxima tela aqui vai para a tela de endereço. Mas, neste caso, ainda teremos que estar na torneira aqui. Vamos mudar-nos em vez de nos mudarmos. O seu pode estar em animação instantânea ou inteligente. Vamos criar um movimento. E queremos que este deslize da esquerda para a direita, e queremos que a seta para trás se mova para fora. Mas em vez de entrar pela esquerda, queríamos entrar pela direita para que ele se mova para a direita. Então, mover para dentro permite que esta tela de endereço para mover para dentro da esquerda e quando nós, quando dizemos mover para fora, permite que esta tela que nós selecionamos para sair do caminho e nós queremos ir para a direita. Então, às vezes, você. Se não ficar claro de como esses trabalhos acabaram de se encontrar, faça essas seleções e, em seguida, vá para o seu protótipo e vá brincar com ele no protótipo. E isso ajuda você a encontrar Hallows Air trabalhando para você para que você possa ver o próximo que isso vai deslizar nesta página de endereço. Se eu quiser voltar, posso voltar. E é uma interação bastante comum ver esse deslizar para cima. Veja o X a seguir. E agora nós entramos um Siris de botões traseiros e telas traseiras. Certo, então neste momento, precisamos colocar a informação do endereço. Então eu vou voltar para alguns dos componentes que já tivemos. Então, se você se lembra, nós construímos na tela de ativos aqui. Nós construímos alguns componentes padrão de formulário. Então vamos pegar esse componente, clicar e arrastá-lo para o quadro de arte. Havia um dos padrões. Vamos ligar para este endereço. E uma vez que este aplicativo já sabe meu nome, Eu já fiz login nele e eu me inscrevi anteriormente e dar-lhe deu meu nome. Vamos pegar o formulário de foco preenchido aqui e você pode ver se você clicar em um, hum em um componente e vamos levá-lo para esse componente se você clicar e arrastar. É assim que se usa no quadro de arte aqui. Então já tenho, ah formulário de entrada que eu criei que tem. Nós já temos o que é uma entrada ST foco. Então vamos em frente e dizer o nome aqui e nós vamos pré-preencher isso com o meu nome e vamos em frente e mudar o texto para todas as letras minúsculas. Agora temos o campo de endereço. Uma vez que este é um aplicativo que só funciona em São Francisco, vamos digitar São Francisco e vamos fazer essa opacidade de 30%. Então, verdade, na verdade, antes de fazermos o San Francisco, precisamos colocar o apartamento ou o doce aqui. Ok. E agora, como este não é um aplicativo que é usado pelo Onley em São Francisco, vamos digitar São Francisco como uma cidade, e vamos em frente e padrão que, hum, hum, são fazer a opacidade 30% de opacidade. Assim é desativado. O vestido tem que estar dentro de São Francisco. Tudo bem, e então vamos em frente e ver como a invenção faz isso lhe dá todos os atributos de espaçamento . Então está distribuindo igualmente esses campos de formulário para nós a 20 pixels cada e tivemos o estado da Califórnia. E a próxima coisa que tivemos aqui foi ter certeza que isso é igualmente distribuído aqui. Tínhamos o número de telefone aqui. Tudo bem. Bastante simples, já que já tivemos esses componentes construídos. Vou checar duas vezes, mas a última página? Vou checar duas vezes, Sim. Parece certo. Já temos isto. Protótipos, para que possas ver. Aqui está o que parece. Eu vou a seguir. Agora temos o endereço. Vou copiar este endereço, mantendo a opção, clicando no quadro de arte e turno. E eu vou pressionar. Vou clicar duas vezes na camada deste quadro de arte e chamá-lo de vestido um. Certo, então neste momento, vou copiar o teclado que temos do login. Apenas comande. Vou selecionar o comando de endereço V e comprei um estrondo, mas um boom. Vou selecionar o comando de endereço V e comprei um estrondo, Temos a tela do teclado. Agora, vamos em frente e apenas pré-povoar todos estes três aqui. Então, se você pode ver, Eu tenho o componente para a entrada ativa Fique já para esses campos de formulário. Alguns vão copiar este turno de opção e arrastá-lo e levar isto para o topo de todo o número de telefone, o apartamento e o endereço. Então eu vou comandar o See? Agora copie estes, e eu vou apagar o apartamento, o número de telefone, e eu vou selecionar o quadro de arte novamente. Comando V e coloque-os aqui. Então, neste tem que colar no lugar. Agora eu tenho o endereço, meu tipo no endereço, e nós vamos colocar, tipo, tipo, 111 Aw, Noboa Street. E vamos fazer. Aqui estava o apartamento que eu cortar doce e vamos apenas fazer 123 para o apartamento. E então tivemos o número de telefone aqui. Vá em frente e pegue Aaron Lawrence aqui e vamos fazer 1112225555 como um número de telefone. Ok, neste momento, este botão de ir nós precisamos fazer isso dizer feito. Então, se você selecionar o movimento, vamos em frente e mudar o texto de volta para Roboto para que possamos alterá-lo e pressionar Ah, clique duas vezes na caixa de texto e chamá-lo feito. E o que isso vai fazer é não permitir que você siga em frente. Ele vai apenas deslizar o teclado para baixo e você pode ir para ah, o próximo botão aqui e passar para a próxima tela. Então, neste ponto, eu vou manter a opção. Vou clicar e arrastar este protótipo móvel ou quadro de arte móvel e fazer uma duplicação disso. Eu vou. Você pode ver como a figura era inteligente. Percebeu que copiei isto no nosso quadro. E quando eu soltei, mudou o endereço de um aqui para dois e percebi que eu estava sempre numerando quadros de arte . Então ele começou automaticamente a numerar incrementalmente meu quadro de arte. Uma ferramenta muito inteligente. Vou apagar o teclado, e agora é o protótipo disso. Então eu vou voltar para a minha guia protótipo aqui. No topo, certo, eu vou clicar nele e vamos em frente e clicar no endereço, no apartamento e no número de telefone. Aqui, vamos fazer um comando G ou um clique direito e apenas agrupar estes como uma seleção e ir em frente e arrastar o protótipo braço pegajoso para o próximo endereço. Uma tela e queremos no topo, mas só queremos instantâneo. Não, não queremos nada extravagante acontecendo aqui neste momento. Vamos em frente e selecionou o botão feito aqui e clique e agarrou o braço pegajoso. Clique nele no quadro de arte, endereçado a e com toque e novamente. Instantânea. Nada extravagante. Ok, então agora o que acontece se você entrar no início do endereço? O apartamento ou o número de telefone é? Você pega o teclado. Nós só vamos preenchê-lo automaticamente por enquanto na arte. Mas se você quiser criar telas individuais para cada uma delas, agora você sabe como fazer isso. E então, se você pressionar Don, ele derruba um teclado. Quem pode passar para a próxima tela aqui, que é colocar os detalhes do seu cartão de crédito. Tudo bem, tão bom. Vou copiar este endereço um aqui mantendo a opção. Eu seleciono o quadro de arte, clique sobre ele, mantenha a opção para obter a seta dupla, clique e arraste deslocamento ou novamente. Eu poderia apenas copiá-lo, e eu posso comandar V e ele vai colá-lo para mim. Então comando vendo comando ser, Vamos chamar este pagamento e chamá-lo de um. E vamos rerotular o topo aqui para pagamento e vamos para a nossa guia de protótipos aqui, bem aqui. Vamos rab a flecha porque a seta agora vai para o endereço onde antes desta era estava indo para o check-out. Agora o botão Voltar e a seta irão para a tela de pagamento. Então, de novo, nada extravagante. Só queremos na torneira. Oh, e nós temos. Queremos que se mude? Sim, correto. E queremos ir para a direita. Então vamos em frente e excluir alguns destes aqui e vamos ver o que isso parece no protótipo disse que eu pressiono próxima esperança que não funcionou. Então vamos ver o que acontece aqui em cima. Nós não o conectamosobotão seguinte a esta tela. Então vamos pegar o próximo. E vamos pegar o protótipo do braço pegajoso ligado ao Pagamento 1. E queríamos mudar-nos para cá. Então nós queremos na torneira, entrar e nós queremos entrar pela esquerda e então nós queremos a seta aqui em movimento para fora e nós queremos sair da direita. Então, para voltar por isso, aqui está o nosso check-out que temos a seguir. Aqui está a informação de Theodore. O número de telefone que a imprensa fez. Eu aperto o próximo botão, e esta página vai entrar pela esquerda, vai passar pela direita. Você pode ver isso. E então esta tela aqui vai se mover para a direita para que você possa ver como isso se move para a esquerda . Nosso próximo botão aqui diz que esta página vai passar da esquerda e a seta aqui, conectando ao endereço para a tela vai sair do caminho para a direita. E isso é o que parece. Movam-se, mexam-se. Certo, vamos ver os detalhes do pagamento. O que tínhamos aqui era que tínhamos os detalhes do endereço no topo. Então vamos em frente e pegar o chá de leite normal e o doce semi, uh, o semi doce e texto de gelo médio aqui, vamos apenas colá-lo diretamente no mesmo lugar na tela de pagamento. E vamos mudar isso para entrega ou entrega para. E vamos apenas inserir as informações que fizemos na última tela aqui. Então temos o meu nome. Você tem Aaron Lawrence. Temos 111 Boba Street e temos o número 111 ou 123 para o apartamento. E nós temos o número de telefone, que era 1112225555 Tudo bem, legal. Então, neste ponto, vamos arrastar para cima outro desses, hum, componentes de forma que fizemos. Então, se formos para as telas de ativos à esquerda aqui, talvez vá para as telas de ativos à esquerda. Vamos pegar o formulário padrão. Coloque isso no quadro de arte aqui. E isto vai ser o nome no cartão. Estou em uma cópia. Este é poços para o espaçamento 20, e este vai ser um número de carro, e depois arrastar. Hum, clique, segure, opção e deslocamento. Copie este cartão número um aqui. E vamos chamar este de data de validade. E o que vou fazer aqui é selecionar o elemento de linha. Na verdade, o que vou fazer é pegar um retângulo aqui e fazer um preto. Eu também posso apenas clicar no botão Eu soltá-la, clique no fundo para que seja da mesma cor que o plano de fundo. E fique com esse dedo do pé. Ocultar este documento de formulário aqui. O que acontece quando você cria um símbolo que você tem uma instância é que eu posso criar o início. Eu posso mudar o estilo dele como eu posso mudar. A cor pode mudar. O pastar aqui pode alterar os estilos desse componente. Mas eu não posso manipulá-lo como se eu não pudesse entrar nesta linha aqui e fazer larguras diferentes fora das linhas. Eu podia ver que ainda não me deixava fazer isso. Por isso, mantém-lo bastante fiel ao componente. Então eu estou fazendo aqui é que eu estou meio que fingindo. Você pode ver que eu tenho essa longa fila. Eu não quero essa linha lá porque eu quero colocar o CVV em cima disso. Então o que vou fazer é pegar essa data de validade. Vou pagar a alguém, tipo, clique direito, mover isto para a frente e vou chamar este de CVV. Apenas um pequeno campo aqui para três números, e eu vou fazer a mesma coisa. Vou criar uma caixa preta aqui e colocá-la por cima. Posso pressionar I para obter a tecla rápida para pegar o conta-gotas e selecionar o fundo. E eu tenho o preto para que você possa ver que eu ainda tenho os componentes que estou usando, mas eu criei espaço para eles. E dessa forma, se eu quiser mudar esse componente, Mestre, eu não separei esses dois componentes e tenho que voltar e mudar esses. Está bem, Legal. Então, neste ponto, vamos em frente e colocar o total que tínhamos. Então nós criamos um elemento total aqui, e mostramos que o total aqui é bom, que é 9 49 E suas melhores práticas antes de você comprar qualquer coisa é ver o total em que sua compra aqui para colocar isso centrado. E nós tínhamos nove, eu acho que 49 como o total. Aqui, vamos mudar este botão para pagar. E agora estamos em boa forma. Então, agora que eu pressionar o botão Voltar e eu colocar todas as informações de endereço em eu pressionar o próximo Nam na tela de pagamento aqui, eu estou quase terminando com o pagamento. Então vamos para Ah, vamos preencher isso muito rápido usando os formulários que criamos que estão no estado ativo. E o que vou fazer aqui é copiar este pagamento. Não estou entediado. Eu estou clicando no quadro de arte segurando a opção e deslocamento, arrastando-o para a direita, e eu fiz uma cópia dele. Vou para os meus bens aqui. Vou pegar meus componentes que criei. Lembre-se deste formulário Focus. Um estado ativo que temos. Eu ia substituir tudo isso aqui por este componente, então eu vou apenas colocar um quarto bem em cima do outro por agora. Vou pegar todos os quatro, um, comando, ver meus apagar esses aqui, e vou substituir os ativos aqui. Certo. Então você pode ver aqui. Eu preciso colocar este formulário embaixo do retângulo, para que ele dê algum espaço. E eu também preciso pegar o retângulo que eu criei aqui. Você pode ver como eu faço isso é clicar e arrastar da direita que seleciona todos os elementos aqui para que eu possa selecionar mais de um elemento. Selecione todos esses elementos. Realmente? Eu só estou tentando chegar a estes dois tentando chegar a este formulário de entrada preenchido e este retângulo aqui. Então agora eu tenho esses também. Agora vou segurar o turno. Vou clicar no título e colocar o componente aqui para o cvv. E agora eu selecionei isso. E eu só tenho o retângulo aqui. Então, agora que selecionei, vou clicar no retângulo no painel de camada à esquerda e mover isso acima deste componente. Tudo bem, então vamos em frente e mudar isso. Tínhamos o nome no cartão, e vou usar o meu nome por enquanto. Eu não vou colocar os detalhes do meu cartão, mas, mas, hum, isso mudou o texto aqui para o caso original e então nós tivemos, hum os detalhes do cartão são os números. Então número do cartão e, em seguida, vá em frente e segure a opção e pressione a letra. Oito acertar quatro, fazer quatro balas, fazer mais quatro balas, e então apenas ir 1111 Ele sempre expõe o da esquerda dos últimos quatro dígitos aqui. Eu vou selecionar as datas de validade e eu vou colocar eu diria 01 2020. E eu vou fazer o CVV aqui e foi 2123 Cool. Certo? Neste ponto, precisamos do teclado também. Então é só pegar o teclado aqui que criamos para o quadro de arte de endereço, Colá-lo no pagamento. Não é pássaro que temos aqui? Tudo bem. E estamos em boa forma agora, então vamos em frente e protótipo isso. Basta selecionar todos esses componentes que fizemos aqui, vá para a guia do protótipo. Você quer um grupo estes ir em frente e clique com o botão direito. Tenho uma seleção de grupo ou comando G. E vá em frente e aponte isso para isso. Pegue o pequeno Aero pegajoso para este quadro de arte aqui. CNC está conectado aquele quadro de arte. Não queremos nada chique só por cima. Hum, quando você se muda, é apenas instantâneo. E isso abre o teclado irá apenas pré-preencher todos esses campos de formulário. E então eu vou copiar isso mais uma vez aqui, e eu vou selecionar o botão pronto. Vou arrastar o pequeno protótipo do braço pegajoso para a tela de pagamento três. E nesta interação aqui, nós só queremos no toque instantâneo e vamos excluir o teclado. E aqui temos o pagamento. Mas indo a algum lugar, não queremos que isso funcione agora. E nós também temos aqui. Você tem opções no seu UX aqui para isso. Você poderia fazer isso, hum, 30% de opacidade até você preencher todas as informações. Uma vez que você preencha tudo, ele vai para a capacidade total. Você pode mantê-lo 100% do que fazer estados aéreos para estes, onde você começa um pouco como a linha fica vermelha e diz, hum, você se parece com algo assim e as linhas ficam vermelhas indicando que eles ainda são informações a ser preenchido. Pequenas coisas que pensam no seu UX. Se você está curioso sobre qualquer aula ah ux, eu tenho classe aux que você pode verificar dois em meu nome. Mas neste caso, só quero te ensinar uma experiência de aplicativo móvel e como usar o estigma para construir isso. Mas neste caso, só quero te ensinar Tudo bem, então vamos seguir em frente. Temos esse protótipo. Vamos verificar isso. Então eu clico nos nomes aqui pré preencher, tenho o teclado pressionado, e agora eu estou pronto para pagar. Então a próxima coisa que queremos fazer aqui é pegar a tela de carregamento que tínhamos aqui? Vamos em frente e pegar o que fizemos aqui no começo. Depois que você se conectou, vou copiá-lo, e vou passar para esta seção. Pressione o comando V e eu coloquei quadro de arte em meus layouts. Vou ficar com o de presentede animador GIF do carregador aqui. Apenas apague o logotipo, e eu vou copiar. , Na verdade, pegue esse texto de entrega, pegue essa tela de carregamento e veja como saiu da linha. Quero-a centrada na linha. Agora eu só quero centralizá-lo bem debaixo daquele presente de carregamento. Agora, eu também quero manter a caixa de limite de texto igual com do quadro de arte. E quando eu tenho isso e o parágrafo centrado com isso mantém este texto diretamente no centro e vamos em frente e mudar isso para enviar pagamento, assim como assim. Ok, então neste ponto, podemos apenas selecionar o botão de pagamento, clicar no protótipo que queremos no topo. Nada chique aqui. Apenas instantâneo. Basta ir direto para enviar o pagamento e vamos ver como isso se parece. Então você clica no pagamento e agora você está na tela onde ele está enviando o pagamento. Ok, então a finalizar nossa experiência de fluxo de trabalho de check-out, queremos mostrar o chá Boba em tempo real sendo entregue em seu endereço com uma série de telas e, eventualmente, ser entregue aqui no final. Está bem, fixe. Então vamos voltar para a nossa guia Paige de aprendizagem aqui e vamos copiar esta tela de carregamento. E vamos mudar o nome desta tela de carregamento para entrega e vai fazer a entrega um. Vamos clicar fora do quadro de arte. Basta clicar e arrastar para selecionar o presente de carregamento e o pagamento e simplesmente excluí-lo. E lembrem-se, tínhamos um mapa aqui de São Francisco. Vamos pegar este mapa. Então, se você se lembrar, basta clicar nele já cortou. Já está na posição certa. Basta comandar, Veja, e depois passar para esta entrega um quadro de arte, selecionando a placa de arte e comando v Ill ritmo direito no lugar. Tudo bem. E a próxima coisa é, vamos para a nossa placa de arte de produtos de design aqui à esquerda, e vamos pegar este pequeno ícone Boba com o círculo branco atrás dele. Comando ver, vamos copiá-lo. Vamos colar isso em algum lugar na nossa aplicação. Digamos que talvez aqui e agora vamos pegar o ícone do pino do mapa aqui e novamente, como eu explicaria no último vídeo. Se você quiser muitos ícones, basta ir para o tipo de ponto com substantivo projeto no ícone do mapa. Você poderia obter um monte desses pequenos pinos de mapa que você quer ou até mesmo apenas digitar no mapa e ter um monte de coisas aqui que você queria, certo? Então eu tenho um aqui no design, os bens estão entediados. Vá pegar o comando, veja, veja, e eu estou segurando o turno novamente enquanto eu concedo clique e arraste vir para o quadro de arte final aqui que nós temos. Vamos colocar o ícone do mapa. O que fazer em algum lugar vai dizer, como em algum lugar aqui, tudo bem. Ok, e então a próxima vez que eu quiser te ensinar aqui é a ferramenta de alfinete. Então essa é essa pequena seção de alfinetes aqui. Esta é uma ferramenta de desenho e permite que você crie qualquer forma personalizada que você gostaria. Você pode ver que eu posso apenas dar a volta e é como ligar os pontos. Eu poderia fazer qualquer forma ligar o ponto. Posso adicionar um preenchimento. Estou fazendo Pressione V para sair dela e selecionar a forma, voltar para a ferramenta de seleção e excluí-la e então o que vamos fazer é criar uma linha personalizada que segue a rua do Boba para o meu ícone de mapa aqui. Então vamos pegar a ferramenta de caneta. Pressione P clique em torno do ícone boba aqui, e então você pode vê-lo segue seu mouse. Vá em frente e clique novamente onde você vê a rua e depois siga esse deleite. Clique para baixo. Ele vai um pouco para a direita agora clique novamente e, em seguida, conectado ao ícone do mapa. 6. Crie as telas de perfil: Tudo bem. Bem-vindo ao quinto vídeo de como construir um aplicativo móvel usando figo MMA projetado dedo do pé neste vídeo, vamos cobrir o fluxo de trabalho do perfil ah. Então nós já criamos o login, Cadastre-se de compras, confira todas as coisas incríveis e teremos o vídeo aqui que será o último vídeo de nós projetando juntos. Hum vai terminar com o perfil, hum, guia que construímos mais cedo. Também teremos mais uma série de vídeos para falar sobre outras formas de usar a Fig Mahato. Convide as pessoas para o seu projeto e colabore com elas sobre como exportar ativos, Uhm e permitindo que os engenheiros inspecionem seu design para obter atributos de código. Falaremos sobre os atalhos de teclado de figo, MMA. Vou te mostrar alguns plugins e como colocar kits pegajosos online. E, em seguida, como criar comentários e eu tenho alguns pensamentos finais e indo para a frente. Ok, então vamos voltar para o nosso arquivo aqui e novamente. A tela que vamos construir hoje é esta tela aqui, que é uma vez que você começa uma vez que você tocar na guia, onde o perfil está. Ele leva você para a tela de perfil aqui eu posso alternar entre ordens e perfil, ver uma foto do meu Bem, não é realmente eu, mas alguns rastrear on-line, e tem algumas informações do meu perfil que eu poderia editar. Esta informação pode adicionar uma foto que eu posso sair também. Ok, então vamos voltar para o nosso arquivo aqui e vamos para onde paramos por último, que, hum, foi terminar a experiência de check-out. Temos um protótipo de fledge bastante completo para uma experiência de usuário de entrega boba. Hum, mas vamos em frente e pegar as peças finais disso. Então vamos pegar a, hum, página de inscrição aqui e vamos copiar esse comando. Veja, vamos levar isso aqui para a borda final. E vamos acelerar isso aqui. Dê um pouco de espaçamento, e vamos renomear isso como nossa tela de perfil. Então, novamente, eu apenas selecionei esta tela aqui, e eu digitei, eu cliquei duas vezes na camada à esquerda e eu pressiono perfil, que , espero, neste momento, você está pegando o jeito de copiar quadros de arte e renomeá-los à esquerda. Outra coisa que eu preciso disso é que eu vou precisar desta guia são da tela de compras aqui . Então vamos em frente e selecione esse comando. Veja, e vamos em frente e ritmo que nesta tela de perfil que temos o comando V e que vai colar no lugar. Vamos remover todos os formulários, campos, os botões lá, o que é remover este logotipo e vamos pegar essas duas guias e apenas movê-los para cima apenas um pouco sobre o seu ok. Então, neste ponto, queremos fazer o estado ativo deste ser o ícone de perfil e voltar para um estado padrão para esta ilustração de chá Boba. Então vamos pegar o ícone do perfil aqui. Vamos sentir que já o temos definido no White. Vamos fazer com que a opacidade seja 100%. Tudo bem, legal. A próxima coisa que precisamos fazer é pegar essa ilustração de chá Boba aqui e o que é ir em frente e apenas adicionar uma sensação a ele. O que está fazendo todo branco que o dedo do pé padrão branco? E vamos em frente e fazer isso uma opacidade de 40%, na verdade, 30%. Lá vai você. Agora é muito claro para o usuário que eles estão no perfil toque depois que eles tocaram nele, e que estes são estados padrão. E este é o estado ativo. Então vamos mudar a inscrição e o texto de login. Vamos ligar, assinar o perfil e ligar para o registro aqui. Ordens. Tudo bem. Bastante simples. Certo, agora o que vamos fazer aqui é abrir espaço para a foto dessa pessoa, então pegue o círculo aqui. Quickie também é zero, e vamos fazer um pequeno círculo aqui. Ok? Então eu vou ter um vídeo na próxima série. Uns 21 ou dois à frente para falar sobre plugins de figment. Mas você também pode obter alguns plugins agora. E quero te mostrar um que uso o tempo todo. Chama-se conteúdo, Riel. E como chegar a esse plug in é se você voltar ao seu painel, clicando nas quatro caixas aqui no canto superior esquerdo leva você de volta a esta tela. Lembro que é aqui que você pode criar arquivos. Aqui também é onde você adiciona pessoas, que eu vou mostrar no próximo vídeo. Neste ponto, você está nos rascunhos aqui. Aqui é onde você pode criar quantas dessas placas de arte quiser. Se você for para a tomada aqui, você verá todos os plugins que você pode usar, e você pode ver este aqui. Chama-se Popular para Chamar Conteúdo Riel. Se você clicar no conteúdo riel, você também pode procurá-lo e pressionar instalar. Ele irá instalá-lo em seu figo MMA, tudo grátis para você. Então, por que você não vai em frente e instala esse plugue? Vou te dar um segundo. É bem rápido, também. Como todos desinstalar isso e instalá-lo vai muito rápido. Volte para os meus rascunhos, e então se quiser voltar para o seu arquivo de classe ah, basta clicar triplo sobre isso. Estamos de volta à mesma coisa em que estamos. Ok, o que é realmente legal sobre este plug in é que eu quero preencher isso com uma imagem deste círculo. Então, no topo aqui no nosso menu, temos plugins. Clique no plug in e aquele que acabamos de adicionar conteúdo. O Riel. Vá pegar conteúdo Riel, e nós queremos avatar aqui. Então vamos clicar nos avatares, e podemos colocar macho, fêmea ou ambos. Alguns colocam machos. Basta clicar em machos e ele irá pré-preencher este com qualquer e-mail que você deseja. Você pode clicar nele novamente, e em outro, eu poderia apenas passar por ele anúncio tanto conteúdo quanto eu quiser. Bastante legal. Eu também posso apenas pegar texto como Vamos pegar este texto de perfil aqui. Você só me observa. Vou dar-me nomes, números de telefone, endereços, números, datas. Laura Epsom e envia RL para você, hum para que ele preencha essas coisas para mim. Então eu não penso nisso e datilografar tudo muito legal. Tudo bem, então deixe-me trocar de roupa. Vou me trocar mais uma vez, vou pegar isso. Pegou outro avatar. Certo, vamos pegar aquele cara como aquele cara. Certo, então neste momento, temos a imagem do perfil deles. E agora vamos adicionar o nome. Então é só copiar este texto de perfil aqui. Clique e arraste e mantenha a tecla Shift pressionada enquanto uma opção e enquanto clica e arrasta. Vamos copiá-lo. Está em um layout centrado. Queremos que ele deixe uma linha por agora, então é deixado online. Vamos centrar um pouco. E este era o sistema de 19 pontos. Vamos voltar a pensar que tínhamos 16 regular. Isso é perfeito. Vamos pegar 16 aqui e eu vou esticar este texto e eu vou voltar para o alinhamento de texto não sendo centrado, mas no topo, exatamente assim. E eu sou um tipo nas informações do meu perfil que usei quando me inscrevi. Então era o meu nome. Aaron Lawrence. Você pode digitar o seu se quiser. Fizemos testes no Gmail Dot com e vamos dividir Aaron Lawrence em duas linhas, caso as pessoas tenham nomes longos aqui. E vamos em frente e fazer isso a cor cinza legal aqui. Tudo bem, isso está parecendo legal. Vamos ter um pouco mais visual. Vamos pegar um retângulo. Você pode apenas fazer o nosso ou você pode ir para a ferramenta de forma aqui e vamos colocar um retângulo atrás de tudo isso. Aqui está o meu retângulo. Vou pegá-lo do painel de camadas à esquerda e apenas clicar e arrastá-lo e movê-lo para trás de tudo e vamos em frente e mudar isso. Vamos fazer com que a cor cinza legal que tínhamos, e então vamos fazer a opacidade nele muito baixa Vamos fazer assim. Vamos fazer outra cor aqui. O que é que destacou isso? Vamos fazer um branco e tirar um 10. Isso ainda não está funcionando para mim. Às vezes, o design visual, você meio que faz algumas rotas. Hum, então vamos nos pegar. Ah, cor azul. Lá vai você. Agora estamos chegando a algum lugar. Deve ser muito sutil. Vou aumentar um pouco a opacidade. Você tem 35% e vamos usar algo no meio. Vai sobre a sua, hum, para 54 56 b como uma cor. É uma cor de fundo. Vamos dar um golpe a esta, hum, nesta imagem de perfil. Então está em um acidente vascular cerebral aqui. Bem, eu vou com White por agora que eu sou um tom de volta. Mas vamos fazer isso, tipo, bem grosso. Ok? Eu acho que eu acho que por que deve ser ok. Ok, então agora este Texas A parece um pouco pequeno. Hum, então vamos voltar e torná-lo branco. Vamos dar-lhe um pouco mais de hierarquia visual e vamos chegar ao ponto 19 Negrito. Sim, assim. Vamos ousar. Ok, isso parece bom agora, certo? Então a próxima coisa a fazer aqui é vamos adicionar a função para adicionar uma foto. Não faremos protótipos, mas adicionaremos o botão para fazê-lo. Então eu tenho um pequeno ícone de câmera. Vamos também pegar o ícone de edição. Por que estamos aqui no quadro de arte de produtos de design. Vamos voltar aqui e vamos passar isso para este quadro de arte. Mas deixe isso aqui por enquanto. Ok? Vamos pegar este círculo aqui. Você também pode apenas pressionar O no seu teclado e eu vou segurar a opção Shift. Como eu faço isso, você também pode apenas segurar turno se você segurar opção. Ele vai do centro de onde você está clicando. Se você apenas segurar o turno, ele vai da esquerda para a direita. Estou segurando turnos de opção. Eu posso ir para o centro de onde eu clicar e eu vou fazer um pequeno botão de ação para carregar a foto. Não muito grande sobre esse tamanho. E como isso é algo clicável, vamos fazer disso a cor da ação e vamos pegar esse ícone da câmera e vamos em frente. Vou clicar com o botão direito. Traga para frente o meu downsize um pouco. Vou segurar o turno quando eu reduzir o tamanho. Se eu não segurar o turno, você vai acabar fazendo coisas assim, o que não é bom. Você quer manter a perspectiva dessa ilustração da câmera. Tudo bem, coloque isso bem no centro. Eu meio que deixei cair isso um pouco. O que tem um derrame? O que há em um traço mais escuro, como um traço de três pixels para isso? Dê-lhe alguma separação da imagem que parece bom que eu possa tocar naquela câmera para entrar em minhas fotos e selecionar uma nova foto. Se eu quiser editar qualquer uma dessas informações aqui, eu vou comprimir o ícone de edição. Vamos em frente e fazer isso também na cor da ação para que você possa ver a cor da ação aqui. Vou copiar as ordens aqui. Deixei uma linha, vou mudá-la para 100% de opacidade aqui. E eu só vou escrever a palavra adicionada. Aqui, coloque-o ao lado desse ícone e mova-o para baixo. Ok. E isso me permitiria editar essas informações aqui. Tudo bem. A próxima coisa a fazer é fazer a página do pedido aqui, então é copiar esta página do perfil. Vamos pela esquerda aqui. Como se chama esta ordem? E novamente, vamos fazer este texto que tínhamos o perfil era 19. Este texto aqui foi, acredito que foi dito em 19 Bolds e vamos torná-lo branco. Este texto aqui foi, É branco tinha 100% de opacidade. Vamos fazer este perfil aqui 19 pontos regulares ou leves e vamos fazer essa opacidade de 50%. E então vamos trocar este retângulo sobre as ordens dos pés. E então vamos apenas excluir todas as coisas de perfil que fizemos dado o fundo. E neste ponto, nós só queremos chamar alguns dos detalhes que encomendamos aqui. Então vamos pegar uma das fotos, esta foto de chá de leite aqui. E vamos pegar essa informação aqui. Então, vou pegar a foto primeiro. Vou colocar a foto na ordem, por enquanto. Qualquer lugar é bom. Vou reduzi-lo um pouco. E eu também vou pegar a informação do pedido aqui. Copie isto. Ok. E vamos em frente e colar isto por baixo da ordem aqui. Certo? Então vamos agitar o, hum vamos chamá-lo de um chá de leite. Aqui. Vamos pegar a informação que diz Leite meio amargo, gelo médio, tapioca grande. E vamos mudar isso para, hum, quantidade. E vamos colocar um aqui e vamos centralizar isso. Vamos ao centro abaixo do texto normal do chá de leite aqui. Vou fazer o mesmo com o quadro de arte. Então eu sei que é exatamente no centro daquele quadro de arte. Quanto da mesma coisa para o texto normal do chá de leite, Mas você pode ver que tem o alinhamento esquerdo. Então vamos para a área de texto aqui e o que é torná-lo centralizar o alinhamento de parágrafo. Isso parece bom. Ok. E então o que vamos fazer aqui é cortar este círculo aqui ou isto. Ah, hum, esta imagem aqui e torná-la em um círculo. Então vamos selecionar a imagem. Se você ir dedo do pé do topo aqui, onde tem o seu vontade não o seu dentro de sua altura Atributos. Há o raio do canto, , campos aqui, vá em frente e pressione Shift e a seta para cima e faça isso um monte de vezes. Você também pode apenas digitar cerca de 100. Isso deve ser bom. Vamos fazer o com ele de 90 por 90 e então vamos em frente e explodir esta imagem um pouco. Então o que você pode fazer aqui é clicar três vezes na imagem e, em seguida, ir para a ferramenta de corte no topo. Agora eu o cortei dentro do círculo. Você pode pegar a imagem aqui, segurar o turno e explodir. A imagem pode explodi-la assim. E eu vou reduzir esse círculo um pouco. Eu estou segurando o turno quando eu baixei, então eu seleciono o canto. Segure o turno, reduza o tamanho, vá em frente e jogue aqui. Mova isso um pouco para baixo. Certo? E nós também tínhamos uma linha que colocamos em algum lugar aqui na página de check-out. Tínhamos esta linha. Vamos selecionar esta linha. Apenas copie. Agora vamos voltar a este quadro e vamos adicionar isto a alguns sítios. Vamos colá-lo. Vamos adicioná-lo bem em cima dessa imagem. Dê-lhe algum espaço, mas abaixo da guia de pedidos. Então, se tivermos mais informações sobre esses pedidos, ele pode rolar abaixo dessa linha. E nós também vamos centralizar isso aqui. E também adicionar a data alguém uma cópia, esta quantidade e fazer a data Heróis dizer isso. 0103 1020 e o preço foi um dólar ou $9.50 49 centavos. Tudo bem, vamos em frente e deixar o texto branco para o total. E vamos fazer 19. Negrito. Tudo bem, e vamos em frente e pegar uma linha. Basta separar esta ordem aqui e podemos ADM ou aqui em baixo é nós vamos. O que é legal se fizermos assim, é se tivermos mais ordens do que uma. Poderíamos copiar estes e torná-los um pouco menores. Podemos adicionar um monte de anos. Queríamos dizer que isto era como um Nord de três os matou aqui. E digamos que a quantidade era três. Poderíamos ter três. Se fosse como seis destes, então podemos ter seis e todos têm diferentes sabores dentro dele. Então este design escala para ter essas diferentes variações. Você não tem que fazer isso. Só estou fazendo isso em segundo lugar, vê? Tudo bem, legal. Então, Então, há a página do pedido. Vamos em frente. Vou voltar um pouco aqui. Vamos em frente e protótipo isso Então vamos primeiro para a tela de compras aqui. E vamos pegar este ícone de perfil aqui, diminuir o zoom. Você meio que zoom para fora muito longe para este aqui. Pressione a aba do protótipo na parte superior, certo? Pegue o pequeno protótipo pegajoso e vá em frente e conecte-o ao perfil aqui. Neste ponto, queremos na torneira. E não queremos nada chique. Só um instante. É isso. Nós também queremos tomar esta ilustração Drink of the Boba e conectar isso de volta para a página de compras aqui, você pode ver e nada extravagante. Apenas instantâneo. Então, toque e instantâneo. Tudo bem. E uma coisa que precisamos fazer também eu vou copiar. Hum, minha cópia do texto do pedido aqui, e eu vou fazer este texto um, um 16 pontos regular em 100% de opacidade. E faça isso o rosa ou a cor de ação e apenas faça este logout e vamos em frente e conecte esse botão de logout, diminuindo o zoom. Ele pegou um pequeno protótipo de ligação. Ou se você simplesmente movê-lo para a direita, ele vai passear pela página para você. Vamos lá. Enviado de volta para a tela de login aqui, Legal e por último, mas não menos importante, vamos conectar ordens aqui para a tela de ordem. Então, os pedidos na guia de perfil para a tela de ordem no toque, e queremos inteligente, animar. E então vamos fazer o mesmo para o perfil. Ah, texto na tela de pedido para ir para a tela de perfil no toque. Inteligente, anime-se e vamos dar uma olhada nisso, certo? Então, para voltar à tela de compras, eu toco no perfil. Você pode ver um ir para perfil aqui se eu vou para ordens. O bom, inteligente, animado aplicado a transição do retângulo sobre as ordens dos dedos dos pés. Faço perfil de Aiken. Faça logout. Posso clicar de volta no ícone da bebida Boba, levá-lo ao centro, e posso sair. Leve-me a uma tela de saída. Tudo bem, então isso é praticamente um aplicativo funcional completo que acabamos de construir em qualquer lugar, todo o caminho de fazer o login pedindo uma bebida boba, usando várias interações, adicionando a bebida, fazendo slides ups, colocando as informações de endereço, colocando os detalhes do cartão de crédito, vendo as telas de carregamento usando GIFs animados, vendo as transições de atrasos de tempo nas telas, chegando a uma experiência final aqui. Vendo o chá Boba chegou e, em seguida, passando para seus perfis, seus pedidos e logout. Tudo bem. Ótimo. Então esse tipo de cobre principalmente tudo o que fizemos na construção do aplicativo móvel para esta experiência de chá Boba sob demanda. Quero agradecer-te se chegaste até aqui por não só comprares a turma e passares a aula, mas por continuares comigo aqui e passares o tempo a aprender algo como este design. Sou muito apaixonado por artesanato de design. É um grande ofício. Se você está entrando nisso, é ofício honrado da corte, e leva tempo e compromisso para aprender. E, hum, e desenvolver isso. Então, obrigado por tirar o tempo e desenvolver seu ofício comigo. A próxima série de vídeos que vou encerrar aqui é, hum, nós vamos aprender um pouco de como convidar outras pessoas para o seu quadro, como exportar ativos, inspecionar código e seus projetos, teclado atalhos, mais dos plugins de figment que você tem que ver uma pequena pré-visualização de recentemente neste vídeo , como criar comentários, pensamentos finais, e avançar todos os vídeos realmente rápidos que conjunta tomar um par minutos para passar, e você já completou a maior parte da classe. Então, apenas fique junto para estes últimos vídeos para amarrar tudo junto. Ok, bem, obrigado novamente. Espero que você se divirta com seu protótipo, e eu vou te ver nos próximos vídeos de 7. Colaboração com outros e exportando ativos de UI para engenharia: Bem-vindos ao próximo vídeo. Então, este ponto nós passamos pela maior parte de Sigma aprendendo os dentro e fora do design e as ferramentas e todas as funções para esses projetos específicos que criamos e a prototipagem . A próxima série de vídeos mostra mais como convidar pessoas para o seu álbum. Como exportou recursos U. Y atalhos de teclado, plugins, como criar comentários, alguns pensamentos finais indo para a frente para os vídeos muito curtos apenas para mostrar como toe trabalhar continuamente com Sigma como você trabalhar com equipes e trabalhar com outras pessoas e como se tornar mais eficiente com ela. Ok, então vamos em frente e olhar para como convidar outras pessoas e como é a colaboração no MMA figo , bem como como como exportar ativos u I como ícones, hum, ilustrações e como inspecionar código para engenheiros. Então, se você for para o nosso arquivo aqui que nós estávamos e nós podemos ir para voltar para o nosso aprendizado. Paige, esta é a página onde criamos nosso protótipo aqui. Você quer convidar alguém para colaborar neste quadro aqui e eles terão acesso a todas as páginas aqui. Praticamente todo esse arquivo. Tudo o que você tem a fazer é subir aqui para compartilhar, clicar no link de compartilhamento, e você tem duas opções. Você pode torná-los um visualizador ou editor. Então, se você é, permite que eles vejam os pés as palavras de arte que eles podem entrar nas, hum, hum, tábuas de arte. Dê uma olhada nele. Eles podem olhar para os protótipos, mas eles não serão capazes de mudar as coisas ao redor. Eles não serão capazes de projetar como nós fizemos. Se os tornares editores , eles vão entrar no teu quadro de arte e podem mudar as coisas. Tirado, tirado, fazer praticamente acesso total ao MMA de figo, assim como você tem. E para a visão de você era apenas isso é livre. Você pode convidar quantos espectadores quiser para o seu álbum quanto convidou editores Mawr. Eu acho que você tem cerca de três que você pode convidar. Depois disso, você começa a pagar pela ferramenta, então é praticamente gratuito para você usar e convidar quantos espectadores quiser. Mas uma vez que você convida mais pessoas para editar seu álbum, ele se torna um modelo de assinatura. Está bem, fixe. Então você pode simplesmente passar, convidar quantas pessoas quiser. O que parece quando estão na sua prancha é muito legal. Esta é uma das minhas características favoritas na figo. MMA. Hum, então vamos dizer que eu fui até aqui. Tenho um link Ver ou Editar aqui. Hum, e eu adicionei alguém ou cliquei na vista aqui. E digamos que eu adicionei, o e-mail de alguém pode me colocar agora. Aí está o meu e-mail que enviei um e-mail. Quem receber o e-mail diz que é um engenheiro. Eles abrirão esse e-mail e terão acesso ao Fig MMA em seu desktop em um navegador da Internet. Eles não precisarão instalar software. Será de graça para eles. Eles simplesmente abrem uma janela do navegador em sua Internet, e eles terão acesso a este arquivo como você vê aqui, alguns na Internet. Neste momento, estou no Chrome e eles terão acesso a este arquivo. Eles podem trabalhar e projetar exatamente como nós fizemos, mas dentro do navegador. E o que é realmente legal é se você estiver trabalhando em seu arquivo e essa pessoa entrar no hum a pessoa que você convidou vem para este quadro. Você pode ver suas bocas então você pode ver que eu tenho dois A com círculos roxos aqui no topo , certo? E um é Aaron Lawrence dizendo que sou eu. Outro sou eu também, mas este seria você verá mais do que um desses pequenos ícones de perfil aqui no topo. E essas são as pessoas que estão no seu conselho agora trabalhando. Então, se eu diminuir um pouco, você poderá ver meu mouse do outro projeto em que eu estava. Então deixe-me voltar para cá. E agora estou na janela do navegador. Sou aquele usuário que convidei. E se eu voltar para a Fig MMA, posso ver o meu rato aqui para poder ver as pessoas na minha prancha. Eu posso ver o que eles estão fazendo em tempo real, e nós podemos colaborar juntos. É muitas vezes que eu usei isso abrindo um software de compartilhamento de tela ou uma chamada de vídeo ah com alguém, e nós estamos no telefone. Estamos conversando juntos. Também estamos trabalhando juntos no MMA da Fig. para conversarmos. Posso falar com essa pessoa. Posso ver suas bocas se movendo e podemos colaborar juntos. Então é realmente ótimo. Você pode enviar isso para gerentes de produto. Os engenheiros os convidam a colaborar com você, e você pode vê-los e espioná-los enquanto eles trabalham continuamente em fig mo com você, eles também podem ver seu mouse também, para que eles saibam que você está no quadro. E outra coisa que eles podem fazer aqui é por isso, se você quiser continuamente convidar mais pessoas para o MMA de figo, outra abordagem para isso é que acabamos de convidar alguém para o nosso conselho ou arquivo aqui. Você também pode criar equipes. Então aqui eu tenho um novo projeto ah, uma nova equipe, e eu compacto novo projeto aqui. Aiken digite um novo nome de equipe e eu posso criar uma equipe aqui e dentro de uma equipe que eu posso convidar Aiken. Posso adicionar quadros a esta equipa e convidar pessoas para esta equipa e ter uma série de quadros. Assim eu posso ter meus próprios projetos pessoais em meus rascunhos, e eu posso ter meus projetos de equipe dentro da minha equipe aqui. Eu também posso ir e convidar pessoas para esta equipe para que você possa ver que eu tenho um conselho aqui. Eu tenho minha equipe, e se eu quiser convidar alguém, eu tenho membros e eu comprimo o convite aqui e faço a mesma coisa. Posso convidar pessoas para ver ou editar, e elas terão acesso a todas as pastas dessa equipe. Eu também posso fazer algum gerenciamento de usuários aqui. Eu posso mudar as pessoas de espectadores para editores aqui. Você pode rebaixá-los, e é aí que começa a entrar. Um custo mensal é que você deseja criar uma equipe para começar a adicionar editores a essas pastas. Na maioria das vezes, eu não uso muito a equipe. Eu só convido pessoas para meus quadros aqui, e eu tenho ah, pessoas diferentes em diferentes quadros com quem eu trabalho. E isso é praticamente 90% dos casos é que você está apenas convidando pessoas através de Ah, aquele botão de compartilhamento no canto superior direito, e você está adicionando visualizador para ele. Se você quiser chegar a uma corporação maior, eles normalmente usarão esta seção aqui, que é criar uma equipe. Está bem, fixe. Uma vez que você tem pessoas em seu conselho, se eles são engenheiros. Uma das minhas outras coisas favoritas sobre a Fig MMA é que você pode deixar seus engenheiros saber que eles podem inspecionar esses projetos e eles podem obter atributos de código. Você também pode usá-los também. Então, se você vir aqui para a direita onde nós projetamos protótipo e nós temos a guia de código Então, se você tocar na guia de código, isso é ótimo e você clicar em qualquer coisa aqui. Ele lhe dará atributos dedo do pé o que você clicou em. Então você pode ver Eu cliquei neste formulário padrão aqui. E se eu clicar no texto, ele me mostrará a posição. Ele vai me mostrar o pensamento de que eu estou usando o estilo da fonte, o peso da fonte, o tamanho da fonte, a altura da linha. Vai me dar o espaçamento das letras também. E eles podem copiar isso. Eles podem apenas selecioná-lo, comandar C e estar prontos para ir. Também faz outra coisa boa para você, é? E mostra a eles inspeções, então mostra a eles o espaçamento entre a esquerda e a direita aqui desta forma. Mostra-lhes o espaçamento do topo deste quadro de arte para o fundo. O mesmo com este botão. Então qualquer coisa em que eles clicarem, eles podem obter detalhes de inspeção para que eu possa vir aqui por cima de suas bocas. Veja, é 104 deste lado, um de cinco desse lado. Muitas vezes, antigamente, tínhamos que inspecionar nossos tínhamos que inspecionar nossosdocumentos e fazer o que chamaríamos de “redlining “o que você está vendo aqui. E estes eram dois. Para informar dimensões de pixel e espaçamento para engenheiros e ajudá-los a quebrar nossa ajuda. Nós dividiríamos nossos projetos para ajudá-los a entender como nossos projetos são definidos do ponto de vista composicional. Mas agora não precisamos fazer isso. Eles podem simplesmente entrar e, em seguida, eles podem ver baseado em usando a guia de código. O que tudo parece que eles podem clicar em formas, ver o que essa largura e altura. Isto aqui para este retângulo. O código hexadecimal de cor é que pode copiar esses códigos hexadecimais torna muito fácil para eles inspecionar seu design. Se você convidá-los como um espectador, eles ainda têm acesso a, hum, ver o código aqui. Eles não precisam ser editores para entrar aqui e esperar seu design. Se eles querem mudar alguma coisa, então eles precisam ser um editor. Então você pode convidar um engenheiro apenas como um espectador. E eles têm a funcionalidade completa que você está vendo aqui a partir da guia de código e eles também podem ir para o protótipo é bem, e clique em torno do protótipo e ver como a função é legal. Então vamos dar uma olhada no próximo ponto, que é como exportar ativos. Então vamos dizer que eu queria Teoh exportar esta ilustração deste Boba aqui. Lama de figo faz muito simples. Tudo o que você precisa fazer é selecionar o ícone ou a ilustração e pressionar. Se você rolar até a parte inferior direita aqui na guia de design, basta pressionar o botão de adição. Tem a exportação e, em seguida, dá-lhe diferentes opções. Aqui, você pode fazer um x dois x. Isso vai explodi-lo, hum, e torná-lo maior. Então, se eu fizer dois X, ele vai fazê-lo dobrar o tamanho que ele é agora e ele tem PNG J peg spg. Pdf assim, na maioria das vezes, quando você está implementando para software que você não vai usar. PDF usa p e G para ativos que têm um plano de fundo transparente. Então, praticamente um ícone que você precisa e você usa J pinos principalmente apenas para fotos. Então, na maioria das vezes você está usando um PNG para seus ícones ou o que chamamos de SPG. Este é um gráfico vetorial escalável. Então, se eu dei um PNG ao engenheiro, isso significa que eles têm que manter este, hum, ícone ouvi-lo deste tamanho. Se eles tornarem este ícone maior, ele fica pixelizado. Mas se eu der a eles um SPG um gráfico vetorial escalável, isso significa que eles podem escalá-lo. Eles podem realmente torná-lo maior como eu estou fazendo agora e ele permanece limpo. Ele não fica pixelizado. Como você pode ver as linhas, você está realmente limpo. Então, na maioria das vezes estamos distribuindo S P. G para esses tipos de ícones, e tudo que você precisa fazer é selecionar o ícone que você gostaria, ou a ilustração que você gostaria selecionar SPG pressione o botão de exportação aqui. Vou colocá-lo no meu download e já exportei isso. Então vamos dar uma olhada no que parece que há meu Boba, Tsv g, e você pode ver que está aqui no canto superior esquerdo. Vamos fazer isso de novo. Vamos pegar uma Nikon. Vamos pegar esse chá Boba e meu ícone aqui. Certo, então pressione a exportação. Vá para S V G aqui, Exportar logotipo. Agora ele vai olhar para isso é SPG bem e você pode vê-lo aqui. Vamos fazer isso como um PNG para que você possa ver. Então vamos em frente e selecione PNG aqui. Exporte esse logotipo e vamos dar uma olhada no que parece. É um PNG para ver como tem uma sala de trás transparente. Vamos fazer isso é um J peg e você pode ver como tem um fundo branco agora como um J peg, então figura que torna muito simples para exportar ativos. Se você selecionar esta bebida de chá Boba e este chá Boba, hum, logotipo aqui, você também pode exportar mais de um de cada vez. Então vamos dizer que eu quero aqueles como uma exportação PNG. Aqueles que substituem os arquivos, ele irá exportar ambos. Você pode ver o PNG aqui ou o chá Boba, e o logotipo aqui foi exportado. Digamos que quero os dois como um único recurso. Então tudo o que você tem a fazer aqui é selecionar tanto a ilustração eo logotipo e clique com o botão direito ou pressione o comando G e agrupe estes como um elemento. Em seguida, pressione a exportação na parte inferior. Certo. Vamos em frente e fazer isso A P e G Vamos exportá-lo. Vamos chamá-lo logo e T e você pode ver agora este é um ativo. Então, normalmente, o que você vai querer fazer é passar pelo seu design e exportar qualquer coisa que não possa ser projetada. Que seria como este globo ocular. Seria o logotipo desta página. Dê a ele que nós temos o logotipo aqui, essas fotos que você gostaria de exportar. Então vamos pressionar a exportação aqui e ir para J. Peg e exportar essas fotos. Agora você pode ver a foto aqui. Você gostaria de exportar essas cenouras que fizemos aqui para os botões. Uh, esta marca de seleção, apenas selecionando-os, você quer exportar este X aqui? Eles só querem ver qualquer coisa que não seja , texto,cores e texto,cores ebotões e exportar os ícones, as ilustrações, asfotos. botões e exportar os ícones, as ilustrações, as Então, neste caso, você gostaria de exportar este círculo branco e o mapa, e lá você tem ele. Isso é praticamente o que você poderia fazer para exportar todos os seus ativos e colocá-lo em uma pasta , e você poderia ser capaz de implementar este aplicativo. Agora, com o protótipo e os ativos que foram exportados, você pode entregá-los à sua equipe de engenharia, ou você pode colocá-lo no site para você mesmo e estar pronto para ir. Tudo bem, então isso cobriu principalmente como convidar outros para o conselho. Que colaboração parece ser capaz de ver o mouse de outras pessoas e como exportar ativos U Y e inspecionar código para engenharia? Tudo bem, no próximo vídeo, vamos passar por atalhos de teclado. Vamos dar uma olhada em alguns plugins, , e te vejo lá. Obrigado mais uma vez. Tchau. 8. Atalhos para o teclado + plugins, kits de GUI: Muito bem, bem-vindos ao próximo vídeo. Vamos cobrir atalhos de teclado MMA figg e vamos mergulhar em plugins de figment e ir olhar para kits pegajosos também. Certo, então vamos em frente ao Ah, os atalhos de teclado. Então eu estou no arquivo de design que você tem aqui, e eu criei uma página aqui chamada Quickies aqui. Então vá em frente, vá por teclas muito rápidas, e eu digitei uma lista dos meus atalhos de teclado favoritos aqui. Estes são os que eu uso mais comum, e vou passar por eles com você aqui agora. Hum, então o primeiro conjunto que eu uso muito há ferramentas à esquerda e comandos à direita. Então, para ferramentas, eu uso muito V para chegar à ferramenta de seleção. Esta ferramenta de seleção me permite selecionar elementos e coisas no quadro. Então vamos dizer que eu estou na ferramenta de retângulo aqui, e eu quero chegar rapidamente a uma ferramenta de seleção. Eu apenas pressiono o e agora eu estou de volta na ferramenta de seleção. Eu uso P para entrar no pino. Ferramenta de sabão no meu teclado me leva rapidamente para a ferramenta caneta que eu poderia fazer uma seleção ou desenhar forma como eu estou fazendo agora. E, em seguida, se eu quiser selecionar esta forma, eu comprimir V e agora eu estou de volta para a ferramenta de seleção. E eu posso mover essa forma em torno de i u Z muito para chegar à ferramenta de zoom para prosseguir para o zoom, ferramenta, clique e arraste, e eu ampliei para a área que eu cliquei e arrastei eu uso Ah, eles são para a ferramenta de retângulo muito. Então basta pressionar são e eu posso criar um retângulo aqui. Posso comprimir V começar a selecioná-lo e oh, para a ferramenta círculo. E se eu segurar o turno quando eu fizer um círculo, ele vai me dar um círculo perfeito para ir sem turno. Ele vai fazer ovais para mim, e você pode ver uma vez que eu criar o oval ou o círculo ou o retângulo e automaticamente salta para a ferramenta de seleção aqui, l para a ferramenta de linha. Isso me permite criar linhas que você pode ver quando eu mantenho o turno. Dá-te linhas retas quando não aguentas o turno. Isso permite que você faça qualquer linha que você gostaria. Então, há a linha ali. Dormir essa barra de espaço para a ferramenta de mão que permite que você se mova facilmente ao redor do espaço da placa de arte . E então, eu para a ferramenta conta-gotas, que permite que você selecione cores. Então vamos dizer que eu tenho este retângulo e eu quero facilmente ir pegar esta cor rosa aqui. Só pressiono “I” no teclado. Você verá que ele abre um pequeno círculo aqui que permite que você veja a cor que você está selecionando, e eu vou e selecionarei. Diga, este rosa aqui e cuidado com o meu retângulo. Torna-se rosa. Então ferramentas bem simples lá, hum, e atalhos para chegar a essas ferramentas. Os próximos que quero falar aqui são os comandos. Então, um, para ampliar, você pode fazer um comando mais e, em seguida, amplia e, em seguida, para reduzir, você pode fazer o comando menos alguns, zoom out , você pode fazer o comando menos alguns , , zoom out, ampliando. É muito tempo. Estou usando esses comandos com a combinação de Z para a serra de lápis. Ampliar, selecione o espaço que eu quero. Se eu estiver muito longe, eu vou diminuir o zoom ou eu vou ampliar novamente e, em seguida, eu vou usar a barra de espaço para a mão dito para mover ao redor. Tudo bem, então o próximo que temos aqui é para opções de texto. Então você pode ver que eu tenho este texto aqui 12 e 3. Quando eu fizer a mudança de comando mais fina, isso vai aumentar o tamanho das mensagens. E se eu fizer a mudança de comando menor do que isso vai diminuir os textos vistos Selecione o 123 texto aqui e eu vou mudar de comando menos do que e você pode vê-lo. Ele vai menor, alguns diminuindo o tamanho do texto. E se eu fizer a mudança de comando mais fina, então ele vai subir. Dimensione o texto para que você possa ver o Texas ficando maior. Agora, a próxima coisa que eu faço em conjunto com o deslocamento de comando maior que menor do que para tornar texto grande é também usar opção shift maior que um menor do que para diminuir a altura da linha ou aumentar a altura da linha. Então você pode ver agora a altura da linha, este tipo de esmagado. Tenho palavras sobrepostas. Enquanto ainda tenho isto selecionado, vou mudar do comando Shift vou mudar do comando Shifte ir para a opção Shift. Então eu fui de deslocamento de comando maior que menor do que e agora eu vou para opção shift e você pode ver o que acontece aqui é que eu estou aumentando a altura da linha fazendo deslocamento de opção maior que e, em seguida, eu estou diminuindo fazendo deslocamento de opção. Menos do que isso. Mais uma vez para diminuir o tamanho da fonte e selecioná-la. E eu estou fazendo deslocamento de comando menor do que e eu estou diminuindo o tamanho da fonte e, em seguida, para aumentar a altura da linha, eu vou passar para a opção shift enquanto o texto ainda está selecionado e eu estou indo para ir opção shift menos do que para diminuir a altura da linha e maior do que aumentá-la. Então estes quatro aqui têm um pouco de prática fazendo isso, mas uma vez que você pega o jeito dele, torna-se muito natural. Ok, a próxima coisa que eu quero mostrar é, um, um, o comando para mover camadas em cima uma da outra chamado trazer para a frente ou abaixo uma outra, que é chamado de trazer para trás. Então estes dois comandos aqui. Então vamos dizer que eu tenho esses dois retângulos aqui, e isso é para qualquer camada, qualquer forma, e ele texto qualquer elemento gráfico que você está usando no figo MMA. Se eu quiser trazer este retângulo abaixo do retângulo preto por baixo do retângulo rosa . Tudo o que tenho que fazer é selecionar o retângulo preto. Faça opção de comando e eu posso ir para baixo seta para trazer para trás e você pode vê-lo vai abaixo do retângulo. E se eu quiser trazer acima dirigindo tudo novamente, Eu vou apenas usar a opção de comando seta para cima. Você pode ver como isso funciona. Eu também posso fazer isso com mais de uma forma. Então, se eu segurar shift e coletar e selecionar ambos os retângulos, eu também posso movê-los para cima e para baixo. Então vamos dizer que eu quero trazê-lo abaixo do texto aqui e eu posso trazê-los de volta para cima. Eu quero tanto cerca de 80% a 90% do uso da ferramenta em figo MMA. Você será capaz de ter esses conjuntos de comandos rápidos e que cobrirão a maior parte de seu uso de ferramentas que você usará. E eu também os deixei aqui neste documento. Por isso, se vires ao documento e vires as chaves rápidas, terás estas aqui. Outra maneira de ver as rapidinhas em figo MMA é se você vai para o pequeno ponto de interrogação aqui na parte inferior. Onde diz ajuda e recurso é e você clica sobre isso e, em seguida, você vai Teoh Quick atalhos de teclado aqui. Vá em frente e clique nisso. E, em seguida, aqui estão todos os atalhos de teclado ou teclas rápidas aqui, e você pode ver as ferramentas. Aqui estão todos para as ferramentas. Aqui estão todos aqueles para ver que você tem zoom. Sim, atalhos de texto, formas, seleções, cursores em suas transformações, organização e atalhos de componente lá. Então, se você quiser apenas ir sob o capô e ver que tipo de atalhos figura figura figura figura figura figura fornece para você, você pode ir aqui clicando no ponto de interrogação inferior direito e ir para os atalhos de teclado como So. Outra maneira de ver atalhos de teclado é, sempre que você estiver em uma ferramenta, digamos que eu queira olhar para a ferramenta de retângulo ou para a ferramenta de linha onde a ferramenta de lábios fornece atalhos para a direita aqui. Portanto, há atalhos para seu quadro e sua ferramenta de seleção de ferramenta de fatia, e também faz o mesmo aqui. Se você entrar no menu Seiken, selecione um objeto, e eu poderia ver todas as rapidinhas aqui à direita Então traga a frente. Traga o de trás para frente. Bloquear a camada aqui e mesmo para edição. Desfazer comando Z refazer deslocamento de comando. Consulte Recortar comando X copy Comando. Consulte o comando colar V colar sobre Seleção Comando Shift B. Assim, você também pode visualizar os teclados de várias maneiras. Você pode vê-lo pelo ponto de interrogação, e você também pode ir para os menus aqui e as ferramentas e ver os atalhos enquanto você avança . Tudo bem, Cool. Então isso cobre os teclados. Vamos dar uma olhada em alguns dos plugins agora. Então eu criei outra página aqui no arquivo Sigma que você tem e esta é chamada plugins favoritos. E estes são os meus quatro melhores plugins favoritos que você confinou em figo MMA. Então, para ir encontrar plugues de pé e ir olhar para plugues de menta plug ins, basta ir para o canto superior esquerdo. Aqui, vá para o seu painel. Clique nas quatro caixas aqui no canto superior esquerdo, leva você para o painel. Aqui é onde você tem a capacidade de pesquisar projetos. Aqui você pode ver seus projetos recentes. Você tem seus rascunhos e, em seguida, você tem seus plugins. Aqui. Então estes são todos os seus plugins aqui, e os meus quatro plugins favoritos aqui são chamados de conteúdo. Riel, verificador ortográfico, cinzas e foice mapa para que você possa ver que há alguns populares aqui. Estes são muito populares. Estes primeiro para o em espirrar o riel conteúdo. Você também pode pesquisar plugins, então basta ir procurar todos os plugins e você pode digitar, digamos, mapa, foice. Aqui, você pode ver o que está aqui. Você também pode digitar Verificador ortográfico. Você podia ver o corretor ortográfico aqui. Eles são muito fáceis de instalar. Então vamos apenas dizer que eu quero instalar este verificador ortográfico enquanto você tem que fazer é clicar no Verificador Ortográfico. Você pode ver onde ele está instalado. Posso desinstalá-lo e, em seguida, clicar novamente e instalá-lo no aplicativo. Coisas muito simples. É divertido apenas dar a volta e apenas abrigar todos os plugins que a invenção fornece a você . Há toneladas deles. Eles são muito legais. Vamos dar uma olhada em alguns dos meus favoritos aqui, e eu vou te mostrar como usar um plug in. Vamos voltar ao arquivo aqui. Basta clicar em seu arquivo de classe de figment. Estou na página do plug in aqui. Vamos ver o conteúdo riel. Então, um monte desses plugins que você deseja selecionar um elemento. Então vamos em frente e agarrar e fazer um retângulo aqui no topo da barra de menu. Aqui, você tem plugins. Você vá em frente e clique em plugins, e estes são os que você terá instalado. Então, neste caso, vamos ver conteúdo riel. Então eu clico no conteúdo real, e ele está abrindo aquele plug in. E o que isso faz é me fornecer. Eu sou diferentes tipos de conteúdo que eu preciso. Alguém colocou a caixa de texto aqui, e ele me dá avatares de texto e ícones. Então, se eu clicar neste texto e eu quero nomes, ele me dá versões aleatórias de nomes vai me dar números de telefone aleatórios. Vai me dar os endereços que eu preciso. Dar-me-ia datas e horas. Ele vai preencher com Laura se alguns se você quiser apenas texto padrão, e-mails gerados aleatórios e aleatório gerado você RL's também. Eu também posso clicar sobre esta forma retângulo aqui goto avatares, e isso vai me dar automaticamente fotos diferentes de pessoas cientistas querem machos dizer fêmeas aqui eu posso fazer tanto masculino e feminino. É só uma seleção aleatória de fotos. Então eu sou o próximo fácil se eu estou fazendo um monte de diferentes, hum, hum, quadros de equipe Neste momento, eu preciso de fotos diferentes de pessoas ou redes sociais onde eu posso ver que eu tenho um monte de pessoas em fotos dedo preenchido meus desenhos. Isso torna muito fácil fazer a próxima coisa, ele também tem alguns ícones. Você tem que instalar uma fonte para usar os ícones. Eu realmente não uso muito os ícones novamente. Eu uso o projeto substantivo aqui. Eu mostrei mais cedo onde se você quiser qualquer, digamos, um ícone de perfil, basta ir para o substantivo Projeto. Você pode baixá-lo como eu mostrei no vídeo passado e arrastar o gráfico vetorial escalável para seu arquivo de figment e você pode usar isso. Tudo bem. Outro plug legal em que eu acho realmente valioso é unspool ash. Então, se você tem que unspool cinza, isso é apenas fotos grátis que você pode usar Então ele vai além de apenas fotos de pessoas aqui como selecionar este quadrado e eu poderia apenas inserir fotos aleatórias. Só me daria qualquer coisa aleatória. Essa é uma foto muito bonita lá, mas também me dá algumas predefinições aqui. Eu posso ter animais, arquitetura, e se eu apenas clicar novamente na arquitetura, isso me dá mais opções arquitetônicas. O mesmo na natureza me dá a natureza também. Eu sei que povoar qualquer forma. Então vamos dizer que eu quero, um, um círculo aqui que eu faça retrato. Dê-me uma visão retrato aqui ou espaço e eu também posso pesquisar coisas. Digamos que eu quero como um tigre e há algumas fotos de alguns tigres aqui. Muito legal, certo? Tais cinzas desbobinadas. Apenas uma maneira rápida de obter um acesso gratuito a muitos tipos diferentes de fotos também. Você também pode ir dedo do pé sobre splash dot com, e eles têm uma biblioteca de fotos que você pode baixar. Tudo bem. O próximo é o verificador ortográfico, então basta ir em frente e selecionar qualquer tipografia ou parágrafos ou conteúdo escrito. Vá para o seu plug in e basta clicar no verificador ortográfico lá e ele irá. Verificará automaticamente tudo o que tiver, então me deixe ir. tudo o que tiver, Vamos voltar lá, Teoh. Teclas rápidas aqui, selecione tudo isso. Vá fazer o verificador ortográfico e agora está carregando. Está me dizendo que eu conta-gotas está errado ou tem espaçamento incorreto nele. Tão bem arrumado. Hum, tenho sete erros aqui falando sobre ferramenta conta-gotas. Vamos selecionar os comandos. Eles provavelmente vão me dar alguns erros aqui, também . Sim. Foram mostrados alguns erros. O que é triste? Escrevido errado. Esta palavra veria comando. E eu faço a verificação ortográfica. Bem, acho que é uma palavra. Mas, sim, sim, melhor caso para quando você soletrar, se quiser. Verificação ortográfica é usado Graham cedo. Você pode copiar e colar isso em um e-mail e 1/2 grama cedo. Verifique também. Tudo bem, legal. A próxima coisa a verificar é o mapa Sickle. Alguns obstáculos são muito legais. Um dos meus plugins favoritos aqui. Mais uma vez, comece com a forma que limpa este ano. Faça um retângulo grande. E isto é para qualquer coisa que queiras relacionado com o mapa. Então, se você quiser ficar longe do estilo normal de um mapa do Google e você quer ter um mais como um tema escuro ou como ummapa temático, mapa temático, você pode vir aqui para mapear, foice, clicar no mapa aberto foice, e isso lhe dá estilos diferentes aqui. De repente, mova isso um pouco para a esquerda. Então, digamos que este é um estilo de rua. É mais gráfico. Você pode fazer estilo ao ar livre. Aqui você faz um estilo leve. Eu gosto de um tema escuro que te dá um satélite. Aqui está o seu satélite e as ruas. Eu gosto do tema escuro pessoalmente. Um monte de tema escuro que você pode criar outro com, Hum, você pode diminuir o zoom. Eu poderia trazer o mundo inteiro aqui se eu quisesse. Vamos fazer os Estados Unidos. Muitos Califórnia e eu podemos fazer diferentes cheiros aqui, então vamos dizer 1000 por 1000 Se eu quisesse e eu pressionar criar mapa, ele vai me dar uma imagem desse design dentro da forma. Aqui. Vou conseguir um com muitas ruas, pequenas linhas que são difíceis de criar. Digamos que São Francisco aqui e vocês podem ver agora que gerei São Francisco. Dentro desta forma, é uma imagem. Então eu vou para a minha imagem de sentir aqui. Eu tenho a imagem aqui. Eu posso entrar e cortar esta imagem se eu quiser comprar pressionando a colheita no topo. E esse é o mapa foice. Então esses são meus quatro plugins favoritos. Vou deixar estes aqui para você, e vocêpoderia usá-los e conectá-los. estes aqui para você, e você Hum, e você pode encontrar seus plugins aqui. Outra maneira de ir para o seu homem. Ele para seus plugins é se você apenas clicar sobre os plugins na parte superior, indo para gerenciar plugins, ele irá levá-lo de volta para a página que acabamos de visitar. Tudo bem, a última coisa é ir ver como baixar kits pegajosos. Então, um kit pegajoso é, um, a palavra que você e g u I significa interface gráfica do usuário, e figura tem um monte deles para você usar. Então, se você for a uma pesquisa no Google, eu tenho um aqui para você e você apenas pesquisa no Google e download de kits de figo MMA. Meu favorito é este download 49 grátis. Hum, é o você que eu guardo ponto com. Se você clicar neste, ele vai levá-lo a um link aqui, e isso tem um monte de “lets “, você sabe, você sabe, e “Ah “verde, botões. Aqui Quais são para figo? MMA? Eles não têm para visão de esboço, outras ferramentas de design. E digamos que você quer este painel de base de moedas da Web aqui. Isto é tudo de graça. Você acabou de entrar, pressione download gratuito ele vai para baixo no canto inferior esquerdo. Aqui, vamos em frente e abrir isso. Quando você abre essa pasta, ele te dá P e G desses desenhos aqui. Você pode ver. E tem um tema escuro em um tema claro. Ele também lhe dá este arquivo de invenção. Então, se você quiser instalar o arquivo de figment, hum, faça a mesma coisa que fizemos no início onde você baixou o arquivo Sigma que eu forneci e arrastou e soltou no seu espaço de rascunho aqui. Então eu vou te mostrar. Então o que você vai fazer aqui é este caranguejo este arquivo e basta clicar e arrastá-lo para figo MMA assim . E ele irá importar este arquivo e você pode ir em frente. Vou cancelar. Ele já tinha baixado. Está bem, fixe. Outra coisa que você pode dio você também pode arrastar e soltar arquivos de esboço da mesma maneira em figo MMA, e ele vai puxar em seus arquivos de esboço com todos os desenhos prontos para ir, ele não vai manter o protótipo de costura que você não esboçou. Mas traduzirá todos os desenhos que você fez no Sketch em dois figos Mahir. Vamos com o painel de base de moedas do garoto cone. Esse foi o que acabamos de baixar. E você pode ver que eu tenho os temas de luz aqui, e eu tenho os kits pegajosos. Posso entrar em todos estes. Aiken, selecione os elementos gráficos dentro deste garoto QE. Posso mudá-los um pouco. É um bom ponto de partida. Você está olhando para começar para o design básico neste caso, hum, ter um painel para base de moedas. E tem ambas as versões claras, e tem as versões escuras aqui. Uma onda como você pode ver, há toneladas de kits pegajosos aqui, hum, que você poderia ir baixar online e conferir e jogar com eles. Mas é assim que se faz aqui. E eles aparecem no seu painel aqui, como eu tenho na web baseado, uh, uh, moeda base base de moeda web painel aqui que você acabou de ver. Está bem, fixe. Então, isso é um resumo de, hum, praticamente como fazer atalhos de teclado e como usar plugins de figura e baixar kits Q B no último vídeo mostrará. Vamos ver como criar comentários, símbolos que terão alguns pensamentos finais e daqui para frente. Certo? Veja o último vídeo. Cuide-se, Tchau. 9. Comentar e pensamentos finais: Muito bem, bem-vindos de volta ao vídeo final de como construir um aplicativo móvel usando figo, minha ferramenta de design. Então, neste ponto, vamos passar por como criar comentários no contexto de um design é bastante simples e ter alguns pensamentos finais e avançar. Vamos em frente, e estamos no arquivo que você baixou. Vamos voltar para a nossa guia Paige de aprendizagem, onde construímos o protótipo aqui, e eu vou mostrar-lhe como você e sua célula, você e seus companheiros de equipe outras pessoas podem compartilhar comentários com base no design que você está vendo Aqui. Então vamos até aqui e vamos criar alguns comentários. Então, se você vir no canto superior esquerdo da barra de ferramentas aqui no canto superior esquerdo, há um pequeno ícone de bolha de alto-falante. Vá em frente e clique sobre isso, e que irá mostrar comentários, mas também dar-lhe a capacidade de soltar um comentário. Então vamos em frente e deixar um comentário. Digamos que, um, vamos deixar um comentário no mapa aqui, e eu vou escrever Zoom fora do mapa um pouco, e eu coloquei um comentário lá. E então é bom como você pode ver que o comentário está no contexto do elemento de design no qual eu estou comentando, que torna muito fácil entender seus companheiros de equipe quando eles dão feedback sobre seu design sobre o que eles estão referindo-se a. Talvez você ir para esta linha aqui é como alinhar a capacidade da linha e sem o contexto. Se você apenas ler um comentário que definiu a opacidade da linha, você não saberia a que essa pessoa estava se referindo. Mas uma vez que eles deixaram cair este comentário direito na linha, você tem uma idéia de que essa mudança. E novamente, digamos que era uma mudança que precisávamos fazer. É por isso que temos a biblioteca de componentes. Aqui está tudo que você tem que fazer agora é ir pegar esta linha e o que está acima de sua capacidade para 40% agora . E vamos voltar a aprender Paige. E agora cada linha em cada página foi atualizada, hum, nessa área. É por isso que fazemos esses componentes. Isso torna realmente fácil fazer mudanças como essa que vêm em algumas vezes através dos comentários. Vamos voltar e dizer que eu quero rever meus comentários novamente. Tudo o que você tem a fazer é clicar nele e você verá os comentários sobre e onde eles existem. E você também verá à direita aqui você verá uma lista de você. De todos os comentários que aconteceram aqui uma vez que eu tenha completado um comentário ou uma vez que eu tenha completado um comentário, eu posso clicar sobre o resolver aqui e que vai embora. É assim que você resolve um comentário e vai embora. Outro que quero fazer aqui é fazer um comentário de teste. Aqui está Aiken. Marcar as pessoas fazendo o at. E aqui está uma lista de pessoas que eu tenho no meu projeto, e Aiken as marcou com este comentário. Então vamos ver a queda. Eu posso me etiquetar. Está bem, fixe. E eu vou em frente e me marcar aqui. E isso vai me notificar. Receberei um e-mail informando que alguém deixou um comentário dentro do meu arquivo de design FIG MMA. E então eu confinei os comentários aqui, mas eu também posso vê-lo através de notificações por e-mail, que torna mais fácil gerenciar muitos comentários chegando. Então alguém me deixe um comentário, eu entro, eles me marcam nele. Então alguém me deixe um comentário, eu entro, Eu li o comentário e eu quis dizer resolver ou ter uma conversa com eles. Tal praticamente a essência de comentar e como os comentários funcionam. Você pode vê-los novamente. Uma vez que você se afasta do ícone de comentário, eles desaparecem. Então lembre-se que você não será capaz de vê-los até que você clique no ícone de comentário aqui na parte superior. Isso é anúncio do dedo do pé e mostrar comentários. E então você pode ir ao redor e clicar em quantos comentários quiser, e nós vamos apenas finalizar. Este botão é incrível. Vamos fazer um bom comentário. Bem, você gosta de um pouco de emoji aqui? Como polegares para cima? Legal. Aí está, Rights. Isso são comentários em poucas palavras. a Eaúltima coisa são apenas alguns pensamentos finais sobre o futuro. Então, de novo, há muito mais coisas que podemos cobrir na Fig. MMA. Eu cobri principalmente o protótipo básico ser e transições dentro dos protótipos e como projetar este aplicativo móvel aqui. Espero que tenha algum valor disso. O meu pensamento final é que é preciso praticar. Apenas pratique continuamente nele. Fizemos uma aplicação móvel. Se você quiser fazer, digamos, uma versão web, eu fiz uma nova página aqui. Chame-o Web vá para o seu quadro de arte aqui e você pode pegar uma versão desktop aqui. Vamos em frente e você gosta de um livro Mac e você pode projetar ah website também. Então, isso não é apenas para aplicativos móveis. Você pode fazer praticamente qualquer tamanho de tela aqui e protótipo qualquer experiência de usuário que você vá para, hum, e também para frente. Certifique-se de baixar o aplicativo espelho MMA figo em seu dispositivo móvel se você é especialmente se você está fazendo experiências de usuário móvel sobre isso permite que você veja os projetos de tela móvel diretamente em seu telefone para que você possa ver como eles iriam olhar no telefone. Isso é muito importante. E se você quiser ficar conectado comigo, você pode ir ao meu site. É Aaron Lawrence Design Dot com, e você pode vir aqui e ver links para o meu trabalho. Você pode entrar em contato comigo diretamente através do site aqui. Você vai entrar em contato aqui no fundo. Você vê um pouco do meu trabalho e ainda assim adiante, desejo-lhe o melhor. Espero que isso tenha sido valioso para você, e eu também tenho mais algumas aulas que você pode conferir sobre design de experiência de usuário. Espero que isso tenha sido valioso para você, Se você apenas pesquisar o meu nome ou encontrar alguns dos meus vídeos digitando seu design x barra ey e você vai me ver em outra classe que mergulha ainda mais fundo no processo UX pneu que é colocado aqui onde passamos por ouro, fazer objetivo definindo problemas e suposições Nós fizemos. Ensino-vos a falar com os utilizadores e os clientes tiveram uma síntese, sintetização e tema as suas ideias que aprenderam que estão à procura de identificação das necessidades e validações dos utilizadores e de criar experiências para validar a sua hipótese no o que você acha que vai funcionar ou como você iria resolver uma necessidade de usuário ou um problema. E você criará uma interação, modelo ou protótipo e como testar esse protótipo e, em seguida, como colaborar com gerentes de produtos , engenheiros e executar os projetos que você tem, e depois uma continuação do construindo, medindo e aprendendo esse processo de lançamento de software e aprendendo a iterar e mudar para se tornar bem sucedido. Certo, bem, aí está. Obrigado novamente e eu espero que você o melhor e eu vou vê-lo na próxima aula. Tchau. 10. Vídeo de bônus 1 - dissolve, delay e mova no - MovE Move para fora: Os vídeos bônus. Então, nos próximos quatro vídeos abordaremos várias funções de prototipagem dentro da Figma. E também abordaremos alguns dos recursos mais recentes que a figma lançou, incluindo variantes de componentes e também componentes interativos, o que é super incrível. E como qualquer outro, como todos os meus vídeos que tenho aqui, fiz um arquivo para você. Então, se você fizer o download, o arquivo deve se parecer com isso, onde em cada conjunto de funções ou recursos de protótipo que aprenderemos nesta classe. Eu tenho o top end é o exemplo aqui. Então esta linha aqui abordará o exemplo do que vamos aprender. É prototipado, pronto para ir caso você se perca e queira ver como eu fiz isso. E então faremos isso juntos no vídeo aqui. Então você verá o exemplo e verá o que você faz. E faremos o que diz que vocês fazem juntos. E abordaremos todo um conjunto de novos recursos de protótipo, incluindo algumas seleções suspensas e modais, bem como menus. Vai olhar para construir alguns presentes de carregamento usando o recurso de façanha de protótipo animado inteligente. Também fazemos alguns deslizamentos horizontais, alguns deslizamentos verticais. Combinaremos os dois para criar uma rica interação de deslizamento de mapas. E também abordaremos alguns dos componentes e uma variância. E os componentes interativos que são realmente divertidos e úteis para entrar. Ok, então você não deveria ter esse arquivo. Caso contrário, vá em frente e faça o download. E lembre-se quando você baixá-lo, você pode ver que é um arquivo zip. Então, se você vir o ZIP no final do formato de arquivo, basta clicar três vezes neste arquivo, clique duas vezes ou triplo. E ele abrirá o arquivo aqui e entrará nessa pasta. E lembre-se, você não pode simplesmente clicar três neste arquivo FIG, figo aqui. Você realmente tem que entrar em Figma e entrar em suas seções de rascunhos. anos provavelmente não se parecerão com os meus porque eu tenho um monte de arquivos aqui, mas você entrará em suas seções de rascunhos dentro da sua guia inicial na Figma. E você vai pegar esse arquivo aqui, você pode ver aqui e arrastá-lo para Figma. Você sabe, você fez certo quando Figma lhe dá esse contorno azul. E então ele carregará o arquivo, importará o arquivo. E você deve ver o novo arquivo aqui e sua pasta de rascunho aqui e assisti-lo. Conclui o carregamento. Você pressionará o botão concluído e terá esse arquivo aqui. Vou excluir este só para não ter cópias dele. Certo. Então, vamos prosseguir e começar com o primeiro vídeo aqui, vamos cobrir a dissolução, o protótipo, o atraso e o movimento para dentro e sair. Então, vamos dar uma primeira olhada no protótipo de dissolução aqui. Então, vou pressionar o botão de reprodução aqui no canto superior direito. Isso vai abrir o protótipo. E a primeira coisa que você notará é que isso está sendo carregado em um dispositivo real. Então eu nunca, eu cobri isso em alguns dos vídeos anteriores. Mas só para reiterar, se eu clicar em qualquer uma das placas de arte e eu estiver no espaço da arte, apenas na área cinza. E não estou na guia Design, mas entre a guia Protótipo, você verá que posso selecionar um dispositivo. Às vezes, ele vai carregar não é dispositivo. E então você pode selecionar o modelo do dispositivo. Então eu tenho aqui o iPhone 11, e eu o tenho no portão espacial cinza, já deve ter isso carregado porque você já deve ter isso carregado porque eu gravei isso, incorporei isso no arquivo que você baixou, mas apenas no caso de você não saber como mudar os dispositivos. Ok, então vamos dar uma olhada na função de dissolução no protótipo. Então, praticamente temos uma tela inicial, reprima o botão de exibição. E você verá essa tela dissolvida entrar. E o dissolvido apenas significa que ele tem um atraso de tempo para carregar esta tela. É uma interação muito simples. Então, vamos em frente e comece certificando-se de que somos primeiros no tipo de protótipo aqui no canto superior direito. Portanto, não a guia Design, mas a guia Protótipo. E vamos arrastar este botão Iniciar para esta tela. O que este botão Iniciar faz é que isso significa que esta será a primeira tela da qual os protótipos serão carregados. Ok, então o que vamos fazer aqui é que vamos pressionar o botão de visualização aqui. E enquanto estivermos na guia Protótipo e arraste o braço da GUI para a próxima tela. E você verá que já está sentado, na torneira e dissolvido. Mas vamos primeiro ver como ele se parece com instantâneo. Instantâneo. Só vai significar que não terá atraso de tempo. E vamos prosseguir e jogar isso. E se você pressionar o botão de exibição, veja como não houve atraso lá. Então, mais comumente, quando você está na função de protótipo e clica na seta aqui e obtém a caixa de diálogo Detalhes da interação aqui no canto superior direito. O padrão será um toque estranho ou onclick e no estado. E para isso tudo o que temos que fazer é apenas pressionar dissolver. E então isso nos dará alguns, alguns dos estados de transição facilitam, aliviarão. Eu também gosto de fazer as duas coisas à vontade e aliviar. Qualquer um depende de você. Eles são, não são, são muito matizados. Eles não têm muitas distinções entre os dois, mas aliviam, facilitam. Cabe a você. O que importa aqui é o tempo de atraso. Então, vamos fazer disso um atraso muito longo. Digamos que sejam 5 mil milissegundos. E vamos dar uma olhada nesse atraso. Deve haver muito tempo. E você pode ver que é um atraso de 5 segundos. Então, 5 mil milissegundos fizeram um atraso muito longo. Então isso é um pouco demais para dissolução ou atraso. Vamos voltar aqui. Vamos mudá-lo de volta para, vamos apenas dizer um 1000 e teremos uma boa dissolução. Volte para o protótipo. Vou pressionar R no meu teclado. E isso será a mesma coisa pressionar o botão de reinicialização no canto inferior direito. E ele vai reiniciar o protótipo de volta para onde eu colocar este pequeno rótulo inicial. E, novamente, você pode simplesmente clicar e arrastar isso para qualquer uma das pranchetas que você quiser. Pressione Exibir. E isso foi um bom atraso lá. Certo, muito legal. Vamos seguir em frente e olhar para o próximo. Ok, então agora esta próxima interação aqui na função de protótipo é um atraso, e isso geralmente é um atraso na tela inteira. E então há algumas coisas comuns a serem evitadas aqui, quais vou entrar em um segundo. Mas tudo o que você precisa fazer aqui para mostrar o exemplo é obter o exemplo aqui, mover, arrastar e soltar ou arrastar o rótulo inicial para este protótipo. E vamos pressionar o botão Play. Então, vou selecionar esta prancheta aqui e pressionar o botão de reprodução. E você verá que ele tem um editor de carregadores. Nosso tempo de atraso, ele vai para a página alta. Então, mais uma vez carregando e diz oi. É semelhante a uma função de dissolução. É só que toda a página está definida para um atraso. Então, vamos seguir em frente e fazê-lo rapidamente. Deve ser bastante simples. Vamos arrastar o início de novo para o conjunto de telas de protótipos aqui que estão ao lado do u du. E isso não tem função de protótipo para ele. Então, uma coisa através de um vazio aqui é se eu clicar, digamos que este botão de carregamento, na verdade, vamos fazer o carregador. Então, se eu, se eu selecionar esse GIF de carregamento, GIF animado, e eu puxei a GUI, braço GUI para o protótipo para definir para a próxima prancheta. Como assim. E clico em toque. Você verá que esta função após atraso está desativada. É uma coisa comum a evitar. Então, para obter uma tela cheia para atrasar e passar para outra tela, você realmente precisa selecionar toda a prancheta ou a tela inteira. Então o que vou fazer é desfazer essa função de protótipo. E vou selecionar onde ele diz iPhone 11 Pro. Se eu quiser nomear este quadro de arte aqui, posso clicar até as camadas. E vamos chamar essa página de carregamento. Ok, Então, onde diz carregar a página agora vou clicar novamente. E agora eu tenho toda a prancheta selecionada, o que significa que tenho todo esse quadro. E vou voltar ao protótipo. E você pode ver o início aqui a partir do protótipo nessa tela. E vou arrastá-lo para a página alta aqui. E você verá na torneira. E se eu clicar no menu suspenso on tap, você verá que o atraso após foi ativado porque selecionamos toda a prancheta. Então, vamos seguir em frente e fazer após o atraso. E então, ao lado de um atraso total, temos os milissegundos por quanto tempo queremos que isso demore. Então, vamos seguir em frente e fazer. Vamos defini-lo para 5 mil milissegundos SEK, que serão cinco segundos. E então, para a animação, temos estados diferentes. Podemos fazer um instante que apenas carregará instantaneamente a página. E nós temos uma dissolução e nos mudamos para dentro, saímos, o que vou te mostrar daqui a pouco. Mas vamos ao instituto por enquanto. Vamos mantê-lo simples. Ok, então o que vou fazer é selecionar a prancheta aqui, carregando a página. Vou pressionar o botão play. E você verá esta página carregando. Após cinco segundos, ele carrega a página alta. Então essa é uma função de atraso. Então, vamos voltar. E se você vir os detalhes da interação aqui onde a animação diz instantânea, o que vai em frente e aplique essa função de dissolução que aprendemos no último protótipo que fizemos. E não vamos fazer 1000 milissegundos, talvez façamos 500. E agora você verá a tela alta aqui. Entre com uma dissolução e não será uma carga instantânea. Então cinco segundos passarão e o carregamento, e você verá o dissolver. Sim, é uma rápida dissolução. Podemos nos divertir com isso. Vamos adicionar um pouco mais. Vamos realmente fazer, vamos fazer 1, 0, 0, 0, 0, 0. Então, seja cerca de 1 segundo. Dissolva. Vá ver o que isso parece. Certo, isso é muito bom lá. Certo, legal. Se você estiver interessado em algum gifs animado de carregamento que você vê aqui, você pode acessar nosso site. E eu tenho as direções para a esquerda aqui. É chamado de carregamento dot io. Vou em frente e puxarei um navegador. E isso tem, tem ícones animados gratuitos e gifs animados enquanto carrega presentes que você pode baixar como GIF e colocá-los diretamente na Figma, se quiser. Então, digamos que você esteja interessado nessa animação, mas eu quero mudar a cor. Digamos que eu queira mudar essa cor para dizer um preto aqui. Vou apagar todos os outros aqui e fazer um cinza, algo assim. E eu quero baixá-lo como um GIF. Tudo o que preciso fazer é pressionar o presente seu download gratuito. Você o verá baixando na parte superior ou inferior esquerda. Então baixe o spinner one S. E tudo o que eu realmente tenho que fazer agora é pegar isso e arrastá-lo para a Figma. Bem, o que eu posso fazer é você ver como ele tem um fundo transparente ou branco. Posso definir esse GIF para um plano de fundo transparente aqui. E agora posso baixá-lo novamente e baixá-lo. E você verá agora, quando eu baixá-lo, ele tem um fundo transparente. E poderíamos facilmente colocar esse carregador e reduzi-lo um pouco nessa tela. E você verá agora que temos o novo gif de carregamento. Cinco segundos passam. E muito, temos a tela alta. Tudo bem, muito legal. Vamos passar para o próximo, que está aberto e fechado. E isso usará uma interação de movimento para cima e mover-se para baixo. Então vou pegar o Start novo para o exemplo aqui para que possamos ver o que vamos fazer. Este é bem simples novamente. Tudo o que é esta tela ao lado, vai deslizar para cima e o x vai deslizar de volta para baixo. É muito comum definir páginas ou qualquer coisa que tenha um botão cancelar e salvar. Isso simplesmente deslizará para cima. Você teria um cancelamento, você tem um Salvar, fechar de volta. Se você tiver mais fluxo de trabalho, mostrarei como essas melhores páginas iniciais funcionam para iniciar um fluxo de trabalho. E então você passa pelo fluxo de trabalho. Vamos aprender agora no próximo vídeo. Então, fique firme. E para ver essa interação e fazê-lo juntos, vamos pegar o Start. Para a página abaixo, onde diz que você faz. E bem simples aqui. Vamos seguir em frente e pegar o botão de exibição. Vá para a guia Protótipo. Deslize isso para a tela. Queremos por cima. E na animação que não queremos instantâneo, não queremos dissolver, queremos avançar. E então, com o movimento, isso nos permite mover para a esquerda, avançar para a direita, mover a tela para baixo. E neste, queremos que ele se mova para cima. Ok, agora vamos em frente e vamos até o protótipo e vamos ver isso. Ok, veja como ele subiu, mas teve uma transição muito lenta. Cl aquele movimento que parecia um pouco lento demais. Exemplos com bugs. Então, queremos fazer isso rápido. Então veja onde diz que a facilidade ainda estava definida em 100 milissegundos. O que se deve cerca de 200 milissegundos lá. E agora isso deve carregar muito rápido. Sim, lá vai você. Isso é o que queremos. Mas quase rápido demais para esse. Vamos fazer 300 milissegundos. Certo? E então vamos seguir em frente e fechar o, isso com o x. Então, se pegarmos o x e a próxima tela, arraste-o para a tela preta original aqui. E um erro comum é que você o deixa em movimento, e você verá o que acontece aqui. Vou descer. Então ele se move para baixo. E o que você vai querer fazer é definir isso para sair. Mas vamos ver o que parece ser um movimento porque é um erro muito comum que acontece. Ok, então temos a visão que parece melhor desliza para cima muito rápido. Essa foi uma boa velocidade para essa transição. E agora o que acontece quando x é HIT? Veja como a página, The Black Page, empurra a página branca para baixo mais uma vez. Então veja como a página preta veio do topo. Essa é uma interação estranha para dispositivos móveis. E o que queremos fazer aqui, se eu clicar no X, é isso, isso é porque está dizendo mudar para dentro, você está permitindo que a tela preta se mova. E Figma lhe dá uma pequena demonstração de como isso será. Então o que queremos fazer é que queremos que ele se mova. Então, ele está dizendo à tela branca à direita para sair do caminho, sair do caminho e qual maneira queremos definir está à direita. Então, neste caso, queremos que ele se mova para baixo. Certo, isso deve funcionar perfeitamente. Então, pressionamos o botão de exibição. Esta página desliza e assiste quando fazemos o x, ela se move para fora do caminho e a tela atrás dela permanece em sua localização versus vindo do topo lá. Certo, legal. Isso cobre praticamente o primeiro vídeo. E no próximo vídeo vamos cobrir as sobreposições, o molde, os modais e os menus. E te vejo no próximo vídeo. Obrigado, Tchau. 11. Vídeo de bônus 2 - sobreposições e menus: Bem-vindo ao vídeo 2 dos vídeos bônus, onde vamos cobrir sobreposições, modais e menus, certo? Então, vamos voltar ao arquivo em que estávamos trabalhando. Vou rolar para baixo aqui e de novo, o que estou fazendo é, estou usando z como uma tecla rápida para obter o zoom. Então, se você vir, eu mantenho z e clico e arraste. Isso me amplia onde quer que eu queira olhar na minha prancha de arte. E então eu uso a barra de espaço. Seguro a barra de espaço e clique e arraste para me mover. E então usarei se você estiver em um PC, você pode usar o Control. Se você estiver em um Mac, você pode usar o comando, mas usarei o Command Minus para sair do Zoom Out e no Command Plus para entrar. Ok, então o próximo, vamos pegar no início do protótipo. Vamos movê-lo para o exemplo. E agora vamos dar uma olhada no protótipo mais orientado para o fluxo de trabalho, que permitirá que você tenha um conjunto de telas para cima e mova para baixo e, em seguida, um conjunto de telas mova esquerda e mova para a direita . Então isso é um pouco mais complicado, mas ainda bem simples. Vamos ver como isso parece. O que é demonstração muito rápido e então vamos começar a fazê-lo. Certo, assim como fizemos no último vídeo, temos um slide para cima e depois temos um slide, certo? E você verá agora que o x está no canto superior direito. Isso é muito intencional. E isso é para nos ajudar a criar um fluxo de trabalho. E também permita que o usuário saia do fluxo de trabalho sempre que quiser. Então, o que o fluxo de trabalho deles começa quando pressionamos Iniciar e por que esse x está no canto superior direito. Você verá aqui, ao ver a próxima tela desliza a partir da esquerda. E se eu quiser voltar uma tela, posso voltar aqui. Mais uma vez, começamos a tela dois slides. Pode haver algumas configurações que queremos inserir ou alguns campos de formulário que você deseja inserir aqui neste fluxo de trabalho. E depois vamos para o número três. E digamos que você queira cancelar esse fluxo de trabalho. Algumas coisas que você pode fazer. Você pode voltar, você pode voltar. Você pode pressionar o X. E agora você está de volta à tela inicial original. Ou se você não quiser voltar três telas, basta fechar o x e agora está de volta ao fluxo de trabalho aqui. É por isso que o x está no canto superior direito é porque nos dá imóveis aqui para o botão Voltar no canto superior esquerdo. Então, novamente, vamos passar pela tela numérica 3, tela para aqui. E estamos concluindo o fluxo de trabalho aqui. E se você quiser X out, boom, x out a qualquer momento. Ok, então vamos fazer essa interação novamente. Vamos pegar o início e vamos arrastá-lo para a série de telas ao lado de você. Vou ampliar um pouco. Vamos pegar o botão Exibir. E novamente, vamos protótipo. Certifique-se de que você está na guia Protótipo. Deslize o braço protótipo aqui, e você já vê que ele está predefinido para você. Então, queremos por cima, não queremos sair. Queremos nos mudar. Mas vamos ver o que é, vamos ver como isso parece. Saia e você pode dizer às vezes que parece um pouco estranho. Ok, então você vê como a última tela, esta tela preta aqui, subiu. E não queremos isso, isso é, isso é uma interação estranha. Queremos que esta tela branca seja uma espécie de camada enduichada em cima dessa tela inicial aqui. E isso porque selecionamos sair. Então, se nos mudarmos, isso funcionará muito bem. Então, vamos dar uma olhada nisso. Certo, isso é o que queríamos. E agora vamos pegar o x e jogar onde podemos deslizar o x e sair. E novamente, não queremos que ele se mova para cá. E você pode ver algumas vezes que você esquece fazer a seta para baixo. E pode parecer algo assim. Veja como ele subiu. Isso é muito, muito estranho. Queremos que ele repita a mesma interação que estava apresentando essa tela. Então, novamente, ele subiu. Queremos repetir e reverter essa interação. Queríamos voltar para baixo. Então, neste caso, queremos selecionar o protótipo para o x, movê-lo para baixo. E bada bing, bada, boom. Certo. A próxima coisa é que queremos fazer como iniciar o fluxo de trabalho aqui. Vamos pegar esse botão. Vamos para o número dois. Nesse caso, não queremos sair, queremos nos mover para a tela e queremos que ela venha da esquerda. E você pode ver se mudar e nós temos a esquerda aqui. E vamos dar uma olhada nisso. Então, temos o View. Vou começar este protótipo e os dois slides da esquerda. Muito bom. Certo, e então o mesmo negócio. Vamos pegar o botão Voltar aqui, e vamos arrastá-lo para aquele. E o que queremos fazer aqui é que queremos que isso se mova para a direita e temos o mesmo erro comum que acontece é que deixamos e entramos e não nos mudamos. E você verá o que acontece aqui quando eu pressionar a seta para trás. Veja como a única tela se moveu . Não queremos isso. Queremos que as duas telas aqui repitam e revertam a mesma interação na qual ela foi exibida. Basta revertê-lo. Queremos voltar. Mas agora você pode ver os que entram. Isso é porque nós deixamos isso dentro, movemos para cá. Então, vamos seguir em frente e avançar, movê-lo para cá. E agora você verá a interação correta onde mover os slides número dois. Se você fizer o botão Voltar, ele cita novamente. Certo? E então eu também tenho uma barra cinza transparente aqui. Você pode ver que se parece com isso. E é transparente por um motivo porque você não quer que o usuário o veja. Só queremos usar isso como um mecanismo de protótipo para permitir que o usuário arraste esta foto ou esta tela para fora do caminho. Tão comum. Se você entrar em uma tela que tenha um botão Voltar, é comum que as pessoas seu dispositivo móvel deslizem para fora do caminho. E é isso que isso representará aqui. Vou torná-lo um pouco maior só para que você possa ver. E então o que queremos, não queremos que isso esteja nos detalhes da interação aqui. Então nós o deslizamos para trás, este quadrado transparente de volta para um. Não queremos tocar, mas na verdade queríamos fazer ao arrastar aqui. E queremos a mesma animação que queremos sair e sair para a direita. Então, agora, quando posso fazer como usuário, posso pressionar o botão voltar para um. Ou posso arrastar clicando no protótipo, segurando o dedo no telefone e arrastando esta tela para fora do caminho, veja como isso funcionou lá. Legal. Então, isso é preencher bem. Isso é preenchido como um protótipo real, como um aplicativo de maçã de roda. Você pressiona o botão Voltar, volta para baixo, entra no fluxo de trabalho. Você pode clicar e arrastar para deslizar isso. E agora vamos colocar o resto desses protótipos. O que podemos fazer aqui é que temos o x e todas essas telas, mas o x realmente vai levá-lo de volta a esta tela inicial. Então, um novo recurso para Figma agora é que você pode colar em várias pranchetas. Então, o que é excluir os eixos nessas outras telas? Vamos pegar o x. e se você estiver em um PC, é o Control C, como no gato. Se você estiver em uma maçã, então é Command C. E vamos seguir em frente e selecionar todos esses três. Estou em um Mac e vou para o Comando V, como no Victor. Ou se você estiver em um controle de PC V. E ele vai colocar esse x automaticamente em todas essas três telas com a interação que queremos que retorne à tela inicial. Certo, e é bem simples daqui em diante, apenas fazemos o próximo botão ir para o número 3. Se quisermos ter certeza de que está na torneira, queremos mudar. E queremos que essa tela se mova da esquerda. E, em seguida, o mesmo com o botão Voltar. Queremos voltar da tela 3 aqui para o número 2. E queremos sair e para a direita. Então, novamente, a tela entrará da esquerda e depois se moverá para a direita. A mesma coisa para 34. Fazemos o próximo botão para a tela frontal. Podemos querer que ele se mova da esquerda? E então, para a seta para trás indo da tela número 4 para o número 3, queremos que ela se mova para a direita. Tudo bem, isso deve estar completo. Vamos dar uma olhada nisso. Então, temos a visão, a tela desliza para cima. Temos o começo. Pressione Avançar, obtive o número 3. Pressione F4 vai para o número quatro. Você pode cancelar. Feche x, volta para a tela inicial. Você pode iniciar o fluxo de trabalho novamente. Vá para o Número 4, ou você pode voltar, voltar. Mesmo no caso número 2. Você pode deslizar e pressionar X e você está de volta à tela aqui. Legal, isso foi divertido. Vamos para o próximo, que é suspensos modais móveis. Então, vou envolver esta tela inicial para que você possa ver rapidamente o exemplo de como isso funciona. Pressione o botão play aqui. E, portanto, esta é uma lista suspensa para dispositivos móveis. Então, quando, digamos que eu queira selecionar minha cor favorita, clique neste menu suspenso e você verá um menu de itens deslizando aqui. E digamos que eu selecione aqui vermelho. Então você verá que está cheio de vermelho aqui. Pressione o X, volte para a cor Selecionar. Faça a mesma rota. Posso clicar em qualquer lugar fora ou tocar em qualquer lugar fora desta seleção suspensa aqui e ela a fecha. Ok, então vamos seguir em frente e pegar o Start over para a série de telas aqui que diz que você faz. Agora, o que vamos fazer aqui é que vou até a ferramenta de prancheta superior, onde diz quadro. E se você estiver nessa ferramenta, quer esteja na guia Design ou na guia protótipo, protótipo. Isso permitirá que você clique para criar diferentes tamanhos e dispositivos para os quais você estaria projetando. Então, neste caso, somos tamanhos de tela e as dimensões são iPhone 11 x. Então, vamos em frente e clique nisso. E ele só vai arrastar automaticamente colocar uma Prancheta na Figma. E agora precisamos encolher este quadro de arte para baixo do topo. Queremos manter a mesma largura, mas queremos mover o topo para baixo, então é cerca de um pouco mais de três, pouco mais ou um pouco menos da metade da prancheta para a esquerda. E então o que faremos é se você clicar na parte superior e arrastar para baixo. Vamos dizer sobre isso parece bom. Ok, então o que vou fazer é selecionar alguns dos elementos aqui do topo. Vamos apenas selecionar, nem se preocupe com as linhas. Vamos selecionar todo o texto aqui. Pressione Command C. Ou se você estiver em um PC Control C. Vou selecionar a prancheta aqui. E novamente, Comando ou Controle V como em Victor para colocar. Certo, isso parece bom. Agora acho que temos todas as peças que precisaríamos. Ok, então o que vamos fazer aqui é que vamos clicar no menu suspenso. Basta pegar todo esse elemento, pressionar o protótipo e arrastá-lo novamente para este quadro de arte aqui. E você verá interação, a caixa de diálogo Detalhes da interação aqui. Queremos a ação para toque ímpar. Essa é a função que segmenta que queremos criar. Mas o mecanismo aqui queremos mudar. Então, em vez de navegar até onde você quer que ele diga sobreposição aberta. E depois que você tiver sobreposição, isso nos dará nossas opções de sobreposição, e vamos entrar nessas opções aqui no próximo conjunto de vídeos ou protótipos aqui, logo após isso um faremos o modal, mas agora queremos fazer o fundo centrado. Queremos habilitar o clique quando fechar, ao clicar fora ou tocar no lado de fora. Isso significa que qualquer uma das áreas acima disso fechará. E também queremos adicionar uma sobreposição de fundo. O padrão é preto, o que é mais comum. E podemos até torná-lo mais escuro. Podemos fazer 50% de opacidade aqui. E então, para a animação aqui, não queremos. Mas vamos dar uma olhada no que criamos até agora para você possa ver como o Instant funciona. Vou remover qualquer um dos, você pode ver que este ainda tem um braço protótipo conectado à placa de arte aqui no topo. Vamos apenas clicar e remover isso por enquanto. Ok, então vamos selecionar este quadro de arte com o rótulo inicial nele. Pressione o botão play, e você verá agora que temos o menu suspenso aqui. E se você fechá-lo, ele vai embora. Mas não há transição, certo? É instantâneo. E queremos ter uma transição aqui. Então, se selecionarmos os detalhes da interação do protótipo novamente, e você ver onde ele diz animação, queremos usar o mesmo que acabamos de aprender na última tela. Queremos que eles se movam em animações. E a partir deste, não queremos a esquerda para a direita, queremos que ela suba. E então, quando você clica automaticamente fora da sobreposição, ele irá reverter isso para você. Então, ele se moverá para fora do caminho e para baixo quando você clicar fora dele. Então, vamos voltar ao protótipo aqui. Selecione o menu suspenso e lá vai você. Você vê como isso deslizou para cima. E quando você clica fora dela, isso reverterá essa interação automaticamente para você. Legal. Então isso é bem simples lá. E agora vamos embora. Digamos que queremos vermelho. Vamos clicar aqui. E na torneira, não queremos nenhuma animação aqui. Apenas instantâneo está bom. E agora vamos selecionar o x aqui para conectá-lo à tela inicial para que você possa remover essa seleção facilmente. Apenas instantâneo também está bom. E agora teremos uma seleção suspensa completa para um dispositivo móvel. Clique no menu SlideUp entra, você quer vermelho. O vermelho aparece. Pressione X, pode fazer tudo de novo. Certo, legal. Vamos passar para o próximo. Muito semelhante. Este será o modal. E vou mover esse começo aqui para o exemplo. Vamos dar uma olhada neste muito rápido. Tudo bem, então temos um botão pressionado, o texto aqui, e você verá que diz alto e podemos fechá-lo. Então, apenas uma interação modal para um dispositivo móvel. E vamos avançar e mover o rótulo do protótipo inicial para o que diz que você faz. Vamos alterar esse teste de texto. Apenas diga, eu não sei que diga Open. Então eu só cliquei nele. Pressiono T no meu teclado. Isso me dá a ferramenta de texto. Você clica uma vez que ele o seleciona, se você clicar em, se você clicar duas vezes, um selecionará tudo automaticamente. Então, novamente, posso clicar três vezes e digitar abrir novamente. Ok, então digamos que eu tenha o modal aqui construído novamente, mas vamos, vamos excluir isso por enquanto. Vamos começar do zero aqui. Então, a mesma coisa. Vou para o quadro aqui. Ferramenta Frame no canto superior esquerdo, vou selecionar o iPhone Pro X vai me dar uma prancheta. E o que vou fazer aqui é pegar este quadro de arte. Vou torná-lo um pouco menos alto. Então, vou clicar de cima, vamos movê-lo para cá. Mas neste caso, também quero torná-lo menos largo também. Então, ele está atuando como um modal. Ele não cobre todo o telefone do espaço vertical para o espaço esquerdo e direito, mas cabe meio bem no meio do telefone. Tudo bem, então isso já é um bom começo. E o que queremos fazer é voltar para a guia Design. E vamos seguir em frente e arredondar esses cantos. Então você vê onde ele diz quadro. Vou arredondar os cantos colocando, digamos 20. Certo? Não e você geralmente não quer ficar muito pesado como se não quisesse ter cantos que são muito arredondados assim. Você só quer uns belos cantos arredondados sutis. Então 20 devem ser perfeitos. Ok, e então para chegar ao protótipo, o que está em frente e pressione o clique no botão Abrir. Vamos deslizar o braço protótipo aqui, para este quadro de arte. E vamos seguir em frente e chamar isso no toque. E da mesma forma que fizemos antes de navegar, vamos mudar isso para a sobreposição aberta. E agora, em vez de fazer o fundo centrado como fizemos antes, vamos fazer centralizado. E vamos seguir em frente e fechar ao clicar do lado de fora. O que também adiciona uma sobreposição de fundo. Podemos mantê-lo em 25 per se aqui. E novamente, vamos fazer apenas uma interação de dissolução. Não precisamos que ele se mova ou algo assim. Ok, isso deve ficar bom. Vamos seguir em frente e ver o que isso parece no protótipo. Pressione aberto, ok, e temos um modal. Vamos em frente e fechá-lo. Abra e feche. Tudo bem, está parecendo bom. Vamos adicionar algumas das peças a este modal aqui. Vou copiar essa alta, e vou selecionar a prancheta, colar a alta aqui, apenas meio que centralizei se você quiser também. E também vou clicar no X aqui, colar o x e remover essa interação. Outra maneira de remover o pequeno braço GUI aqui, como você pode, clique com o botão direito do mouse em uma placa de arte e veja onde ele diz Remover interações. Isso removerá todas as interações apenas nesse quadro de arte. Vamos seguir em frente e colocar este x no canto superior direito. Vamos arrastá-lo até o ponto de partida deste quadro de arte. E vamos seguir em frente e dizer na torneira, dissolver, que deve funcionar perfeitamente. E só vai fechar esse modal para nós. Pressione X e estamos lá de volta. Então abra e feche. E você também pode tocar em qualquer lugar fora do modal e fechá-lo também. Certo, foi assim que fazer um modal. Vamos arrastar o ponto inicial para o abaixo. E vamos dar uma olhada em um menu vindo da barra de título. E essa é uma interação muito comum que você encontrará em muitos dispositivos móveis. Então eu clico na prancheta aqui. Pressione R no meu teclado, que me levará a qualquer tela que tenha o rótulo inicial nele. E você verá que há um menu de hambúrguer ou um ícone de hambúrguer na parte superior desta barra de título. Eu tenho a barra de título fixa. Então você pode ver que eu tenho todos os seus selecionados aqui no topo. E eu pressionei corrigido ao rolar. O que isso fará é novamente, ele apenas o mantém no topo enquanto o usuário rola e permanecerá consertado. Ele não se move enquanto todo o conteúdo, como os números 1, 2 e 3, vamos rolar. Então você verá como isso rola abaixo. E você verá o menu entrar. Então eu clico no ícone Menu e o menu desliza da esquerda para a direita. Se eu clicar fora dele, ele o fecha. Interação muito legal. Vamos ir de frente e construí-lo. Então, vou clicar na guia Protótipo novamente. E eu vou arrastar a seção inicial até a que diz que você faz. Vou mover todo esse texto aqui um pouco. Vamos precisar disso em um segundo. Portanto, não o exclua. Clique na Ferramenta Prancheta. E vamos continuar e soltar um clique novamente na ferramenta de prancheta. O que é seca? Deixou cair um iPhone Pro X aqui. E neste caso queremos torná-lo o mesmo. Podemos torná-lo do mesmo tamanho que a tela. Para a esquerda. Deve estar bem. Mas não queremos que tenha a mesma largura. Queremos que seja um pouco mais fino. Então, vamos dizer que aqui é bom. E o que podemos fazer aqui. Então, se formos para a guia Design aqui, você terá uma cor de preenchimento. Então, quando você seleciona o nível da prancheta, ele permite que você preencha a prancheta com o que quiser preencher. Você pode até fazer isso totalmente transparente. Eu poderia pressionar 0 e é totalmente transparente, nosso quadro, ou posso entrar nele e selecionar uma cor. Então, neste caso, eu sei que deve fazer isso azul. Você pode fazer qualquer cor que quiser, não é realmente o seu mundo. Você pode fazer qualquer coisa. Hum, mas para este exemplo, vamos fazer azul. Só por diversão para mudar um pouco. E vamos em frente e puxe esse texto para o menu. Aqui. Mova um pouco para baixo. Certo, Cool. Então, temos nosso design de menu aqui. Vamos selecionar o ícone do menu de hambúrguer. E vamos arrastar isso para o design do menu que temos ao toque. E, novamente, memória onde diz navegar. Então, temos o on tap é bom. Navegue até onde você deseja alterá-lo para entrar nessas sobreposições. E novamente, sobreposição aberta, assim como fizemos antes. E em vez de centralizado ou inferior, queremos que ele venha do canto superior esquerdo. Então, este meio no canto superior esquerdo aqui. Mesmas funções que queríamos fechar ao clicar fora. E queremos adicionar uma cor de fundo por trás disso. E, novamente, não queremos ter dissolvido ou instantâneo. Então, novamente, podemos mantê-lo em um instante por enquanto e apenas ver o que parece. Mas vamos mudar isso aqui em um segundo. Ok, lá está o cardápio entrando. Podemos clicar fora dele, fechá-lo. Mas você pode ver um não teve transição. Ele apareceu instantaneamente. Então, vamos adicionar a transição para que ela se mova. Então, novamente, se formos da animação aqui, permitimos que ela se mova. E queremos que isso venha da esquerda. Então, a esquerda será boa. Tudo bem, desculpe, queremos que ele venha da direita. Então, onde quer que a posição do menu esteja à esquerda, queremos que ele venha do lado direito aqui. E se você se perder, é o que Figma faz neste pequeno exemplo. Ele mostra que esta tela esta nova tela que você vai protótipo aqui, é esta nova tela que você vai protótipo aqui, vai deslizar sobre a tela que você está na tela a. Ok, vamos dar uma olhada nisso. Isso deve estar completo. Então, vamos pressionar R no teclado, clicar no ícone do hambúrguer. E ele desliza para dentro. Feche aqui. Desliza para fora. Tudo bem, legal. Então lá vai você. Lá você tem um menu. E isso conclui este vídeo. E o próximo conjunto de vídeos aqui, veremos que a função de protótipo animado inteligente criará uma aparência legal e um carregador. E faremos rolagem horizontal e vertical. Como sempre. Obrigado, e te vejo no próximo vídeo. Tchau. 12. Vídeo 3 - Smart Animate, crie um carregador e Horizontal/vertical: Bem-vindo ao Vídeo 3. Nos vídeos bônus, vamos cobrir o smart animate. Vamos construir um carregador, um carregador de tela usando o smart animate. E vamos olhar para deslizamento e rolagem horizontal e vertical. Tudo bem, então vamos em frente e volte para o arquivo aqui. Vou pressionar Período de comando, que mostrará toda a minha figo, figo, minha interface. Isso é o que estou fazendo aqui. Pressionando Períodos de comando para remover tudo, período de comando para ver todas as minhas ferramentas de interface dentro da Figma. Vamos de onde paramos de fora, que estava construindo este menu. Vamos pegar o ponto inicial aqui. E vamos dar uma olhada rapidamente no exemplo do smart animate. Então, o que é mais animado , essencialmente, ele animará seu conjunto de telas para mostrar a próxima tela. E nós cobrimos isso na última série de vídeos. Vou tocar nele brevemente. Há algumas coisas. Os erros comuns que encontrei repetidamente usando o smart animate que eu só quero destacar e algumas dicas rápidas para você. Pressione R no teclado. Mas, novamente, fizemos protótipos deste círculo aqui. E você pode ver como ele, e ele vai para a próxima tela com o círculo maior. E se você clicar no círculo maior, ele clica e volta para baixo. Animação muito, muito rica para a Técnica realmente simples de fazer. Resultados tão altos, simples de fazer. Então, o que vamos fazer é pegar esse rótulo inicial até a seção que você faz. Tudo o que temos que fazer literalmente é pegar esse círculo, protóti-lo para a tela ao lado da direita. E em vez de avançar, apenas pressionamos o smart animate. E isso vai fazer todo o trabalho por nós. E vamos seguir em frente e clicar neste círculo aqui, arrastar de volta e animar inteligente. E você pode ver essa interação acontecendo aqui e aqui rapidamente. Você pode controlar a velocidade de transição. Então, se voltarmos para o aqui, digamos que seja 800 milissegundos e você verá que haverá um menor. E nas roupas vai mais rápido. Você pode até mudar a cor se quiser também. Vamos passar para o design. Vamos mudá-lo de doce rosa para este azul aqui. E você verá que também muda de cor lentamente. Incrível, muito legal. Certo. Outra coisa comum que eu só quero tocar brevemente é um erro que acontece com bastante frequência. Vou arrastar isso. Você não precisa me seguir neste. Eu só quero chamá-lo para a inscrição e login aqui, isso acontece. Ok, então vou em frente e jogar isso. Isso é o que você deve evitar. E primeiro vou mostrar que o problema aqui é que se eu tocar em Login, você verá como não houve transição. Não houve deslizamento desse triângulo rosa para a tela de login. E o que realmente queremos é que algo pareça mais assim aqui, onde eu vou copiar sobre esta tela. Vou pegar os detalhes de login, mas exclua tudo isso. Vou segurar, vou pegar os textos de login, pressionar negrito, Comando B para negrito, torná-lo 100%. E eu vou seguir em frente e fazer outro comando B para não negrito, tornar isso uma fonte leve. E eu vou pegar o mesmo retângulo aqui, e aqui está a chave. Estou pegando esse mesmo retângulo da última tela, e vou deslizá-lo para fazer login. E agora, quando pressionamos o login nesta tela e a inscrição de volta para esta tela. Tudo com animates inteligentes. Você verá o animado inteligente de Logan. Quando clico no botão Inscrever-se, volte para se inscrever com o Smart Animate. Você verá que a transição é muito melhor. Então veja como essa transição de forma muito inteligente acabou. Então o que acontece aqui é se, digamos que eu copiei a tela de inscrição e excluí esse retângulo, e criei um novo. Este ótimo aqui. Isso é o que causa o problema aqui. Então você verá agora quando eu voltar inscrever, isso não faz a transição. E é porque Figma antes, quando você usa o mesmo retângulo aqui, figma identifica esse retângulo como o mesmo retângulo que você está usando na tela de login. Então ele sabe. Você está dizendo que eu quero que este retângulo se mova para este lado da Prancheta usando o animate inteligente, onde se você desenhar um novo retângulo, ele não distingue entre o retângulo rosa aqui deve ser o retângulo cinza aqui ele trata sua cabeça como dois elementos diferentes. Portanto, é muito importante se meio que passar por esse conceito. Então, vou para o Command Z de volta um pouco. Então você pode ver, eu estou dizendo dizendo à Figma durante este protótipo aqui para animar inteligente para esta tela de login. Que eu quero esse mesmo retângulo aqui, então ele identifica que está dizendo, oh, é se inscrever, esse retângulo mora aqui. E faça login. O mesmo retângulo vive aqui. E um animado inteligente vai fazer seu trabalho para fazer a animação, para movê-la para cá. Mas, novamente, se é algo novo que você desenhou, quebra esse relacionamento que você tem aqui. E outra coisa que acontece às vezes durante o Smart Animate é que você notará que algo acabou de ir, ficar estranho. Vamos ver. Você geralmente verá elementos como voar ao redor da tela, como dizer que este globo ocular vai voar ou o bokeh t faz algo diferente. É difícil reproduzir porque acontece de vez você verá algumas funções estranhas, mas o animado inteligente. E então o truque é, é a casa animada inteligente para fazer muito com o agrupamento. Então, se você estiver vendo alguns elementos estranhos da interface voarem pela tela, pegue a primeira tela e agrupe tudo. Então, digamos que nenhum desses foi agrupado aqui. Vá em frente e faça um comando G, ou você pode fazer um objeto e um grupo que vou fazer, ou se você estiver em um PC Control G por, vou agrupar todos os elementos aqui e praticamente agrupar tudo o que não é aquela coisa que você quer animar. Segure os botões. Você pode até agrupar tudo isso, o botão e os campos de formulário. E então comece a agrupar coisas. E prometo que quando você começar a agrupar, você notará a animação ou a coisa, o elemento que você está tentando animar vai animar muito melhor. Então, apenas um pequeno truque se você estiver tendo problemas com o recurso animate inteligente e ele não animando corretamente, comece a agrupar elementos. E, e você espero que veja uma mudança nisso. Ok, vamos nos divertir um pouco agora. Vamos construir esse carregador aqui. Então, vou pegar o nível inicial para a tela abaixo do carregamento. Vou pressionar play. E o que vamos construir é algo que se parece com isso. Então você vê que ele carrega. E então você tem uma transição da barra de título aqui na parte superior do mapa. Ok, então vamos lá, vamos fazer isso. Naquele que diz que você faz. Vamos pegar o começo. Vamos estourar isso aqui. E isso é muito simples. Só queremos copiar esta página. Vou apenas selecionar o quadro de arte. Estou aqui. Eles vão fazer Command ou desculpe, opção. E isso vai copiar e arrastar o mesmo quadro de arte aqui. Ou vou fazer um Comando C e Comando V, como em Victor, e isso vai colá-lo. Vou remover este rótulo inicial de um. Assim, você pode ver no protótipo que diz ponto de partida do fluxo, inicie um, basta pressionar o sinal de menos aqui, ver onde ele diz excluir ponto de partida e excluí-lo. E tudo o que queremos fazer é pegar isso. Quando vou para a guia Design e pego a barra de carregamento rosa e apenas mova-a até o topo. E é aqui que vamos combinar a função de atraso sobre a qual acabamos de aprender. Então, selecionamos todo o protótipo, toda a prancheta, clicamos e arrastamos para a parte de carregamento aqui. E, novamente, não queremos tocar, queremos após o atraso. E vamos fazer um pequeno atraso. Vamos fazer cerca de 100 milissegundos. E queremos o animado inteligente, mas queremos uma maior facilidade ou atraso mais longo para ele. Então vamos fazer, vamos fazer 20 mil milissegundos a segundos. Então, dois segundos tipo de estado de carga. Vamos pressionar o botão Reproduzir. E você deve ver essa interação aqui. Não definimos nada para acontecer depois desta tela. Então, tudo o que você deve ver é apenas o carregamento acontecendo. Então, novamente, pegamos na tela inicial aqui. Nós o configuramos para fazer um muito rápido com menos de um segundo, ele será carregado nesta tela. E então ele faz o atraso suave e transita o retângulo rosa desde o início da tela para as formigas. Então essa é a animação inteligente, o Smart Animate fazendo sua magia. E a mesma coisa. Queremos ir em frente e olhar para a tela aqui. E queremos arrastar isso aqui. E um mesmo negócio que queremos após atraso, atraso muito lento ou muito rápido , então 100 milissegundos. E também podemos fazer uma animada inteligente. E então você verá agora quando iniciar isso em, depois carrega o mapa de São Francisco com a barra de título na parte superior e a barra de navegação na parte inferior. Certo, mas vamos nos divertir aqui. Então, se você se lembrar do último protótipo aqui, verá um atraso, verá uma transição. Como a barra de título lá faz a transição para baixo. Ele deslizou para baixo assim. Essa é uma transição bem legal onde você pode ver a que fizemos . Isso não fez isso. Ele apenas carrega o mapa e você pode ver como ele se dissolve. Então, vamos seguir em frente e criar um estado de transição para isso. Este é um pequeno truque que você pode usar. Então, novamente, temos após o atraso, temos animate inteligente. E o que queremos fazer é primeiro pegar a seção da barra de títulos aqui nesta tela. E vamos colocá-lo na tela de carregamento aqui. E também vamos pegar essa seção da barra de navegação e vamos colocá-la nesta tela. Então, Comando V, então estou apenas pressionando Command C. Quando eu tiver esses elementos, selecionando o quadro de arte na parte superior aqui e pressionando Command V. Agora vou selecionar este elemento gráfico aqui, a barra de navegação ou a barra de título. Eu sou um Shift e vou setar para cima e apenas movê-lo para fora do caminho. Você não consegue nem ver que se torna difícil selecioná-lo. Você sabe, ele está lá quando você clica e arrasta sua seleção. E vou fazer a mesma coisa pela barra de navegação na parte inferior. E então basta movê-lo para fora do caminho para que você possa ver que ainda está lá. Então, o que estamos dizendo para dizer à Figma é que na próxima tela com o animate inteligente, reconheça essas duas formas e mova essa forma para baixo para a transição para posição aqui na tela do mapa. Certo, vamos dar uma olhada nesse protótipo. Veja como ele é colocado como aquela transição um pouco lenta. Mas acho que agora somos legais. Muito bom. Tudo bem, então um pequeno hack lá na função animate inteligente. Ok, vamos dar uma olhada em alguns pairar muito rápido e algumas transições prementes. Então, no protótipo, então praticamente passe o mouse. Você passa o mouse sobre ele, você veria o ponto. Não há dispositivos móveis e pairantes. Então, isso é apenas para você ver como o hover funciona como um protótipo. Você usaria isso apenas para sites de desktop e design de aplicativos de desktop. Mas você pode vê-lo aqui e aprendeu aqui. A próxima coisa que vamos fazer aqui é uma interação urgente, que mostrarei aqui e entraremos nisso. E isso funciona muito bem para quatro gráficos. Então você pode ver que eu tenho um gráfico aqui e quero pressionar ou esfregar este gráfico. E quando toco e segure, vejo os detalhes de 2016. Então, digamos que estamos medindo abraços aqui. Houve 513 abraços em 2016. Isso é muito incrível. Significa que você tem mais do que um abraço por dia. E ele poderia como isso funcionaria quando você adiciona engenheiro, isso é que você pode simplesmente esfregar o dedo através do gráfico e ser capaz de ver os detalhes em cada um desses níveis aqui. Tudo bem, vamos voltar para o arquivo. Vamos pegar o ponto de partida para o que diz que você faz. Muito fácil aqui. Basta selecionar o círculo aqui. Mantenha-o no Smart Animate, branco em vez de tocar, queremos enquanto pairamos. Vá para o protótipo. E você pode ver quando o mouse entra nele, ele muda de cor um pouco lento demais de um atraso. Então, vamos dar uma olhada nesse atraso aqui. Sim, então 200 milissegundos, vamos mudá-lo de volta para apenas 300 milissegundos aqui. Então 3 000 MS. Feche, e agora devemos ter um bom estado de pairar. Certo, isso é bom. Vamos passar para a tela gráfica aqui e aprender a fazer o estado The Press aqui. Então, o que vou fazer é levar este quadro de arte aqui. E novamente estou segurando a opção. Vou clicar e arrastar, copiar esta tela aqui. Enquanto eu estiver na guia Protótipo, veja que diz ponto de partida do fluxo, pressione Minus para excluir o ponto inicial. Então, assim, ele começa nesta tela. E então, quando eu vou copiar sobre o 513, abraços aqui, basta clicar e arrastar. Vou agrupá-lo Command G, só para que esteja tudo em uma forma. Então, temos isso aqui. Vou colá-lo no lugar. E agora vamos selecionar, basta clicar e arrastar. Vou segurar o turno no meu teclado. E vou selecionar a, praticamente todas as barras, exceto a que somos, que queremos destacar quando esfregarmos. E vou fazer esses 30% de opacidade. Então eles vão embora. Vamos fazer a mesma coisa para as datas. Vamos pegar tudo, exceto 2016, vamos fazer esses 30% de opacidade na camada dentro da guia Design. E estamos com boa aparência. Certo? E então o que queremos fazer aqui é que você pode fazer duas coisas. Você pode selecionar a barra 2016 e fazer o protótipo diretamente daqui. Ou você pode criar uma área de toque maior. Então, vou pegar um retângulo. Você também pode usar a tecla rápida no teclado é r. Eu vou fazer um retângulo que é apenas um pouco maior para o 2016, apenas para que haja um espaço de toque maior. E agora vou arrastar esse retângulo para o, para o quadro de arte onde temos os abraços 513. E a função de protótipo para isso não está na torneira, mas queremos enquanto pressionamos. E não precisamos fazer um animate inteligente que se dissolve. Então, é apenas uma espécie de atraso, um pouco de atraso. E vamos voltar para a guia Design aqui. Agora que sabemos que essa área cinza é o alvo do protótipo para a próxima tela, vamos avançar e transformá-la 0% de opacidade na camada de passagem. E agora devemos ver essa interação. Vá em frente e pressione Play, vá até seu protótipo e, em seguida, basta clicar e segurar 2016. E você verá esse destaque de uma área. E quando você soltar o mouse, você verá um pouco realçado. Então, estado, a mesma coisa se você abrir isso na Figma. Se você baixar Figma em seu telefone e fizer login, poderá ver o mesmo. Você pode testar os protótipos em seu telefone. E isso será o mesmo que você colocando o dedo para baixo e tocando e segurando com o dedo, você veria o abraço de nível superior 513 aparecer. E então, quando você soltar o dedo, você verá ele voltar a esse estado. Certo, bem simples. Vamos entrar em um pouco mais de uma interação complicada, que é deslizar horizontal, algum corpo, eu apenas arrastei a área de início para a área de deslizamento horizontal, prancha de arte. Vou pressionar play. E aqui está o que vamos construir, que se você deslizar nesses cartões aqui, você pode ver que há deslizamento horizontal. Você tem o Food 1, 2 também. Ok, parece muito complicado, mas na verdade é bem simples aqui. Vamos apenas fazer um, faremos os animais. Então vá em frente e arraste a seção inicial até o quadro de arte que diz que você faz. E você pode ver que eu tenho um conjunto inteiro de cartas aqui para cada animal. E um dos plug-ins legais que eu uso para obter todas essas fotos. Digamos que eu tenha um monte de quadrados aqui. É que posso ir para um plugin. É chamado de Conteúdo real ou Unsplash. Vamos dar uma olhada no Unsplash. E o Unsplash me dará um monte de fotos aleatórias. Então, digamos que eu quero animais aqui. Ele preencherá todos esses retângulos aqui com fotos. Eu posso fazer arte. Preencha com arte. Portanto, é uma maneira fácil de obter, basta obter um monte de fotos gratuitas que você pode ter na Figma. E se você clicar duas vezes neles, você pode ver na guia Design, você pode cortá-los um pouco se quiser. Eu vou de falhar para cortar e você pode ver como as colheitas para você se encaixar. Ok, uma pequena dica profissional, mas vamos em frente e começar a construir o deslizamento horizontal para os animais. Então, quando ele clicou e deslize para a esquerda ou para a direita. Então, a primeira coisa que queremos fazer aqui é qualquer elemento que queremos fazer deslizamento horizontal, movê-los para fora do seu quadro de arte. Então eu já fiz isso por você, mas comece com os elementos que você quer criar que estão atrás da tela aqui, mas coloque-os todos à sua frente. Como colocar todas as peças de xadrez no tabuleiro por digamos. Bem, queremos fazer é também selecionar cada um deles e agrupá-lo. Então, vou selecionar este. Vou para o Comando G ou Controle G. Você também pode clicar com o botão direito do mouse e dizer grupo. Então, se estes fossem desagrupados aqui, seria algo parecido com isso. Então eu clicava com o botão direito do mouse e iria até aqui para seleção de grupo ou Comando G. Então eu já os agrupei para você, mas apenas certificando-se de que eles estão todos agrupados aqui, só para que eles sejam facilmente selecionável. E agora vamos selecionar todos eles. Vou clicar e arrastar para selecionar todos esses. E então aqui está o que é realmente importante. Vou clicar com o botão direito do mouse neles e vou enquadrar essa seleção. Então, novamente, selecione todos esses realmente importantes aqui. Clique com o botão Enquadre a seleção e você pode ver no menu, nas camadas aqui tenho todos esses grupos. E quando eu clicar com o botão direito do mouse e ir para a seleção de quadros, você verá que está enquadrando. Ele agrupou todas essas imagens em um quadro aqui. E você pode chamar o que é chamado de animais. Então eu tenho um quadro aqui chamado animais que tem todas as imagens e os cartões que acabamos de criar e agrupar em cada um. Então, se eu quiser selecionar o urso aqui, se eu quiser selecionar o tigre. Ok, então agora vamos fazer é arrastar este quadro de arte. Então, vou clicar nos animais, certifique-se de ter a camada de prancheta selecionada. Vou arrastá-lo para este quadro de arte. E ele sabe que está no quadro de arte porque vai destacar azul. Portanto, certifique-se de que esteja no quadro de arte. Uma das maneiras que testa isso como selecione a prancheta aqui e mova-a ou mova-a. Se eles não se moverem, às vezes ficará assim. Você não o terá no quadro de arte. Parece que está na prancheta. Mas quando você mover este quadro de arte, opa, tente novamente. Ok, então sim, vai ficar assim. E então, quando você mover a prancheta, você notará, oh espere, estes estão na prancheta de arte, o que também significaria que eles não apareceram no seu protótipo para. Então, novamente, certifique-se de que sua prancha de arte aqui, esta camada está dentro da placa de arte animal aqui. Então você pode ver aqui, eu não fiz, ainda não está no quadro de arte. Alguém apertou o comando C. Vou selecionar a prancheta. Vou colá-lo dentro. Então, agora, quando eu movê-lo e você pode ver como está, ele está lá. Ok, então aqui está a peça-chave para fazer esse pergaminho horizontal. Então selecione a moldura animal aqui. Então, na sua paleta de camadas, basta selecionar os animais. E o que queremos fazer é manter o comando do lado direito aqui e arrastar e cortar nessa direção do quadro. Isso é realmente importante. Então, novamente, se você estiver clicando e arrastando nele e se parece com isso, você não terá a camada de prancheta selecionada. Então, novamente, volte e selecione onde diz os animais no nível da placa de arte e segure Command. E arraste isso apenas para a direita da prancha de arte. E ainda podemos ver todas as fotos aqui. Então, o que queremos fazer aqui é na guia Design aqui, no canto superior direito, onde diz conteúdo do Clip. Vá em frente e clique nisso. E o que vai ser, ele vai cortar o conteúdo de onde arrastamos esse braço aqui. Então, está cortando o quadro de arte. Então, estamos quase cortando esse quadro aqui. E estamos permitindo que o conteúdo do clipe recorte esse conteúdo para que não o vejamos. Também é uma boa ideia ter certeza de um pouco mais de espaço na parte inferior e no topo desse corte. Então, dessa forma, a sombra entra. E também mova esta linha aqui todo o caminho para a esquerda. Isso é muito importante. Vou te mostrar por que farei duas opções onde não está e você verá a diferença. Então, estamos praticamente acabados. Estamos prontos para fazer esse protótipo e fazer desse quadro um deslize horizontal. Então, todos nós, é muito simples. Tudo o que precisamos fazer é ir ao protótipo aqui e ver onde ele diz estouro, rolagem de estouro. Basta fazer rolagem horizontal. E agora vamos olhar. Você deve ter a rolagem horizontal. Então, se você tocar e clicar, verá as cartas se movendo nessa direção. Ok, e então a razão pela qual puxar o quadro de arte para fora todo o caminho para a esquerda é para que as imagens pareçam rolarem além do dispositivo. Então, não vou fazer isso. Vou fazer isso na metade do caminho. Vamos apenas dizer aqui. E você pode ver o que acontece, ver como eles, eles não rolam até o final do dispositivo. Parece estranho. É como se estivesse entrando em um piscar de piscar de olhos. Então, o que queremos fazer aqui é sempre me certificar de que está todo o caminho até o final do nosso aeroporto para fazer parecer que está indo até o final onde o dispositivo mora. Legal. Lá vai você. Há rolagem horizontal. Vamos fazer a rolagem vertical aqui, que é praticamente a mesma técnica. Muito simples. Então, novamente, temos a navegação de nível superior aqui. E é a mesma ideia, são apenas as cartas rolam aqui. Então, vamos seguir em frente e mover este começo para o quadro de arte para a direita que diz que você faz. Mais uma vez, tenho todos esses selecionados aqui. E, novamente, certifique-se de que cada um esteja agrupado. Estou apenas passando pelo comando G em todos esses, certificando-se de que estão todos agrupados. E eu entendo, vou selecionar todos eles de uma só vez. Muito, muito importante. Vá em frente e enquadre esta seleção. Agora podemos saber, olhando para as camadas à esquerda, que era um quadro. Vamos nomear esse animal novamente. E podemos ver quando selecionamos o enquadramento animal à esquerda que há todos os grupos e depois as cartas dentro dele. O mesmo tipo de negócio. Vamos entrar, arrastar isso para o quadro de arte aqui, ir para o fundo e segurar o Comando. Deslize isso todo o caminho para cima. Volte para a guia de design e lembre-se de cortar este conteúdo. Agora podemos ver o conteúdo sendo cortado. E novamente, vamos adicionar algum espaço à esquerda em algum espaço à direita. E queremos que ele venha exatamente onde está o início desse menu. Então, parece que está rolando por baixo desse menu. E agora que fizemos isso, estamos prontos para ir. Podemos ir ao protótipo, podemos saber rolagem e podemos fazer rolagem vertical. E agora, se pressionarmos Play, você verá aqui a mesma função. Certo, legal. Então, vamos dar uma olhada em combinar os dois para criar uma interação de mapa muito legal. Assim, você pode ir em frente e pegar o rótulo inicial e arrastá-lo para onde diz deslizamento vertical e horizontal. E vou mostrar o exemplo aqui no protótipo. Então você tem um mapa e você pode ver com esses recursos de deslizamento vertical e horizontal. E contribui para uma ótima interação com o mapa onde você está clicando e deslizando. Muito simples novamente. Então, vamos em frente e puxe o início para você. Tenho essa imagem de mapa grande aqui? Tudo o que você precisa fazer é arrastar isso para este arquivo e você pode ver como ela ainda é uma grande imagem será cortada um pouco. Isso é bom, é o que queremos. Mas o mesmo negócio que fizemos com todas as páginas de nível de cartão. Queremos ir em frente, já que esse é um elemento, não precisamos de um grupo. Mas vamos em frente e clique com o botão direito sobre ele. E vamos enquadrar essa seleção. Ok, então você pode ver agora à esquerda temos um quadro, vamos chamá-lo de mapa. E dentro deste mapa temos a imagem. Vamos voltar e selecionar o nível do quadro aqui. Portanto, certifique-se de que você está no quadro, não no MAP, mapa de ciclo do MAP, imagem, no quadro. E vamos fazer a mesma coisa. Mantenha pressionado Command, arraste isso para a esquerda. Comando puxar, arraste-o para dentro da direita. Isso é realmente importante. Você faz isso ou desliga o deslizamento vertical e horizontal não funcionará. Então, estamos praticamente mascarando essa imagem aqui. Então, se você olhou, se eu tirei isso de volta, você não precisa fazer isso, mas se eu retirar isso, você pode ver aqui que ainda temos o mapa, temos o enquadramento. Ainda não fizemos o conteúdo do clipe. Então, se o clipe, o conteúdo se parece com isso. Mas você pode ver o quadro aqui. Nós emolduramos o mapa. Então, tudo o que precisamos fazer agora é voltar para este quadro de arte. Certifique-se de selecionar as camadas à esquerda aqui, selecionamos o mapa, fazemos o conteúdo do clipe. Então, novamente, estou apenas na placa de arte do mapa, não na prancheta inteira, apenas no mapa. Você pode ver que eu posso até clicar nele, recortar um pouco mais baixo do menu aqui também está bom. Essa será a mesma interação. Vá em frente e vá para Protótipo. Tenho uma rolagem. Então eu entendo, estou selecionando apenas o quadro do mapa aqui à esquerda. Eu fiz protótipo. E vamos fazer rolagem horizontal e vertical. E agora, se formos para o botão Play, seu deve se parecer com isso. Tudo bem, isso foi muito divertido. Espero que você tenha tirada muito desse vídeo. E no próximo vídeo aqui vamos aprender algumas funções de rolagem de duas funções, variações de componentes e mapearemos. Vamos terminar com os componentes interativos. Obrigado. Vejo você em breve. 13. Vídeo bônus 4 - rolagem, variantes e componentes interativos: Antes do último vídeo nas seções de vídeo bônus, abordaremos a rolagem para funcionar as variantes do componente e os componentes interativos, certo? Então, vamos voltar para o arquivo aqui. E acabamos de embrulhar com o mapeamento e mostrar o deslizamento vertical e horizontal para ficar assim na demonstração. Agora vamos seguir em frente e arrastar essa área de início até onde ela diz Toque para rolar para baixo. E você vai ver aqui se eu, vou em frente e mostrar isso no protótipo, vou pressionar a peça aqui. E o que é isso, você pode deslizar para baixo, ver todo o resto do conteúdo. Mas o que vamos fazer é criar algo em que, se você tocar neste cartão ou tocar em qualquer seção, ele vai rolar o usuário até esta seção na qual você define, geralmente mais comum. Você verá isso em sites quando rolar na parte inferior. E há um botão que diz como uma seta aqui que diz rolar de volta até o topo. Você verá isso como a mesma interação aqui. E podemos até construir isso aqui sobre isso, sobre isso por um segundo rápido. Ok, então praticamente vamos em frente e pegar o rótulo de âncora inicial para o protótipo aqui. É uma interação muito, muito simples. Então, temos essas quatro cartas aqui. Se você pressionar play no protótipo, basta deslizar o dedo diz normal. Não há interação aqui. Estou clicando neste carrinho, nada acontece. E tudo o que precisamos fazer aqui é dentro da prancha de arte em si é, vou clicar neste cartão. Quanta irregular geralmente arrastamos esses protótipos para adicionar seus quadros. Nesse caso, vou arrastá-lo para outro cartão dentro do mesmo protótipo, diga esta seção aqui. E já sabe ao toque, role para, ele será padrão para isso. E tem instantâneo. Não queremos instantâneo. Mas vou mostrar o que parece instantâneo só para que você possa evitá-lo. Ok, então aqui tocamos no cartão e você vê um instantaneamente leva o usuário aqui, mas não houve transição. Então, queremos que essa transição chegue. Então, em vez de no estado, queremos animar. E o animate irá rolar suavemente o usuário até esse ponto. Então, vamos em frente e clique no cartão novamente. E você pode ver que ele volta para o carrinho aqui na parte superior ou inferior. Então veja que rolando bem para baixo. Você não quer que ele seja muito longo de um pergaminho. Vamos seguir em frente e dizer como 20, 1000 milissegundos aqui. Isso provavelmente é muito lento. Você pode ver o quão lento isso é. Queremos um rápido e suave. Então, talvez até 500 milissegundos provavelmente sejam bons o suficiente. Lá vai você. Transição de facilidade agradável lá. E então vamos em frente e pegue a flecha aqui onde ela diz que você faz. Vou apenas copiar isso. Vou girá-lo. Eu sou um tamanho reduzido um pouco. E vou colocar isso na parte inferior bem aqui. E podemos fazer a mesma coisa aqui. Podemos protótipo essa seta para levá-lo de volta ao cartão aqui. Mesma função, Alan, toque, role para animar. E agora você pode ver aqui nós vamos para o fundo. Se eu clicar na seta, leva-me de volta para o topo. E você pode ver que ainda tem um pouco de cartão de quarto por baixo. Então, o que poderíamos fazer aqui é mover essa flecha até o topo. Podemos realmente agrupar a seção da barra superior aqui. Vou criar um quadro. Quando uma colheita, só um pouco. Tudo bem, e pegue o protótipo. E vamos apenas puxá-lo até o topo desta seção aqui. Agora vamos ver o que acontece. Lá. Você volta para a posição. Então eu não escondi o carrinho como antes. Legal. Isso é praticamente um pergaminho para funcionar. Você pode usar isso para dispositivos móveis, você pode usá-lo para a Web, mas é mais comumente usado para mover para baixo para seção por seção ou rolagem, ou fazer com que o usuário volte para o top sem ter que gostar de deslizar todo o caminho e continuar deslizando. Tudo bem, agora vamos examinar um pouco os componentes e as variantes de componentes e componentes interativos. Portanto, esse é um dos mais novos recursos que saíram da Figma recentemente. E você baseia o último conjunto de vídeos no curso, você deve saber como fazer um componente e o que isso está nos permitindo fazer aqui Eu vou demonstrar esta página. Isso nos permite, em uma tela, selecionar todas as variações. Digamos que eu queria selecionar meu sabor diferente aqui e permitir-nos fazer todas essas variações em uma. Tela aqui, e isso é chamado de componentes interativos de componentes, mas também usa um recurso chamado variâncias de componentes também são variantes. E então, como costumávamos ter que fazer isso? Uh, meio que se parece com isso. Você tem que protótipo todas essas interações diferentes e casos possíveis para o usuário clicar. E agora temos que resolver tudo isso com apenas uma tela aqui. Então, vamos examinar uma variante primeiro e, em seguida, analisaremos a variância de componentes ou componentes interativos. Então, se formos para a biblioteca de componentes aqui, veja que tenho um sistema de caixas de seleção aqui. Então, vamos fazer um componente muito primeiro, vamos copiar os dois prateados porque vamos precisar deles. Então, basta selecionar esses dois. Vá para o Comando C. Vou diminuir o zoom um pouco e vamos até o topo aqui e colá-los. Portanto, esses já são componentes porque você pode ver como quando clico neles, eles são roxos. Vamos selecionar ambos. Vamos clicar com o botão direito sobre eles. E vamos desanexar a instância. Então, novamente, selecione ambos com o botão direito do mouse, desanexe a instância. Isso vai desanexá-lo do componente. Agora você pode ver que eles são contornos azuis versus roxo, o que significa que eles não estão mais relacionados aos componentes. Eles são uma espécie de pontuais. Então, vamos começar com a primeira caixa de seleção aqui. Digamos, vamos mudar esse traço sobre ele. Vamos apenas fazer dele um traço rosa. E vamos mudar esse texto para textos mais escuros como esse. Então, novamente, acabei de selecionar a cor aqui, mudei para rosa. Selecionado, sim. E eu selecionei uma cor da nossa biblioteca. Se você não tem as cores, basta separar. Então eu desapego a cor aqui. Você pode ver se você passa o mouse sobre, diz o estilo de desanexar. E posso fazer qualquer cor que eu quiser. Você pode fazer preto aqui. Então é isso talvez só para preto. Ok, então o que primeiro queremos fazer é dizer que este é um bom componente que queremos usar. Ou você quer reutilizar essa caixa de seleção eventualmente. Então, vamos clicar com o botão direito sobre ele. E vamos seguir em frente e fazer disso um componente. Você pode pressionar Criar componente aqui. Você também pode fazer isso clicando neste pequeno para diamante, como o ícone de diamante Foursquare na parte superior. E ele fará a mesma coisa. Ele criará um componente. Agora, o que queremos fazer aqui é que se você puder ver à direita, temos um, ao selecionar este componente, temos um recurso chamado variância. Vamos prosseguir e pressionar Plus nessa variante. E ele vai duplicar a caixa de seleção aqui que temos. E vamos chamar isso de ativo. Portanto, temos um que já é padrão, pré-preenchido para o rótulo que já estava rotulado anteriormente no arquivo. Mas este novo, nós o mudamos para ativo. E vamos seguir em frente e dizer que isso é não. E agora o que queremos fazer é selecionar um clique triplo até eu chegar ao preenchimento ou apenas o retângulo. Então clique triplo, obtive o retângulo. Vou até o preenchimento, pressione mais. E eu vou pegar esse rosa e deixá-lo cheio. E então eu vou copiar essa caixa de seleção. Vou segurar a Opção. E vou arrastá-lo para esse componente aqui, então não preciso mais desse. Ok, então agora o que podemos fazer, temos esses dois componentes definidos. Podemos voltar para nossa camada de transição móvel aqui nas páginas. E podemos arrastar esses componentes para o arquivo. Então, se formos para Ativos, você verá todos os componentes locais que estavam nessa camada de página chamada biblioteca de componentes aqui. E você verá os novos que fizemos porque os fizemos com uma cor mais escura aqui. Então você vê onde diz que sim. Vamos arrastar isso aqui. E o que você poderia fazer neste momento quando você está projetando é, digamos, eu vou fazer essa tela. Eu sou um excluir todos esses aqui. Vamos pegar um novo. Vamos tornar o fundo aqui um pouco mais leve para que possamos ver o, vamos ficar brancos. E vamos mudar isso para uma cor mais escura. Lá vai você. Ok, então, ao trabalhar com componentes, temos a seção padrão desse componente. Mas digamos que eu queira protótipo disso. E eu quero fazer deste o estado selecionado. Você pode fazer aqui, clicar no ícone Sim e você verá a área do componente. Então eu tenho o sim, largue nossa caixa de seleção. Você verá aqui que ele tem a área do componente. Verifique se você está na guia Design, não na guia Protótipo na guia Design. Veja onde diz a caixa de seleção padrão. E esse pequeno menu suspenso tem a variante. Então posso dizer facilmente que quero mudar isso para o estado ativo. E isso o mudará automaticamente para o estado ativo. E você pode adicionar quantas variações quiser. Então você pode ver aqui quando eu clico no Não, e eu vou clicar nele de volta aqui. E nós carregamos isso. Um clique o altera para saber. Outro. Altera rapidamente para sim. Então, isso é praticamente variância em poucas palavras. Mas a figma lançou um recurso ainda melhor que é componentes interativos agora, que antes de arrastar o nível inicial para essas telas. Então, antes de componentes interativos, se quiséssemos uma interação, digamos para uma função na qual você escolhe seu gênero e selecione masculino ou feminino. Digamos que você queira fazer mulheres e você queria que o usuário tivesse um estado de focalização. Na verdade, você teria que criar outra tela para o estado do mouse. E digamos que houvesse um estado selecionado. Na verdade, você teria que criar outra tela aqui para o estado selecionado. Então eu já tenho esse protótipo. Portanto, antes dos componentes interativos, isso é o que teríamos que fazer. Temos três telas para fazer com que pareça muito simplificada e perfeita. Como eu passar o mouse sobre a fêmea novamente, não há pairar no celular, mas digamos que isso fosse para web e você clica e há um estado ativo. Muito assim, três estados desse botão todos usam três telas diferentes para obter essa interação. Então, agora com componentes interativos, que vamos construir aqui em um segundo, podemos obter uma tela que faz tudo isso. Se eu clicar fora dele voltará. Então, vamos seguir em frente e construir isso. Então, se formos para a seção aqui onde diz normal, vamos pegar este botão aqui. Então, vou pegá-lo. Vou para o Comando G. Vá em frente e agrupe. Então, vamos seguir em frente e pegar isso. Vamos voltar para nossas camadas aqui no topo. Certifique-se de que você pode ver suas páginas aqui. Às vezes você não vai vê-lo porque esse não é o caminho, mas puxe isso para baixo, puxe suas camadas para baixo, se precisar. Vamos até nossa biblioteca de componentes. E você pode ver que eu já construí isso, para que você possa ver como funciona, mas vamos seguir em frente e fazer isso juntos. Então, na mesma área em que construímos nossas caixas de seleção, vamos colocar o comando V se você estiver em um Mac ou Control V se você estiver em um PC, PC, vamos colocar este botão feminino aqui ou este botão de seleção aqui . E agora vamos fazer com que os diferentes estados entrem e comecem a trabalhar com os componentes interativos. Então, vamos seguir em frente e nos certificar de que estamos agrupados no comando G. Vamos clicar com o botão direito sobre ele. Vamos torná-lo um componente. Então, vamos criar um componente. E vamos seguir em frente e olhar para trás em nossa guia Design. E vamos nos certificar de que chamamos isso. Então, no quadro superior aqui, vou clicar três vezes nas minhas camadas à esquerda. Chame este de estado padrão. Só para saber quando selecionei isso, esse é o estado padrão e o nomeei. Vamos seguir em frente e selecionar o componente aqui. E vamos adicionar a variante. Então, o que é adicionar a primeira variante aqui? E vamos chamar isso de estado de paira. Tudo bem, e então você pode ver que eu já agrupei essa seleção aqui, então vamos clicar três vezes até chegarmos, certifique-se de que estamos na guia Design. Então, movido do protótipo para a guia de design. Clique triplo até que apenas tenhamos o retângulo selecionado. Então, não queremos ter a fêmea, o ícone aqui para mulheres, apenas o retângulo e onde ele diz traço na mão direita, para o painel direito onde diz design, vamos adicione um traçado. O padrão é um pixel. Sou fã de manter seus traços grossos. Normalmente, nunca faço traços de um pixel. Ou 23, a maioria dos casos três ou quatro é mais comum. Só para torná-lo muito presente, apresentável e aparente. Então, às vezes, pode parecer um erro, como se fosse muito fino, não parece ser um golpe intencional. Então, vamos ser intencionais, digamos quatro. E vamos seguir em frente e fazer disso o contorno rosa aqui. Ok, então agora, se voltarmos e selecionarmos todos os, este componente com todas as variantes nele. Então veja onde ele diz Estado padrão. Você verá que ele tem a propriedade um estado de focalização padrão. E tem muito, tem sua própria seção variante. Neste ponto, você verá as três pequenas opções de menu aqui, os três pequenos pontos na variação. Isso é importante. Porque é aqui que podemos adicionar mais variância. Então, adicionamos mais uma nova variante. E isso o adicionará ao fundo aqui. E vamos chamar isso de estado selecionado. E novamente, vou selecionar apenas o plano de fundo. Então clique triplo e tailandês obtém esse plano de fundo. Vamos fazer todo o fundo rosa. Vamos pegar o ícone aqui. Vamos torná-lo branco. E vamos mudar o texto de preto para branco. Ok, então agora temos três botões diferentes que poderíamos usar. Vou voltar para a camada de transição móvel aqui e entrar nos ativos. E temos esse botão aqui que criamos. E tem as diferentes variações no focalização, estado selecionado. Mas nós não nos conhecemos, protótipo eles ainda para serem interactáveis, certo? Acabamos de ter o conjunto de variância. Então, vamos voltar para nossa biblioteca de componentes. E o que podemos fazer agora é que podemos definir recursos de protótipo dentro de um componente. Parece loucura, mas é muito, muito fácil. E tudo o que acabamos de fazer, vamos aplicar, mas apenas aos botões. Então, vamos seguir em frente e garantir que todos estejam agrupados. Então, nós os agrupamos antes. Selecione o estado padrão da variância. Então você vê que está no padrão e agora vá para a guia Protótipo. E agora você pode protótipo dentro de componentes. Então, vamos seguir em frente e arrastar esta seta de protótipo para aqui. E digamos que onclick esteja bom. Na verdade, o que faz este enquanto paira? Ele vai para o estado de paira. E não vamos fazer instantâneo, vamos nos dissolver, digamos 300 milissegundos aqui. Então, novamente, peguei o topo, arrastei-o para aquele que tem o derrame. E em vez de dizer onclick, eu fiz enquanto pairava. E agora vamos fazer o mesmo com aquele que é o estado de paira. Vamos clicar nesse. Vá para o estado selecionado. E queremos que este seja onclick e dissolva funcionará muito bem. E também queremos que alguém clique fora disso, o usuário clique fora do selecionado e leve você de volta ao estado padrão. Queremos onclick e queremos dissolver. Ok, então vamos excluir este. Vamos seguir em frente e copiar esta página aqui. Na verdade, nem precisa copiá-lo. Vamos, vamos excluir esse botão aqui. Vamos até nossa biblioteca de ativos se todos os nossos botões de componentes. E você pode ver aquele aqui que diz estado padrão. Quando acabamos de fazer. E você sabe, é um que acabamos de criar porque tem o padrão, o estado de focalização e o estado selecionado. Quando vamos para a guia Design e observamos as diferentes variantes. E agora vamos pressionar Play. E você verá apenas no protótipo sozinho, o componente, a variância do componente interativo em jogo. Portanto, há o estado padrão. Se você passar o mouse, você obtém essa transição apenas para o traço. E se você clicar nele, obtemos o estado selecionado. E se você clicar fora desse estado selecionado, poderá ver que ele retorna ao estado padrão. Então, novamente, isso é basicamente levar a prototipagem que fizemos aqui dentro dessa variante de componente, seleção. E aplicando esses protótipos em apenas um componente para essas diferentes interações. Tem sido um recurso que eu esperava para sempre. Novamente, faça com que ele mostre esse tipo de interações. São necessárias tantas telas como ele obtém esta tela aqui. Isso é o que parecia por alguns anos. Por isso, é realmente ótimo que a figma tenha introduzido esse tipo de recurso e economiza tempo. São menos telas para nós gerenciar e é muito fácil de configurar. E você pode configurar isso para praticamente tudo. Você pode fazer seus estilos de botões aqui. Você pode ver neste que eu criei botões aqui. E se você protótipo esse botão aqui, esse é o estado de focalização. Então você tem o estado do mouse para esse botão. Então, se voltarmos para o nosso arquivo aqui e entramos em nossos ativos, e arrastarmos esse botão para aqui, pressione Play. Você pode ver que ele tem o estado de paira preto mais escuro. E novamente é, é um botão. Então, o que poderíamos fazer é brincar ou é um componente. Então, o que é ótimo sobre o componente é que posso usar todos esses botões diferentes aqui. Posso dizer que este é salvo. Este é o próximo. Este é cancelado. Este é incrível. E este é adorável. E eu posso voltar para minhas camadas. Posso ir para meus componentes. Digamos que eu não quero mais rosa. Quero mudar essa cor para o azul. E eu quero mudar esse pairar para dizer, um cinza mais claro aqui. E agora, quando voltarmos ao nosso quadro, você verá todas as versões desse botão mudarem para o azul. E agora vamos olhar para o estado de pairar. Você pode ver que ela também foi alterada, então ele atualiza todas as instâncias diferentes são filhos desse componente mestre, tudo em um só passo, em uma edição. Ok, aí você tem isso. Esse é o fim de todos os vídeos de bônus. Como sempre, muito obrigado por fazer as aulas. Tenho algumas novas aulas saindo em breve que estarei a mão e avisarei a todos quando lançarem. E, como sempre, divirta-se projetando e deseje o melhor. Tchau.