Criando protótipos interativos com Figma

1. Introdução: Bem-vindos ao curso de prototipagem com Sigma. Neste curso, vamos aprender como podemos criar protótipos interativos Riel usando o software de design online gratuito chamado Sigma. Oi, Meu nome é Neema e eu sou seu instrutor para este curso ao longo dos últimos 10 anos são trabalhados em dezenas de aplicativos móveis e Web para tanto starups de meu próprio e também projetos de clientes também . E neste curso, eu vou mostrar a vocês como você pode realmente criar um protótipo de trabalho completo. Eles podem se exibir para colegas, amigos, investidores e assim por diante. Primeiro, vamos pensar no Projeto que já projetamos chamado Clean Kangaroo, que é um aplicativo móvel para um serviço de entrega de lavanderia. Vamos pegar os designs para o aplicativo móvel e realmente criar um protótipo utilizável com riel, transições, estados e até animações inteligentes. Nós vamos testar nosso protótipo no próprio mapa de figo, e nós também vamos verificar o aplicativo Mirror de Sigma onde você pode ver protótipos, vida, e também ver seus projetos mudar a vida como você está trabalhando neles em invenção como um bônus também aprender como as equipes trabalham em sigma, como podemos realmente criar uma equipe convidar membros da equipe para nosso projeto e trabalhar com eles dentro do mesmo design. Também aprendi a compartilhar uma exportação, nossos projetos com clientes, colegas e assim por diante. Então, se você está pronto para aprender a criar protótipo bonito para seus projetos usando mãe falsa , em seguida, saltar para a direita e eu vou vê-lo neste curso. 2. Importando a interface móvel: Tudo bem, então, sem mais delongas, vamos direto para criar um protótipo a partir deste aplicativo móvel que temos aqui . Este é um design móvel para um aplicativo chamado Clean Kangaroo, que é essencialmente fornece. de Serviçodeentrega de lavanderia. As pessoas podem ter sua roupa suja. Eu peguei e caí bem e limpo. E eu realmente tenho um curso onde eu mostro a vocês como você pode projetar um modelo móvel completo como este. Em outro curso chamado Learn Sigma projetou um celular completo, você aux. Em outro curso chamado Learn Sigma projetou um celular completo, Então sinta-se livre para verificar esse curso também, se você quiser aprender a realmente projetar maquetes móveis que se parecem com isso. Mas para o propósito deste curso, vamos nos concentrar principalmente em como criar um protótipo real com isso. Então, antes de seguir em frente, por favor vá em frente e baixe o arquivo do estigma para este projeto aqui, que estará disponível sob o projeto e o recurso é a guia aqui. Clique nisso e, em seguida, localize o recurso que você pode baixar a partir daí. Assim que você tiver baixado isso, basta ir em frente e abrir seu produto. App não importa se você está em um desktop ou Web, você pode criar protótipos em ambos. Agora, se esta é sua primeira vez usando MMA de figo, então vá para a fig. Medog veio do mano. Você será capaz de se inscrever para o serviço e, em seguida, ir em frente e acompanhar conosco. Então, uma vez que você está em figo ma, você pode simplesmente ir para sua pasta de rascunhos ou qualquer lugar onde você mantenha seus projetos e, em seguida, vá em frente e simplesmente arraste nosso arquivo de correção de pontos que você baixou. Então deve ser um arquivo chamado Clean Kangaroo Mobile. Você é falso, então simplesmente vá em frente e arraste isso. É um arquivo um pouco maior, então pode levar algum tempo para importar para dar algum tempo, e que uma vez importado, você verá que ele diz Arquivo importado com sucesso para ir em frente e clicar em feito e, em seguida, vá em frente e apenas abra-o clicando duas vezes no arquivo. Perfeito. E a próxima lição. Vamos aprender como funciona o modo de apresentação e prototipagem e Sigma 3. Criando protótipos: Tudo bem. Então, como mencionei na introdução deste curso, uma das ferramentas realmente poderosas em figo MMA é sua prototipagem. Assim, a prototipagem nos permite dar vida aos nossos projetos para que possamos realmente ver todas as páginas do ano em ação. Então agora, se você acessar este botão e apertar o presente, o que nos permite ver como nossos projetos seriam realmente em um dispositivo como aqui. E enquanto isso é legal, como você pode ver agora, realmente não há ordem e eu estou usando as teclas do teclado esquerdo e direito para realmente alternar entre essas páginas. Mas se você quiser ir em frente e realmente criar um protótipo para este projeto com ferramenta de prototipagem, podemos realmente levar este projeto para o próximo nível e criar um protótipo a partir dele. Então vamos em frente e fechar isso bem ali. Ah, e então vá em frente e abra. O painel de protótipos aqui, como você vê, nos dá uma pequena pré-visualização. Aqui temos o dispositivo do iPhone 11 pro porque nossos tamanhos de tela ou tamanhos de quadro estão combinando com o iPhone 11 sonda. então Eentãopodemos até mudar a cor de fundo do nosso modo de apresentação daqui. E agora que estamos no modo de prototipagem, certifique-se de selecionar o modo de prototipagem aqui. Ah, você pode realmente ir em frente e criar conexões entre páginas. E aqui está o que quero dizer, se você for até aqui, nós podemos realmente conectar este quadro aqui se nós selecionamos para, digamos, este quadro aqui. E agora esses dois quadros estão conectados. Ah, e se eu tocar em qualquer lugar neste quadro no meu modo de visualização, ele irá para esta página e eu posso demonstrar isso novamente indo para o modo de visualização. Agora, se eu tocar em qualquer lugar da página, ele me levará para essa página de tutorial. Claro, isso não é o que queremos neste caso. Neste caso, queremos realmente aplicar essa opção de protótipo para o botão aqui para que você possa fazer isso no modo protótipo também. Se eu voltar aqui, você verá que eu recebo um monte de opções diferentes, assim você pode escolher a animação para ser instantânea, dissolver inteligente, animar, entrar, sair eso. Dependendo de como você deseja que sua animação aconteça, você pode ir em frente e tuitar e brincar com os que estão aqui. Eu não vou entrar muito nos detalhes das diferentes animações, mas sinta-se livre para brincar com ele e ver o que se sente certo. E então aqui, você pode realmente ir em frente e mudar como você quer realmente acionar essa mudança paga ali , seja no topo, que é o que temos originalmente ou no arrasto. Então, se você está arrastando algo na tela enquanto paira ou pressionando um monte de outras opções, aqui está bem, você pode usar a tecla delete para realmente se livrar de conexões de protótipo aqui e então Agora o que queremos para fazer é realmente criar uma conexão protótipo entre o nosso mas aqui e os passos tutorial e, em seguida, conectar esses botões para ir para o próximo passo tutorial e assim por diante. E a partir daqui, queremos, é claro, saltar para é claro, a nossa página de pagamento aqui e da nossa página de pagamento para a nossa página de mapa e você começa a idéia. Então vamos em frente e conectamos as barras de cima. Aqui está também ele nos leva para a página correta como estamos clicando e talvez finalmente conectar este botão de logout de volta à nossa primeira página aqui e realmente criar um bom protótipo para nossos projetos aqui 4. Adição de conexões entre Frames: Tudo bem. Então, agora que temos uma idéia de como a apresentação de protótipos funciona, vamos em frente e criar um protótipo real a partir de nossos projetos. Então vá em frente e primeiro conecte isso, mas para conectar botão basta ir e clicar sobre eles neste pequeno círculo no meio. o Éoque permite que você vá em frente e conecte-se a telas diferentes. Então vamos fazer isso. E então vamos em frente e conectar nosso botão de login, também. A praia pedido aqui porque não temos um cadastro com e-mail ou Senado, mas opção Google aqui ou projetar nossa página, não vamos se preocupar com isso. Então vamos em frente e criar essas duas conexões aqui por agora e depois daqui. Queremos que este botão aqui nos conecte ao tutorial. Passo dois página e, em seguida, o botão aqui para conectar-nos à história vai Passo três página. E, finalmente, estou apenas clicando duas vezes aqui para selecionar botões. Quero que esta página me leve ou este botão para me levar para o ano base de pagamento na página de pagamento. Eu quero ir em frente e conectar o meu no tribunal, mas em dois que a minha página. E então o salvamento endereçado finalmente, ao meu pedido baseado aqui. E então temos a conexão configurada aqui. Agora vamos em frente e selecione nossa página de solicitação aqui e, em seguida, selecione a guia são do perfil aqui. Queremos ir em frente e ir para a página de perfil e nossos serviços para a página de serviços, e teremos que fazer isso nas outras páginas também. Também aqui na barra superior para a página de perfil, queremos solicitar para nos levar de volta para aqui serviços para nos levar para ouvir. E então, por último e aqui queremos perfil para nos levar aqui e pedir para nos trazer aqui. Certifique-se de selecionar toda a caixa de toque aqui. Caso contrário, pode ser difícil clicar. Acho que temos tudo conectado aqui. A única coisa que estamos faltando em termos de conexão é esta página de mapa aqui ou esta seção de mapa aqui. Vamos seguir em frente e apenas vincular isso aqui novamente para que o usuário possa tocar e alterar seu endereço. Agora vamos em frente e apresentar. Isso aqui pode levar um segundo para carregar aqui. Mas uma vez que você está aqui, podemos fazer o tutorial. E isso funciona. Próximo. Legal. Então, só duas coisas que eu vou consertar aqui, uh, vamos em frente e apagar essa conexão e realmente ir em frente e mudar o botão feito para realmente voltar para o nosso dispositivo e página em vez disso. E vamos em frente e também conecte o botão de logout aqui também. A página de login aqui e, em seguida, nossos pagamentos, mas para ir para esta página de pagamento no perfil, e então nós vamos conectar o mapa para o mapa aqui é baixo. E agora acho que temos tudo conectado corretamente. Vamos em frente e fazer isso de novo. Assim que estivermos aqui, vamos testar o nosso tutorial. Passo um, navegue para solicitar a escola. Três roupas limpas. Incrível. Isso nos leva de volta aqui. Fazemos login. Isso nos leva até aqui. Isso é muito legal. Você vai para a nossa página de perfil, podemos ir para os nossos serviços. Podemos até voltar ao nosso pagamento aqui. Agora, isso vai nos levar através da minha página novamente e nós podemos realmente sair daqui uma onda que iria nos bloquear fora. Então eu acho isso muito legal. Fizemos um protótipo do nosso projeto aqui, então vamos fazer uma pausa rápida e, na próxima lição, vamos voltar e ver como podemos realmente adicionar conteúdo de rolagem a ele. 5. Rotulagem em protótipos: Muito bem, nosso protótipo funciona, mas há um pequeno problema aqui. Na verdade, não podemos usar qualquer conteúdo que percorra ervas. Então, isto. Ouça, vamos aprender como podemos aplicar conteúdo inescrutável. Só quero te mostrar uma coisa nos serviços. Vamos em frente e tornar esta página mais longa. Vamos voltar ao nosso modo de design aqui. Então, primeiro, vamos em frente e certificar-nos de que a nossa página de serviço aqui tem as restrições certas. Quando fazer esquerda, direita e centro para todas essas opções aqui, e então este deve ser esquerda e direita. E no fundo em breve. Nosso quadro deve ser responsivo. Na verdade, para estes, queremos fazer topo em vez de centro. Legal. Então agora minha página de serviços deve ter um bom, restrições agradáveis se aplicam a ele. Então tudo o que eles querem fazer aqui é realmente ir em frente e esticar nossa página de serviços. E então vamos em frente e apenas, hum, selecionar tudo isso e usar o comando D para fazer outra cópia. Basta colocá-los aqui e então vamos em frente e apenas certifique-se de que nossa torneira ou está em cima de tudo isso. Deve ser. Então, agora, se eu voltar para o meu protótipo meu modo de apresentação aqui e ir para a guia Serviços. Você verá aqui que algo estranho está acontecendo. A minha barra de abas está na parte inferior. No entanto, isso deve permanecer na página, não importa como você rolar. E também a mesma coisa para a minha barra de navegação aqui na parte superior e nas outras páginas. Isso não é um problema, porque não vamos sair da tela. Não há rolagem aqui. Ah, mas aqui porque temos uma opção de pergaminho. Agora vemos que algumas das coisas aqui podem ser problemáticas, mas calculamos que isso lhe dá a capacidade de ir em frente e realmente bloquear as coisas no lugar. Então, se você ir e selecionar sua barra de status e, em seguida, mantenha a tecla Shift e selecione sua navegação e também as opções de topo aqui, vá em frente e marque esta caixa onde diz posição fixa ao rolar. E então agora, se você ir em frente e entrar em modo de apresentação novamente Agora você vê, nós não temos mais esse problema. E nós estamos rolando em Lee nesta opção de lista aqui. Claro, o único problema com isso é que alguns dos o único problema com isso é que alguns dos textos aqui estão escondidos. Então você sempre pode ir em frente e adicionar talvez um pouco de espaço em branco ou um retângulo branco abaixo da última opção aqui. Nós não vamos fazer isso aqui juntos, mas sinta-se livre para fazer isso como um exercício para si mesmo. Uma coisa que você pode notar em nosso modo de apresentação aqui é que não há nenhum passeio entre as lojas ou os cartões da loja aqui agora, Então vamos em frente e adicione isso para vamos ir em frente e fechar isso. Voltar aos nossos projetos, a fim de adicionar opções de rolagem horizontal aqui para esses cartões, precisamos ir em frente e realmente fazer thes seleções airframe. Então vamos em frente e arrastar isso para fora daqui. Então vamos em frente e realmente selecionar todos os meus cartões de loja aqui. E então podemos usar a opção Command G para enquadrar essas seleções e, em seguida, ir para a ferramenta de protótipo e, em seguida, a partir do comportamento de estouro, escolher rolagem horizontal. Mas também precisamos ir em frente e mudar o tamanho deste quadro para corresponder ou quadro pai aqui, e então agora, se eu ir em frente e entrar no modo de apresentação agora, podemos rolar entre essas opções. No entanto, isso não é muito ideal agora, porque , ah, nós fizemos este maior porque é o que estamos olhando. Então, idealmente, em um protótipo real, você gostaria de redimensionar as outras cartas para se tornarem maiores e menores como você as tem no quadro aqui. Mas novamente, esta ferramenta é apenas para criar algum protótipo básico que podemos mostrar, também. Talvez clientes ou colegas apenas testem nossas idéias para o design aqui. Então, uma coisa que eu quero mencionar quando você está no modo protótipo, você verá este pequeno ícone aqui, que essencialmente representa qual será a primeira página do seu protótipo. Então, se você quiser mudar isso e realmente tem esta página de solicitação, digamos ser sua página principal para o protótipo. Você pode fazer isso. E agora, se eu entrar no modo de apresentação, ele começará automaticamente nesta página em vez da página de login. Ou se você ir em frente e fazer essa mudança de volta para a página de login aqui, ele vai realmente mostrar a página de login aqui como meu primeiro quadro. Legal. Então isso é prototipagem para nós. E a próxima lição nós vamos realmente ir em frente e exibir este protótipo em umdispositivo móvelreal dispositivo móvel 6. Testando em um dispositivo real: Tudo bem. Então, na última lição, aprendemos como podemos realmente criar protótipos e visualizá-los aqui mesmo no nosso mapa de figos . Até agora, temos sido capazes de apresentar nossa simulação aqui e a área de trabalho de Sigma. Mas e se você quiser realmente ter uma boa idéia para o seu protótipo em nosso aplicativo móvel real ? Podemos simplesmente fazer isso indo para o modo atual aqui, e eu estou clicando no protótipo de compartilhamento. Então, a partir daqui, podemos realmente copiar um link e, em seguida, movê-lo para o nosso dispositivo móvel para que você possa enviá-lo por e-mail para si mesmo ou enviar uma mensagem para si mesmo. Então, como você pode ver aqui, você pode apenas ir até o safari colar esse link lá, e então você pode realmente ir em frente e visualizar seu protótipo Aqui está Bem, hum, embora seja em ah site interface ano, para que não pareça móvel. Não parece tão bom e limpo como queríamos. Veja, todas as páginas aqui funcionaram bem, mas a figura realmente tem um aplicativo também. Então, se você for para a loja de aplicativos, hum, e então vá em frente e vá em frente e procure pelo espelho de figo MMA e então o primeiro aplicativo lá que você vê Vá em frente e baixe isso. Então, uma vez que você abrir o aplicativo, Bob, você só precisa fazer login com a mesma conta que você está usando para seus projetos e figo MMA. Depois de fazer login, você deve ser capaz de ver seu aplicativo de uma maneira realmente agradável protótipo. E se você está apenas projetando quadros únicos, você também pode ver suas obrigações. Hum, este figo mãe, seu aplicativo realmente nos ajuda a um protótipo e navegar nossos projetos enquanto estamos projetando eles. A vida. Mesmo se você estivesse projetando um único quadro e quisesse vê-lo ao vivo em seu aplicativo, você poderia simplesmente manter seu telefone ao lado do computador e começar a projetar e ver essas mudanças ganharem vida na figo. Mãe, você está apus Bem, então essa é outra maneira que você pode realmente navegar na sua pré-visualização aqui para seus projetos em seu dispositivo real. Muito legal 7. Compartilhando nossos arquivos: então compartilhar seus arquivos de figment, é super simples. Se você subir aqui bem ao lado de onde seu próprio avatar está, você pode realmente ir em frente e clicar no botão compartilhar a partir daqui. Você pode convidar alguém diretamente para entrar. Aqui está se você digitar seu e-mail e enviar um convite, ele irá enviar o link para eles. E a partir daqui, com base em quem você convidou, você pode realmente ir em frente e escolher que tipo de permissão eles têm, se eles podem apenas ver. Ou eles também podem editar os desenhos também. Então, se você está apenas enviando para um cliente, talvez você só queira que eles vejam. Mas se você estiver enviando para outro designer trabalhando neste projeto, você pode ir em frente e escolher editar para sua permissão. Tenha em mente que esta configuração pertence ao compartilhamento do link para que você possa realmente obter um link para o seu projeto que você pode dar a qualquer pessoa simplesmente copiando o link a partir daqui. E assim que você fizer isso, o link foi copiado para sua área de transferência. Então, apenas como um exemplo, eu abri ah Firefox página aqui e pressione enter uma vez que ele carrega, eu vou ser capaz de realmente ver o projeto e navegar por ele a partir daqui. Neste momento,não tenho permissão para editar ou ver nenhuma das camadas ou algo assim. Neste momento, Toda a conduta Oh é alternar entre as minhas páginas aqui e ver páginas diferentes e apenas navegar os projetos. Então, isso seria ótimo se você estiver enviando para um cliente para apenas compartilhar esse link com ele e então escolher a opção de exibição. Eu posso até ver outras pessoas atualmente nesta edição de documento obter. Está só a mostrar-me a minha aplicação de ambiente de trabalho. Aqui estar aberto é baixo e até mostra outras pessoas abertas nesta página. Você pode até mesmo ir em frente e apresentar os projetos a partir daqui, bem como se isso funcionasse exatamente como esperado. Então, novamente, você pode compartilhar seus projetos a partir daqui, e você pode até mesmo selecionar um quadro individual eso se, por exemplo, eu só quero compartilhar esta página de login aqui. Eu posso ir para Aiken selecionado e, em seguida, ir para compartilhar e, em seguida, escolher ligado ao quadro selecionado, que é escolhido automaticamente agora porque eu tenho apenas um quadro. Mas se você quiser compartilhar todo o projeto como fizemos antes. Vá em frente e clique em qualquer lugar fora do seu campus aqui, , e então você pode usar a parte, mas e eu vou compartilhar sua fama um arquivo com qualquer um que você quiser. Você é sempre mais do que bem-vindo para compartilhar seus projetos comigo. E ficarei feliz em entrar e deixar alguns comentários e comentários para você ajudar a melhorar seus designs. Agora, na próxima escuta, vamos explorar como você pode realmente trabalhar com equipes no MMA da Fig. 8. Trabalhando com equipes: Então, como mencionamos antes, Sigma é realmente poderosa em termos de trabalho com uma equipe. Então, se você quiser trabalhar com uma equipe neste projeto ou em qualquer outro projeto, na verdade novamente, você pode ir para a opção de compartilhamento aqui e, em seguida, digitar o e-mail dessa pessoa em. Eles vão ter um link onde eles podem realmente trabalhar com você neste projeto. Mas antes de fazermos isso, digamos que você esteja trabalhando com uma equipe em vários projetos e queira realmente configurar essa equipe para vários projetos em seu MMA figo. Então, para fazer isso, primeiro temos que ir para a falsa minha página inicial que eu recebo no aplicativo da Web. Você só tem que ir para a opção de menu e escolher voltar para os arquivos. E depois daqui. Se eu descer aqui, verei que há uma opção para criar uma nova equipe, então é isso que vou fazer. Ele vai pedir-lhe para dar a sua equipe e nome. Então vamos imaginar que estamos trabalhando com uma equipe de canguru limpa neste projeto. Crie uma equipe e, em seguida, você pode ir em frente e adicionar seus colaboradores a partir daqui, simplesmente colocando seus e-mails em. Então vou em frente e convidar um dos meus colegas para se juntar a mim neste projeto. Então eu vou colocar o e-mail deles aqui. Vá em frente e continue. E agora ele vai pedir que você escolha seus planos de equipe. Então, se você está trabalhando com várias pessoas, um, você pode querer ir com uma planta profissional ou organizacional, mas o plano gratuito realmente dá acesso a até dois editores e três projetos. Então, vamos em frente e escolher este motor de arranque por enquanto. E então temos uma equipe aqui onde podemos realmente atribuir o logotipo. Podemos mudar o nome e a descrição e tudo aqui também. E você pode até adicionar mais pessoas à sua equipe a partir daqui. Uma vez durante sua equipe, você pode ir em frente e criar um novo projeto. Aqui está então vamos em frente e criar um projeto. E vamos chamá-lo de simulação IOS. E então você pode escolher que tipo de nível de permissão as pessoas da equipe de canguru limpo terão para que eu possa escolher. Eles podem editá-lo ou eles podem vê-lo, ou você pode fazê-lo convidar só eu vou deixá-lo em todos no Clean Kangaroo pode editar, e eu vou ir em frente e criar projeto. E uma vez que eu criei o meu projeto, eu posso criar um novo arquivo foram apenas arrastar arquivos do lado de fora para aqui. Ou já que já temos um rascunho para o projeto CANGURO CANGURO CANGURO CANGURO CANGURO aqui, vou arrastar isto para o meu projeto Marca . E agora, se eu entrar aqui e abri-lo, nós temos acesso a ele aqui, e então meu colega também será capaz de participar final neste projeto. E agora, daqui, você pode até ver um pequeno avatar que eles se juntaram no projeto. Então, agora, enquanto eu estou fazendo meus próprios ajustes no design, eles podem entrar e começar a fazer alterações em outras páginas tão baixas. Então, bem, eu estou aqui, talvez fazendo minhas próprias edições. Vão trabalhar no projeto comigo em outra página. E eu posso ver o trabalho deles aqui se eu clicar no avatar deles aqui em cima. E agora, a partir daqui, posso vê-los funcionar. A vida é assim, se você tem várias pessoas trabalhando com você isso, mas você pode ver exatamente quem está fazendo quem está trabalhando no que agora. Observe-os também. E então você pode até ir em frente e deixar comentários para eles também. Então, se você se lembra que falamos sobre esta ferramenta comum que você também pode realmente dizer, apenas pressionando C no seu teclado, Eu posso ir em frente e deixar um comentário aqui e dizer, Talvez possamos dizer-lhes quando o pagamento será cobrado em. Deixe esse comentário para eles e eles serão capazes de realmente responder a mim uma ondulação diretamente no figo MMA novamente com um banquinho comum. Você pode ir a qualquer parte da página e deixar um comentário para essa parte da página s para que os outros designers saibam exatamente do que você está falando. Se você também tocou nesta opção de comentário aqui do lado, você também pode ver todos os comentários e navegá-los e deixar respostas e rapidamente saltou para os comentários que você deseja talvez responder ou para ver as respostas que sua equipe fez Então, novamente, muito poderoso. E ele pode usar a tecla de escape para sair dessa ferramenta comum. Legal. Então isso são equipes para você e descobrir novamente. Ele é super poderoso e realmente ajuda você a se tornar mais produtivo com seus designs e com em sua equipe. 9. Usando Overlays para tutorial: Tudo bem. Então, até agora, conseguimos montar um protótipo bastante básico que funciona muito bem. E testamos tanto em Sigma quanto em nossos dispositivos móveis reais também. Então agora vamos levar as coisas um pouco mais adiante e explorar algumas das ferramentas mais avançadas que temos acesso na prototipagem para seus próprios projetos de design e protótipos é bem, eu encorajo você a usar algumas dessas ferramentas para realmente fazer seu protótipo olhar e sentir, Riel. Então a primeira coisa que vamos fazer é realmente ir em frente e explorar quais sobreposições são na prototipagem. Vamos fazer isso criando uma nova maneira de percorrer o nosso tutorial. Passo 12 e três aqui. Então, como você pode ver aqui, nós conectamos essas três páginas, um, um, usando os próximos botões e, em seguida, usando nosso tutorial, mas em nossa página de login. Mas o sinal também leis que você deve fazer é realmente aberto e sobreposto no topo da página que já está aberta. Então, essencialmente, isso nos daria uma maneira melhor de realmente apresentar esses cartões tutorial, vez de apresentar novas páginas para cada um deles. Então, para demonstrar que vamos continuar e realmente duplicar cada um desses cartões de emoção fora dessas páginas em, em seguida, colocá-los em algum lugar aqui em cima. E então vamos em frente e mudar nossas conexões para passar por aquele cartão tutorial ali. Então, primeiro as coisas, vamos em frente e selecionar nosso tutorial. Passo uma página cartão tutorial selecionado. Certifique-se de ter tudo selecionado dentro da nossa instância de cartão tutorial aqui. E então, enquanto se mantém velho, você pode ir em frente e arrastar uma cópia para fora daqui, que é o que queremos fazer. E eu vou em frente e faço a mesma coisa para dois. Ao Rocard. Passo dois, arraste uma cópia até aqui. E por último, mas não menos importante, vamos em frente e fazer a mesma coisa para o nosso tutorial. Passo três cartas. E eu vou apenas ir em frente e ter certeza que este ar está alinhado corretamente apenas para mantê-los organizados. Tudo bem, então primeiro as coisas, vamos em frente e selecionar esta conexão principal no botão tutorial aqui. Deixe-me ir em frente e ampliar um pouco aqui. Legal. Então, em vez de irmos para cá, vamos apagar esta ligação específica entre o botão de emoção e esta página. Basta selecionar esta conexão e, em seguida, excluir rapidamente no seu teclado que irá em frente e apenas remover essa conexão. E então vamos em frente e arrastar uma nova conexão para este tutorial card, o primeiro 1 aqui que temos e agora no lado direito, em vez de navegar para eu vou ir em frente e selecionar, abrir demais e novamente que vai nos deixar ficar na página que estavam em e apenas ir em frente e abrir. Estes tem sobreposições na parte superior da página, e você verá como isso funciona em apenas um segundo. Em seguida, o que queremos fazer é apenas ir em frente e vincular esses botões corretamente também. Vamos em frente e selecionar este 1º 1 aqui. Vamos remover esta conexão para o botão e vamos em frente e dragão nova conexão para o próximo passo. E em vez de navegar para, queremos ir em frente e realmente estranheza para trocar. Certifique-se de selecionar isso, porque caso contrário, a sobreposição não funcionaria corretamente. Vamos em frente e fazer exatamente a mesma coisa aqui. Vamos selecionar esta conexão e excluir aqui e arrastá-lo para esta página aqui e novamente. Você quer mudar para parar com isso. E por último, para este botão que temos aqui o botão feito em vez de navegar de volta para esta página? Porque já estamos nesta página e acabamos de abrir e excessivamente, podemos realmente alterar Navegar para apenas fechar sobreposição e dobrar praticamente fechou isso aqui mesmo. Então não vamos em frente e testá-lo pressionando o botão do modo atual aqui. Achamos que é o segundo para atualizar, e então vamos em frente e clicar em nosso cartão tutorial, mas em seguida, como você pode ver, o cartão editorial está aqui e tudo funciona como esperado. Não a única coisa aqui que você deve ter notado é que nós não temos o mesmo fundo escuro . E assim as sobreposições tipo de mistura com o fundo. Vamos em frente e trabalhar nisso agora, então vamos fechar isso e então o que queremos fazer é ir em frente e selecionar este primeiro cartão aqui, selecionar a conexão aqui que temos, e depois aqui ele nos dá um monte de opções, que vai passar. Então, em primeiro lugar, você terá a opção de selecionar onde você quer que o excessivamente esteja. Então, por exemplo, se você tiver um menu em vez de um cartão aqui que você deseja mostrar, você pode selecionar algo como o canto superior esquerdo. Ou se você tem algo que vai apresentar de baixo, você pode fazer o centro inferior. Então, essas opções funcionam bem para, como, menus ou barras de guias e coisas assim que você deseja abrir temporariamente em sua página. E então você tem duas opções aqui. Um está fechado. Ao clicar no lado de fora. Vamos em frente e selecionar isso, e explicarei em segundo o que isso faz. E então vamos em frente e adicionar fundo atrás da sobreposição, que é o que queremos. Aqui, nós damos-lhe a opção de cor, que queremos apenas deixar-nos preto. E então nós queremos ir em frente e disse que eles vão pagar cidade para Vamos escrever 45%. Então agora, se eu apresentasse vai notar duas coisas novas aconteceram aqui. Vamos em frente e abrir o cartão tutorial. Então agora, como você pode ver, eu tenho um fundo um pouco escuro. Agora, hum, você pode ir em frente e torná-lo mais escuro se você quiser, mas eu acho que isso é muito bom por enquanto. Impressione a seguir. O próximo que funciona. E então, se você se lembrar, selecionamos uma opção que nos permite fechar o excessivamente tocando no exterior. Então, essencialmente, o que isso significa é que se você tocar em qualquer lugar fora do excessivamente visível fechar automaticamente . Então vamos tentar isso aqui. Vamos clicar estavam aqui, e isso funciona também. Então agora o usuário tem a opção de sair do tutorial a qualquer momento. Mas apenas clicando no lado de fora, ou eles podem passar por isso e rápido feito como de costume. Isso é muito legal. E simplificou nosso registro de trabalho. Você pode até mesmo ir em frente e remover estes tutorial Passo um passo dois passos três páginas. Mas, por enquanto, não vou fazer isso. Então é assim que você utiliza sobreposições na prototipagem 10. Links de abertura: Quero te mostrar outra coisa legal que você pode fazer com prototipagem. Então, digamos que para a página de login aqui, queremos ir em frente e vincular este botão aqui, ou estes termos de serviço e política de privacidade para realmente abrir uma página da Web quando um usuário clica nela. Normalmente, isso é o que acontece em muitos aplicativos. Quando você clicar neste link, ele irá em frente e abrir seus termos de serviço e política de privacidade. Agora você pode ir em frente e separá-los em dois links diferentes, se você quiser. Mas, por enquanto, com o propósito da lição, vou apenas conectar isso a um link. Então, o que você quer fazer é ir em frente e selecionar o texto e certificar-se de que você está no modo de prototipagem . Vamos em frente e adicionar uma interação de no toque. Então, novamente, o que isso significa é que quando o usuário toca neste botão ou no texto aqui, então faça algo, e neste caso, em vez de navegar ou fazer qualquer outra coisa, o que queremos selecionar é link aberto, e o que isso nos permite fazer é realmente colocar em um U R L aqui de onde uma página da web em uma janela separada se abrirá para onde o usuário será levado. Então, neste caso, eu acabei de colocar no Google Dot com, mas você pode substituí-lo por qualquer projeto em que você está trabalhando, hum, realmente aplicá-lo a quaisquer casos de uso. No seu caso, vamos apresentar isso. E agora, se você quiser testar isso, basta clicar nele aqui e você notará que outra página será aberta. Vamos colocar você clicar e continuar para esse link. Eu sei que isso não é um super ideal para um protótipo, mas é realmente a coisa mais próxima que podemos chegar neste momento de abrir links diretamente de um protótipo. Muito legal. Quero mostrar-lhe uma última coisa nesta lição também. Vamos ver você decidir em algum momento apresentar seu protótipo em um dispositivo diferente. Você pode simplesmente ir em frente e clicar em qualquer lugar fora da tela onde há uma área vazia, e depois do lado aqui novamente. Você pode simplesmente ir em frente e clicar em qualquer lugar fora da tela onde há uma área vazia , Enquanto estiver no painel de prototipagem, verá que tem uma lista de dispositivos aqui. Eles podem selecionar, Então você definitivamente ir em frente e brincar com isso, hum e até mesmo ir em frente e mudar o modelo do seu iPhone ou dispositivo que você tem. Então você pode mudar a cor deste iPhone, por exemplo, para verde meia-noite ou prata e cinza espacial. E você pode até mesmo ir tão longe quanto mudar o fundo em seu protótipo para talvez uma cor mais clara também, hein? Para que quando ele apresentar, ele será bastante exclusivo para o seu projeto. 11. Adição de animações: Uma coisa que você deve ter notado é que até agora temos usado a animação instantânea, que essencialmente significa alternar instantaneamente entre páginas ou navegar entre páginas ou sobreposições abertas em vez de ficar mais complexo e adicionar animações a ela. Mas o que é ótimo em Fig Mayes que você pode adicionar algumas animações realmente realista e agradável para seus projetos também? Então é isso que vamos explorar nesta lição. Então a primeira coisa que eu quero mostrar é que você pode realmente ir em frente e selecionar a opção tutorial aqui onde nós criamos uma conexão para abrir um excessivamente e então você pode ir em frente e selecionar a animação, também. Vamos nos mudar. Então, que movimento faz é isso? Em vez de apenas mostrar essa sobreposição instantaneamente no topo da página, vamos avançar e realmente animá-la em nossa página, então mostraremos como isso funciona. Em um segundo 1º, vamos passar por um monte de opções aqui. Ao selecionar o movimento, você tem um monte de opções em termos de onde o objeto será animado, então você pode fazer do lado direito para o lado esquerdo da esquerda para a direita, cima para baixo e de baixo para cima. Então, para algo assim, eu acho que ele comprou para o trabalho de topo muito bem. E então eu não vou entrar muito nos detalhes do que as opções do significa. Mas, essencialmente, é assim que a animação se desenrolará. Se você selecionar temporada, a curva de animação será mais suave na abertura. Se você selecionar atenuar, a animação será mais suave no fechamento ou no final dessa animação. E então, se você selecionar ele está dentro e fora, ele irá em frente e realmente fazer uma transição suave para dentro e uma transição suave para fora linear apenas irá em frente e mantê-lo muito básico. Então este é o tipo mais básico de animação que você pode ter. Eu acho que o mais bonito é o fácil de entrar e sair porque ele vai criar. É uma transição muito suave. Ambas as paredes da forma estão chegando, e quando ela está parando e diminuindo, esta é a quantidade de tempo que levará para que a animação seja concluída. Então, essencialmente, se você quiser diminuir a velocidade de uma animação, você pode apenas aumentar esse número. É representado em segundos Mili. Então agora está em 300 milissegundos, então 1000 milissegundos seria um segundo. Então isso é tecnicamente 1/3 de segundo. Por que não mudamos isso para meio segundo? Acho que para algo assim, ficaria melhor e você notará de novo. Aqui em baixo, você terá uma espécie de animação de exemplo tão baixa. Se você ir em frente e pairar e clicar sobre ele, ele irá repetir e mostrar-lhe como será essa velocidade. Então, por um segundo ou 1000 milissegundos, ele irá reproduzir uma animação como esta. E se você fizer 500 milissegundos, faremos uma animação um pouco mais rápida, então é realmente ver essa inação. Então, agora, se você jogar isso, você verá que a carta vai chegar de baixo muito bem. Posso passar por isso e desapareceria do fundo de onde veio. Muito legal, muito suave, muito realista. 12. Transições de páginas: Tudo bem, então agora temos uma boa animação aplicada para estão excessivamente aqui. Vamos em frente e criar algo agradável para o resto das páginas. Aqui está bem, então parece um pouco mais realista e interativo. Então, vamos selecionar nossa página de login aqui. E então o que eu quero fazer é criar uma nova conexão a partir da inscrição com e-mail, mas aqui para a minha página de pagamento. E aqui eu quero realmente ir em frente e selecionar. Empurre. Essencialmente, o que isso vai fazer é apenas ir em frente e leve da página oito página ser assim desta página, ele vai em frente e deslizar para esta página, que é o que nós queremos. Normalmente, em um caso como este, então queremos substituir este em vez de instantâneo. Queremos fazer empurrar também e novamente que vai fazer a mesma coisa e a partir do mapa. Coloque-o aqui, vá em frente e selecione esta conexão aqui entre o endereço de salvamento e uma praia de solicitação aqui e, em vez de instantâneo, o que tentamos, entrar e fazer a partir do topo. Vamos tentar isso e ver como fica. Eu acho que para o resto das páginas parece bastante realista. Então não precisamos mudar nada por lá. Outra coisa que você pode fazer como um exercício é ir em frente e criar mais conexões e mais animações entre, Digamos, o mapa, mas aqui e o pagamento no botão de logout Zaslow. Então deixe isso como um exercício para você fazer. Vamos em frente e agora jogar isso. Então, agora, se fizermos a inscrição com e-mail, ele vai deslizar para essa página, como você pode ver, vai fazer no cartão muito bom salvar endereço, e ele vai nos levar para esta nova página aqui. Pensando melhor, talvez seria melhor se você se mudasse de baixo para cima. Então eu vou em frente e apenas fazer essa mudança. E realmente, com coisas como esta é tudo sobre experimentar e tentar coisas diferentes, hum, não há tipo de resposta 100% certa ou errada aqui. Isso é realmente o que parece mais realista e mais fácil de usar. Eu diria que agora, se eu salvar endereço, eu acho que fica melhor. E entre as minhas outras páginas, ele funciona como esperado, bem legal 13. Mapas interativos: então esqueça que vai ser bom para mostrar-lhe uma maneira realmente cozido. Você pode transformar um mapa ou uma imagem de um mapa como este em um protótipo real que pareça e pareça real. Então, para fazer isso primeiro como sempre, certifique-se de que você está no modo protótipo aqui e, em seguida, vá em frente e selecione o mapa. Retângulo aqui. Então esta opção aqui, onde você vê retângulo, que representa o mapa aqui, e eu vou em frente e parede segurando Shift e Ault, Hum e é importante que você faça isso juntos. Então segurando, mudando o culto, vamos seguir em frente e segurar o canto aqui e apenas torná-lo um pouco maior. Não muito, porque caso contrário, distorcerá a imagem. Eu, isso é bom. Então agora você quer fazer é ir em frente e selecionar o quadro do mapa aqui todos juntos. Vá para o local aqui, lado direito aqui, onde diz comportamento de transbordamento. Vamos mudar isso para rolagem horizontal e vertical, e você verá como isso funciona em apenas um segundo. Mas antes de fazermos isso, não queremos que nada além do mapa se mova aqui, então não queremos que a busca e os botões estejam se movendo. Vamos em frente e adicionar algumas restrições a todos esses elementos. Então algo que você pode fazer é ir em frente e selecionar a barra de status aqui e, em seguida, enquanto mantém os turnos como a barra de pesquisa, em seguida, selecione o ícone do cursor aqui e também o endereço de gravação. Acho que é tudo o que queremos ficar nesta página. Então agora vá para o painel de design e eu vou em frente e selecione esta posição fixa opção ao rolar. Então, agora, se você apresentar este protótipo, você verá que eu vou ser capaz de realmente rolar ao redor e o mapa e parece bastante realista . Funciona. Então sim, é assim que você cria um mapa interativo usando a ferramenta de prototipagem fig mas. 14. Jogar GIFs: Eu pensei que um protótipo sendo curso que não seria completo até que eu possa mostrar-lhe uma maneira realmente em GIFs animados em seu projeto para realmente fazer seus projetos se sentir modernos e completos. Então, é claro, você pode arrastar qualquer Jif de fora de sua pasta de downloads ou em qualquer outro lugar para seu projeto de figura, e você pode ir em frente e colocá-lo exatamente como uma imagem em qualquer lugar na tela. E ele vai apenas ir em frente e trabalhar, como esperado quando você ir em frente e apresentá-lo em uma ferramenta de animação realmente útil que eu encontrei não muito tempo atrás. Olhos aqui chamados “Sangrento”. Ele é realmente projetado pelo Airbnb, e como eles explicam, ele permite que você facilmente adicionar animações de alta qualidade a qualquer aplicativo nativo. Claro, aqui estamos apenas a adicioná-lo a um protótipo. Mas você entendeu a ideia. Ele realmente vai nos ajudar a criar mais interativos em protótipos reais fora de Sigma. Eu não vou passar pelo processo de inscrição, mas ah, você vai precisar criar uma conta. Se você quiser usar Lottie, eles têm um plugue em figo ma, então você pode ir em frente e procurar arquivos Lottie no plug ins toque e, em seguida, vá em frente e instalá-lo. E novamente, se você é completamente novo para figo MMA e você quer aprender todas essas coisas, tais como como como usar plugins e o que eles podem fazer para o seu projeto, eu definitivamente recomendo verificar meu celular completo. Você é você X cursos baixo. Mas para o propósito desta lição, vamos em frente e instalar esse plug in. Então, se é a sua primeira vez em plugins Soling, basta ir para o botão plugins gerenciados aqui e, em seguida, procurar por arquivos legais e ir em frente e instalá-lo. Uma vez instalado, você pode ir em frente e encontrá-lo aqui. Então eu tenho uma tonelada de plugins aqui. Adoro usar plugins porque torna a minha vida mais fácil. Em. Como você pode ver, eu posso encontrar um monte de arquivos aqui. Vou em frente e abri-lo. E então, novamente, se você não tem nenhuma contagem, ele pode pedir para você ficar aqui. Então, basta fazer uma pausa aqui. Se você precisar fazer login e voltar para a aula e, depois, uma vez que você estiver de volta, você pode ir para a pesquisa. E como você pode ver, eles têm um monte de gifs animados bonitos que você pode usar em seu projeto, que é super legal. Então, só para fins de demonstração , vou escolher um desses Jeffs aqui, então não sei. Vamos fazer este aqui. Ele parece legal. E certifica-te de que te convertes a Jeff aqui. Então, agora vamos em frente e selecionar nosso quadro de pagamento aqui. Eu quero ir em frente e apenas colocá-lo aqui apenas para demonstrar e, em seguida, ir em frente e clique em dois Fig. MMA. E como você pode ver, ele adicionou bem ali. Então agora ele poderia simplesmente ir em frente e acrescentou, em qualquer lugar que você quiser, vamos ver. Vou colocá-lo aqui e você pode redimensioná-lo se você nos quiser bem para que possamos fazê-lo em tela cheia . Podemos ir tão longe quanto cortá-la. E se você quiser cortá-lo, você pode fazê-lo a partir daqui. Agora certifique-se de não cortar qualquer parte da animação. Vamos em frente e apresentado. E agora, como podem ver, vão em frente e tocar aquela animação aqui. Não é super relevante neste caso, mas se você tiver uma página, por exemplo, onde você deseja explicar algo ou mostrar seus preços ou anunciar algo, adicionar um bom assim pode ser uma boa maneira de impressionar seus usuários. Legal. Portanto, sinta-se à vontade para brincar com isso e adicionar animações diferentes ao seu design enquanto trabalha com protótipos. 15. Animação inteligente: Tudo bem. Então, antes de encerrarmos o curso de protótipos aqui, eu quero mostrar mais uma coisa realmente legal em figo MMA, usando o protótipo para e que é chamado inteligente, animar, inteligente, animar realmente permite que você crie algumas dessas transições realmente suaves entre uma página que parece semelhante ou entre diferentes estados da mesma página. E então o que isso realmente significa é que digamos que você tem uma página e você quer mostrar algo expandir ou colapsar. Esses seriam ótimos exemplos de como você pode usar odedo do pé inteligente e animado, dedo do pé inteligente e animado, fazê-los parecer riel e se sentir real para os usuários usando a ferramenta de protótipo. Então, para demonstrar, eu vou realmente criar outra cópia da página de solicitação aqui. E então o que vamos fazer é criar um estado onde se o usuário tocar, digamos que este cartão da loja Jax Laundry aqui, ele vai expandir e mostrar talvez mais detalhes ou uma descrição ou algo assim. Isso é bastante típico em um aplicativo como este, onde você tem talvez vários cartões que você está olhando porque ele permite que você navegue informações mawr . Digamos que queira saber mais sobre essa loja de lavanderia Jax. Talvez ler algumas das classificações, aprender mais sobre os preços e assim por diante, mas eles mantêm isso simples. Vou apenas criar outro estado deste cartão e, em seguida, adicionar talvez um texto de descrição para ele também. Então o que eu quero fazer é ir em frente e duplicar esta página de pedidos aqui apenas segurando o culto e depois arrastando uma cópia para cá. Isso é bom. Bem ali. Então agora vamos para esta página aqui. Sinta-se livre para acompanhar, se quiser. As primeiras coisas primeiro. Eu vou mover Thies para guardar cartões fora do caminho apenas segurando o turno e fazendo a tecla de seta várias vezes a mesma coisa aqui. Agora, uma coisa que eu realmente quero enfatizar aqui é que se você quiser usar animate ou smart animate corretamente em sigma, você precisa ter certeza de que você mantenha as coisas na mesma camada e na mesma hierarquia aqui . Então, se você alterar as camadas aqui, a animação provavelmente não funcionará como você esperava. Já cometi esse erro várias vezes. Só quero ter certeza de que você não comete o mesmo erro e depois tentar descobrir qual é o problema. Então agora eu quero ir em frente e mover este cartão principal para aqui que eu estou olhando para o canto. Ou, na verdade, vamos talvez arrastar isso um pouco até aqui para adicionar mais espécies e depois ir em frente e mover isso para cima e eu vou em frente e segurar Shift e expandir isso por toda a largura. E vamos em frente e deletar isso. Escolha aqui o texto da sua loja de lavanderia e, em seguida, selecione o cartão aqui. Vamos voltar ao design e vamos em frente e esconder o tiro aqui. Não queremos isso no estado a não ser que eu vá adicionar um livro de texto clicando no chá e arrastando livros para cá. Eu não apenas digitando com a esquerda da linha. Esta é a loja de lavanderia do Jack. Fazemos o nosso melhor para manter os nossos clientes satisfeitos com a sua roupa suja. Estou escrevendo textos completamente aleatórios aqui. Então eu vou em frente e apenas separar o estilo do texto aqui. E selecionar corpo Carla 14 significa melhor para uma descrição, texto e apenas vai certificar-se de que ele está alinhado corretamente é baixo, e eu acho que tudo o resto parece bom agora novamente, você pode adicionar um monte de outras coisas abaixo disso mais tarde e talvez até mesmo fazer este pergaminho de ervas, se você quiser. Mas para manter a mesma pesquisa, vou fazer uma animação inteligente com o que temos aqui para que eu sinta que o usuário quer ler mais informações sobre a roupa do Jack. Eles podem apenas clicar nele, e então ele vai animar inteligente neste quadro aqui onde eles vão ler mais sobre. E talvez se eles superarem a imagem novamente, ela voltará para o estado. Então, como qualquer outra conexão, vamos em frente e selecionar este cartão aqui. Ir para o protótipo e eu criar uma conexão com esta página aqui e agora, em vez de uma animação instantânea que você quer escolher inteligente, animar, você vai ver figura dá-lhe um bom tipo de animação aqui para explicar o que inteligente animate faz tão baixo aqui é apenas colapsar ou expandir este cartão aqui apenas semelhante ao que estamos fazendo. Estamos expandindo este cartão para mostrar mais informações, então eu tenho facilitado entrar e sair selecionado por aqui. E então, em vez de 700 milissegundos, talvez você possa fazer 300. Hum, é melhor. Sirva a transição mais rápida por aqui. E então, finalmente, eu quero selecionar este protetor de porta aqui e então desenhar uma conexão nesta página aqui e então fazer a mesma coisa. Inteligente, animar. Eu não quero mencionar para a opção mais de um ano você pode selecionar navegar para e, em seguida, a mesma coisa aqui. Então, agora, se você apresentar, você verá que eu tenho meus cartões de lavanderia por aqui, e então se eu clicar nele, ele vai se expandir e me dar mais opções para ler. Se eu subir de novo, ele vai embora. Não novamente se você quiser criar uma transição de transações mais rápida porque eu acho que está um pouco lento agora, nós podemos fazer 200 milissegundos, e então para este também. Vamos fazer 200 milissegundos agora. Se ele testou, acho que parece muito bom. Legal. Então esse é um exemplo de um inimigo inteligente. Eu mesmo criei outro exemplo aqui, onde essencialmente vamos desta opção de perfil para esta aqui. Se eles clicarem no mapa aqui para que o usuário clique neste mapa aqui, ele iria em frente e expandir-se. E então eu penso rápido novamente, vamos para a página do mapa que tínhamos muito legal. 16. Animação de botões: Ok. Por último, quero mostrar-lhe como você pode usar o inimigo inteligente em botões também. Isso pode não ser muito relevante para um aplicativo móvel onde você realmente não tem um estado de foco para botões. Mas digamos que você esteja trabalhando em um aplicativo da Web e queira criar uma configuração de focalização ou status do mouse para seus botões. Hum, então você poderia definitivamente usar a animação inteligente para essa opção é baixa, hum, de social sobre a minha página de componentes aqui no meu projeto de grupo limpo pode. Então o que vamos fazer é ir em frente e primeiro encontrar esta barra de botão habilitada, hum, componente aqui. E então eu vou seguir em frente e apenas criar uma instância fora dela mantendo o velho e arrastando-o para longe. E vamos em frente e clique com o botão direito sobre isso e realmente desanexar instância e criar um novo componente fora disso porque nós queríamos olhar separado deste componente aqui, nós também renomeá-lo, mas na barra direta pairar assim. E então eu vou selecionar o fundo aqui, ou o fundo do botão, ir para o design e ir em frente e desanexado o estilo e fazer o preenchimento talvez um pouco mais escuro é tudo para que pareça que estamos pairando sobre ele. Então agora eu posso simplesmente ir para a opção de barra de botão habilitado. Ir para o protótipo e eu ir em frente e secar e criar uma conexão com este botão aqui e agora, vez de clicar, você quer ir em frente e selecionar enquanto pairar, e que vai fazer como você esperava enquanto você paira sobre o topo deste botão irá em frente e navegar para isso, mas em vez disso. E o que queremos usar é, claro, a opção inteligente e animada, modo que suavize a transição entre isso e isso aqui, e você verá como isso funciona em apenas um segundo. Mas primeiro, vamos em frente e fazer. Ele entra e sai, e acho que 300 milissegundos são bons o suficiente aqui. Então, agora, se você ir em frente e apenas selecionar o nosso botão, barra habilitada e fazer presente e, em seguida, como esperado , enquanto um hover, ele irá em frente e mudar de cor, e ele vai animar inteligente em que botão para frente barra hover componente aqui. Muito legal. Muito útil para um projeto como este. Então lá vai você. É assim que você aplica animações inteligentes em Sigma 17. Componentes interativos: Tudo bem, então uma coisa legal que eu quero mostrar na Figma e na ferramenta de prototipagem é que agora você pode realmente criar componentes interativos, o que significa que agora você pode criar interações entre componentes botões ou até mesmo cartões tutoriais diferentes com base em como os usuários interagem com ele. Número quatro, os componentes interativos foram lançados como um recurso. Você precisa criar várias páginas com estados diferentes desses botões. E isso significará ter muitos quadros duplicados apenas para mostrar seus componentes mudando entre eles. Mas agora é tão simples quanto criar um novo botão de variante e criar conexão entre essas variantes com base em como os usuários interagem com esse componente. Então, para o meu caso, vou mostrar como você pode realmente animar seu botão para como você pode realmente animar que, quando o usuário estiver tocando nele no aplicativo móvel, ele vá em frente e reflita essa guia com uma cor mais escura, que imita a aparência de um botão quando um usuário o pressiona, então ele dá algum tipo de feedback. Então, primeiro, quero dizer minha página de componentes aqui. Vou seguir em frente e selecionar os dois botões, assim. E então, no lado direito, vou avançar e combiná-los como variância. Agora, vá em frente e siga esta etapa se você ainda não o fez, para que tenhamos variantes desse botão. E vou prosseguir e renomear a propriedade 1 para state. Então, novamente, temos um estado de botão desativado, mas no estado e, em seguida, habilitado. E eu vou seguir em frente e, na verdade, duplicar este habilitado pressionando Command D. E vou criar um terceiro estado chamado tapped, assim. E pressione Enter ali. E para este botão de guia, vou clicar duas vezes e selecionar minha cor de fundo aqui. E remova este primário e mude-o para uma cor um pouco mais escura de um tom semelhante. Só para mostrar que esse botão está sendo tocado quando o usuário realmente toca nele no protótipo. Vamos seguir em frente e fechar isso e em frente para a guia Protótipo. E então o que você quer fazer é ir em frente e criar uma interação entre esse botão aqui, que é o estado ativado e a guia. Veja aqui. E você pode simplesmente fazer isso desenhando uma conexão como nossos quadros. Mas agora, com nossos componentes aqui em baixo, e no lado direito, teremos várias opções para que possamos fazê-lo ao clicar para que, quando o usuário clicar nesse botão, ele vá em frente e troque ou altere com esse estado grampeado. Ou podemos fazer arrastar enquanto paira, enquanto pressionamos. E se você tiver algum tipo de jogo que você está projetando, você pode usar o gamepad de barra de teclas, muitas outras opções também. Agora, para o nosso caso, queremos fazer enquanto pressionamos, porque isso significa que assim que o usuário tocar nesse botão, ele seguirá em frente e mudará para esse estado. E assim que eles soltarem, ele irá em frente e mudará de volta para o estado aqui. Agora, por padrão, você pode ter uma opção animate instantânea aqui. Então você definitivamente poderia fazer um instantâneo, o que faz mais sentido para essa opção aqui. Mas tenha em mente que você definitivamente pode fazer um animate inteligente se tiver coisas como caixas de seleção ou alternâncias ligadas e desativadas, onde você pode realmente mostrar uma animação à medida que o usuário clica nesses componentes. E você pode ver essa mudança em seu protótipo. Então, agora só para ver como isso funciona, vou para a minha página de maquetes. Vamos seguir em frente e executá-lo. Quero ir em frente e tocar em Login. E, como você pode ver como uma guia, ela seguirá em frente e mudará essa cor ou esse estado para esse estado. E então, quando eu soltar, ele irá em frente e retornará ao estado ativado, o que é incrível. Agora você pode fazer isso com todos os botões. Mas tenha em mente que, por exemplo, para este botão aqui, provavelmente é melhor criar outra variante para que tenhamos uma versão branca do nosso botão e, em seguida, uma versão de toque amplo do nosso botão também. Mas vou deixar isso como um exercício para você fazer. E, como você pode ver, essa nova interação funciona com todos os nossos botões. Contanto que eles sejam o componente de botão, ele irá em frente e funcionará em todas as minhas páginas e quadros na Figma, o que é lindo porque isso era muito difícil de fazer antes dos componentes interativos. Agora, é claro, você pode usar componentes interativos entre vários componentes diferentes. Não precisa ser apenas botão. Você pode usá-lo sempre que tiver uma interação com um componente que se repete em todos os quadros, como os botões. Vou lhe dar um exercício para fazer para os componentes interativos. E assim, na nossa página Serviços, normalmente, quando um usuário toca em uma dessas linhas em um aplicativo iOS, geralmente você mostra essa interação alterando a cor de fundo para uma cor cinza claro ligeiramente cinza. Então vou deixar isso como um exercício e faremos isso juntos na próxima palestra. 18. Solução de exercícios de componentes interativos: Tudo bem. Espero que você tenha acompanhado até agora e tenha sido capaz de criar que componentes interativos para nossos serviços surgiram aqui. Então, como mencionado na palestra anterior, em um aplicativo para iPhone ou em um aplicativo iOS, normalmente quando um usuário toca em uma linha em uma tabela como esta, ele seguirá em frente e mudará para uma cor ligeiramente diferente, geralmente cinza tardio, apenas para indicar ao usuário em qual linha exatamente ele está tocando. Então, agora, se eu tocar nas minhas linhas, nada acontecerá conforme o esperado. Mas se voltarmos ao nosso mock up e acessarmos nossa página de componentes, onde temos nossas linhas. Podemos ir em frente e criar uma versão de toque onde podemos mostrar esse feedback ao usuário. Então, vamos seguir em frente e clicar na lista de serviços e ir até a guia de design aqui. E vamos adicionar variados aqui. E iremos em frente e chamaremos de grampeado. Para este outro, o deixará como padrão. Vou apenas seguir em frente e clicar em toda a variante da lista de serviços e alterar essa propriedade que queria ficar. Então, sabemos para que serve isso. E agora, como mencionado, para essa cor de fundo, queremos ir em frente e apenas escolher uma cor cinza claro um pouco mais escura. Nada muito louco. Apenas para mostrar esse feedback do usuário tocando nessa linha ou na célula. E agora, como fizemos na palestra anterior, seguiremos para a guia Protótipo e criaremos uma conexão entre esse estado padrão com a guia S8. E mude o onclick para, você adivinhou, pressionando a parede. Vamos em frente e mudaremos para o estado grampeado. E queremos que a animação seja instantânea. Então vamos em frente e fecharemos isso. E agora, se ele seguir para o nosso protótipo novamente, não precisamos atualizar ou relançar o protótipo. Podemos usá-lo no mesmo. E como você pode ver agora, como estou tocando nessa linha, iremos em frente e mudaremos essa cor, o que parece muito realista para um aplicativo para iPhone móvel. 19. Criando novos fluxos de protótipo: Desde que a Figma anuncia alguns novos recursos para o recurso de prototipagem, eles também anunciaram algumas novas maneiras que você pode orientar usuários ou espectadores através do seu protótipo e, em seguida, inclui a criação de diferentes fluxos . Agora, um fluxo e um protótipo definem o que esse usuário passará à medida que passar pelo protótipo. Quando eles começarão? E à medida que passam pelo aplicativo, onde eles acabam? Por padrão, eles nomearam nosso protótipo de fluxo um. Então, se formos em frente e reproduzirmos esse fluxo, nos levará através do protótipo que criamos, que nos iniciará na tela de login. E então, se seguirmos em frente e clicarmos em Inscreva-se e nos guiaremos por cada etapa de inscrição até que ela nos leve à página principal. Mas agora com Figma é o recurso de prototipagem. Você pode realmente ir em frente e criar vários fluxos para que, se quiser mostrar seu aplicativo, vamos ver se o usuário já está conectado. Você pode mostrar um fluxo diferente criando vários fluxos diferentes, nos permite economizar tempo quando se trata de apresentar nosso protótipo aos nossos colegas ou clientes para mostrar resultados diferentes ou resultados diferentes. E para economizar tempo em termos de ter que clicar em várias páginas para chegar onde você quer chegar. Então, vou seguir em frente e criar um segundo fluxo. Mas antes de fazer isso, vamos seguir em frente e nomear esse fluxo um novo usuário. E isso está apenas dando um novo nome. Nada realmente muda com um protótipo. Mas agora temos esse novo ponto de partida de fluxo de usuário. Agora certifique-se de que você está na guia Protótipo para que você possa realmente ver seus fluxos. Mas, essencialmente, eu queria nomear esses novos usuários para que saibamos que esse é o fluxo quando um novo usuário se inscreve ou realmente abre o aplicativo canguru limpo. E agora eu quero criar um novo fluxo chamado usuário conectado. Portanto, essencialmente, um usuário que já está conectado, só vemos esse fluxo em vez do novo fluxo de usuário. Então, para fazer isso, vou em frente para a página de solicitação porque essencialmente esta é a nossa página principal que queremos que os usuários se inscrevam quando abrirem o aplicativo pela primeira vez. E simplesmente tendo essa peça de solicitação selecionada, vou seguir em frente e clicar no sinal de mais além do ponto de partida do fluxo para adicionar um ponto de partida. E vamos renomear isso para usuário inscrito. E agora temos dois andares diferentes, um para um novo usuário e outro para um usuário cadastrado. E se você clicar no Fluxo de Usuário Cadastrado clicando neste ícone de reprodução aqui. Como seria de esperar, o protótipo começaria neste quadro e nos permitiria interagir como antes, mas agora com um ponto de partida diferente. E agora, neste lado esquerdo do painel podemos ver que temos andares diferentes que podemos levar nossos espectadores são usuários. Então, se você quiser navegar agora quando um novo fluxo de usuário pareceria, podemos ir para o novo fluxo de usuário e ir a partir daí. Ou se você quiser pular para um fluxo de usuário de inscrição, podemos ir para o nosso fluxo de usuário de inscrição e ir a partir daí. E a beleza disso é que quando você compartilha seu protótipo, pessoas que têm acesso a ele, também poderemos ver os fluxos que você tem e passar pelos diferentes fluxos também. Agora, uma coisa eu recomendo se você quiser compartilhar seu protótipo com outras pessoas, especialmente pessoas que podem não estar em sua equipe. Você pode realmente ir em frente e escrever uma pequena descrição sobre seu fluxo para que as pessoas entendam o que é esse andar. Então, na descrição aqui, vou apenas ir em frente e escrever. Esse fluxo é para usuários registrados em RD com canguru limpo, limpo e limpo. E vamos ir em frente e fechar isso. E agora, se eu voltar aqui, você verá que a descrição também está no meu protótipo, o que é legal. E lá você tem isso que tem fluxos diferentes em seus protótipos. 20. Exportando nossos designs: Tudo bem. Acho que estamos prontos para dar este projeto ao nosso cliente agora. Então eu acho que agora estamos prontos para exportar nossos quadros aqui. Agora, há várias maneiras de exportar coisas no MMA de figo. Então o 1º 1 é que você pode exportar os quadros, é claro. E para fazer isso, você pode ir para as camadas e vamos em frente e recolher todas as camadas usando a opção l e assim que apenas irá recolher tudo. Então é bom aqui, e eu posso ir em frente e apenas selecionar um quadro e então nós estamos segurando shift, selecione meu último quadro aqui, e assim que irá selecionar todos os quadros no meio. Certifique-se de que você tenha o quadro selecionado e nada que você não queira exportá-lo. E então a partir daqui, você pode encontrar os próximos quatro toques e ir em frente e rápido mais, E se você rolar aqui, você verá que estamos exportando nove camadas aqui com uma resolução de um X. Se você quiser aumentar a resolução para Dois X, você pode fazer isso daqui. Você pode ir em frente e realmente escolher o quê, quatro meses? Você quer que sua exportação esteja em, você pode selecionar PNG, há J Peg SPG e PDF. Assim, com esses quadros selecionados, você pode exportar nove camadas. Uma vez que você fizer isso, ele vai pedir. Prepara-te para exportar isso, e eu pergunto-te onde queres que a tua exportação seja feita. Uma vez que você fizer isso, ele abrirá este navegador de arquivos aqui, de onde você pode selecionar a pasta para a qual deseja exportar suas camadas ou seus quadros. E, em seguida, se você ir em frente e clicar, salvá-lo irá em frente e colocá-los lá. Então, se eu arrastasse essa pasta, como você pode ver, ela foi em frente e exportou todos os meus quadros em PNG separados quatro meses para mim aqui, que é bom. Posso enviar-nos ao meu cliente, por isso é uma forma de exportar se quiseres exportar certas coisas. Então vamos, por exemplo, vá em frente e amplie aqui e digamos que você queira exportar apenas este ícone aqui. Ah, você pode ir em frente e selecioná-lo, e enquanto tem seu selecionado, certifique-se aqui no painel de camadas ele está selecionado de fato e, em seguida, ir para exportar e apertar o ícone de mais, você terá uma boa visualização da sua exportação. Aqui é longo, e então você pode até ir em frente e adicionar várias exportações. Então, se você quiser um dos ícones para ser apenas uma resolução extra, outro para ter duas resolução extra e você pode continuar aqui e adicionar mais resoluções e exportações MAWR aqui, ele irá adicionar um bom Suffolk ao meu arquivo. Aqui está então isso irá exportar zero zero um traço loja porque este é o nome dessa camada ou aquele quadro aqui que eu estou exportando. Então, se você quiser mudar o nome da sua exportação simplesmente, você terá que mudar o nome da sua camada aqui. Então, se eu fizer, vamos ter um ícone de loja aqui. Você pode ver agora ele vai dizer ícone Exportar loja. E então, se eu exportar isso, ele irá exportar três versões dele, uma com uma resolução ex, outra com dois X e três x. Isso é comum em um monte de APS, onde você vai precisar de múltiplas soluções baseadas no tamanho da tela. Assim, você pode ir em frente e exportar seu ícone de loja que uma vez que você salvá-lo novamente. Se eu abri minha pasta aqui, você verá que há três cópias diferentes, uma com uma resolução extra. Então este é um x dois X e três x Então isso é muito legal. Muito útil. Só vou deletar isso. De lá. Você também pode pressionar o comando Shift E e isso irá apenas abrir esta guia de exportação. E isso só vai mostrar algumas das exportações que você pode fazer a partir daqui. Ah, que você provavelmente já fez antes. Então, a partir daqui, eu posso ir em frente e escolher o que eu quero exportar, e então ir em frente e exportar a partir daqui também. Então, novamente, você menciona isso usando o turno de comando E. E então é assim que você exporta e figura. 21. Handoff de código: outra ferramenta de economia de tempo na fig. Os olhos do MMA neste painel de código aqui. Nós realmente não conversamos sobre isso, mas meio que funciona como mágica. E eu vou te mostrar o porquê. Vamos ir em frente e ampliar nossa página de pagamento, por exemplo, aqui clicando em qualquer objeto dentro e indo para o meu código toque aqui. Eu posso realmente obter o código para o estilo desse objeto aqui. Então, se você está familiarizado com CSS ou você está projetando para um projeto IOS ou Android aqui neste painel de código irá realmente ajudá-lo a recriar exatamente o que nós criamos aqui, mas dentro um ambiente de desenvolvimento real. Então, se você está trabalhando com desenvolvedores e você quer que eles realmente saltar para dentro e ser capaz transformar esses projetos em aplicações riel ao vivo, a coisa mais fácil que você pode fazer é convidá-los e, em seguida, dizer-lhes sobre este painel de código para ir e realmente copiar e colar. Ah, exatamente o código que eles precisam para obter esses certos elementos novamente. Se eu mudar isso, você verá, com base no que eu selecionei, ele irá em frente e me mostrar o código para esse objeto. Se isolar apenas o quadro inteiro, ele mostrará o código para apenas o meu quadro aqui. Então, como a cor de fundo dos brancos, a largura e altura e coisas assim. Então isso pode ser muito útil. E eu encorajo você a tirar proveito disso se você está desenvolvendo um aplicativo ou se você tem desenvolvedores trabalhando com você 22. O que vem a seguir?: Tudo bem. Parabéns por terminar o curso de prototipagem aqui. Nós aprendemos uma tonelada de como podemos realmente adicionar um protótipo super básico todo o caminho para aplicativos mais avançados adicionando em animações, fora transições usando inteligente, animado para transição entre diferentes estados e como podemos realmente compartilhar nosso projeto com amigos, investidores de Kali e assim por diante. Então, o que vem a seguir para você? Bem, há muita coisa que você pode fazer daqui. Claro, eu recomendo que você crie mais protótipos, pratique com ele, compartilhe com seus amigos e realmente mostre isso para as pessoas, especialmente se você estiver trabalhando com clientes. Este seria um ótimo lugar onde você pode mostrar-lhes um protótipo de como seria sua aplicação . Se você está trabalhando em uma aplicação própria ou em um design próprio, você pode realmente mostrar este protótipo que você tem para seu próprio projeto para desenvolvê-la e realmente tornar mais fácil para eles entender o que você quer fora do produto. Sinta-se livre para compartilhar seu protótipo comigo. Eu estaria me escondendo para sacudir e dar alguns comentários. Se isso é algo que você está procurando, você pode até mesmo tentar aplicar protótipos a projetos da Web também, hein? Então, se você está trabalhando em projetos da Web ou revisando projetos nos quais você está querendo trabalhar, este seria o momento perfeito para fazer isso. Eu realmente crio protótipos bons e utilizáveis para isso também. E novamente, como sempre, sinta-se livre para me enviar quaisquer perguntas ou projetos para feedback. Meu e-mail é o quão inteligente no Gmail dot com E na próxima semana aqui em Skill Shirt também estará compartilhando um curso sobre como você pode criar um projeto U. Y para uma aplicação Web para o nosso projeto canguru limpo aqui também. Então, obrigado novamente por fazer este curso e ansioso para vê-lo em um futuro, é claro.