Domine o Figma em 2026: design de aplicativos para web e dispositivos móveis do zero

1. Promoção do curso: Não , sim. Olá, designers. Bem-vindo à master class Figma. Seu guia passo a passo para dominar o Figma e aprimorar suas habilidades de design Quando comecei a usar o Figma, há muitos anos, não sabia como maximizar todas as ferramentas que ele tinha a oferecer e, às vezes, levava horas para criar uma página simples Depois de muitas e muitas horas assistindo tutoriais, assistindo a configurações, experimentando e refinando minhas habilidades, reuni tudo em um único curso com as atualizações e recursos mais recentes da Figma Nima Tahami. Sou seu instrutor neste curso Nos últimos 12 anos ou mais, desenvolvi e projetei dezenas de produtos de sucesso. Ao longo do caminho, também tive a sorte de ensinar mais de 15.000 designers, ajudando-os a trabalhar de forma mais inteligente no FiGMA e Agora, neste curso, criaremos um aplicativo de reserva de viagens do início ao fim. Você aprenderá como criar wireframe, criar componentes, aproveitar o layout automático até mesmo dominar variáveis e recursos de prototipagem para montar um aplicativo completo e, a propósito, usaremos o Figma AI para nos ajudar a gerar primeiros rascunhos, imagens e textos, imagens e textos, facilitando o design para nós Ao final deste curso, você conhecerá os prós e contras do FGmaGting, as habilidades para projetar mais rapidez e entregar projetos com mais confiança aos membros da sua equipe, clientes Este curso é para designers que desejam crescer, aqueles que estão iniciando o design de produtos ou aqueles que desejam refinar sua arte e design de forma mais rápida e inteligente Então, se isso soa como você, então entre imediatamente e nos vemos no curso. 2. Apresentação: Olá. Bem-vindo ao curso. Você deu um grande passo hoje para chegar ao próximo nível em sua carreira de design aprimorando suas habilidades no Figma, e não consigo expressar o quanto estou empolgado por ter você no Ao longo deste curso, você aprenderá os recursos mais novos e mais recentes do FiGMA, incluindo a interface de usuário três, FGM AI e todas as outras ferramentas que ele já oferece, como componentes, layout automático, variáveis, prototipagem avançada, prototipagem avançada Para aprender essas ferramentas e conceitos, faremos isso na prática enquanto um aplicativo real para web e dispositivos móveis. Este aplicativo é um aplicativo de reserva de viagens chamado Wander wise. É um cliente fictício, mas é muito empolgante e, definitivamente um que você pode colocar em seus portfólios após este curso Seguindo as etapas deste curso, número um, começaremos com o básico. Agora, eu recomendo que todos passem por isso, mesmo que você tenha conhecimento do Figma, apenas para aprimorar pequenos detalhes que talvez não conheçam sobre os novos recursos da interface do usuário Em seguida, passaremos para o wireframing. Então, usaremos um iPad, caneta e papel ou até mesmo o próprio Figma para montar wireframes para as telas do Passando à configuração de um sistema de design, como usar variáveis, estilo para cores e fontes, passaremos a criar nossas primeiras maquetes no Figma, projetaremos nosso fluxo de reserva completo de ponta a ponta, desde a inscrição até a conclusão de uma reserva no Criaremos uma versão móvel e aprenderemos como criar designs responsivos antes de começar a criar seu protótipo Em seguida, pegaremos nosso protótipo tornaremos mais avançado com variáveis, animações inteligentes e assim por diante, para que você possa compartilhá-lo com seus amigos e colegas e mostrar a eles o quão legal é o aplicativo que você criou Nossa última seção aborda como trabalhar mais inteligente no Figma e colaborar melhor com Com isso dito, vamos começar nossos conceitos básicos do Figma e começar a partir daí 3. Primeiros passos: Comece a acessar figma.com para criar uma conta, se você ainda não tiver Vá em frente e faça o login ou, se você já estiver logado, você deve ser levado à sua página inicial, que pode ter a seguinte aparência Agora você pode estar na pasta de reenvios ou na pasta de rascunhos. Isso é totalmente bom. A partir daqui, você pode explorar seus arquivos. Agora, uma coisa que eu recomendo é que, se você gosta de usar aplicativos de desktop em seu computador, pode clicar em Obter aplicativo de desktop no menu aqui. Durante o restante do curso, vou usar o aplicativo para desktop da Figma É praticamente idêntico. Não há grande diferença entre eles. Porém, quando você tem o aplicativo para desktop, algumas das opções podem ser acessadas por meio do menu na parte superior. Se você preferir continuar com o Desktop, faça uma pausa aqui, baixe esse aplicativo Caso contrário, fique à vontade para continuar no navegador. Começando do topo, você vê seu perfil onde pode prosseguir e fazer login em várias contas. Você vê um sino de notificação aqui que mostra todas as atividades que estão acontecendo em seus arquivos. Normalmente, começamos na pasta de rascunhos quando estamos iniciando novos projetos, e você pode criar um novo projeto clicando em Criar novo Agora, se você clicar na seta para baixo, poderá criar um tipo diferente de projetos. Se você estiver trabalhando em um FIC Jamboard ou em um conjunto de slides, você também pode fazer isso aqui Se você estiver importando de um arquivo FIC de pontos que você tem ou até mesmo de um esboço, você também pode importar clicando Ele solicitará que você solte todos os arquivos de esboço, imagens, PDFs e assim por diante para adicioná-los aos seus Você pode organizar seus arquivos de forma diferente, mostrando-os como uma lista ou como grades. Pessoalmente, gosto um pouco mais da opção de grade. E no lado esquerdo, aqui você pode ver as diferentes equipes das quais você faz parte. Agora você sempre pode criar novas equipes aqui, mas não é necessário fazer isso. Vou continuar na escola Clover aqui e no meu draft Posso criar um novo arquivo a partir daqui clicando em Mais ou, novamente, daqui de cima, posso criar um novo arquivo. A partir daqui, você também pode explorar a comunidade que lhe dará acesso aos arquivos compartilhados por outros usuários do Figma Isso inclui coisas como slides, recursos de design, plug-ins e assim por diante, que exploraremos mais detalhadamente no curso. Por enquanto, vou clicar em Criar novo arquivo, Arquivo de design, e isso nos leva a um novo arquivo. E, novamente, vou continuar no aplicativo para desktop, abrir o mesmo arquivo e voltar na próxima seção para aprender sobre os diferentes painéis 4. Layout de arquivos: Estamos em um novo arquivo. Vamos explorar a que temos acesso. Começando pelo painel esquerdo aqui. Em primeiro lugar, se você notar que meu Figma está no modo escuro. Esta é minha preferência por usar o Figma usando o modo escuro, começando do canto superior esquerdo aqui Você tem acesso ao painel esquerdo de onde pode acessar as opções do menu FIGMA Você pode acessar suas opções de arquivo, além fazer coisas como duplicar o arquivo, renomear, mover ou excluir Você pode dar ao seu arquivo um título como este e ver onde ele está. No momento, está na minha pasta de rascunhos. Logo abaixo, você verá duas guias. Você pode alternar entre o arquivo ou a guia de ativos. Agora, entraremos na guia de ativos e como você pode acessar os recursos a partir daí. Mas, simplificando, você tem acesso aos recursos aos quais tem acesso. A partir daqui, você pode prosseguir e procurar os componentes do sistema de design que você possui, bem como outros que você adicionou aos seus projetos como os que o Figma já oferece No arquivo, você pode ver as páginas que você tem em seu design. Seus designs podem ter quantas páginas você quiser clicando neste ícone de adição aqui e adicionando novas páginas. Agora, abaixo do painel de camadas, quando você começar a adicionar coisas na tela, elas aparecerão no painel de camadas. Apenas como exemplo, vou criar um retângulo pressionando R no meu teclado e desenhando um retângulo aqui, como você pode ver, ele aparece no meu Agora, se eu enquadrar esse retângulo pressionando F e desenhando sua moldura ao redor dele, você pode ver uma hierarquia colocada aqui no meu painel de camadas, onde temos uma moldura com um retângulo Sempre que você vê camadas recuadas, isso significa o lado instantâneo de outra camada, como essa moldura Ao selecionar um quadro, você sempre pode adicionar coisas dentro dele, como este texto. Você sempre pode mover coisas para fora das molduras ou de volta para as próprias molduras. Agora, eu estava usando atalhos de teclado, mas se você quiser acessar todas as ferramentas às quais você tem acesso no Figma, você pode fazer isso na barra de ferramentas aqui embaixo A barra de ferramentas fornece acesso a várias ferramentas de movimentação, como o MvTol, que é selecionado por padrão, onde você pode seguir em frente e Ferramenta manual se você quiser apenas navegar, mas não quiser mover coisas acidentalmente E uma ferramenta de escala se você quiser escalar objetos, o que faremos ao longo do curso. Vou passar para a ferramenta de movimentação. E a partir daqui, você tem acesso à moldura para criar molduras, que são contêineres para seus designs, além de seções e slides. Logo ao lado, você tem várias ferramentas de forma, desde retângulos até elipses Existe uma ferramenta de caneta se você quiser criar formas personalizadas, uma ferramenta de texto para adicionar texto aos seus projetos. Se você quiser abrir a guia ou o painel de comentários. Você pode fazer isso aqui e, aqui, temos o painel de ações, que você também pode abrir pressionando Command K no teclado ou Control K no Windows Agora, a partir daqui, você tem acesso a alguns recursos de IA, seus ativos novamente e também a plug-ins e widgets Agora, sempre que você estiver trabalhando com desenvolvedores, eles provavelmente querem usar o Modo Desenvolvedor, então eles podem fazer isso alternando para o Modo Desenvolvedor Exploraremos o DevMde mais tarde. Por enquanto, estamos apenas obtendo uma visão geral. Agora, o lado direito contém todas as propriedades dos seus objetos. O que quer que você selecione em sua tela, você pode ver as propriedades no lado direito. E, no momento, não temos nenhum estilo. Caso contrário, eles apareceriam aqui também. A partir daqui, podemos controlar a cor da tela em si, torná-la mais clara ou mais escura E eu sempre posso acessar as configurações do protótipo a partir daqui Agora, depois de selecionar um item em sua moldura, você tem acesso a muito mais opções aqui, começando pela posição. Então, onde esse objeto mora dentro do quadro, você também tem acesso a opções de restrição, opções de layout, ou seja, o tamanho desse item, por exemplo, a aparência, o preenchimento, que é a cor, o traçado, os efeitos e as ferramentas de exportação para exportar esse retângulo daqui Agora, se eu selecionar o texto, obtenho opções ligeiramente diferentes aqui, como opções de tipografia Agora, exploraremos tudo isso e usaremos muito ao longo de nosso curso. Portanto, fique atento para saber como usar todas as opções às quais você tem acesso Agora, com isso, vamos voltar na próxima palestra para começar a mergulhar em nosso projeto 5. Começando nosso projeto: O básico está resolvido. Agora, lembre-se de que, ao começarmos a trabalhar em nosso projeto, aprenderemos muito mais sobre todas as ferramentas, plug-ins e componentes e assim por diante enquanto estamos fazendo o projeto. É por isso que agora estamos entrando diretamente em nosso projeto para que possamos aprender o máximo Então, aqui, eu tenho um documento de requisitos de produto aberto, que normalmente é o que uma empresa ou um cliente ou seu gerente de produto na empresa em que você está trabalhando compartilharia com você quando houvesse um novo projeto para trabalhar. Agora, neste caso, temos um projeto chamado Wander Bye O Wander Boise é um aplicativo web desenvolvido para permitir que os usuários descubram e reservem viagens de destinos em todo o mundo Com foco na experiência perfeita do usuário e em uma interface intuitiva, Manda Boye ajuda os usuários a encontrar, planejar e reservar as escapadas dos seus sonhos. Muito simples Temos um aplicativo, um aplicativo de viagens que é um aplicativo da web. O objetivo dessa plataforma é permitir que os usuários explorem destinos interessantes, personalizem suas viagens e gerenciem suas reservas. Essencialmente, estamos criando uma plataforma de reservas de viagens. Agora, neste documento de requisitos do produto, normalmente há uma visão geral, um objetivo e, em seguida, há os principais recursos e páginas que precisamos criar. Obviamente, você pode fazer o download disso nos recursos para analisá-lo com mais profundidade. Em um alto nível, precisaremos algumas páginas de autenticação de usuário, página de integração, página gerenciamento de perfil, descoberta de destinos, que acredito ser a tela principal que os usuários verão, porque é aqui que eles encontrarão viagens para fazer com a opção de filtrar por preço, localização, atividade, tipo, etc Também precisamos da página de detalhes do destino que eles possam visualizar destinos específicos em profundidade, do gerenciamento de reservas, uma página de reserva para poder selecionar pacotes, datas, acomodações, etc., de forma muito simples, afirmar e filtrar a funcionalidade, pagamento e finalização da compra, favoritos e página da lista de desejos, avaliações e avaliações, é claro, como parte do Então, temos aqui, os objetivos do design são uma interface de usuário intuitiva, criativa, visualmente atraente e fácil de navegar, consistência, manter a consistência nos elementos de design, incluindo cores, fontes, ícones, etc Obviamente, certifique-se de que ele esteja acessível a todos os usuários, acomodando várias necessidades Seus usuários-alvo são viajantes busca de inspiração e reservas de viagens, várias idades, e que buscam pacotes de viagem personalizados Portanto, seus usuários-alvo são essencialmente pessoas que desejam reservar viagens rapidamente sem precisar fazer muita pesquisa ou muito trabalho separado para reservar partes separadas da viagem. Eles querem uma opção em que possam reservar uma viagem sem problemas e estão prontos para ir sem precisar trabalhar muito mais para planejar a viagem Agora, ele diz que é um aplicativo responsivo baseado na web, então podemos fazer com que comecemos primeiro com a versão para desktop, trabalhemos nos designs para desktop antes para torná-la amigável também para dispositivos móveis e integração com API de terceiros para pagamento Então, com isso, acho que temos informações suficientes para começar a montar nosso projeto. Então, primeiro de tudo, vamos pegar esses requisitos que temos e transformá-los em wireframes Ao longo desta etapa, o que estamos tentando alcançar é ter uma ideia do que queremos incluir em cada página, como queremos definir esses fluxos de usuários em um alto nível sem sermos muito específicos, pois abordaremos isso enquanto fazemos as maquetes Mas, por enquanto, queremos entrar imediatamente no wireframing e começar com cada página Vou simplesmente começar com meu iPad e continuar no meu iPad. Sinta-se à vontade para usar papel e caneta. Sinta-se à vontade para usar o próprio Figma ou o Fikjam. Seja qual for o método que você achar melhor quando se trata esboçar ideias rapidamente, sem levar muito tempo. Escolha essa opção. Não gaste muito tempo nessa etapa, porque não é nela que vale a pena gastar muito tempo. É só para obtermos uma visão geral de alto nível do que precisamos incluir em cada página, onde queremos colocá-la e começar a pensar e a pensar em quem quer que esse aplicativo tenha a mesma aparência e Sem mais delongas, vamos direto ao assunto. 6. Encontre inspiração: Agora, uma das coisas mais importantes quando se trata de começar um design é obter inspiração. Como designers, você não precisa reinventar a roda o tempo todo quando está projetando É claro que é importante ser criativo, mas a espinha dorsal da criação de designs é ver o que já existe E uma das ferramentas mais úteis que eu usei para esse propósito é o mobile.com Com o Mobil, você pode acessar a captura de tela de muitos aplicativos dos quais provavelmente já ouviu falar ou usou antes ou que dos quais provavelmente já ouviu falar ou usou antes ou se encaixam no que você está criando O interessante aqui é que você pode filtrar pelo dispositivo. Portanto, se você está procurando apenas designs para IOS, pode filtrar por isso ou se estiver procurando por designs para web, eles têm várias categorias para os diferentes tipos de empresas. Então, você tem um programa de viagem e transporte aqui que possamos dar uma olhada em nosso projeto neste curso E você pode ver que eles têm o AirBnB, que é bom de se ver, e podemos clicar para conferir E eles têm todas as capturas de tela aqui dispostas para o AirBnB, incluindo os fluxos de checkout que podem ser muito úteis. Podemos usar inspiração dessas páginas. Os designers do AirBB já passaram muitas horas criando esta página e se inspirando e aplicando-a em nossos próprios wireframes e depois em maquetes aplicando-a em nossos próprios wireframes e depois em Agora, aqui estou usando a conta Pro, que me dá acesso para pesquisar e ver todas as capturas de tela com facilidade Definitivamente, vale a pena fazer um upgrade, e vou deixar um link que você pode usar para se juntar à Mobin e começar a se inspirar para seus projetos de design Agora, a partir dessas telas, vou salvar algumas delas na minha coleção. Então, vou criar uma nova coleção aqui chamada de aplicativo de viagens, e você pode escolher que ela seja privada se não quiser que mais ninguém participe e, em seguida, clicar em Criar. Se eu estiver procurando, digamos, telas de reserva, posso clicar para ver telas de reserva de todos os diferentes aplicativos, o que é incrível. Há um aplicativo de aluguel de automóveis aqui que pode ser interessante de se ver e muitos outros aplicativos com recursos e funcionalidades semelhantes. Se você ver uma tela de sua preferência, pode até mesmo copiá-la diretamente para o FIGMA Então, acabei de copiar esse fluxo. E aqui no Figma, se você executar o plug-in deles, aqui e os plug-ins e widgets pressionem Executar. E, se você pressionar o Command V, poderá colar esse fluxo diretamente no seu Portanto, agora tenho todo o fluxo de reservas da Expedia que posso revisar em meu projeto, e posso até mesmo tê-lo como parte de uma página de pesquisa em meu arquivo Figma Portanto, é muito útil. Eu recomendo que você faça uma pausa, se inspire usando o Moboin e continuaremos fazendo 7. Usando o ChatGPT para wireframing: Eu usei o HGPT, você provavelmente já usou o HGPT e todos nós usamos É uma das ferramentas que podemos parar de usar e, com certeza, existe uma maneira de nos ajudar com estrutura de fios. Agora, como fazemos isso? Tudo o que precisamos fazer é definir o aplicativo que estamos projetando e fazer com que o HGPT apresente ideias sobre o que devemos incluir em cada página Apenas como exemplo, digamos que estamos trabalhando em uma página de descoberta de destinos antes disso, o que vou fazer é copiar a visão geral aqui do nosso documento de requisitos de produto e dizer que estamos criando um aplicativo com seguinte visão geral do PRD, nos dar ideias sobre o que incluir em uma página de descoberta de destinos, na qual os usuários podem uma página de descoberta de destinos antes disso, o que vou fazer é copiar a visão geral aqui do nosso documento de requisitos de produto e dizer que estamos criando um aplicativo com a seguinte visão geral do PRD, nos dar ideias sobre o que incluir em uma página de descoberta de destinos, na qual os usuários podem encontre viagens para reservar para o wireframe Um aviso simples como esse nos fornecerá um detalhamento do que incluir nesta página. Portanto, já temos uma seção de heróis com destinos especiais. Então, basicamente, tenha um carrossel rotativo de destinos sazonais populares, uma barra de pesquisa exibida com destaque exibida call to action com botões de call to action com botões claros para explorar destinos ou descobrir ofertas, opções de filtro de pesquisa com todos os detalhes do que devemos incluir, até mesmo preferências climáticas, tipos de experiências, duração da viagem e assim por diante. Cartão de destino Grid slash Carousel, recomendação personalizada, opções interativa do mapa Então essa é legal . Talvez queiramos permitir que os usuários também tenham um mapa de cada destino para que possam clicar e ver aonde cada destino os levaria. Seção de inspiração e experiência. Avaliações e depoimentos de usuários, indicadores de reserva e disponibilidade Então, até dá uma ideia como criar escassez com os usuários, que é uma ótima tática de UX Restam apenas três vagas. Vimos isso em outras plataformas de companhias aéreas e plataformas de reservas como essa, comparações e ferramentas de favoritos E isso lhe dá uma tonelada de coisas para incluir em sua página. E se isso for muito detalhado, você provavelmente pode pedir que ele forneça um resumo. Dê-me um pequeno formato resumido das coisas. Para incluir nesta página. Então, se você quiser ter uma versão mais resumida, aí Ele fornece em formato de marcador todas as pequenas coisas a serem incluídas Então, à medida que analisamos nosso wireframe, definitivamente podemos usar HGBT para nos ajudar a ter ideias sobre o que incluir, para garantir que não percamos nada em E embora isso seja ótimo, podemos dar um passo adiante usando FiCMA AI para realmente nos ajudar a criar os primeiros rascunhos E vamos fazer isso durante todo o curso. Por enquanto, vamos entrar nos wireframes com base toda a inspiração e recursos que temos até agora, bem como em nosso documento de requisitos de produto começar a partir daí e depois percorrer todas as páginas que precisamos criar wireframes com base em toda a inspiração e nos recursos que temos até agora, bem como em nosso documento de requisitos de produto, começar a partir daí e depois percorrer todas as páginas que precisamos criar. Então eu vou te ver em seguida 8. Wireframe da página de inscrição: Mencionei que estou fazendo meu enquadramento de fios no Fig Jam no meu iPad Você pode fazer isso. Se você tiver um iPad. Caso contrário, você pode usar papel e caneta, você pode fazer apenas o FIG Jam no seu computador. Depende realmente de você, independentemente de como você faz o enquadramento do fio. Mais uma vez, não gaste muito tempo nessa etapa. Este é um wireframe de baixa fidelidade que estamos montando apenas para saber o que estamos incluindo em cada página, onde substituí-lo e para observar todos os pequenos detalhes que talvez esqueçamos quando a prototipagem ou as maquetes prototipagem ou as Agora, primeiro, vou pegar a ferramenta Caneta e, com uma régua ligada aqui, vou desenhar um retângulo para representar minhas armações de arame e fixá-lo Não precisa ser perfeito. Como você pode ver, eu não sou o melhor em desenhar esses retângulos, mesmo com uma régua ativada aqui, mas, novamente, estamos apenas fazendo um rascunho Agora, o que vou fazer é usar essa ferramenta aqui para selecionar tudo aqui e clicar em Acho que uma cópia e uma pasta como essa poderiam funcionar. Dessa forma, temos vários que podemos usar para telas diferentes. A primeira tela em que vamos nos concentrar são nossas páginas de autenticação. Esta será a nossa inscrição. Tela para que seja aqui que os usuários se inscreverão no aplicativo. Normalmente, em uma página como essa, podemos ter uma pequena imagem ao lado ou podemos apenas ter uma caixa com as entradas para seus usuários, o e-mail do usuário, a senha Agora, é muito importante examinar o PRD ou os documentos de requisitos do produto para garantir que você inclua tudo Então, o que eu gostaria de fazer antes mesmo de começar a desenhar qualquer coisa dentro da janela é escrever uma espécie de forma de marcador O que eu preciso nesta página? Então, primeiro de tudo , precisamos de e-mail. Precisamos de uma senha. Precisamos do logotipo, que por enquanto será o nome da empresa Wonder Wise. Então eu estou lendo o PRD, especificamente, também queremos contas sociais Não especifica qual, então isso é algo que você deseja verificar com seu, você sabe, PM ou seu cliente se estiver realmente trabalhando em um aplicativo real. Esta é apenas uma empresa fictícia, então vamos optar por assiná-la também com o Google por enquanto, e também há a opção de usar o número de telefone Vamos fazer o campo de número de telefone dois. Como forma de fazer login. E isso deve cobrir a maioria das coisas que precisamos aqui. Opcionalmente, podemos ter uma imagem novamente ou podemos apenas ter uma caixa para fazer login Agora, para este aplicativo, acho que seria legal ter parte dele mostrando uma imagem de pessoas viajando ou algo parecido, e então metade da tela seriam as opções de login. Então, talvez eu possa dividir a página, você sabe, dois terços a um terço, algo assim Onde, neste lado da tela , haverá uma imagem. E então, do outro lado, estará todo o conteúdo que discutimos. Então, talvez começando com o logotipo aqui. Talvez queiramos uma breve descrição do que Wander Weiss faz Se eu puder substituir isso por uma pequena linha de slogan de Wander Weiss Então, queremos a caixa de e-mail. Novamente, isso não precisa ser perfeito, desde você possa ler sua escrita, o que, para mim, às vezes é uma senha difícil, e então precisamos de uma opção, talvez ou faça login com seu número de telefone, número de telefone ou Google. Vou colocar um pouco de G aqui. Agora, eu quero movê-los para baixo para incluir um botão aqui e vou fazer o botão aqui para me inscrever. Agora, em algum lugar, também devemos incluir que, se você tiver uma conta, vincule ao Login. Portanto, se o usuário já tiver uma conta, devemos vincular a uma página de login. Não vou criar um wireframe na página de login porque faremos praticamente a mesma Então, vou apenas intitular este signulash Login assim. Mas é claro que faremos as mudanças e as maquetes assim que começarmos a montar as coisas Então, sim, queremos um link para fazer login, caso seu usuário já tenha uma conta. Eles podem acessar a tela de login em vez de se inscrever. E então, quando eles passarem para a próxima etapa, dependendo da etapa pela qual passam, digamos que acessem o número de telefone e , a partir do número de telefone, também precisamos de uma verificação ou de uma forma de fazer login usando o número de telefone. E, normalmente, esse é um código de verificação que é enviado. Então, provavelmente nossa segunda tela verificará o login, e voltaremos na próxima palestra para montar esse design 9. Wireframe do código de verificação: Tudo bem agora, para nossa verificação login, é bem simples Vamos seguir um layout semelhante. Teremos a imagem em um lado e, em seguida, o código de verificação aqui. Em seguida, faremos aqui o código de verificação. Então você precisa inserir alguns dígitos aqui, e então vamos chamá-lo de botão Continuar É um botão para continuar indo para a próxima etapa e depois verificar o login ou algo parecido. Então, queremos um campo lá dentro. Queremos um botão lá dentro, e é mais ou menos isso. Talvez também haja um botão aqui para reenviar o código. Então, em algum lugar aqui, reenvie o código. Se eles não o receberam na primeira vez, podem recebê-lo novamente. Então, isso completaria nossas páginas de autenticação. As próximas páginas que temos depois disso são gerenciamento de perfis, descoberta de destinos. Eu vou na ordem do fluxo que queremos. Normalmente, queremos que os usuários acessem as páginas de login aqui e, em seguida, acessem a página principal do nosso aplicativo. Essa página principal é a descoberta do destino, pois é aqui que os usuários irão descobrir destinos, inserir seu destino preferido e aplicar filtros e assim por diante antes de realmente reservar uma viagem. Então, vamos seguir em frente e desenhar outro retângulo aqui E esta será para a página R. Destination. Então, logo no topo, destino. Vamos chamá-la de Discovery. Novamente, como fizemos na outra página, escreveremos o que precisamos nesta página. Vou me referir ao recurso que usamos com HatGBT, onde analisamos algumas das coisas de que precisamos, bem como o PRD que foi compartilhado pelo cliente Então, analisaremos essas duas referências cruzadas, bem como nossas próprias ideias e nossa própria inspiração que encontramos em outros sites, como os que eu compartilhei anteriormente. Sinta-se à vontade para fazer uma pausa aqui. Dê uma olhada em alguns sites semelhantes. Eu recomendo até mesmo acessar expedia booking.com ou qualquer outra plataforma que você use para reservar viagens e talvez ver o que eles oferecem nessas páginas de descoberta de destinos que eles têm Como é o tipo de fluxo de reservas deles? Esse seria um bom momento para fazer esse tipo de off-line sozinho. Em seguida, continue desenhando e adicionando elementos desses sites ao seu próprio aplicativo. Novamente, para ser um ótimo designer, você não precisa reinventar a roda o tempo todo Na verdade, é exatamente o oposto. Quanto mais você puder aproveitar e usar outros designs que já foram estabelecidos e projetados por outros designers, melhor você será, mais rápido você montará wireframes, maquetes e protótipos 10. Wireframe de descoberta de destinos: Há dois componentes nesta página. Há a parte que será o destino relacionado a coisas específicas. Então, provavelmente teremos uma barra de navegação na parte superior para incluir coisas como, você sabe, qualquer navegação para diferentes lugares do aplicativo, bem como de volta à página inicial Então, provavelmente teremos o logotipo aqui para nos levar de volta à página inicial, onde quer que estejamos, e depois um monte de links no lado direito que, por enquanto, não vou adicionar Quer cartas diferentes aqui. Então, definitivamente sabemos que queremos alguns cartões de destino. Provavelmente, essas placas devem ser um pouco mais baixas para que, na parte superior, tenhamos algum espaço para entrada. Você quer separar sua lista de coisas que você precisa em duas categorias diferentes. O primeiro está na própria página, o segundo está no próprio cartão. Portanto, no cartão em que queremos incluir detalhes sobre destinos específicos, queremos fazer duas listas separadas para cada um. Então, por enquanto, vamos fazer a página de descoberta em si. Queremos uma barra de pesquisa aqui para pesquisar destinos. Então, queremos que eles escrevam qual é seu destino. Agora, como não estamos reservando voos para eles, não precisamos necessariamente saber de onde eles vêm. Só precisamos conhecer os destinos. E como parte dessa barra de pesquisa, provavelmente queremos alguns filtros de data. Por isso, queremos que os seletores de datas perguntem quando precisam ou quando querem viajar Agora, ao longo desta página, também queremos opções de classificação. Queremos que eles classifiquem por popularidade, preço, classificações. E, novamente, a maioria deles vem do Chat GPT. Também queremos opções de filtro. Para os filtros, queremos fazer um orçamento que possamos fazer. Já temos um intervalo de datas para que possamos fazer apenas a duração da viagem. Então, por quanto tempo você quer que as viagens sejam do tipo experiência. Novamente, sempre podemos alterá-los mais tarde. É bom ter uma ideia de com o que queremos começar inicialmente pelo menos também se preferimos. Essas são algumas boas opções de filtro. Então, precisamos deles como parte da página. Talvez queiramos incluir uma visualização de mapa, então é uma boa ideia pensar nisso. Estou mais inclinado a não colocar uma visualização de mapa aqui só porque os destinos não serão lugares específicos Serão apenas cidades específicas. Então, provavelmente não queremos um mapa, a menos que eles estejam escolhendo, você sabe, um lugar para sua acomodação. Então, talvez na página de detalhes, possamos incluir um mapa com diferentes opções acomodação e assim por diante. Mas para a página em si, acho que não precisamos de um mapa. Mas, novamente, esses são parte dos recursos que sempre podemos adicionar posteriormente. Ou, se estivermos trabalhando com nosso cliente, definitivamente podemos conversar sobre isso com eles. Então, em um cenário da vida real, isso será um pouco diferente. Agora, talvez também queiramos algum tipo de categoria diferente de opções. Então, talvez uma categoria ou podemos chamá-la de coleções temáticas. E esses podem ser grupos de categorias de destinos que eles podem ver clicando lá e vendo destinos que, digamos, são escapadas românticas ou viagens em resorts ou categorias diferentes nas quais podemos classificar as viagens Então, caso eles queiram ver o que é popular nessas categorias, eles também podem fazer isso. Acho que essas são boas para começar, pelo menos por enquanto. Para nossa descoberta de destinos. Agora, no que diz respeito ao cartão em si, podemos voltar na próxima aula para fazer uma lista das coisas que queremos antes de montar o resto desta página Essa é provavelmente uma das páginas mais importantes e mais visitadas do nosso aplicativo, então é bom dedicar nosso tempo a ela e não se apressar em pular esse planejamento detalhado Então, vamos voltar na próxima palestra para começar a planejar nossos cartões de destino 11. Wireframe do cartão de descoberta de destino: Cartões de destino. O que queremos em cada cartão de destino? Precisamos do nome da cidade e do país. Provavelmente quer a classificação. Precisamos de algum tipo de custo para essa viagem, e provavelmente será algo como preço por dia ou por noite, a menos que eles digitem uma data específica. Nesse caso, podemos mostrar a eles o total da viagem. Então, eu vou fazer o slash total. Queremos um botão para que eles vejam mais informações, continuem ou reservem esse destino. Por enquanto, vamos chamá-lo apenas de botão. Definitivamente, queremos uma imagem. No entanto, é importante não sobrecarregar este cartão. Poderíamos ter um distintivo de popularidade, se quisermos. Então, se esse destino for uma boa escolha, podemos mostrar isso com um pequeno ícone. Além disso, se você quiser adicionar isso ou marcar esse destino, podemos marcá-lo como Assim, podemos salvá-lo em nosso perfil ou página de favoritos e assim por diante Então, acho que essas são boas coisas para começar a incluir em nossos cartões de destino. Agora, vamos reestruturar a página em si. Queremos que nossa barra de pesquisa ou opções de classificação e opções de filtro estejam no topo, em algum lugar aqui Então, provavelmente queremos a barra de pesquisa aqui com um destino. Agora, por que no canto superior esquerdo? Normalmente, esse é o primeiro lugar que um usuário examinaria. Por isso, queremos que eles coloquem rapidamente um destino se já souberem para onde estão indo, ou se puderem simplesmente procurar o que está disponível. Também podemos ter nossos seletores de data aqui, e podemos ter botões aqui para filtrar e classificar E podemos ter os cartões de destino logo abaixo deles. Agora, teremos várias linhas desses cartões de destino e, provavelmente, logo abaixo em algum lugar, vamos estender um pouco esta página. Logo abaixo, talvez queiramos incluir coleções temáticas. Podemos simplesmente chamá-lo de coleções e ter coleções de destinos diferentes aqui. Então, essas podem ser imagens com apenas o nome de uma coleção. Com a capacidade de navegar por todas as viagens dessas coleções. Acho que provavelmente é um bom começo. Não se preocupe com a barra de navegação na parte superior. Por enquanto, vamos voltar e encaixar isso juntos. Também poderíamos reformular aparência desse cartão de destino Talvez pudéssemos fazer uma imagem aqui do destino com o nome de city slash Country Poderia fazer a avaliação aqui. Talvez um custo. Por enquanto, estou escrevendo apenas $1.000 por semana, mas, novamente, nas maquetes reais, vamos corrigir Você pode incluir ícones aqui. Este é um ícone do FR, caso seja popular. Talvez um botão aqui para marcar e depois um botão aqui para continuar Acho que isso funcionaria por enquanto. , sinta-se à vontade para dar uma olhada Se precisar de mais inspiração, sinta-se à vontade para dar uma olhada em alguns aplicativos semelhantes que têm cartões e como eles os criam. Isso é algo que eu vi em muitos aplicativos e na forma como eles apresentam as coisas. É por isso que estou rapidamente juntando-os, mas você pode reservar um tempo e pausa aqui para dar uma olhada em alguma inspiração Agora, como um pequeno exercício, deixarei a página de detalhes do destino com você para fazer uma tarefa por conta própria E essa página de detalhes do destino é essencialmente uma página mais detalhada com nossas informações sobre o destino. Então, todas essas informações que você tem no cartão, além de outras coisas, como avaliações detalhadas e coisas como descrição da viagem, opções de reserva. Agora, vou colocar isso junto nas maquetes. Eu mesmo, mas sinta-se à vontade para fazer isso como uma pequena tarefa para aprimorar suas habilidades de wireframing. Depois, voltaremos e continuaremos com próxima etapa do fluxo de reservas, que é o gerenciamento de reservas ou a página de reserva e, em seguida, a confirmação e o pagamento da reserva Então, vamos voltar e montar essa página. 12. Wireframe de detalhes do destino: Certo, então, para a página de detalhes do destino, deixei isso como uma tarefa para você fazer se quisesse Eu fui em frente e criei minha própria página de detalhes do destino. Novamente, o seu pode parecer completamente diferente do meu. A parte principal é garantir que ele inclua os principais componentes de que precisamos. Portanto, alguns detalhes do próprio cartão de destino, bem como qualquer outra coisa que possa ser secundária ou outros detalhes importantes que precisaremos para também conectar a tela ao fluxo de reserva na tela de reserva. Hum, então para a minha, no topo, coloquei a imagem aqui à esquerda com a capacidade de ver várias imagens. Logo abaixo, coloquei algumas coisas incluídas que vêm com o destino. Então, isso pode ser como uma lista de comodidades, e podemos fazer isso em formato de ícone. No topo, aqui, o nome do destino, a cidade, o país, as avaliações, o ícone de fogo e o botão de marcador aqui, como você vê no próprio cartão também. Então, esses detalhes são detalhados com uma breve descrição do que é esse destino, logo abaixo dele, e, em seguida, um botão ou uma chamada à ação para selecionar o quarto porque normalmente é isso que as páginas de reserva permitem que você faça. Depois de acessar a página de detalhes do destino a página de localização ou a página do hotel, a próxima etapa é escolher uma acomodação. Agora, eles podem estar em lugares diferentes ou podem estar no mesmo lugar. Hum, então isso pode ser um tipo de quarto ou até mesmo um tipo de hotel. Por enquanto, basta colocar o tipo de quarto. Então, logo abaixo, também há acomodações com todos os filtros diferentes. Então, se eles não selecionaram uma da página anterior, a página de descoberta de destinos, se não a colocaram em uma data e tal, eles podem fazer isso a partir daqui. Eles podem adicionar o número de viajantes e assim por diante. E depois veja as diferentes acomodações para essa viagem. Logo abaixo, eu coloquei um pouco de audiência. Assim, você pode ver quais são as classificações dessa propriedade ou o destino real, com a possibilidade de vê-la em formato de carrossel Então, logo abaixo, você vê alguns destinos semelhantes. Se isso não for tão agradável para você, você pode encontrar outros que estão disponíveis nos cartões que estão aqui Todos são cartões de destino semelhantes a este É claro que você pode incluir muito mais nesta página, talvez um mapa até coisas como políticas de check-in, check-out e assim por diante. Há muito mais coisas que podem ser incluídas nisso. Por enquanto, estou mantendo as coisas simples. Acho que estou colocando os mesmos requisitos para esta página. Vamos prosseguir e passar para a próxima página no wireframe, que é a página de reserva Agora, essa página de reserva é essencialmente a página de reserva que vem logo após a seleção da acomodação. Então, se eu selecionar uma das acomodações aqui, esta é a página que será aberta. 13. Wireframe da tela de reserva: Eu listei os itens de que precisamos para nossa tela de reserva. Agora, fiz isso com a ajuda de examinar outras plataformas semelhantes, além de me referir ao Chat GBT ao lado E aqui está o que eu inventei. Temos os detalhes da acomodação. Então, só queremos ver o quarto ou o hotel que eles estão reservando ou em que ficarão hospedados. Existe a possibilidade de eles ficarem hospedados em vários lugares se esse destino, você sabe, esse lugar para o qual eles vão ter vários locais diferentes nos pacotes, então talvez queiramos incluir isso no design, nas datas selecionadas, no botão B e no botão de livro, alguns complementos. Portanto, no PRD ou no documento de requisitos do produto, uma menção à necessidade de reservar serviços adicionais, como aluguel de carros, guias ou atividades locais e assim por diante Eu adicionei isso aqui também. Informações de pagamento e , em seguida, informações pessoais. Então, nome, e-mail, número de telefone e detalhes de check-in e check-out. Agora, em uma tela como essa, pode ser bom incluir alguns detalhes da acomodação em um lado e, em seguida, o restante das informações ou a entrada que o usuário deve inserir no outro lado. E, normalmente, gosto de manter as coisas consistentes. Assim, mantendo os detalhes no lado direito, eles podem ver a acomodação que estão reservando. E então, no lado esquerdo, podemos ter todos os campos aqui. que possamos fazer isso, começando do lado esquerdo, vou colocar um botão Voltar aqui e logo abaixo dele, apenas um título para confirmar a reserva. Então, provavelmente queremos coletar nossas informações pessoais aqui. Podemos não chamá-las de informações pessoais, mas por aqui, vou adicioná-las aqui com os diferentes campos, e-mail, número de telefone, nome, sobrenome, e-mail, telefone. Isso pode ser parte de uma seção. Em seguida, a seção logo abaixo que pode ser informações de pagamento. Para isso, provavelmente precisamos de um número de cartão de crédito. Além da data de validade, CVV e provavelmente o nome da pessoa no cartão Então, vou apenas adicionar isso aqui, mas nas maquetes reais, provavelmente vamos colocá-lo de forma um pouco diferente Em seguida, queremos adicionar nossos complementos, para que os complementos possam ser acessados aqui. E podemos ter pequenos cartões como esse que representam os diferentes pequenos complementos que eles podem adicionar à viagem com algum título e uma breve descrição do que isso faz. Também podemos incluir uma imagem, se você quiser , aqui, talvez logo no topo. E então o que sobrou aqui. Selecionamos nossa data e detalhes da acomodação, para que possam ir juntos , bem como um botão de reserva. Então, vou fazer isso um pouco mais curto para que possamos. Vamos lá. Imagem. O nome. E então o que eles estão reservando? Um quarto, por exemplo, e alguns detalhes da outra página, como datas e número de pessoas. E, claro, é muito importante incluir o preço. Eu não adicionei aqui, mas definitivamente queremos mostrar o preço, o preço total e o que o usuário pode esperar pagar E podemos então ter um botão de livro aqui embaixo para concluir a reserva. Então, temos o botão lá embaixo. Agora, fizemos mais páginas complexas juntos. Como tarefa, sairei da tela do perfil e da tela favoritos ou da página onde eles podem ver todos os itens dos favoritos Nessas duas páginas, vou deixar as tarefas para você fazer Voltaremos na próxima palestra e começaremos a criar nosso guia de estilo para o aplicativo e a desenvolver nosso aplicativo juntos 14. Recebendo feedback: Então, uma das coisas mais importantes sobre ser designer ou simplesmente fazer qualquer coisa no campo criativo é realmente receber feedback importante de pessoas que já estiveram lá, que fizeram isso, que estão trabalhando em empresas como Amazon, Shopify e grandes empresas que passaram pela jornada pela qual você está passando Mas, na verdade, criei essa ferramenta chamada site Loom, que é onde você pode obter feedback diretamente de especialistas e também de mim Se você acessar stloom.com, poderá procurar profissionais de design que estejam disponíveis para lhe dar feedback imediatamente Digamos que eu esteja tentando me candidatar a um emprego na Square. Posso pedir a Elizabeth aqui que realmente me dê feedback sobre meus designs que mostrarei em meu portfólio, pessoas que trabalham na Square e eu podemos pedir feedback diretamente. Se eu tiver um projeto em mente, posso simplesmente pedir comentários do Figma sobre meu projeto ou, se eu quiser apenas um feedback em vídeo, posso pedir um feedback em vídeo Digamos que eu queira realmente pedir comentários a ela sobre Figma, basta clicar em solicitar feedback Então, o que você faz é pegar o link do arquivo Figma. Este é meu arquivo Figma. Vou clicar em Compartilhar, copiar o link. E vá até aqui e cole. Posso perguntar a Elizabeth sobre o que eu quero feedback. Claro, o UIUX, talvez o design visual e talvez se estiver pronto para ser entregue aos desenvolvedores Se houver mais alguma coisa que eu também possa perguntar a ela especificamente, você pode me dar um feedback sobre se esse é um bom projeto para mostrar no meu portfólio E o fluxo do usuário faz sentido? Vou fazer suas perguntas específicas e, em seguida, clicar em pagar e enviar solicitação. Depois de fazer isso , a pessoa que está lhe dando feedback examinará seu arquivo deixará comentários falsos no Mac. Se você pedir um vídeo, ela enviará um vídeo ou um feedback por escrito que você possa continuar melhorando seus designs, em vez de confiar apenas em suposições Definitivamente, dê uma olhada nisso. Se você está pensando em executar seu projeto por algumas pessoas antes de publicar 15. Escolhendo um esquema de cores: Com nossas estruturas de arame prontas, hora de passar para a próxima etapa do nosso projeto, que é criar alguns estilos para o projeto. Agora, os estilos são a base do nosso projeto, e os estilos incluem coisas como o esquema de cores, a tipografia que vamos usar e, em alguns casos, o sistema de design que queremos usar, se você quiser usar um ou criar um do zero Então, nesta seção do curso, vamos nos concentrar em configurar o básico para que possamos começar montar os modelos e não precisaremos mais nos preocupar com cores e tipos quando chegarmos a essa parte do projeto Portanto, há alguns recursos que eu uso quando se trata de gerar esquemas de cores. Antes de passar para os outros, quero mostrar que o CHA JBT também apresenta esquemas de cores decentes Se você disser no que está trabalhando e pedir algumas cores, ele surgirá com alguns tons agradáveis que você pode usar em seus projetos E aqui estão alguns outros recursos que eu geralmente uso, e eu recomendo que você os confira. Os links também estão nos recursos de todas essas ferramentas que vamos examinar. Um deles são os refrigeradores. Você pode clicar em iniciar o gerador aqui e simplesmente ir direto para a primeira paleta que ele fornece O seu provavelmente será diferente do meu. Basta clicar na barra de espaço do teclado e ela continua gerando cores diferentes. Agora, se você gosta de uma cor, digamos que eu gosto desse azul marinho. Posso clicar em Bloquear e, em seguida, continuar pressionando Espaço para combinar com outras cores semelhantes ou complementares, e posso continuar bloqueando as cores diferentes que desejo usar no meu Então, se eu ver uma boa, sempre posso clicar em Bloquear e continuar gerando o resto da minha paleta Geralmente, não precisamos de mais do que três cores em um projeto. Um para coisas como planos de fundo ou caixas de alerta e coisas assim Outro para ações primárias, como botões, outro para ações secundárias ou até mesmo uma cor de destaque para usar em determinadas partes do projeto, como o texto ou, potencialmente alguns planos de fundo aqui e ali e assim por diante Você não precisa de cinco conjuntos completos de cores. Na verdade, isso pode ser um pouco demais. Sinta-se à vontade para experimentar essa ferramenta. Há outro, ai coolors.co. Esse é um esquema de cores gerado por IA. Ele fornece algumas informações iniciais que você pode experimentar e ver como ficaria em uma tela de painel como esta aqui. Ou você também pode avisar. Você pode tentar pesquisar cores específicas. Então, se eu disser algo como cores do pôr do sol, digamos, e gerar, vou criar algumas cores relacionadas ao pôr do sol. E, claro, se você não gostar de algumas das cores que ele criou, você pode mudá-las. Você não precisa necessariamente o esquema de cores exato que ele oferece, ou pode fazer coisas como Ocean, já que estamos criando um aplicativo de viagens, ou até mesmo vamos experimentar a praia, ver o que ela oferece. Sim, isso é um pouco melhor. Portanto, sinta-se à vontade para experimentar este. Há esse outro chamado colors do MSI. Novamente, descreva o propósito de sua combinação de cores, viaje com diferentes tons de praia e água Estou apenas inventando uma frase aleatória aqui para ver o que isso nos daria. Sim, isso nos dá alguns azuis claros e alguns tons interessantes E você sempre pode ir em frente e gerá-lo novamente, se não gostar desse. Definitivamente, são alguns tons de azul. Temos algumas cores arenosas aqui. Isso é bom. Por último, mas não o leaves de blank.com também ajuda você a criar não apenas cores, mas também fontes Talvez experimentemos as fontes no final das contas. Por enquanto, vamos experimentar as cores. Escreva uma solicitação que descreva seu projeto, destino de viagem, aplicativo de reserva com destinos ensolarados. Novamente, há um aviso totalmente aleatório, mas temos algumas cores interessantes aqui. Eu até criei uma maquete em que você pode ver como seria a aparência ou a paleta de cores em diferentes projetos . Essa é uma pergunta interessante. E você pode seguir em frente e alterar cores específicas. Se você não gosta dessa laranja, pode torná-la mais clara. E mostraria a você, em diferentes projetos, como seria. Agora, pessoalmente, estou inclinado a usar refrigeradores só porque usei mais essa plataforma, mas, é claro, sinta-se à vontade para usar um para criar seu próprio esquema de cores ou fique à vontade para copiar as cores que vou usar Compartilharei os códigos hexadecimais do esquema de cores na próxima palestra Vá em frente, faça uma pausa aqui, escolha um esquema de cores da sua plataforma favorita e nos vemos na próxima palestra 16. Escolhendo um conjunto de tipos: Então, escolhi esse esquema de cores para avançar no meu projeto. Agora, é claro, o seu pode parecer diferente. Portanto, fique à vontade para acompanhar o seu. Vou usar o azul como laranja primário e secundário aqui e usar esse preto para coisas como fontes e texto. E então esse branco aqui para coisas como fundo ou fundos de cartões , e assim por diante Agora, para as fontes, onde vamos escolher um conjunto tipográfico e quais são alguns recursos aos quais temos acesso Agora, para este, de longe, o mais fácil e confiável, o Google Fonts. O Google Fonts agora também está no próprio Figma, então você não precisa mais baixar ou importar nenhum deles para o Sigma, então isso é ótimo Portanto, certifique-se de que, se você tiver alguma fonte personalizada, reinicie o Figma se você não a ver imediatamente. Agora, fique à vontade para pesquisar as fontes do Google. Quando se trata de suas fontes, queremos escolher duas fontes. Um para o texto do título. Então, são coisas como títulos, o nome do aplicativo ou qualquer título e coisas assim. Usamos uma fonte de título. Portanto, isso pode parecer um pouco diferente da sua outra fonte, que é a fonte do corpo. Então, idealmente, gostaríamos de escolher duas fontes diferentes. Agora, para um aplicativo realmente simplista, você pode escolher um, e alguns têm versões diferentes da fonte que você pode usar Então, você pode usar, por exemplo, condensado robótico para sua cabeça e, em seguida, usar roboto mono para seu corpo, apenas Não estou necessariamente dizendo que você deveria fazer isso. Mas há muitas fontes boas que você pode usar aqui. Os outros dois aqui que eu estava mostrando deblank também fornecem fontes com as quais você pode trabalhar Então, se eu abrir e acessar as fontes, inserir seu prompt, vou pesquisar aplicativo de viagens aqui e pronto. Você obtém diferentes pares de fontes com os quais você pode trabalhar. Você pode ver isso em diferentes tons. E se você clicar em Obter fonte, você será direcionado diretamente para o próprio Google Fonts. E você também pode digitar algo aqui. Obviamente, você gostaria de considerar como deseja que sua marca seja Portanto, se você estiver trabalhando com um cliente, gostaria de escrever essa parte antes de passar para a próxima etapa. Provavelmente, convém consultá-lo sobre o material de marca, especialmente se ele já tiver material de marca pronto, como fontes que já estão disponíveis para você usar Agora, aqui, vou escolher duas fontes e frente com aquelas. E essas duas fontes serão Libre Baskerville para minhas E para as fontes do corpo, vou escolher noto sends aqui Então, essas serão as duas fontes que eu vou usar. Mas, novamente, fique à vontade para usar seu próprio par de fontes. Voltaremos nas próximas palestras para realmente adicioná-los como estilos de fonte ao nosso aplicativo 17. Criando estilos de cores: Tudo bem, então eu escolhi isso como meu esquema de cores, e espero que você também tenha definido seu próprio esquema de cores. Caso contrário, sinta-se à vontade para acompanhar e usar este. Basicamente, vou usar o azul como nossa cor primária e esse laranja é uma cor secundária. Esse preto como cor primária do texto. A razão pela qual não vamos usar uma cor totalmente preta como zero, zero, zero em termos de código hexadecimal queremos algo que seja sutil e um pouco menos escuro só porque é mais agradável aos olhos E essa é uma boa cor de fundo que podemos usar. E, claro, podemos criar vários tons para todas essas cores e usar os tons apropriados. Agora, o que queremos fazer é mover isso para o nosso arquivo Figma e, antes de fazer isso no figma, vamos criar um novo projeto e ficar à vontade para criá-lo em sua pasta de rascunhos ou em qualquer outro lugar projeto e ficar à vontade para criá-lo em sua pasta de rascunhos ou em Crie um novo arquivo de design. E esse arquivo de design será nosso projeto onde nossos estilos viverão, nossas maquetes reais e tudo Então, vamos renomeá-lo para Manderwis. E nesta primeira página, vamos renomeá-la como nosso guia de estilo e colocaremos todos os nossos estilos aqui Agora, para criar um estilo, tudo o que você precisa fazer é acessar os estilos locais aqui e adicionar um novo estilo. Agora, neste momento, estamos reunindo o estilo de cores, então vamos começar com isso. Se você clicar aqui, perguntaremos: qual nome você quer dar à sua cor? Nesse caso, podemos realmente dar ele um nome como primário. Você pode adicionar uma descrição se quiser. Portanto, se você estiver trabalhando em equipe e quiser descrever exatamente onde está usando essa cor, isso pode ser útil. Agora vou copiar o código hexadecimal daqui. Sinta-se à anotar essa cor se quiser usar a mesma. Vou usar o código hexadecimal aqui para o azul. Sinta-se à vontade para fazer uma pausa aqui para também escrevê-lo em seu projeto, voltar aqui e colar nas propriedades E agora temos o estilo com essa cor como cor primária e um toque livre cria estilo, o estilo foi criado. E em qualquer lugar onde temos um objeto, digamos que temos esse retângulo e queremos aplicar esse preenchimento, simplesmente acessamos em vez de escolher a cor ou manualmente toda vez que inserimos esse código hexadecimal, tudo o que precisamos fazer é aplicar estilos e variáveis e escolher o Foi aplicado. Agora, a vantagem de usar estilos, em vez de não usar estilos, é que sempre que você tiver uma alteração em seu esquema de cores , digamos que, em vez dessa cor primária, eu queira usar um tom diferente de azul , que também será alterado onde quer que você esteja usando essa cor Como você pode ver, no momento, estou apenas alterando o estilo da cor e não o preenchimento desse retângulo específico Então, onde quer que eu esteja usando essa cor, ela muda automaticamente. Então essa é a vantagem de usar estilos. Então, agora, o que queremos fazer é criar estilos para todas as cores, todas essas cores aqui. Portanto, já temos o primário Tudo o que você precisa fazer é repetir esse processo para uma cor secundária, para uma cor de texto e para uma cor de fundo. Agora, vou deixar isso como algo que você pode fazer. Então é assim que você cria estilos de cores. Agora vamos fazer uma pausa aqui e voltaremos na próxima palestra, onde realmente usaremos um plug-in para nos ajudar a fazer isso mais rapidamente e também introduzir tons em nossos estilos de cores 18. Usando plugins para criar estilos de cores: Então, na introdução, expliquei como podemos adicionar plug-ins a partir do nosso toque de ação aqui embaixo ou pressionando o comando K ou a tecla Control no Windows e acessando nossa guia de plug-ins Agora, queremos criar tons diferentes de nossas cores primárias para que possamos aplicar tons diferentes. Se você quiser um azul mais claro, podemos aplicar um mais claro. Se você quiser um cinza mais claro, podemos aplicar um cinza diferente. Dessa forma, você não precisa repetir esse processo várias vezes para criar estilos diferentes com tons diferentes. Podemos simplesmente usar um plugin que nos ajude a fazer isso. Agora, para usar esse plug-in, vou excluir o retângulo e também excluir o estilo que criamos aqui, o estilo local para essa cor primária Agora, esse plugin configurará tudo para nós. Tudo o que precisamos fazer é acessar nosso menu de ação, acessar plug-ins e widgets pesquisar o plug-in chamado Foundation e selecionar esse plug-in Foundation e gerador de cores de base Logo ao abri-lo, você pode ver que tem tonalidades diferentes e elas usam sistemas diferentes, desde órbita até sistema Atlassian, design e design de materiais, que são maneiras diferentes chamar as tonalidades com diferentes convenções de nomenclatura Aquele que eu costumo usar como design de materiais, aquele em sua cor 500 é a principal que você seleciona e, em seguida, cria vários tons mais escuros e vários tons mais claros Agora, essa não é a cor que queremos. Essa é a cor que eu copiei do meu estilo de cor. Então esse é o azul que realmente queremos. Podemos chamá-lo de azul ou podemos realmente alterá-lo para primário e, em seguida, clicar em Criar estilos. Agora, este plugin irá em frente e criará esses estilos na pasta base aqui ou na categoria, e em primária. Temos todas essas cores agora. Agora, esse Hexcoe que copiamos é quatro 500 primários e vem desse estilo de cor que eu criei Então, fique à vontade para parar um segundo aqui e configurar isso. E o que você também pode fazer aqui é obter a paleta, clicando em paleta aqui e colando a mesma coisa no Isso torna mais fácil para os desenvolvedores visualizarem seu esquema de cores depois de montá-lo, e eu recomendo, em seu guia de estilo incluir todas as paletas que você usa Vou repetir esse processo mais algumas vezes uma vez para a cor secundária, essa laranja. Lá vamos nós. Renomeie-o como secundário e use o design de materiais, crie estilos, obtenha a paleta, Vou colar o código e me certificar de chamá-lo de secundário aqui, depois clicar em Criar estilos e obter a paleta E está apenas colado em cima do outro. Queremos seguir em frente e queremos que agora, está colado em cima do outro, então vou tirá-lo do caminho até aqui Aí está. Essa é a nossa cor secundária. Eu inseri a cor preta que temos, e podemos nomear esse texto e usá-lo em nossos tecidos Agora, esses são todos iguais. Nós realmente não precisamos deles. Então, podemos realmente seguir em frente e excluir tudo que é 600-900 Crie estilos, pegue a paleta aqui, tire isso do caminho Vamos excluir tudo o que é 600-900 porque eles são todos do mesmo tom, praticamente E do meu texto secundário ou real, 600 a 900, vamos selecionar Shift selecionar todos eles e excluir esses estilos. É tudo o que precisamos. Para a cor de fundo, vou copiar a cor da concha, adicionar um estilo chamado plano de fundo e colar esse código hexadecimal aqui Agora, eu realmente não gosto de como existe essa pasta ou categoria básica. Nós realmente não precisamos disso. Então, vamos selecionar todos os estilos de texto secundário primário aqui e movê-los para fora dessa pasta ou categoria, e vamos removê-los. E para este, vou continuar e reescrevê-lo em maiúsculas, desta forma Então, agora temos todos esses estilos que esse plugin configurou para nós. Podemos usar vários tons de cinza diferentes para nosso texto, para nossa cor secundária e primária, e uma cor de fundo que podemos usar. Para esses, vamos adicionar uma seção. Podemos separá-los juntos e criar um esquema de cores como esse. Portanto, está bem organizado. E é assim que usamos plug-ins para nos ajudar a adicionar nossos estilos aos nossos projetos. Agora estamos prontos para usar cores em nosso projeto. Vamos voltar na próxima palestra para também aplicar nossos têxteis 19. Adicionando estilos de texto: Tenha nossos estilos de cores. Agora queremos adicionar nossos tecidos Eu escolhi essas duas fontes para usar meu título e depois essa para a fonte do meu corpo. Sinta-se à vontade para usar a fonte de sua preferência anterior Eu vou com esses dois. Novamente, fique à vontade para acompanhar e aplicar as mesmas cores. Essas são fontes do Google que devem ser adicionadas automaticamente ao seu arquivo Figma para que você não precise baixar nenhuma fonte O que fazemos para aplicá-los ao nosso projeto? Em primeiro lugar, vou apertar a tecla T no meu teclado, ou você pode selecionar T aqui e escrever um texto e escrever aqui. Vou aplicar minhas fontes de título a isso e alterar o tamanho da fonte para 16. 16 é uma boa fonte base que normalmente é usada para projetos web e móveis. E então o que fazemos é escalar nossa fonte cima ou para baixo a partir de 16 pontos. Esse é um bom sistema para usar e geralmente funciona na maioria dos dispositivos. Agora, vou duplicar este pressionando o Comando D, então temos uma duplicata dele. Mova-o para cá e mude este para corpo. Então, basta clicar duas vezes e alterar o texto. E tudo o que vou fazer é mudar a família de fontes aqui para Noto Sans, que é o que estou usando para o corpo Novamente, vá em frente e aplique sua família de fontes , se for diferente. Para mim, vou usar esses dois. Agora, para transformá-los em têxteis, tudo o que precisamos fazer é selecioná-los, acessar a tipografia aqui, aplicar estilos E vamos seguir em frente e criar um estilo a partir desse texto. E podemos chamá-lo de, digamos, novamente, se você quiser, pode dar uma descrição, mas não precisa, e eu crio um estilo. Agora, esse corpo de texto se transformou em um estilo que podemos desvincular daqui se você quiser fazer alterações nele ou separar o Ou se clicarmos em qualquer lugar em nossa tela, podemos ver esse tecido adicionado aqui também Outra forma de criar um tecido é clicar em Mais aqui e depois dar um nome a ele, escolher as propriedades, ou seja, a família real da fonte Dessa forma, eu teria que pesquisar Noto Sans. E digamos que eu queira fazer uma ousada. Então, vou escolher negrito aqui e, em seguida, chamá-lo de negrito corporal e escolher o tamanho da fonte, que é 16. E agora eu tenho dois tecidos. Um é chamado de corpo com um senso de nota de 16 pontos em pixels e, em seguida, temos um em negrito. Então, digamos que eu queira mudar esse texto que tenho aqui para o negrito. Basta clicar em nosso tecido aplicado e alterá-lo para negrito Agora, a qualquer momento, digamos que queremos fazer alterações nesse texto em negrito, queremos torná-lo ainda mais ousado Na verdade, podemos aplicar isso aqui. E, como você pode ver, foi aplicado lá também. Então aí está. Agora, é assim que você cria tecidos no Figma. E, claro, existem plug-ins para ajudá-lo a configurar um sistema para seu texto, porque, no momento, estamos na base do nosso projeto e queremos várias fontes que possamos usar em vários lugares. Então, você quer uma fonte maior, talvez para os títulos da sua página, então queremos uma fonte menor ou uma fonte de tamanho médio para, digamos, a descrição, e então você quer uma fonte de corpo menor para uso genérico. É sempre bom ter uma escala de fonte ou escala de tipos aplicada em seus projetos, e voltaremos na próxima seção para ver as escalas de tipos e como podemos usar o plug-in para configurá-las mais rapidamente 20. Usando uma escala Typescale: Então, agora criamos esses dois tecidos. Vou manter pressionada a tecla Shift, selecionar as duas e excluí-las. Dessa forma, podemos seguir em frente e configurar um usando Typescales Agora, há um plugin para fazer isso facilmente. Tudo o que você precisa fazer é ir até a guia Ações ou o menu Ações, pesquisar Typescale e eu gosto desta com fundo amarelo no Então, vou seguir em frente e abrir essa. E há diferentes sistemas que você pode usar em sua escala tipográfica. Agora, se você acessar typescale.com, poderá ver isso em ação para ver como é Posso até mesmo alterá-la para a fonte noto Sans que estou usando. Só para ver como seria. Então essa é minha fonte. O tamanho do corpo é de 16 pixels e posso usar escalas diferentes. Então, começando com um segundo menor, que é uma lacuna menor entre os diferentes tamanhos, há um segundo maior com uma diferença maior. E à medida que você sobe para o terceiro maior e o quarto perfeito, você vê uma diferença maior. Agora, normalmente vemos projetos usando o terço maior, quarto perfeito ou até talvez o terço menor. Acho que a terceira maior é uma boa opção. Agora, para nossa fonte corporal, na verdade não precisamos de muitas fontes. É realmente para o título que precisamos de fontes diferentes. Ou escalas diferentes. Para o corpo, podemos, na verdade, escolher um pouco maior e outro um pouco menor. Então, talvez três no total. Agora vamos ao nosso título, então esse seria este aqui, rolo ibrevascular Essas são as fontes que vamos configurar. Você também pode vê-los em pixels. E sempre podemos arredondar para baixo, então use 61 pixels para H um, use 49 pixels ou 48 pixels para H dois, 39 pixels para H três, e assim por diante. Então, queremos configurar isso usando esse tipo de plug-in de escala. Figma. E tudo o que precisamos fazer selecionar o texto que temos, que neste caso, é esse texto do cabeçalho com a fonte do título de 16 pixels selecionada, e vamos escolher o terço principal como opção. E escolha arredondar para o pixel inteiro mais próximo, para que não obtenhamos decimais e, em seguida, criemos Typescale . E aí está. O plug-in é configurado automaticamente em nosso projeto. Podemos simplesmente selecionar todos eles e movê-los para cá. E com todas elas selecionadas, você pode espaçá-las um pouco mais dessa forma usando essa divisória roxa, usando essa divisória aqui E vou me livrar desse muito pequeno aqui. Nós realmente não precisamos disso. Além disso, como estamos usando um texto de título aqui, provavelmente também não precisaremos do de 13 pixels. Vamos usar esses aqui, começando com H um. Então, vamos chamar esse de H um ou H dois, H três, quatro, cinco, seis e, em seguida, chamá-lo de R sete, dois. Fazer isso porque, no momento esse plugin não cria estilos para nós. Então, o que precisamos fazer é selecionar a fonte aqui. E novamente, vá até aqui mais e chame esse de H sete. Crie estilo e trabalhe até chegar ao H one. Então crie outro, chame de seis anos, crie estilo. Para este, vamos fazer mais H cinco mais H quatro. Então, reserve um segundo para fazer isso comigo. Faltam mais três. Esse tem três anos. E esses são os nomes para que, ao aplicá-los, saibamos o que eles significam. Dois anos, e esse vai ser H1. Opa, H one, aí está. Então, agora, se você clicar em nossa tela, veremos que também temos todos esses tecidos Eles não são realmente organizados. Também podemos agrupá-los. Então, se você quiser fazer isso, podemos selecionar a primeira, segurar a tecla Shift, como a última, clicar com o botão direito do mouse e fazer Adicionar nova pasta e chamar essa ou as fontes de cabeçalho como esta. Então, agora eles estão todos sob essa pasta de cabeçalhos. Linda. Agora, queremos fazer a mesma coisa com nossa fonte corporal. Vamos executar a mesma escala de tipo de plugin. E, novamente, para este, queremos apenas colocar uma fonte para cima e outra para baixo. Não queremos usar muitos e também arredondar até o pixel mais próximo e também fazer Major Third. Crie uma escala de tipos. Agora temos três diferentes, um pouco maior, um pouco menor. Vou espaçá-los um pouco novamente. E nós vamos fazer a mesma coisa. Vamos selecionar o primeiro, chamá-lo de nosso corpo LG para representar grande, criar estilo, este. Vamos fazer mais, e chamar isso de nosso corpo, criar estilo, e vamos fazer aqui mais novo e fazer corpo SM para pequenos. Ou você também pode chamar isso de texto de rodapé. Na verdade, os dois funcionam. Vá chamá-lo de rodapé Agora, uma coisa que eu recomendo que você faça é primeiro organizá-las dessa forma e também duplicá-las para as fontes do corpo, e vamos separar todas Vamos selecionar todos eles e definir negrito como peso e, em seguida, criar os estilos de parafusos. Então, vamos fazer mais neste primeiro, chamá-lo de body g bold. Crie estilo. E neste vamos criar estilo, body dash bull, criar estilo, e neste vamos fazer footer dash bull, Agora, eles realmente não parecem bons do jeito que os temos aqui. Não ajuda muito. Então, em vez desse texto de espaço reservado do Quickfox, altere isso para H um, altere isso para H dois. Mudanças para H três. Novamente, isso não é só para você. Isso também é para os desenvolvedores que examinarão seus sistemas de design e aplicarão as cores e os estilos ao texto que você tem. Para que você tenha a convenção de nomenclatura aqui definida corretamente, vamos fazer a mesma coisa, dar a eles os nomes que eles têm, então esse é o corpo LG Esse é só um corpo. Este é rodapé. E aqui você adivinhou. Vamos renomear isso para body g bold. Este vai ser body dashbl e este vai ser footer Organize-os com cuidado. Também vamos colocar tudo isso abaixo do corpo do texto no painel de propriedades à direita aqui, adicionar uma nova pasta e chamar essa pasta de corpo. Então, temos nossas fontes de cabeçalho. Temos nossas fontes corporais como tecidos configuradas aqui, prontas para serem usadas, e as organizamos usando uma seção, desenhamos uma seção ao redor desses textos e chamamos isso de nossos estilos de texto Basta colocá-los aqui para referência. Portanto, nosso guia de estilo está praticamente configurado. Estamos prontos para começar a configurar nosso projeto e aplicar nossas cores e tipos conforme necessário. Para fazer isso, vou criar uma nova página aqui, chamá-la de nossas maquetes, e é aqui que faremos nossas Então, vamos voltar para a próxima palestra para começar 21. Estilos vs variáveis: Antes de continuar, também quero abordar as variáveis locais. Agora, temos estilos e também variáveis. Em nossas variáveis, também podemos configurar coisas como variáveis de cor e variáveis de string, que podemos usar para coisas como família de fontes e assim por diante. Agora, há dois benefícios em usar variáveis em vez de estilos para nossas cores, pelo menos. E esses dois são o número um, você pode ter um sistema de design mais complicado e ter variáveis interconectadas entre si Então, digamos que você esteja criando uma cor de superfície para usar em seus botões. Ao criar um sistema de design em torno dele dentro de sua tabela de variáveis, você pode ser mais específico sobre como essas cores devem ser usadas. E como parte disso, você também pode ter modos diferentes. Então, se você quiser um modo escuro, você pode configurá-lo mais facilmente usando variáveis em comparação com estilos. E o segundo benefício é que você pode realmente usar o que é chamado de escopo Então, se você quiser, digamos, criar uma cor que só deve ser aplicada às suas bordas. Então esse é o traço ao redor, digamos que seus botões, você pode fazer com que, com variáveis, você especifique onde essa cor deve ser usada para que não seja muito complicado quando se trata de selecionar cores. Então, com esses benefícios, eu pessoalmente recomendo configurar cores como variáveis. Mas, na verdade, isso depende de sua preferência pessoal, e talvez você esteja trabalhando com uma equipe que já usa estilos e é boa com isso. Então fique à vontade para pular esta etapa e continuar com os estilos E caso você queira continuar configurando variáveis , tudo o que você precisa fazer é usar os estilos que criamos, basta pesquisar os estilos para variáveis e conectá-los. Pronto, e vamos detectar todos os estilos que você criou até agora. Você pode dar a eles um nome de coleção, para que fiquem todos juntos na coleção de cores e, em seguida, converta estilos em variáveis. Então, agora, se eu fechar este plugin, você pode ver abaixo das coleções aqui, que temos uma coleção de cores, e todas essas fontes até mesmo seu agrupamento foram transferidas para a tabela de variáveis Agora, ainda temos estilos aqui. Então, o que acontecerá é que se, digamos, criarmos um retângulo, ao selecionarmos a cor, veremos que temos essas variáveis, e você saberá que é uma variável porque ela tem uma forma quadrada aqui, e aquelas com um círculo são, na verdade, estilos Agora, como continuo com variáveis, não preciso mais de estilos, então vou excluir todos esses estilos. E continue selecionando apenas as variáveis. Agora, digamos que para esses textos aqui, não vamos aplicar as cores do texto a um preenchimento retangular É aqui que você pode usar o escopo acessando suas variáveis e descendo até, digamos, as de texto. Mantenha pressionada a tecla Shift, selecione todas elas e clique nessa opção para definir o escopo somente para o preenchimento dos textos, não para o traçado ou os efeitos. Então, agora o que acontecerá é que, com nosso retângulo, não veremos mais essa opção de texto Mas se criarmos um texto, digamos aqui e escolhermos o preenchimento, veremos essas opções de texto e aí está. Então esse é um dos benefícios das variáveis e é por isso que vou continuar usando variáveis em todo o projeto. Mas, novamente, está muito bom 22. Criando grades de layout de quadros: É hora de começar a montar nossas maquetes para nosso design, e eu abri aqui meus wireframes Portanto, se você tiver seus wireframes à mão, basta colocá-los à sua frente para poder usá-los em suas maquetes Vou começar com a página de inscrição aqui e depois seguir para a direita em todas as outras páginas E provavelmente há algumas páginas que vou deixar como uma tarefa para você fazer no seu próprio tempo Juntos, vamos trabalhar nas páginas que temos aqui. Então, começando com a página de inscrição, vou para a página de maquetes que criei Se você não tiver uma página de maquetes em seu projeto, você pode criar uma nova página clicando em mais aqui, adicionar uma nova página e, em seguida renomeá-la para maquetes para que você possa organizar suas maquetes possa organizar suas maquetes você pode criar uma nova página clicando em mais aqui, adicionar uma nova página e, em seguida, renomeá-la para maquetes para que você possa organizar suas maquetes e mantê-las todas ordenadamente aqui. Agora, para iniciar nosso projeto e criar nossa tela de inscrição, precisamos de molduras Essencialmente, o Frames nos ajuda a montar nossos designs para cada tela. Então, normalmente, usamos uma moldura para cada tela. Agora você pode acessar os quadros clicando no quadro aqui na caixa de ferramentas ou pressionando F no teclado E, no lado direito, você verá algumas opções padrão que geralmente são exibidas. Você tem alguns tamanhos padrão de iPhone Android, alguns tamanhos de tablet. E o que nos interessa são os tamanhos dos desktops. E eu normalmente uso o tamanho da área de trabalho aqui. Lá vamos nós. Ao clicar nela, criei uma moldura com o tamanho de uma área de trabalho. Isso é 14 40 por 1024 pixels. Agora, é claro, você também pode desenhar molduras. Portanto, se você pressionar F no teclado, poderá desenhar uma moldura personalizada para qualquer tamanho que desejar e, a qualquer momento, se pressionar a tecla Shift enquanto estiver desenhando a moldura, retângulos ou qualquer outra coisa, a largura e a altura serão bloqueadas para que a largura e a altura serão tenham a mesma largura e altura, você possa desenhar uma moldura quadrada, se quiser Essa também é uma dica útil a ser lembrada. Usando o Shift One, você pode ampliar para ajustar o zoom para ver tudo o que você tem. Então, eu voltei rapidamente para essa moldura de desktop que eu tenho. Vou diminuir um pouco o zoom aqui e vou clicar duas vezes para renomeá-lo para Signup Agora o nome desse quadro é inscrição e, dessa forma, eu e qualquer outra pessoa vendo esse design saberemos que esta é a página de inscrição E se precisarem encontrá-la, também poderão vê-la no painel Camadas. De onde você também pode clicar duas vezes para alterar o nome. Incrível. O que temos nesta página? Temos duas seções na página. Temos uma seção de imagens aqui à direita e, à esquerda, temos um e-mail. Temos o título da empresa junto com texto descritivo do que é Wander Weiss ou por que eles deveriam criar uma conta seguida por alguns campos de entrada e botões de inscrição, bem como Ou temos um sinal e um botão do Google e, em seguida, também um sinal e um campo de número de telefone. Então, vamos começar com esse design. A primeira coisa que queremos fazer é dividir nossa tela nessas duas seções e dividir claramente esses quadros. O que podemos fazer é usar o que é chamado de grade de layout. Agora, para configurar uma grade de layout, tudo o que você precisa fazer é clicar em seu quadro e ir até aqui onde diz grade de layout no painel de propriedades e adicionar uma como esta. Normalmente, você obtém uma grade como essa, mas o que nos interessa, que é a mais usada, é uma grade de colunas. Então, vamos mudar o tipo para uma grade de colunas. Em seguida, clicaremos nas configurações da grade de layout para aplicar algumas configurações personalizadas. Normalmente, em um projeto web como esse, vemos uma contagem de 12 para nossas colunas. Portanto, temos 12 colunas em toda a página. E isso é mais um tamanho padrão ou uma grade padrão da qual os sites são feitos, que é de 12 colunas E você verá páginas dividindo essas 12 colunas para mostrar conteúdos diferentes no lado direito, no lado esquerdo e no meio Agora, como as margens são o espaçamento da esquerda e da direita, eu normalmente gosto de usar um sistema de grade de oito pontos, que é basicamente manter todos os múltiplos de espaçamento do Então, consistente com isso, uma margem de 48 pixels é uma margem muito boa para usar. Agora, a calha está espaçando entre cada coluna. E atualmente está em 20. Mas, novamente, usando esse sistema de grade de oito pontos, vou usar oito vezes três ou 24. Linda. Você também pode reduzir a opacidade aqui ou até mesmo alterar a cor da sua grade, se quiser Eu vou fazer 5%, então é um pouco mais leve. Não precisamos que seja tão forte. Agora você sempre pode ativar e desativar sua grade aqui para poder ativá-la ou desativá-la sempre que quiser acessá-la Então, configuramos nossa moldura. Montamos uma grade dentro dela. Vamos voltar na próxima seção para começar a juntar essas seções 23. Colunas da página de inscrição: É hora de montar nossa página de inscrição. Então, vamos configurar dois quadros aqui, um para a imagem que teremos no lado direito. Então, vamos encontrar uma boa imagem para usar e, em seguida, teremos o lado esquerdo, que terá o conteúdo aqui. Então, voltando ao nosso projeto. Vou pressionar F no teclado e desenhar uma moldura como esta. E agora, embora você não possa realmente vê-lo porque ainda não há preenchimento. Eu tenho uma moldura aqui, estou redimensionando-a, e vamos usar quatro colunas aqui Na verdade, acho que cinco funcionam. E o que você notará é que, com a grade ativa, as coisas se encaixam imediatamente quando você estiver perto das bordas E para a altura, você quer ter certeza de que é de altura total. E você também pode verificar isso aqui. Você pode ver que é X zero e Y zero, que é o canto superior esquerdo. E também é 1024 para as alturas. Isso é incrível. Então, agora vamos clicar em F, criar outro quadro, e este vai ficar do outro lado disso. Então, aqui, ocupando sete grades. E agora temos dois quadros dividindo a página. E o que vamos fazer é seguir em frente e, por enquanto, alternar para ocultar a grade e focar em nosso design Agora que temos a divisão de para onde a imagem será exibida, bem como para onde o conteúdo da inscrição será direcionado. Para o preenchimento, vou adicionar um preenchimento aqui para que possamos adicionar uma cor ao fundo da nossa moldura. E eu vou escolher a variável de fundo que eu criei. Então, isso será usado como pano de fundo disso. Página de inscrição e, em seguida, queremos começar a adicionar alguns elementos aqui Então, queremos adicionar um texto aqui usando o Tiki, no sentido da direita. E então, a partir de nossos estilos, vamos escolher vamos tentar H dois. Esse é um bom tamanho de fonte para combinar. H um pode ser um pouco grande demais, então provavelmente é melhor usar H dois para este. Está parecendo bom. Agora, não vou me preocupar muito com o alinhamento e tudo No momento, vou alinhar tudo no meio E vou duplicar esse texto segurando alt e arrastando para longe do texto para que eu o duplique e crie E este vai servir como descrição. Então, provavelmente vamos usar um H six, então vamos tentar body Large para este. E vamos escrever um livro sobre destinos e pacotes incríveis de uma só vez. Então esse será o slogan que usaremos. E estou usando Alt aqui para redimensionar essa caixa de texto da esquerda e da E vamos alinhar o texto do meio para que tudo esteja alinhado no meio em termos do Para o VanderbisFont, vou experimentar uma das cores secundárias que temos Eu gosto de um pouco mais escuro, mas não tão escuro Acho que o 800 secundário parece muito bom para o logotipo aqui ou para o texto. E, claro, se tivermos um logotipo, podemos adicioná-lo aqui. Mas para este projeto, usaremos o texto como o próprio logotipo. E para o texto descritivo, usaremos o texto 400. Então é sutil, cinza , não está totalmente escuro. Também é um pouco mais leve e agradável aos olhos. Ok, isso parece bom. Agora queremos duas entradas aqui ou, na verdade, três, uma para o telefone número dois e depois dois botões aqui Uma inscrição, uma inscrição no Google. Agora, essas entradas se tornarão parte de um sistema de design que usaremos em todo o nosso projeto Portanto, é importante que criemos uma boa entrada que possamos usar em qualquer lugar e não precisemos refazer uma entrada em todos os lugares, em todos os lugares em que precisarmos de uma E, idealmente, queremos usar Autoayout para reunir não apenas essa entrada, mas também configurar o conteúdo aqui usando um layout automático E voltaremos na próxima palestra para explorar os benefícios de fazer isso e também configurar nossos campos de entrada 24. Verificação de contraste de cores: E você está colocando cores umas sobre as outras. Como se tivéssemos esse texto em cima desse outro plano de fundo que tem uma cor ligeiramente diferente. É sempre bom fazer uma verificação de contraste apenas para garantir que ele esteja acessível, e essas combinações de cores são realmente boas de usar, especialmente quando se trata de coisas como botões e assim por diante, para garantir que as pessoas possam realmente vê-las e que sejam facilmente legíveis E para fazer isso, o Figma tem esse recurso interessante onde você pode selecionar qualquer Então, vamos selecionar esse título de fornecedor aqui. Se você for para a seção de preenchimento. Agora, agora, é claro, se você selecioná-lo, ele solicitará que escolhamos entre as bibliotecas. Mas se você mudar para o personalizado, verá esse pequeno contraste de cor verificado, que nos mostra essa linha, e nos informará qual é a proporção da cor do primeiro plano com a cor do plano de fundo, e você deseja, é claro, garantir que ela atenda ao padrão de contraste, o que, neste caso, acontece Agora, você não precisa fazer isso, mas se você selecionar, digamos, a cor aqui, onde ela não atende à verificação de contraste de cores, você pode ver que a proporção está muito mais próxima uma da outra, e isso não é bom. E você verá esse pequeno ícone aqui que diz que o padrão de contraste não foi atendido. E se você clicar nele, isso garantirá que sua cor chegue ao tom mais próximo que atenda ao padrão, que é aproximadamente três para um aqui Obviamente, você sempre pode ir em frente e ajustar isso nessas áreas. Se você quiser uma cor mais escura ou digamos que selecione a cor aqui, ele encontrará a combinação mais próxima e a mesma coisa aqui Se você selecionar branco, ele realmente encontrará o cinza mais próximo para que ele atenda à verificação de contraste de cores. É sempre bom ter isso em mente ao iniciar seu projeto e aplicar cores em fundos de cores diferentes Agora vou apenas comandar Z para desfazer tudo isso e voltar para a cor selecionada. Vamos voltar e continuar em nossa página de inscrição 25. Usando o layout automático: Estou montando designs geralmente sem layout automático, então espero que esta palestra realmente mude sua opinião e também mostre os benefícios de por que você precisa usar o Autoayout em quase todos os lugares em Apenas como exemplo, digamos que eu tenha várias entradas aqui que queremos colocar em nosso design Então, eu não estou criando os impos no momento. Estou apenas mostrando um exemplo aqui. Se eu tiver várias entradas, até mesmo um botão, digamos que outra entrada aqui, elas não estão organizadas em nenhum formato estruturado Algumas coisas podem acontecer quando eu possa acidentalmente perder itens ou desalinhá-los Além disso, se eu quiser mover este aqui para, digamos, para outro lugar, então eu quero movê-lo um pouco mais aqui para baixo, eu tenho que mover este também. A mesma coisa aqui. Se eu quiser, por exemplo, mover este um pouco mais alto, eu teria que fazer ajustes em todo o meu design. E agora, se isso for muito alto, isso é próximo a esses textos aqui e eu tenho que mover esses textos. Portanto, há muito trabalho manual ajustar manualmente as molduras dentro de seus designs Agora, mesmo em desenvolvimento, é mais sistematizado onde as coisas são colocadas em um formato estruturado E é aí que o layout automático ajuda. Se eu clicar nesse quadro e pressionar Shift A no meu teclado, ele transformará o quadro em um layout automático. Como você pode ver, tudo ficou bem organizado. Em si, mas não parece exatamente o que queríamos. Então, vou pressionar o Comando Z para desfazer isso. Vou te mostrar outra maneira de fazer isso que é um pouco mais inteligente E se você clicar com o botão direito do mouse na moldura e, em vez disso, acessar mais opções de layout e sugerir o layout automático , a FIGMA examinará o interior da moldura aqui e perceberá que você tem várias coisas diferentes que podem realmente precisar de um layout automático adicional dentro dela Então, agora o Figmas criou três layouts automáticos, na verdade, tecnicamente quatro, considerando que este é o quadro principal que também foi transformado em um quadro de layout automático Então, eu tenho um aqui para esses dois botões ou entradas ou qualquer outra coisa E esses também foram colocados em um layout automático, e todos eles têm seu espaçamento exclusivo entre eles, que para este é de 21 pixels ou a lacuna, na verdade E esta aqui tem uma lacuna de 124, então todas elas têm lacunas diferentes entre elas. Lembro-me de que mencionei algumas palestras atrás é que normalmente recomendo usar o sistema de grade de oito pontos mesmo para o espaçamento entre os elementos Agora, aqui com meu layout automático para o Wander ois e o subtítulo ou descrição, eu recomendaria usar um espaçamento de 16 pixels entre esses dois ou 24 16 parece bom, então vou mantê-lo em 16. Agora, para o conteúdo aqui, podemos deixá-lo em 60. Na verdade, não preciso de nada disso ainda porque vamos realmente criar nossas próprias entradas Agora, uma coisa que você notará é que, com o layout automático, se você excluir o conteúdo, o quadro do layout automático será redimensionado de acordo com isso, para que você possa ver todas as propriedades de um layout automático à direita aqui, começando com a largura e altura, as opções de alinhamento, que você possa realmente alinhar objetos em seu layout automático do centro até o topo Agora, neste momento, não temos nem mesmo espaçamento. Portanto, a lacuna entre todos os nossos elementos dentro desse layout automático é de 60 pixels. Isso significa que se eu adicionar um elemento aqui, como um retângulo, ele terá 60 pixels de outros itens. Isso faz sentido. E aqui temos nossas margens entre cada lado, o lado esquerdo, o lado superior e o inferior Agora, isso está ativado agora porque nos permite adicionar preenchimentos individuais entre lados diferentes não precisamos disso agora, Na verdade, não precisamos disso agora, então podemos adicionar um preenchimento à direita e à esquerda ao mesmo tempo usando esse número aqui, e usaremos o preenchimento de 48 pixels sobre o qual falamos Quando estávamos configurando nossas grades, vamos aplicar a mesma aqui Mas para nosso preenchimento vertical, vamos fazer um pouco mais alto, então podemos fazer 86 ou 96 Portanto, eles têm mais espaçamento na parte superior e inferior. Normalmente, os quadros de layout automático têm tamanhos flexíveis. Isso significa que, se as coisas dentro de um quadro de layout automático diminuírem, como nos livramos deste ano de texto, como você pode ver, o layout automático está diminuindo para corresponder ao Vou apertar o Comando Z para desfazer isso. Isso porque atualmente temos o Hug ativado aqui. Mas se você quiser realmente mudar para um tamanho fixo, tudo o que precisamos fazer é redimensionar nosso quadro de layout automático aqui, baixá-lo novamente, e agora ele tem um tamanho fixo, que é o que queremos para este Mas esse nem sempre é o caso, como aprenderemos quando reunirmos nossas contribuições na próxima aula Então, agora temos um quadro de layout automático aqui com 1024 pixels como altura e uma largura fixa de 594 que está Seu layout é vertical, o que significa que, à medida que eu adiciono elementos dentro dele, ele será alinhado verticalmente Caso contrário, se eu escolher a horizontal, as coisas seguirão em direções diferentes. Vamos criar vários layouts para que você aprenda diferentes direções sobre como usá-los. Podemos ver a lacuna aqui entre objetos diferentes, nossa margem da horizontal para a esquerda e para a direita e a margem vertical ou preenchimento aqui Então é isso. Por enquanto, vamos voltar em sextura para começar a reunir nossas entradas 26. Criando campos de entrada: Espero que a palestra anterior tenha lhe dado uma ideia de como usar o Autolayout Caso contrário, não se preocupe, vamos usá-lo muito. Então, você definitivamente terá a chance de entender isso muito melhor. Então, agora queremos colocar alguns campos de entrada aqui, um para e-mail, para senha. Como fazemos isso? Bem, na verdade, podemos criar campos usando o Autoayout Tudo o que precisamos fazer é pressionar T no teclado e clicar aqui em nosso quadro e, por enquanto, chamaremos isso de entrada. Ou melhor ainda, vamos chamá-lo de espaço reservado. Agora, pressionaremos Shift A ou clicaremos com botão direito do mouse e adicionaremos o AutoLayout E agora temos um layout automático em torno disso, sem preenchimento à esquerda ou à direita na horizontal ou na vertical Então, queremos realmente mudar isso e ter um preenchimento na horizontal, vamos fazer 16 pixels E para nossa vertical, vamos tentar oito pixels e ver se isso é bom. Agora, o que vamos fazer é segurar a tecla Shift, selecionar esse título e subtítulo aqui também e pressionar Shift novamente para criar outro layout automático Então, dessa forma, temos esse elemento dentro deste aqui. Agora, o que podemos fazer é ir para a largura e, em vez de ter essa largura fixa, vamos escolher o contêiner de preenchimento para que essa entrada ocupe toda a horizontal que essa moldura de layout automático principal está ocupando. Porque, novamente, queremos que tudo seja consistente aqui. Agora vamos adicionar um preenchimento para que nossa entrada seja branca e adicionaremos um raio de canto de oito pixels ao redor dela Vamos segurar o comando para que possamos selecionar rapidamente os itens dentro do nosso quadro de layout automático , como este texto aqui. E em vez de corpo grande, vou mudar para apenas corpo. Para nossa entrada, não precisamos desse tamanho grande e também queremos alinhar nosso texto à esquerda Começando a se unir. Por fim, vou escrever um texto, talvez 200 para essa cor de espaço reservado E então, uma vez que tenhamos um texto realmente escrito dentro dele, podemos torná-lo maior. Tudo bem agora, é um pouco pequeno para entrada de texto. Então, em vez de oito pixels, em vez de oito pixels na parte inferior e esquerda na parte inferior e superior, vou tentar um espaçamento de 12 pixels, e acho que esse é um tamanho de entrada mais típico Portanto, nossa contribuição está se unindo. Talvez queiramos adicionar um título para que os usuários saibam exatamente quais informações digitar aqui. Para fazer isso, pressione T novamente e escreva um título como este e mantenha pressionada a tecla Shift para selecionar esses dois novamente, esses dois aqui, pressione Shift A, e agora esses dois também estão dentro de um layout Ato. Não queremos que essa lacuna seja tão grande aqui. Queremos uma lacuna menor, então podemos simplesmente arrastar esse espaçamento aqui para talvez oito pixels Você também pode ajustar essa lacuna a partir daqui. E então, em vez de um alinhamento superior central, queremos fazer um alinhamento superior esquerdo que, dentro dessa moldura de layout, tudo esteja alinhado à esquerda Então, agora temos esse belo campo de texto de espaço reservado ou campo de entrada com um título aqui Parece que está faltando alguma coisa, e acho que é uma boa borda em torno da entrada real. Então, vá em frente e selecione o layout automático dentro desse layout principal para que você selecione apenas a entrada em si desta forma e, em seguida, adicione um traçado para adicionar uma borda ao redor dela. Agora temos um traço preto ao redor. Está um pouco escuro demais aqui. Então, o que queremos fazer é fazer algo em torno da cor secundária que temos, talvez uma 700 secundária ou talvez até mais clara. Acho que esses 200 primários realmente parecem um pouco melhores. Então, eu vou continuar com isso. Agora temos uma entrada aqui. Isso parece ótimo. Agora, como vamos reutilizar essa entrada em vários lugares, é melhor transformá-la em um componente E para fazer isso, vamos voltar na próxima palestra. 27. Criando componentes: Na última aula, reunimos essa entrada e usamos o layout automático para montá-la Agora, o que queremos fazer é realmente transformar essa entrada em um componente, o que nos permitirá reutilizar esse componente em vários lugares E caso precisemos fazer alterações na entrada aqui, porque é um componente, as mudanças podem acontecer muito mais rápido porque você só precisa fazê-las em um só lugar, e esse é o componente principal e é aplicado a todas as instâncias. Isso fará mais sentido quando eu começar a montá-lo. Então, o que queremos fazer é na verdade, entrar aqui, selecionar essa camada que tem o quadro de layout automático contendo o título e a caixa de texto aqui, e queremos pressionar Alt Command K em um Mac ou Alt Control K no Windows. Agora, como alternativa, você também pode ir até aqui e clicar em Criar componente neste botão aqui. E agora isso foi transformado em um componente. Você pode ver que a cor não é roxa na borda, assim como no painel de camadas, também é roxa aqui, indicando que é um componente. Agora, esse símbolo aqui está mostrando que esse é realmente o componente principal. Portanto, você não quer realmente ter seu componente principal dentro de uma moldura. Você quer tê-los separadamente em outro lugar, como em uma página separada com todos os outros sistemas de design ou apenas colocados separadamente com todos os outros componentes. Então, por esse motivo, vou arrastar isso para fora daqui, fora do quadro de inscrição, colocá-lo aqui. E, de fato, podemos até renomeá-lo clicando duas vezes e chamando-o de input feel. Lá vamos nós. No momento, é difícil ver o título. Então, uma coisa que podemos fazer é criar uma seção para nossos componentes. Então, vou criar uma seção aqui para que possamos simplesmente colocar nossos componentes dentro de uma seção com uma cor de fundo. Então, por que não mudar a cor de fundo para branco ou, melhor ainda, você pode até escolher a cor de fundo para branco, e vamos renomear os componentes desta seção Então, qualquer componente que temos, o principal, vamos colocá-lo dentro desta seção de componentes. E agora temos o componente principal aqui para realmente ter uma cópia ou, como é chamado, uma instância dela dentro daqui. Podemos simplesmente copiá-lo e colá-lo usando o Command C. Clique duas vezes aqui, clique aqui e cole com o Command V. Awesome. E, como você pode ver, ele foi redimensionado porque, nesse quadro de layout automático, esse é o tamanho que temos para o conteúdo E, por padrão, a caixa de texto está preenchendo todo o contêiner, que é o que queremos. Agora, na verdade, isso pode ser um pouco amplo demais em termos do campo de texto. Então, podemos entrar em todo o nosso layout aqui e adicionar um pouco mais de margem. Talvez em vez de 48, possamos fazer 80, e esse é um tamanho melhor para isso em termos de espaçamento entre a esquerda e a direita Agora, você pode dizer que isso é uma instância e não o componente principal usando esse símbolo aqui. Não é o mesmo símbolo está aqui, indicando que se trata de uma instância. O que isso significa? Isso significa que se eu fizer alguma alteração, digamos, no texto aqui e começar a escrever qualquer coisa aqui, meu componente principal permanece intacto, e é assim que parece No entanto, do meu componente principal, digamos que eu queira fazer uma alteração de lacuna em vez de ter uma lacuna de oito pixels entre o título e a caixa, quero ter uma lacuna de 20 pixels. Essa mudança também foi refletida automaticamente na minha instância. Vou tocar no Comando Z para desfazer isso. E mais uma vez para desfazer a alteração do texto aqui. Então, isso significa que, em nossos casos, podemos fazer as alterações que quisermos e elas não serão aplicadas ao nosso componente principal, que é o que queremos. Dessa forma, podemos clicar duas vezes no título e alterá-lo para e-mail. Podemos clicar duas vezes no espaço reservado e alterá-lo para o e-mail at@gmail.com, por exemplo E agora temos uma entrada para o e-mail e podemos simplesmente duplicá-la pressionando o Comando D e fazendo outra cópia e renomeando essa E aqui dentro, vamos colocar uma senha de espaço reservado usando Alt e o número oito no meu teclado para criar uma senha de espaço reservado Então aí está. Agora, a diferença entre esses dois é um pouco demais. Então, o que podemos fazer é selecioná-los, pressionar Shift A e alterar a lacuna para talvez 24 pixels. Isso é melhor. Então é assim que criamos componentes a partir de elementos. No futuro, criaremos vários outros componentes para outras coisas , como botões e alguns cartões. E, novamente, qualquer elemento que achamos que vamos reutilizar muito em nossos designs. Mais uma coisa que vou fazer é mudar o texto do título aqui. Em vez de ser preto, vou mudá-lo para o nosso texto 500, que é um pouco mais claro. E, novamente, isso é melhor para os olhos. Então, vamos voltar na próxima seção para concluir a criação de nossa página de inscrição. 28. Adicionando botões: Tudo bem. Então, continuando com nossa página de inscrição, temos mais alguns elementos para adicionar a esta página. Analisando os wireframes, já adicionamos os campos aqui, o que é ótimo Então, agora precisamos de alguns botões para se inscrever ou fazer login com número de telefone ou conta do Google. Então, precisamos de alguns botões aqui e também queremos uma imagem. Então, por que não começamos primeiro com os componentes do botão, os criamos, os adicionamos à nossa página e depois voltamos para a parte da imagem. Agora, para botões, a maneira mais fácil é criar um botão usando o AutoLayout também, e faremos isso fora daqui para que possamos criar um componente que seja reutilizável em todo o reutilizável Com coisas como botões e entradas, você definitivamente quer criá-los como componentes Então, se você precisar fazer alguma alteração, é rápido e fácil e está tudo em um só lugar. Então, agora, para criar o botão, fora da minha tela, vou criar uma camada de texto usando o Tiki no meu teclado e escrever apenas um texto de espaço reservado simples como o botão funciona assim E para transformar isso em um layout automático, posso botão direito do mouse e clicar em ou layout ou , como atalho, Shift A faz o Então aí está, temos um botão agora. Ele já tem algum preenchimento nas laterais, que podemos ver que são dez pixels na parte superior e inferior e dez pixels na direita e na esquerda Então, definitivamente podemos usar isso ou podemos aumentá-lo um pouco mais Então, primeiro, vou renomear a camada para botão e transformá-la em um componente usando a botão e transformá-la em um componente tecla Altommand K ou Alt Control Novamente, você também pode fazer isso pressionando este pequeno botão aqui Agora, temos esse componente de botão aqui, e podemos definir um plano de fundo e uma cor de texto para ele. Então, para o plano de fundo, adicionarei um preenchimento e usarei os estilos e variáveis aplicados, e também usaremos nossa cor primária 500 nossa cor primária 500 como a cor principal do botão. Normalmente, você deseja usar sua cor primária e alguma cor secundária para criar diferentes tipos de botões e diferentes sensações e aparências. Vou aplicar o mesmo raio de canto do campo de entrada que criamos, oito pixels para nossos botões também Então, basta clicar nele e ir até a aparência e alterar o raio do canto Ou você também pode arrastá-lo para oito pixels assim. Isso também funciona. Agora temos esse botão e a beleza de usar o layout automático é que, se esse texto aumentar ou diminuir, digamos que tenhamos um nome de botão mais longo, o plano de fundo ou o contêiner também crescerão e diminuirão É por isso que você deseja configurar um layout automático para seus botões. Agora, o espaçamento da parte superior e inferior é, eu diria, muito bom, embora possamos aumentá-lo um pouco para 12 pixels e também a mesma coisa nas laterais Acho que podemos aumentar isso para 16 ou até 24 pixels, ficaria ótimo Agora, nesta seção , temos componentes. Vou arrastar nosso botão aqui também. Então, agora temos esse lindo componente de botão. Voltaremos para criar mais variações diferentes mais tarde. Mas, por enquanto, vamos aplicar isso aqui copiando-o. Então eu pressiono o Comando C, entrando em nosso quadro aqui onde temos nosso e-mail e senha, e colo pressionando o Comando V. Novamente, no Windows, será Controle Agora, para o botão, eu queria ocupar todo o espaço do contêiner em termos de largura. Portanto, há duas maneiras de fazer isso. Você pode ir até aqui onde está escrito Abraço atualmente, e diz a largura em pixels Então, tem 101 pixels agora, e não tem nada a ver. Agora, abraço significa que qualquer conteúdo que exista dentro do layout automático, que atualmente é esse botão, o layout automático será redimensionado automaticamente com base no Então, novamente, se o conteúdo for mais longo, teremos um texto de botão mais longo. O layout automático será redimensionado. Agora, outra coisa que você pode fazer é, em vez de ter o conteúdo da cabana, encher o recipiente. Então, neste caso, quando enchemos o recipiente, ele ocupa toda a largura do recipiente em que está. E como o contêiner atual em que está é esse aqui, esse quadro de layout automático aqui onde temos nossas entradas, ele está tomando a mesma largura desses campos de entrada e preenchendo todo o espaço partir de agora, não importa o tamanho do texto aqui, a largura sempre preencherá totalmente o recipiente. Agora eu te disse que há outra maneira de fazer isso. Então, vou pressionar o Comando Z para voltar. Um atalho para encher um recipiente é segurar a tecla Alt e clicar duas vezes na borda do componente aqui Então, se eu clicar duas vezes, ele fará a mesma coisa. Vou trocá-lo para preencher. Portanto, é um pequeno atalho que aprendi há pouco tempo e, na verdade, tem sido muito útil Então, agora queremos renomear o botão aqui clicando duas vezes e alterando-o para se inscrever E se olharmos para trás, temos um botão de inscrição e, em seguida, temos um divisor Então, voltaremos para pegar o divisor em apenas um segundo. Por enquanto, vamos adicionar mais dois botões. Um para continuar com o número de telefone e outro para fazer login no Google. Então, vou clicar duas vezes, pressionar Comando D duas vezes para duplicar. Para este, vou alterá-lo para me inscrever com o número de telefone e, neste, inscrever-se no Google. Agora, uma coisa errada com esse design é que todos os nossos botões têm a mesma aparência. Queremos criar diferentes variações de botões para usar um tipo secundário de botão em alguns lugares onde uma ação é considerada secundária. Por exemplo, o login com número de telefone e a inscrição no Google não são os botões mais usados ou, mesmo que sejam, queremos separá-los desse botão de inscrição. É por isso que fazemos duas coisas. Uma é que queremos mudar a cor desses botões do azul primário que estamos usando para o secundário ou talvez um botão branco. E a outra coisa que queremos fazer é adicionar esse divisor. Então, vamos voltar na execução para fazer essas duas coisas. 29. Variantes de botão: Duas coisas que queremos fazer é alterar esses botões para um tipo secundário e também adicionar um divisor Começarei adicionando um divisor primeiro e, para fazer isso, também usaremos o AutoLayout e usaremos linhas e usaremos linhas e Então, para adicionar uma linha, você pode pressionar L no teclado ou, se você acessar suas formas aqui, ferramenta de formas, você também pode clicar em Linha a partir daqui. Agora, quando você está desenhando uma linha, se você desenhá-la em qualquer lugar, digamos aqui, você pode desenhar uma linha aleatoriamente como esta Vou desfazer ou, se você segurar a tecla shift, poderá desenhar linhas retas E essas linhas retas estarão em um ângulo de zero grau, 45 graus, 90 graus, e você obterá o ponto. Então, queremos uma linha reta. Então, vou deixar pra lá. A largura realmente não importa, e vou arrastá-la para nossa moldura de layout automático aqui. Então, agora temos essa linha preta aqui. Você pode ver isso. Está muito claro. Agora queremos dois desses para que possamos colocar um texto entre eles. É por isso que vou pressionar o Comando D selecionando-o. Quando há um objeto dentro de uma moldura ou nossa moldura de layout ou de qualquer grupo ou contêiner, para selecionar rapidamente, você pode segurar Command e selecionar diretamente esse item. Caso contrário, você precisará clicar duas vezes nesse quadro até alcançá-lo e os dois métodos funcionarão. Mas usar o comando e o clique é simplesmente mais rápido. Então, agora eu vou pressionar o Comando D para duplicar esses dois. Eu também vou adicionar um texto para o O, então vou apertar T no meu teclado e digitar O. Amazing. Agora, o que queremos fazer realmente ter tudo isso na mesma linha. Como nosso layout automático agora está definido em um layout vertical, tudo está indo na direção vertical. O que podemos fazer é criar layouts automáticos uns dentro dos outros, como fizemos aqui Temos um layout automático aqui para a moldura principal. Então temos dois dentro dele, um aqui e outro aqui. Então, na verdade, podemos adicionar outro dentro deste para manter nossas linhas divisórias e o texto aqui E para fazer isso, da maneira mais simples, você pode clicar duas vezes para selecionar sua linha. Ou, se você não quiser fazer isso, você também pode selecioná-lo no painel de camadas. Segure a tecla Shift, selecione o Otexto e a linha dois sem soltar a tecla Shift Agora aperte Shift A para criar outro layout automático dentro daqui, e podemos ver aqui que fizemos isso. Agora, em vez de um layout vertical, você acha que vamos fazer um layout horizontal. E isso está parecendo bom. Há algumas coisas que podemos fazer sobre isso. Uma é que atualmente está saindo do layout automático principal. E outra razão para isso é que os elementos internos têm uma largura fixa, exceto por essa textura. Portanto, nossas linhas têm uma largura fixa de 188. Agora você não quer alterar isso manualmente. O que você quer fazer é trocá-los para que encham o recipiente em que estão. Portanto, não importa o que seja esse contêiner, queremos que ele preencha igualmente o layout automático interno. Mas, para fazer isso, primeiro, devemos selecionar o quadro de layout automático de divisão aqui Em vez de abraçar, queremos escolher o recipiente de enchimento. Agora, como você pode ver, está apenas enchendo o recipiente em que está, o que é ótimo. E agora o que queremos fazer é selecionar a linha e essa linha, e eu estou usando o comando para selecionar itens diferentes no meu painel ris. E em vez de uma largura fixa, vamos mudá-la para encher o recipiente. E agora eles têm larguras iguais e estão ocupando o máximo de espaço possível no contêiner em relação ao espaçamento ou ao espaço que eles têm Então, se você quiser reduzir o espaçamento, de 24 pixels, desça para oito pixels Como você pode ver, há menos espaçamento entre o texto e as linhas, que é um pouco pequeno. Então eu acho que 16 pixels é uma boa lacuna entre eles. Agora, outra coisa que queremos fazer é realmente fazer com que fiquem todos verticalmente no meio Portanto, as linhas agora estão no topo porque, por padrão alinhamento no quadro de layout automático está alinhado no canto superior esquerdo O que queremos fazer é alinhar o centro para que tudo fique alinhado ao centro vertical e horizontalmente Agora, neste momento, está um pouco forte demais. Então, o que queremos fazer é mudar a cor preta para outra coisa. Atualmente, estamos alterando a cor de tudo, então do texto e das linhas porque quando selecionamos o quadro de layout automático, ele mostra as cores que estão sendo usadas dentro dele, e podemos definir rapidamente a nova cor para que possamos fazer algo como 200 secundário. Acho que esse texto 100 parece bom para as linhas divisórias. Para o texto em si, porém, podemos torná-lo um pouco mais escuro, então talvez o texto 400 ou, então talvez o texto 400 ou na verdade, um texto um pouco mais claro 300 funcione Agradável. Então, agora temos essa linha divisória Queremos fazer mais uma coisa, que é criar outra variação dos nossos botões, e podemos fazer isso aqui em cima. Ao clicar em nosso componente no botão, queremos criar outra variação, mas sem precisar criar outro componente. Às vezes, temos componentes que têm variações diferentes, sendo a principal uma cor de fundo ligeiramente diferente ou qualquer pequena diferença em que gostaríamos de outra variação, mas não necessariamente queremos criar outro componente. É por isso que podemos selecionar os componentes e, aqui, podemos realmente adicionar uma propriedade. Agora, existem propriedades diferentes, e vamos examiná-las daqui a pouco. Mas, por enquanto, estamos interessados em outra variante desse botão. Se você acertar mais na variante, agora temos essa propriedade aqui. Por padrão, ela é chamada apenas de propriedade um, e o valor é padrão. Mas podemos usar isso para o que quisermos. Então, nesse caso, o que eu quero fazer é criar uma propriedade, definir isso como nosso botão principal como um valor dessa propriedade e, em seguida, criar outra com fundo branco e defini-la como botão secundário ou algo parecido. Queremos clicar em Mais na variante aqui. Então, agora temos outra variante desse botão. E vamos clicar no contêiner pai e alterar essa propriedade clicando duas vezes e alterando-a para tipo, então vamos chamá-la apenas de type. Esse é nosso tipo padrão, mas queremos alterá-lo para primário dessa forma, então o valor disso é primário. E esse vamos chamá-lo de secundário. E vamos mudar o preenchimento. Talvez esse 50 primário funcione em vez do preenchimento branco. E podemos alterar a cor do texto para que possamos clicar duas vezes no texto. Altere a cor do texto para talvez o texto 500. Então, agora, se formos até aqui para ver esses dois botões, podemos realmente clicar neles. E agora, em nossa instância, temos essa opção chamada tipo, e podemos escolher primária ou secundária. E pensando bem, acho que talvez usar um simples botão branco pareça melhor. Talvez você queira adicionar um traçado a ele e tornar o traçado primário 100. Vamos clicar e também mudar esse para secundário. Agora temos esses dois botões aqui e está começando a ficar bem. Então, com isso, vamos voltar na próxima aula para encontrar uma imagem para usar aqui no lado direito 30. Encontrando imagens para usar: Aqui, gostaríamos de colocar uma imagem relacionada ao Wander Wise e ao que eles fazem Agora com o Wonder Wise, reserve destinos e pacotes incríveis e pronto. Então, queremos uma foto de viagem e podemos encontrar uma no Google ou em outros lugares onde possamos usar a licença real da imagem no projeto. Ou outra opção é usar plugins. E um dos plug-ins que eu realmente gosto se você acessar a guia de plug-ins e Widget e pesquisar por Unsplash, você obtém esse plug-in aqui que dá acesso a muitas fotos que você pode usar E ao clicar nele, ele se abrirá e mostraremos algumas fotos aleatórias no início, mas você pode realmente restringir e pesquisar imagens específicas. E então você pode ir aqui e pesquisar, digamos, viagens, pressionar Enter, clicar em Pesquisar e obter todas essas imagens legais. E você pode realmente procurá-los e ver qual é o melhor para o seu projeto. E acho que, para mim, vou usar uma das fotos aqui. Parece um destino incrível, então vou adicionar essa imagem aqui. Você não precisa fazer exatamente isso. Você pode fazer o que quiser. Um simplesmente está lindo. Definitivamente quero estar lá agora. Então, queremos arrastar isso aqui dentro de um contêiner, mas, como você pode ver, essa imagem nem está dentro do nosso quadro de inscrição. Então, para corrigir isso, em nosso quadro de inscrição, como você se lembra, criamos esse quadro dois Então, o que você precisa fazer é arrastar isso para dentro do quadro e garantir que ele esteja sendo arrastado para dentro do quadro dois Então, a maneira mais simples de fazer isso, podemos simplesmente arrastar nossa imagem até o quadro dois. Lá vamos nós. Agora está dentro dessa moldura e podemos movê-la como quisermos. Portanto, tem a bela safra que queremos. Isso parece incrível. Já está começando a ficar muito bonito. A única coisa que eu recomendo adicionar é uma pequena linha divisória entre o contêiner aqui ou a moldura e a imagem No momento, é como misturar um pouco, e talvez possamos melhorar isso adicionando uma linha divisória Então, vamos clicar nesse quadro aqui, onde ele contém todos os elementos de inscrição e fazer um traçado. Mas agora você notará, com um traço, que está adicionando um traço na parte interna e pode escolher a espessura dele. Isso é ótimo. Mas uma coisa que você nota é que não queremos traçar o contêiner inteiro. Só queremos acariciar no lado direito. E é aí que entra esse pequeno Stroke por site. Você pode clicar nele e optar por ter apenas um traçado no lado direito. Se você quiser um, digamos, à esquerda e à direita ou algo parecido, você também pode fazer um personalizado. Mas só queremos a correta , então clicaremos com o botão direito. Outro Broder está apenas no lado direito. Oito pixels é um pouco demais. Acho que algo na linha de dois a quatro. Acho que quatro pixels é bom. E essa é uma cor forte, então vamos mudá-la para algo um pouco mais alinhado com nossas cores primárias. É aqui que você pode brincar com suas variáveis e ver qual delas fica melhor. Você pode fazer uma cor secundária ou até mesmo uma cor primária. Eu realmente gosto dessa cor secundária que é um pouco mais escura que o fundo Acho que parece muito bom. Agora que temos essa imagem, temos a página de inscrição praticamente concluída, pelo menos por enquanto. Definitivamente, há coisas que podemos fazer para melhorá-lo, mas vamos deixá-las para futuras palestras Vamos terminá-lo e depois voltar e fazer alguns retoques de polimento, talvez mais perto do Vamos voltar para a próxima aula para continuar com nossas próximas páginas, que é a página de verificação de login Então, isso ocorre depois que o usuário faz login e precisa verificar seu e-mail para adicionar um código de verificação antes de continuar Vamos voltar para a próxima seção para fazer isso juntos. 31. Fazendo imagens com o Figma AI: forma de criar uma imagem ao lado aqui ou, na verdade, para qualquer coisa em seu projeto também é usar o Figma AI Portanto, o Figma tem esse recurso de imagens que permite gerar imagens usando o recurso de criação de imagem Tudo o que você precisa fazer é acessar o menu de ação e, a partir daqui, se você não criar uma imagem, se rolar para baixo, deverá vê-la nas ferramentas de edição de imagem. Ao abri-lo, você pode escrever um prompt e fazer com que o Figma crie uma imagem Algo parecido com uma foto de pessoas viajando para uma bela ilha tropical com águas cristalinas é algo que me veio à mente. E, claro, pode ser mais específico e escrever mais detalhes e fornecer mais informações sobre o tipo de imagem que você deseja e assim por diante. Por enquanto, vou fazer este e ver o que ele faz. E, como você pode ver, o Figma AI está trabalhando na geração de uma imagem e fornecerá algumas opções que podemos escolher posteriormente de qual delas gostamos Então, vamos dar isso em um minuto aqui. Nossa, essa é uma imagem linda e temos algumas versões diferentes que podemos usar em nosso projeto Obviamente, alguns deles não são perfeitos e podemos pedir que ele faça alterações. Então, se estivermos tipo, você sabe o que? Em vez disso, queremos um fundo do pôr do sol , podemos pedir isso ou alterar o prompt e regenerar as imagens aqui Então, agora vamos ver se podemos obter um belo fundo de pôr do sol em vez disso. Uau, e aí está. Bela ilha tropical, algumas opções diferentes. Podemos até usar este aqui. Como nossa imagem. Então, vou pressionar o Comando X, clicar duas vezes aqui ou clicar em nosso quadro, Comando V, para colá-lo lá. E assim, porque eu tenho essa imagem em cima da outra , se em algum momento, você sabe o que? Eu fico tipo, talvez eu não goste dessa imagem, eu gosto de voltar para a outra que eu tinha. Eu sempre posso esconder este usando este ícone I aqui e voltar para a mesma imagem aqui. Por enquanto, vou deixar isso nesta bela imagem gerada por IA da Figma Na próxima aula, vamos trabalhar em nossa página de verificação 32. Página de verificação: A próxima página do nosso aplicativo, o login de verificação. Agora, se você se lembra, enquanto reunimos o fluxo e os wireframes, essa é a página em que os usuários deverão inserir um código que será enviado para seus e-mails ou números de telefone caso optem por fazer login com o número de telefone, e eles precisarão inserir esse código e continuar Então, alguns elementos que coloquei aqui manterão a mesma imagem da página de inscrição. Teremos um texto de login verificado seguido por uma entrada para eles inserirem o código. , também desejaremos um botão para reenviar o código caso eles não o tenham recebido e, em seguida, um botão para continuar depois de digitar o código de verificação para verificar o login Novamente, eu recomendo totalmente que você dê uma olhada em alguma inspiração antes de iniciar qualquer nova página em seus designs, mesmo quando estiver passando de wireframes para É sempre bom ter inspiração e também garantir que você não perca nenhuma das etapas. Por exemplo, estou usando mobile.com e procuro as telas de verificação, e há várias telas diferentes aqui do PayPal, que, novamente, usam um estilo semelhante ao que pensamos com códigos de livros diferentes, e gosto muito do fato de terem campos diferentes para cada número Talvez adotemos essa abordagem semelhante em nossos designs, e há outras que você pode ver com diferentes tipos de verificação. Portanto, se precisarem confirmar um e-mail, podem até clicar em um link do e-mail. Então, há esse tipo de verificação e, em seguida, há tipos de verificação em que você realmente precisa inserir um código de uso único, como aqui ou no caso do PayPal. Então, com isso, vamos voltar para o FIGMA e vamos para o nosso projeto E a maneira mais simples de fazer isso é duplicar nossa tela de inscrição , porque já configuramos a maior parte do trabalho aqui de qualquer maneira, e a maior parte desse design é semelhante à tela de inscrição com algumas alterações, como aqui e o conteúdo de verificação e o conteúdo que temos no lado esquerdo Então, para duplicar um quadro, basta clicar nele. Você pode segurar Alt e arrastar uma cópia ou pressionar Command D para duplicar uma cópia Vou seguir em frente e segurar a tecla Alt, arrastar uma cópia até aqui colocar à direita da tela. E vamos renomeá-lo. Você adivinhou a página de verificação. Lá vamos nós. E o que vamos fazer é começar do topo e fazer algumas mudanças. Em primeiro lugar, não queremos mais esse grande logotipo aqui. Então, o que queremos fazer é talvez mudar isso para um H três. E altere a cópia aqui para verificar. Na verdade, vamos alterá-lo para inserir seu código de verificação. E eu percebo que isso é um pouco grande demais, então talvez um H quatro faça o trabalho, e nós vamos fazer da esquerda para a linha. Portanto, é uma linha à esquerda da caixa de texto aqui. E para este texto aqui, vamos alterá-lo para inserir o código de verificação enviado para max.do@gmail.com. E, obviamente, esse é um texto de espaço reservado e esse será o e-mail E eu apenas o destaquei para poder alterá-lo para negrito. Lá vamos nós. E eu vou fazer a mesma coisa aqui. Vamos alinhar o texto à esquerda aqui. Agora, uma coisa aqui, eu não gosto do fato de nosso texto aqui estar alinhado no meio do layout automático Na verdade, preferimos ter tudo alinhado à esquerda, especialmente agora que o texto também está alinhado à esquerda Então, tudo o que precisamos fazer é selecionar o contêiner principal aqui e, em vez de alinhar no centro, vamos fazer o alinhamento no canto superior esquerdo, que empurrará tudo para o lado esquerdo e superior aqui da estrutura do layout automático Não precisamos desses campos , dos outros botões ou dos divisores. Enquanto pressiono a tecla Shift, seleciono o que não preciso para poder clicar em excluir no meu teclado e me seleciono o que não preciso para livrar deles Agora vou mudar esse campo aqui para código de verificação. E vou usar Alt e oito no meu teclado para inserir um texto de espaço reservado como esse e alterar o texto de inscrição clicando duas vezes nele para continuar assim Para os botões aqui, já que estamos nisso, notei que eles poderiam usar uma aparência ou peso um pouco mais ousados Então, vou mudar para negrito aqui para nossos botões. Acho que fica melhor para um botão. Sim, isso é muito melhor. E, novamente, ao fazer alterações em seus designs, você notará que esses pequenos detalhes aparecerão para você. Como designers, não estamos tentando acertar tudo desde o início. Sempre haverá pequenos detalhes que você talvez queira retocar ao projetar e ao descobrir coisas como o layout da página e assim por diante Agora, se você se lembra, eu disse, seria bom se configurássemos nosso código de verificação com entradas separadas, todas próximas umas das outras O problema é que, se começarmos a fazer isso agora com esse campo, temos o exemplo, eu vou fazer isso, e vou fazer o layout automático desses dois. O problema é esse título que temos. Na verdade, não precisamos de um título para cada um deles. E embora eu pudesse entrar e excluir o título deste, o que queremos fazer é, na verdade, configurar propriedades relacionadas a esse título para que possamos ativá-lo e desativá-lo de uma forma mais inteligente ou mais eficiente Então, para fazer isso, vamos explorar como podemos usar propriedades booleanas em nossos componentes na próxima aula 33. Usando propriedades de componentes: Inicialmente, configuramos o campo de entrada aqui como um componente com um título. Mas e se não quisermos um título em certos casos, como nesta página de código de verificação, na qual queremos obter uma aparência semelhante que o PayPal tem aqui. Então, o que podemos fazer sobre isso? Novamente, você pode clicar no título do código de verificação aqui ou no título da sua entrada em qualquer lugar e clicar em Excluir. Essa é uma maneira de fazer isso, mas não a maneira mais eficiente ou organizada de fazer isso, especialmente se você estiver trabalhando com outras pessoas da equipe. Há uma maneira muito melhor de fazer isso por meio do painel de propriedades aqui no lado direito que temos. Então, no momento, não temos nenhuma propriedade, mas o que podemos fazer é acessar nossos componentes aqui para nosso campo de entrada, selecionar nosso campo e adicionar uma propriedade. Então, como você pode ver, essas são as instâncias aqui do campo de entrada. No nível da instância, podemos escolher se queremos mostrar um título ou não caso a caso. Agora, por padrão, mostraremos um título e, em seguida, permitiremos que nós, como designers, desativemos o título se não quisermos Há duas maneiras de fazer isso. Você pode configurar outra variante desse campo de entrada. Semelhante ao que fizemos aqui. O desafio é que, se você precisar fazer alterações em sua entrada, agora precisará fazer duas variantes diferentes dela. Portanto, para um caso em que você deseja simplesmente ocultar o título, na verdade não precisa de outra variante para seu componente. Tudo o que você precisa é de uma nova propriedade e, na verdade, de uma propriedade booleana Então, para configurar uma propriedade em seu componente, vá para adicionar propriedade aqui no painel direito, pressione mais e configure uma propriedade booleana Agora, booleano é simplesmente um estado ligado ou desligado. Portanto, essa propriedade booleana nos permitirá alternar a propriedade entre ativada e desativada E, no momento, o nome é apenas booleano, mas queremos realmente dar a ele um nome significativo Então, mostraremos o título do espaço como este. Então, por padrão, deixaremos o título do show como verdadeiro e, em seguida, clicaremos em Criar propriedade. Então, o que faremos é vincular a visibilidade dessa camada à propriedade que acabamos de criar. Agora, primeiro de tudo, para alternar a visibilidade, tudo o que você precisa fazer é marcar este ícone aqui, E se você marcar, simplesmente, esse título desaparecerá, ou pelo menos ficará oculto porque ainda está aqui no painel Camadas, e eu também posso exibi-lo daqui ou ocultá-lo daqui O que queremos fazer é anexar a visibilidade dessa camada ou desse título à propriedade que acabamos de criar. Em outras palavras, no nível da instância, se ativarmos essa propriedade, esse título deverá estar visível, mas se o desativarmos, esse título Existe uma maneira muito simples de fazer isso, anexar essas propriedades, e tudo o que você precisa fazer é ir até aqui , ao lado do ícone I. Clique para atribuir uma propriedade à aparência desse texto do título para mostrar o título. Estrondo. E agora nossa propriedade do título do programa está aqui. Você sempre pode removê-lo daqui ou desconectá-lo. Vamos ver isso em ação. Vamos até a entrada do nosso código de verificação aqui e clique duas vezes nele para selecionar a instância. E agora vemos essa propriedade show title. Se a desativarmos, aí está. Nosso título desapareceu e, por aqui, em vez de preencher, na verdade queremos conteúdos incríveis Por padrão, acredito que temos conteúdos de abraços. De qualquer forma, está aqui, então é isso que queremos. Então, agora temos um campo de entrada. Podemos ativar ou desativar o título. Linda. Tudo bem. Agora que vinculamos a visibilidade a esse título, queremos copiar outra variante aqui. E livre-se desse aqui para que, agora, o que podemos fazer, esconda o título, duplique isso mais cinco vezes usando o Comando D. Então, temos seis códigos de verificação Ou códigos de seis dígitos, pressione Shift A ao selecionar todos eles, e eu estava segurando Shift para selecionar todos eles e fazer um layout horizontal Lá vamos nós. Agora, o espaçamento entre eles pode ser um pouco menor, talvez 16 pixels E em vez de texto de espaço reservado, poderíamos simplesmente inserir zero, zero, zero, zero, zero Agora, é claro, nesse caso, queremos que nosso texto realmente esteja no centro, e o que podemos fazer porque esse é o único caso em que realmente queremos aplicar isso, vamos substituir as propriedades e fazer isso dentro de nossa Instância aqui Então, selecionei todas as camadas de texto internas, nada mais, nem os retângulos nem qualquer outra coisa, apenas as camadas de texto E eu estava segurando o comando e a mudança para fazer isso. Então, enquanto pressiona o comando, você pode selecionar rapidamente qualquer coisa dentro dessa moldura externa de layout e, ao segurar a tecla Shift, você pode selecionar várias delas. Então, ao segurar a tecla Shift, estou selecionando todos os títulos para poder acessar a linha central, e todos os códigos de verificação agora estão no centro. Aí está. Mais uma coisa que vou fazer é fazer a mesma coisa, mas agora vou clicar duas vezes para selecionar o AutoAyoutFrame interno, como o que está aqui, segurar a tecla Shift e clicar em todos eles porque quero aumentar um pouco a altura Em vez de 12, vamos fazer 16. Isso é muito melhor para este caso. Então, temos isso agora. Queremos mais uma mensagem aqui, não recebemos o código de verificação, reenvie-o E vou destacar essa parte rescindida, colocá-la em negrito usando o Comando B e vamos fazer um 500 primário para que pareça uma cor de link Incrível. Agora temos nossa página de verificação e ela está muito bonita. Vamos continuar na próxima página, que, de acordo com os wireframes, seria nossa página de destino do Discovery Então essa é a essência do projeto. Essa é uma das nossas páginas mais interessantes qual trabalharemos com muitos elementos. Então, estou ansioso por este. E vamos dedicar nosso tempo a isso e aprender muito nas próximas palestras Então, se você estiver pronto, vamos começar imediatamente. Se precisar de uma pausa, faça uma pausa e nos vemos em breve. 34. Começando nossos modelos de descoberta de destinos: Às vezes, em nossos designs, trabalhamos em páginas mais simples, como página de verificação em que trabalhamos, e às vezes trabalhamos em páginas ou desafios de design complicados e mais complexos No nosso caso, neste momento, estamos iniciando nossas maquetes de descoberta de destinos, e achei que é sempre melhor dividir essas páginas maiores em componentes e peças menores nos quais possamos trabalhar e depois juntá-las Então, a partir de A, nossos componentes serão reutilizáveis. Podemos reutilizar coisas como esse painel de navegação, etc., e páginas diferentes Assim como nós mesmos, quando passamos da nossa página de inscrição para a nossa página de verificação de login, foi muito mais fácil e muito mais rápido É exatamente isso que estamos tentando fazer aqui com nossa página de descoberta de destinos, porque muitos desses componentes também podem ser usados em outros lugares. E alguns deles já reunimos como este campo de entrada aqui para pesquisa e quaisquer botões que precisemos. Pensei em dividir essa página em vários componentes diferentes com os quais começaremos Vamos começar do topo e ir descendo, começando pela nossa barra de navegação na parte superior aqui. Portanto, essa barra de navegação é como os usuários poderão navegar pelo nosso aplicativo da web. Clique clicando no logotipo. Eles sempre podem ir para a página inicial, que é esta página aqui, na verdade, e então queremos alguns links no lado direito aqui. Ainda não sabemos quais serão esses links ou, por enquanto, podemos simplesmente colocar um pequeno ícone de perfil, semelhante ao que você vê aqui no Figma, onde você pode gerenciar sua conta ou ver uma lista suspensa de diferentes opções que você tem, e vamos resolvê-las exatamente à medida que avançamos Por enquanto, vamos começar com esse NAVR básico, juntá-lo para a web e depois voltaremos, começaremos a reunir alguns de nossos elementos aqui, como a entrada aqui para pesquisa e os campos aqui para os seletores de data e um botão para pesquisar e assim por diante E então vamos realmente nos concentrar em alguns dos designs de cartões. Então, esses são todos cartões, e nós projetamos esses cartões de destino, na verdade, se você se lembra, em nosso wireframing, então usaremos esse wireframe para criar uma placa de componente real que possamos E enquanto estamos fazendo isso, divirta-se também com a geração de conteúdo de IA. E então terminaremos adicionando alguma coleção aqui e o botão de filtrar e classificar e assim por diante. Se isso soa bem, vamos voltar para a próxima seção, começando com o design da nossa barra de navegação 35. Usando bibliotecas de Kits de UI: Você pode estar se perguntando, sabe, estamos reunindo todos esses componentes e os fazendo do zero aqui e criando nossa própria biblioteca de componentes, o que é ótimo. Mas, novamente, você pode estar se perguntando: Ei, Nima, precisamos projetar cada componente do zero para projetos que podem ser entediantes, especialmente se você está tentando montar um design muito rápido e sua empresa já tem ativos ou talvez o cliente com quem você está trabalhando já tenha um Caso contrário, definitivamente também existem maneiras de aproveitar o que o FGMA oferece acesso Existem vários recursos que você pode usar, especialmente com as novas atualizações do FiCMA. Na verdade, você pode acessar algumas bibliotecas que podem ser usadas para incluir alguns componentes de designers anteriores ou outros designs em seus projetos Então, queremos criar essa barra de navegação, mas e se já existirem outras barras de navegação que possamos simplesmente copiar e É aí que esse painel de ativos entra em cena. Então, você geralmente está no painel de arquivos. Mude para o de ativos aqui, como você pode ver, onde nossos próprios ativos locais estão sendo reunidos, onde todos os nossos componentes estão lá e tal, o que é bom. Na verdade, vamos adicionar mais bibliotecas aqui. E aqui, podemos publicar nossos próprios ativos que podemos usar em outros arquivos, e abordaremos isso um pouco mais tarde. Por enquanto, o que queremos fazer é mudar desse arquivo atual para kits de interface do usuário. E, ao fazer isso, você encontrará três kits de interface de usuário atualmente disponíveis no Figma que você pode simplesmente adicionar ao seu projeto Há o IOS 18 e o iPad OS 18. Portanto, se você estiver trabalhando especialmente em um aplicativo nativo para IOS ou iPad, recomendo fortemente que você adicione este ao seu arquivo, pois você não quer redesenhar cada componente que a Apple já possui Há um design de material três, ótimo para projetos Android ou, em geral, eles têm muitos componentes que são usados em muitos aplicativos. E o FICmas tem um chamado Simple Design System, que podemos adicionar ao nosso arquivo se você quiser dar uma olhada nele Agora podemos até clicar nele para ver tudo o que esse projeto também tem. Portanto, tem muitas tipografias, variáveis de tamanho, variáveis de cor, alguns estilos aqui, alguns componentes de estilo acordeão , muitos botões. Cartões, formulários, muitos ícones que você pode usar, o que é incrível. Eles têm entradas, menus. E sim, claro, eles têm um componente de navegação. Agora, é claro, você pode adicionar isso ao seu arquivo e ter acesso a tudo isso dentro do seu arquivo, ou você também pode arrastar qualquer um deles para o seu design. Então, se você ver essa barra de navegação, você pode arrastá-la e utilizá-la aqui como sua navegação na parte superior aqui. Portanto, você tem acesso a esses outros sistemas de design que pode utilizar em seus projetos e pode dar uma olhada em cada um deles para ver o que eles contêm e o que têm? Ou, novamente, crie o seu próprio do zero, que é o que estamos fazendo aqui neste projeto. Estamos fazendo isso para que possamos maximizar o aprendizado deste curso Mas é claro que, em um projeto real, às vezes ou talvez muitas vezes, você pode realmente reutilizar componentes projetados por outros designers ou, em outros casos, criar um do zero Então, espero que isso lhe dê uma ideia de alguns lugares onde você pode procurar inspiração. Alguns lugares onde você pode acessar alguns recursos. Outro ótimo lugar para procurar esses kits de interface de usuário é acessar a guia da comunidade aqui. Agora, se você acessar as guias de recursos de design, verá os kits de interface que podem ser acessados diretamente Nós já exploramos esses, mas há muitos outros que são gratuitos, alguns pagos, que você também pode usar em seus projetos , certo Então, deixarei que você explore os kits de interface do usuário, se quiser. Novamente, continuaremos reunindo nossos próprios componentes no restante do projeto. 36. Projetando uma barra de navegação: Então, vamos para nossa Navbar e projetá-la juntos. Em primeiro lugar, vamos duplicar esse quadro para usá-lo como nossa tela de painel Vamos chamá-la de nossa página de descoberta de destino. Então, vamos renomear este, destino Discovery. E, novamente, copio este indo até a página de verificação, segurando a tecla Alt e arrastando uma cópia até aqui Agora, não precisamos de nada desse conteúdo aqui, então vamos segurar a tecla Shift selecionando os dois e excluindo. Então, agora temos uma tela em branco ou um quadro em branco neste caso, e queremos montar uma barra de navegação e, em seguida, arrastá-la para fora como um componente Para nossa Navbar, queremos um logotipo no lado esquerdo aqui. Então, podemos simplesmente usar o texto de Vander Weis que estamos E então, no lado direito, colocaremos um espaço reservado para talvez alguns botões, bem como coisas que provavelmente precisarão de bem como coisas que provavelmente precisarão uma lista suspensa de perfil, bem como um ícone de sino de navegação Portanto, esse ícone de sino de navegação estará aqui, bem como uma tela de perfil, bem como a pequena lista suspensa de perfil Isso é normalmente o que vemos em Navbars. E, novamente, recorrer a alguns recursos ou inspiração definitivamente ajudará você a montar esses componentes mais rapidamente Vou começar copiando e colando esse logotipo da Vander Weiss Estou segurando o comando para selecionar Vanderweis, trazê-lo aqui e colá-lo E é um pouco grande demais. Queremos mudar para um tamanho menor. Talvez esse H four seja bom. E agora vou pressionar Shift A para transformar isso em um quadro de layout automático. Esse quadro de layout automático que podemos usar para nossa barra de navegação. Mas o que eu quero fazer é selecionar a moldura aqui para descoberta do destino e alterar o preenchimento do nosso plano de fundo que já criamos. Então essa é a mesma cor de fundo aqui que estamos usando. E o que vamos fazer é selecionar esse quadro, esse quadro de layout automático que acabamos de criar, e vamos movê-lo para o canto aqui, que normalmente é onde vemos nossas barras de navegação. Agora vamos esticá-lo até o fim para ocupar toda a largura. Agora, não queremos que o conteúdo fique no centro. Queremos que o conteúdo seja alinhado à esquerda e centralizado verticalmente Verticalmente, queremos que fique no centro e, horizontalmente, queremos que esteja alinhado à É por isso que estamos escolhendo este aqui. O espaçamento é um pouco pequeno demais. Talvez mudando o espaçamento 10-16. E então, este, queremos realmente usar nossa grade. Então, se você se lembra, configuramos uma grade e podemos ligá-la e desligá-la em nossos quadros. Queremos usar aqui a mesma margem que configuramos para nossa grade, que, como você pode ver aqui, tem 48 pixels. Então, queremos que nossa Navbar também tenha um espaçamento de 48 pixels da esquerda para a direita Portanto, ele tem esse belo alinhamento com nossa grade de layout. Vamos ocultar a grade por enquanto e também colocaremos um preenchimento de brancos para esta Navbar Então, está começando a ficar bem bonito. Começo a achar que 16 pixels podem ser um pouco pequenos demais. A altura parece um pouco comprimida aqui. Então, podemos fazer 18 ou até 20. Acho que gosto da aparência de 20 aqui. E agora queremos alguns links no lado direito. Antes disso, queremos ter alguma separação entre essa barra de navegação e a página aqui Então, por que não configuramos um traço ao redor dela como uma borda? E, novamente, queremos apenas um traço inferior, então vamos escolher o fundo e mudar isso para 800 secundário ou 700 secundário. Parece bom. Acho que o 800 secundário parece bom. Agora, para criar esse pequeno ícone de perfil aqui, podemos configurá-lo dentro de um círculo, que podemos criar pressionando O no teclado para desenhar um círculo, segurar a tecla Shift e arrastar um O. Claro, não está aqui. Vai ser desse lado. Então, como está dentro do nosso layout automático e do nosso layout automático no momento, tudo está alinhado à esquerda, desenhei o círculo aqui Então, vou clicar duas vezes para selecioná-lo e, em vez de 65 por 65, vamos fazer com que seja 48 por 48. Acho que é um bom tamanho. Agora, não queremos que nosso perfil esteja aqui. Na verdade, queremos que nosso círculo de fotos de perfil esteja no lado direito. Então, como fazemos isso no layout automático? Portanto, no layout automático, normalmente temos uma lacuna fixa que especificamos aqui entre os elementos Claro, você pode seguir em frente e aumentar essa lacuna o suficiente até que ela vá para o lado certo, mas isso definitivamente não é escalável e não é a maneira certa de fazer isso O que você quer fazer é deixar de ter uma lacuna para usar uma lacuna automática Devemos seguir em frente e espaçar tudo uniformemente. Como temos apenas esses dois elementos no momento, tudo será espaçado uniformemente e empurrado até as extremidades do layout externo O que acontece se houver um terceiro elemento? Digamos que um texto aqui mostre o nome do usuário, Mac Stowe Isso também fica uniformemente espaçado. Então, queremos esse nome e, na verdade, o queremos no lado direito, então eu o seleciono e o movo para a direita. Eu gostaria que a movêssemos para cá, mas não queremos essa lacuna aqui entre esses dois. Queremos que esses dois tenham uma lacuna menor e estejam próximos um do outro, e que o resto do layout automático tenha uma lacuna maior ou seja espaçado uniformemente Então, em um caso como esse, tudo que você precisa fazer é selecionar seu texto. Bem, primeiro de tudo, H quatro é um pouco ousado demais. Para este, podemos simplesmente usar um corpo grande e ousado. E vamos mudar o texto para o texto 400. Isso parece bom. E vamos segurar a tecla Shift enquanto selecionamos o texto para também selecionar a elipse aqui, e vamos pressionar Shift A para criar um layout automático para eles Agora, esses também são um layout automático com espaçamento Mas entre esses, não precisamos de um espaçamento automático Só precisamos, digamos, de um espaçamento de 16 pixels, o que parece bom E em vez de uma largura fixa de 638, queremos que ele abrace o conteúdo para que seja empurrado para aquele lado e tenha apenas a largura necessária, que é essa largura aqui 16 pixels é um pouco demais para a lacuna. Então, vamos fazer oito pixels. E agora o que queremos fazer é ter mais alguns links aqui. Agora, eu sei que disse que podemos adicionar alguns links aqui, mas talvez possamos fazer isso mais tarde, à medida que adicionarmos mais páginas ou tivermos outras necessidades para fazer isso. Por enquanto, vamos deixar assim. Mais uma coisa que podemos adicionar aqui é um ícone de sino de notificação. Agora, os plug-ins e widgets, se você pesquisar fósforo, uma biblioteca muito boa de ícones que você pode usar em seu projeto Então, eu vou rodar este aqui. E vou procurar um ícone de notificação e dar uma olhada. Temos alguns bons que podemos usar. Vou clicar. E quando você clica, ele o solta aqui, então podemos simplesmente arrastá-lo aqui. E temos o mesmo problema. É claro que vamos fazer a mesma coisa. Vamos selecionar o quadro vetorial do sino de notificação, selecionar esse quadro aqui também que criamos para o menu suspenso do nosso perfil, pressionar Shift A e, entre esses, vamos fazer 16 pixels. E, novamente, queremos criar conteúdos incríveis. 16 pixels é um pouco pequeno demais. Por que não tentamos 24 ou até 32? Acho que 32 parece bom. O ícone é um pouco pequeno, então podemos clicar duas vezes e, em vez de 24 por 24, podemos torná-lo talvez maior. Podemos fazer 32 por 32. Eu acho isso muito bom. E talvez, em vez da cor preta, possamos alterá-la para 500 primária. E em vez dessa cor preta, podemos alterá-la para talvez um 800 secundário. Pensando bem, acho que posso torná-lo um pouco maior, como 40 por 40, e isso ficará melhor, mais incrível. Portanto, temos um ícone de sino de notificação aqui. Temos nosso menu suspenso de perfil. No momento, ele não tem uma imagem, então podemos entrar na próxima textura para montar isso Mas a primeira coisa que quero fazer é mover isso para fora daqui para que possamos realmente criar um componente, e podemos fazer isso pressionando Altommand K ou Control no Windows e renomeando-o E, claro, vou mover isso para nossa seção de componentes aqui para que possamos organizar ordenadamente todos os nossos componentes à medida que crescem Então, vou apenas expandir essa seção e mover esta aqui. Vou dar à nossa seção de componentes também a cor de fundo para que possamos ver melhor nossos componentes. Vou clicar nesse componente NavR e agora soltá-lo ou colá-lo aqui Agora temos uma instância dela e vamos movê-la para zero, zero para X e Y, então fica no canto aqui e ocupa todo o espaço. Está ótimo. Vamos voltar à palestra para continuar com as outras partes da nossa página de descoberta de destinos, que são as entradas aqui, alguns cartões e assim por diante 37. Gerando um primeiro rascunho com o Figma AI: Estamos trabalhando nesta página, esqueço que é um bom momento para conferir um artigo da Figma chamado First Draft Agora, esse primeiro rascunho é na verdade um recurso de IA que basicamente cria o primeiro rascunho para sua maquete, para que você possa usá-lo como inspiração para criar suas telas Na verdade, não se destina a substituir o trabalho de maquete e, na verdade, a ideia principal, como o nome sugere, é dar uma ideia de como a página deve ser e garantir que você junte todas as peças corretamente Pense nisso como uma inspiração para seus designs, misturada com os detalhes do seu projeto. Para acessar esse recurso, você pode acessar o painel de ações ou pressionar o Comando K e, em seguida, verá esse primeiro rascunho do recurso aqui. Então, abra-o e você precisará escrever rápido possível e o mais detalhado possível para que ele apareça com o primeiro rascunho. Então, escreveremos o máximo de detalhes possível, dizendo que usando um texto semelhante ao espaço reservado aqui, criaremos uma página de descoberta de destinos para um aplicativo de viagens que permite aos usuários reservar pacotes de férias Em um só lugar. Na tela, exiba cartões com destinos diferentes, incluindo nome das cidades preços do pacote. E estou apenas dando uma olhada em nosso wireframe para ter certeza de incluir tudo Um botão de reserva. E um distintivo popular. O restante desta página deve conter entradas para localização, hora da viagem em um formato de e para E vamos começar dizendo apenas um aplicativo web, página de descoberta de destinos. Então, ele sabe para que estamos projetando. Agora, é claro, posso me aprofundar um pouco mais e detalhar, mas vamos ver o que isso resultará. Então, vamos pressionar Make it. Está funcionando na tela. Lá vamos nós. Infelizmente, ele não criou uma página de aplicativo da web para uma tela de desktop, mas vemos a versão móvel e isso é e parece muito bom. Temos nossas imagens aqui, os pacotes, com as opções de preços e até as fotos de diferentes cidades. Portanto, este é definitivamente um bom design que podemos usar. Gosto muito de como eles incluíram alguns ícones. Então, definitivamente podemos usar essa ideia. E se quiser, você pode simplesmente colar essas entradas em seu design, se quiser Essa é definitivamente uma opção aqui. Então, definitivamente podemos dar uma olhada nisso e vamos deixar isso aqui como mais inspiração. Agora, a partir daqui, você também pode alterar o estilo Então, se você não gosta do estilo que ele criou, você pode fazer estilos diferentes, como aqui Temos um roxo, um azul. E, como você pode ver, as fontes também estão mudando. Portanto, temos uma fonte sera com esta, o que é interessante Esse verde, e depois temos um modo escuro, super legal. E sempre podemos fazer mudanças em termos de design. A propósito, também podemos ver o modo escuro. Mas podemos mudar algumas das cores aqui. Então, se você quiser, digamos, azul para nosso botão principal, podemos fazer isso, ou até mesmo para os ícones aqui embaixo e todo o tema geral do aplicativo, ou podemos inserir um código hexadecimal específico Por exemplo, podemos extrair o código hexadecimal de nossas variáveis locais para as 500 primárias, que é essa aqui, e até mesmo voltar aqui, ir para o First Draft Então, isso é muito legal. Portanto, sinta-se à vontade para usar o Figma AI First Draft para ter ideias sobre o que você deseja incluir Não logo de cara. Já faltam algumas coisas aqui e queremos incluir um selo de popularidade, um marcador, que já está lá, então isso é bom Podemos usar um marcador de estilo semelhante. E também queremos avaliações, e também para os preços, talvez inicialmente, queiramos mostrar por semana, e somente se o usuário realmente inserir as datas , queremos mostrar o preço exato para os horários que ele selecionou Então é assim que podemos usar o Fake MI para gerar um primeiro rascunho para nós. Agora vamos usar Mike e Ax extra para continuarem montando nossa página de descoberta de destinos sozinhos. 38. Adicionando entradas de pesquisa e tempo: Para continuar criando o restante da nossa página de descoberta de destinos. Já temos a barra de navegação aqui, o que é bom. Agora, queremos ir até nossas entradas, que serão o destino Então é aqui que o usuário também estará viajando. Agora, em nosso caso de imagem gerada por IA, temos um formulário, mas na verdade não precisamos de um. Só precisamos de um destino porque por meio dessa plataforma, eles não estão reservando voos. Eles estão apenas reservando pacotes que basicamente vêm com acomodação e quaisquer atividades que realizem lá. Portanto, não precisaremos incluir isso. Deseja incluir um destino, campo de entrada. E talvez para o ícone, possamos fazer um ícone semelhante a este aqui. Eu realmente gosto disso. E então queremos uma entrada para seletores de data, então queremos permitir que eles selecionem as datas de onde desejam viajar e, em seguida, queremos ter um botão de pesquisa que basicamente permita que eles cliquem para que possam pesquisar e refinar esses Agora, por padrão, esses cartões mostrarão apenas destinos gerais. E à medida que eles pesquisam um destino específico e horários específicos, a ideia é que esses resultados se restrinjam ao que o usuário está procurando. Você vê isso normalmente em muitas plataformas de reserva. Queremos adicionar uma entrada que temos, possamos ir até nossos ativos, ativos locais e arrastar o campo de entrada até aqui. Vamos movê-lo para que fique aqui, 48 pixels, e eu estou mantendo o espaçamento entre altitudecks e, de cima, vamos também fazer Para nosso título aqui, vamos chamá-lo de destino. E em vez do texto do espaço reservado, vamos adicionar uma cidade aqui, digamos, Nova York Ponto, ponto, ponto assim para dar dicas de que eles podem adicionar cidades e assim por diante Então, queremos um ícone aqui como esse ícone de localização no lado esquerdo dele. No momento, não temos isso em nossa entrada, então não podemos realmente arrastar um ícone dentro dele porque é uma instância. Portanto, precisamos acessar o componente, o que você sempre pode fazer, a propósito, clicando no botão do componente principal do GoTo E agora que estamos aqui, queremos adicionar um ícone no lado esquerdo. Mas, novamente, queremos configurar uma propriedade para que somente quando decidirmos , mostraremos o ícone. Vamos criar uma propriedade aqui, uma propriedade booleana, vamos chamá-la de mostrar ícone esquerdo como este, por padrão, vamos desativá-la porque geralmente, em nossos campos, não precisamos de ícones. Crie uma propriedade. Vamos aos ícones de fósforo. E se você não o tiver aqui por motivos, você sempre pode pesquisá-lo, além de plug-ins e widgets E vamos pesquisar a localização. Essa é boa. Podemos usar esse. Vou pressionar o Comando X para recortá-lo e colá-lo aqui, em vez de nossa entrada. E vamos mudar o tamanho para 20 por 20 em vez disso. E mova-o para o lado esquerdo usando as setas do nosso teclado Então, agora temos um bom ícone aqui. E com o ícone, poderíamos realmente reduzir um pouco o espaçamento aqui no lado esquerdo Então, se você for até aqui, podemos escolher preenchimentos individuais para nosso contêiner de layout automático Então, podemos ter 16 pixels da direita, mas da esquerda, podemos fazer talvez oito, então parece um pouco melhor. E agora queremos dar a esse ícone uma cor diferente. Vamos fazer as 500 primárias. Além disso, vamos vincular a visibilidade aqui ao nosso ícone mostrar à esquerda, propriedade que acabamos de criar. E, claro, ele se esconderá porque, por padrão, optamos por fazer com que isso seja falso. A propósito, você sempre pode mudar isso a partir daqui. Então, agora vamos até aquele que queríamos ativar e ativar esse. Linda. Então, agora temos nossa entrada de destino. Queremos mais dois campos para nossas datas. Agora, precisamos mudar o ícone das datas. Agora, de volta aqui, vou fazer isso mais uma vez. Acho que o espaçamento da esquerda é um pouco pequeno. Talvez 12 pixels seja melhor. E o espaçamento entre o espaço reservado e isso pode ser de oito pixels Então, a diferença é um pouco melhor. Vou desativar a propriedade padrão para mostrar o ícone esquerdo. Agora vamos voltar. Sim, parece melhor. Então, mais dois campos aqui, o de e dois. Vamos usar Alt, copie alguns campos aqui. Na verdade, vou fazer o layout automático desses dois juntos, para que possamos fazer isso mais uma vez com facilidade. Altere isso para dois, altere isso para de, em nosso espaço reservado, podemos escolher uma data Agora podemos simplesmente escrever uma data aleatória aqui. Como espaço reservado. Não precisamos que sejam tão grandes, então podemos realmente torná-los com talvez 400 pixels de largura, assim. Vamos mudar esses ícones para que sejam um calendário em vez de um alfinete ou alfinete de localização. E para fazer isso, vamos voltar na próxima aula para que possamos configurar alguns ícones dinâmicos aqui, caso tenhamos uma entrada com vários ícones diferentes 39. Instâncias aninhadas: Desafios, queremos ter um ícone aqui nesta entrada que possamos usar, e não queremos que seja apenas aquele ícone de localização. Queremos vários ícones. O que podemos fazer aqui é criar um componente para nossos ícones, possamos colocar qualquer ícone que estamos usando no projeto nesse componente e, em seguida, criar uma instância aninhada desse componente Isso pode não fazer nenhum sentido agora para você, mas vou te mostrar em um segundo como isso funciona. Em primeiro lugar, vou arrastar esse ícone completamente para fora daqui e vou usar o Command K para transformá-lo em um componente. Vamos renomear esse ícone Mapa, caneta assim. E é importante que você coloque esse traço de ícones para criar um grupo chamado ícone E agora podemos ir até aqui, abrir os ícones do Phosphor e procurar um ícone de data Esse parece bom. E vamos também redimensionar isso para 20 por 20 Então, vamos mudar para 20 aqui. Portanto, é do mesmo tamanho e também use Alt Command K para transformá-lo em um componente, use o mesmo formato de ícone de nomenclatura e faremos a data ou o calendário O nome do ícone real depende realmente de você. Também darei os 500 primários. Olha, e vamos movê-los para dentro de nossos componentes aqui, para que estejam todos perfeitamente E agora o que faremos é copiar uma instância desse ícone aqui. Mova-o para a esquerda novamente. E o que vamos fazer é ir até as propriedades aqui e adicionar uma troca de instância E nossa troca de instância será um ícone, e escolheremos Map Pin, vamos chamá-lo de ícone O que isso nos permite fazer é que, no nível da instância, rapidamente poderemos mudar esse ícone do pino do mapa para qualquer outro ícone. E quando eu clicar em Criar propriedade, você verá como isso funciona em apenas um segundo. Então, agora, se eu clicar duas vezes neste aqui, nada aconteceu. Agora, aqui, vamos clicar duas vezes para selecionar o ícone em si e, em seguida, fazer os três pontos aqui e aplicar a propriedade de troca de instância, e usaremos E agora o que acontecerá é que, se formos para onde estamos usando nosso campo aqui, se você clicar duas vezes, podemos trocar esse ícone do mapa do calendário por este , e a mesma coisa aqui Então, sempre que adicionarmos um ícone a isso como um componente com qualquer ícone, podemos trocar o ícone por aquele Incrível. Então, agora temos esse campo. Agora parece um pouco sem graça aqui. Acho que podemos usar um bom título aqui para esta página. Então, por que não movemos isso para um pouco mais de texto adicionado e, então, vamos encontrar a próxima aventura. E vamos fazer isso com quatro anos. Coloque-o aqui. Vamos ter esse com 48 pixels aqui. Mova este para cima até que fique a 24 pixels deste e faça um layout automático deles também. Esse layout automático deve ter o tamanho de toda a área de conteúdo e, em seguida, mudaremos a cor desse , vamos fazer o secundário 800. E vamos mudar a cor aqui para um texto 300. Parecendo melhor. E vamos adicionar um botão de pesquisa aqui. Podemos simplesmente copiar um botão daqui para aqui. E queremos que esse layout automático seja realmente alinhado no canto inferior esquerdo desta forma e que esse botão realmente gere o conteúdo para que não seja tão grande, e vamos apenas dizer pesquisar. Aí está. Agora, está começando a se formar lentamente, e agora vamos voltar na próxima seção para começar a montar o design nossos cartões de destino reais 40. Design de cartão de destino: A maior parte do nosso aplicativo ou porções são os cartões de destino que vamos criar. Então, aqui temos esses cartões de destino que inicialmente mostrarão um conjunto padrão de destinos, talvez de acordo com o que é popular ou podemos decidir isso. Posteriormente, o que queremos fazer é projetar e, se o usuário pesquisar ou filtrar suas opções, um conjunto diferente de cartões de destino poderá ser exibido. O que queremos fazer é criar um design para nosso cartão de destino. Então, aqui temos uma bela imagem em nosso wireframe que podemos usar para esse destino Então, da mesma forma que a IA criou, podemos ter uma imagem dessa cidade. Aqui estaria um botão para marcar essa cidade ou destino E aqui embaixo estaria o nome do nosso destino ou nome da cidade, seguido pelo número de avaliações. Agora, aqui temos um preço por semana. Embora isso não faça muito sentido, o que queremos fazer é mostrar um preço, bem como talvez adicionar aqui as datas dessa aventura para este pacote, possamos mostrar que essa viagem está entre essa data e aquela data, ou podemos mostrar o número total de dias que também podem ser úteis em vez desse preço por semana. Assim, podemos mostrar o preço. Podemos adicionar alguns dias em que eles estarão nesse destino e, em seguida, um pequeno ícone aqui para mostrar se esse destino é popular ou não. Então, se tem esse ícone de fogo, é popular, caso contrário, não é, talvez possamos mover isso até aqui. Então, veremos quando começarmos a projetar como ele se organiza e, em seguida, queremos apertar um botão para realmente permitir que eles continuem com esse destino ou aprendam mais sobre ele Vamos começar a projetar. Vamos voltar aos nossos designs aqui e aqui. Então, definitivamente queremos configurar nossos cartões como um componente, porque vamos usar muitos deles e só queremos fazer a alteração uma vez, se houver alguma alteração necessária. Então, vamos começar com a imagem, que estará dentro de uma moldura. Então, vou pressionar F no teclado e desenhar uma moldura aqui, segurando a tecla Shift na parede, e talvez o tamanho possa ser 180 por 180. E se você não conseguir acertar, tudo bem. Basta soltar enquanto arrasta e, em seguida, você pode simplesmente alterar a largura e a altura aqui para 180 Lá vamos nós. Vou mover isso aqui só para alinhá-lo E vamos adicionar um preenchimento de branco para o espaço reservado aqui Pensando bem, talvez possamos realmente tornar essa imagem um pouco maior, 200 ou 220. Eu acho que 220 é bom. E a maioria das imagens pode, na verdade, não estar quadrada. Eles podem ter um formato mais retangular. Então, gostaríamos de estender essa carta para talvez 366 por 220 Essa é uma boa proporção que a maioria das imagens pode formar, que é em torno de 4423 Na verdade, talvez possamos manter o comando e atingir a altura 240. Aqui, vamos apenas remover isso para que as proporções não sejam restringidas, para que possamos facilmente mudar isso para 240. Lá vamos nós. Então, primeiro, vamos desenhar uma moldura para nossa imagem. E por que não usamos nossa rede para nos ajudar com isso? Então, vamos ativar nossa grade aqui. Faremos algumas coisas. Em primeiro lugar, essa entrada também seria boa para combinar com a grade. Então, podemos levar isso a isso. Por aqui. E para o espaçamento entre eles, vamos fazer 24. E para esse campo, vamos reorganizar o tamanho para que eles ocupem as grades aqui, as colunas aqui Portanto, combina um pouco melhor com nossa grade de layout. E agora, para nossos cartões de destino, vamos fazer um cartão de destino. Na verdade, esse campo é um pouco longo demais. Vamos torná-lo um pouco mais curto. Apenas três colunas são mais do que suficientes para digitar em uma cidade e agora também desenharemos uma moldura e faremos uma forma quadrada aqui. 318 por 318, mas na verdade arrastaremos a altura para talvez 210. Lá vamos nós. Adicionaremos um preenchimento branco, que será usado nas imagens do nosso cartão de destino. Vou aumentar a altura da grade. Agora, para o raio do canto, vamos definir um raio do canto de 16 Isso é bom. E queremos adicionar um texto logo abaixo e escrever cidade-país. Essas são apenas informações de espaço reservado. Vamos colocá-lo aqui. E agora, eu não vou usar o Autoayout porque vou te mostrar algo legal caso você acabe não usando Então, isso será útil. Então, por enquanto, o que vou fazer é criar o cartão sem o layout automático instalado. Então, vamos colocar tudo aqui primeiro. Então, temos o nome da cidade. Aqui, do outro lado, teremos uma classificação de 4,7 Na verdade, queremos que isso esteja aqui. Podemos adicionar o ícone da estrela acessando os ícones de fósforo. Procure por estrela, adicione isso. Agora vamos corrigir as cores e o alinhamento em apenas um segundo Esta estrela não está dentro da nossa moldura aqui, eu acredito. Queremos selecionar a moldura e garantir que ela esteja dentro. É isso e logo abaixo, queremos ter um preço. Vamos colocar $1.000 aqui. E então talvez possamos realmente arrastar uma cópia desse ícone aqui usando Alt e arrastar uma até aqui. E logo ao lado , adicione um texto e vamos escrever sete dias. Essa é a duração da viagem. E o que mais temos? Temos um ícone de popularidade. Então, na verdade, talvez possamos mover isso para o site para ver o ícone de popularidade, talvez possamos criar uma tag posteriormente para ele. Então, vamos deixá-lo de fora por apenas um segundo, e o marcador ficará no topo da imagem Então, para esse, faremos uma elipse. Então eu pressionei O, e vou desenhar 32 por 32 aqui, e vou usar Alt para garantir que o espaçamento seja de dez pixels da parte superior e direita Use ícones de fósforo para adicionar um marcador. Coloque o ícone aqui, coloque-o aqui dentro, que atualmente não está dentro, então vou clicar duas vezes para selecionar esse quadro, colá-lo e, em seguida, usar Shift para fazer isso de 16 por 16, basta centralizá-lo aqui. Novamente, aplicaremos as cores e tudo mais tarde. Agora, por enquanto, se você quiser criar um layout automático a partir disso, se selecionar todo esse conteúdo e pressionar Shift A, você terá uma bagunça, e não é isso que queremos O que podemos realmente fazer é que, se você acabar em uma situação como essa em que não tenha usado o Autoyout, você pode clicar com o botão direito do mouse e fazer mais opções de layout e sugerir o layout automático E, como você pode ver, o Figma criou quadros de layout automático aninhados um dentro do outro e está mostrando que todos esses são novos quadros de layout automático O único lugar em que não funcionou muito bem foi esse ícone de estrela de classificação. Então, na verdade, mudou as proporções, mas não queremos que seja assim. Então, clicaremos duas vezes para garantir que nosso ícone de estrela seja realmente quadrado. Portanto, certifique-se de que seja 20 por 20. Na verdade, vamos apenas desagrupá-lo de sua moldura e garantir que ele esteja alinhado à esquerda e ao centro. A mesma coisa para este. Portanto, há algum trabalho de retoque que você precisa fazer. Mas, basicamente, Figmas foi em frente e adicionou uma arte inteligente de Adeod Muito legal. Para este 4.7, podemos criar conteúdos do Hug. A mesma coisa para isso. Aqui, e este parece estar bem, então podemos deixar aquele. Portanto, nosso layout automático está começando a ficar bem para nossa placa de componentes aqui. Na verdade, não formatamos isso corretamente, então vamos voltar para a próxima seção para começar a dar alguns toques interessantes 41. Polimento da interface do nosso cartão: Vou fazer algumas coisas para deixar esse cartão bonito antes de começar a duplicá-lo e preencher esta página com ele Então, começando do topo, nosso botão de marcador, na verdade, deve ser um preenchimento branco porque, novamente, uma imagem aparecerá aqui, então queremos um fundo branco para o botão de marcador E então mudaremos a cor aqui desta para 500 primária. Agora, essa elipse aqui, eu sei que agora está se misturando, então podemos adicionar um traçado que talvez seja apenas 50 primário ou 100 primário. Isso funciona. Aqui em nossa cidade e país, podemos ampliar o corpo para criar um pouco de hierarquia visual, porque esses são provavelmente os detalhes mais importantes junto com o preço No momento, o espaçamento entre esses dois é um pouco demais, então podemos reduzi-lo para oito pixels E o espaçamento entre as informações e o cartão não é realmente consistente Então, vamos fazer 16 pixels. Agora, aqui, temos alguns problemas de alinhamento. Então, essa aqui, parece que está na parte inferior desta moldura, mas na verdade deveria estar na parte superior. Então, só queremos mudar isso para que fique alinhado com o topo. O espaçamento entre isso é de seis pixels. Você pode escolher oito para ser consistente. A mesma coisa com este aqui. Só queremos ter certeza de que isso também está no conteúdo do abraço Vou selecionar esses dois trechos de texto e fazer o texto 300. Para o ícone de estrela, vamos fazer uma cor secundária de 500. Agora, o preço pode ser texto 400, esse ícone de calendário também pode ser 500 secundário. Na verdade, eu não gosto do texto aqui, então talvez possamos torná-lo um pouco mais escuro, e este poderia ser o texto 500 Sera, você parece um pouco melhor. Na verdade, acho melhor termos apenas um desses ícones como cor secundária. É um pouco laranja demais aqui. Então, na verdade, se você quiser mudar rapidamente a cor aqui, podemos fazer no Link. Use o conta-gotas e, se você passar por cima de qualquer cor, digamos que queremos essa cor de texto aqui Ao clicar, já tiramos essa cor de lá. Pode ser um pouco demais. Por que não reduzimos o tom para algum lugar por aqui? Isso parece um pouco melhor. E uma bela sombra pode ser boa para essa imagem aqui. Então, vamos criar um efeito de sombra projetada. Agora isso é muito forte. Então, o que vamos fazer é aumentar um pouco esse raio de desfoque até tentar 20, não queremos que seja tão forte, então vamos fazer 8% Eu acho que isso é muito bom. E pode ser um pouco menor. Então, podemos realmente fazer uma sombra projetada de oito para o Y. Então isso já está muito bonito Tudo o que precisamos fazer é preencher isso com alguns dados de amostra, e será muito melhor. Agora, para este aqui, também queremos um espaço igual a este aqui. Então, vamos fazer oito pixels, ou melhor, uma lacuna. Mas o problema é que essa moldura aqui não tem a mesma altura desta, está criando uma lacuna aqui ou um desalinhamento Portanto, temos duas opções. Uma é que, na verdade, podemos fazer o layout automático de tudo e fazê-lo horizontalmente, ou você também pode simplesmente fazer uma altura fixa de 27 para isso Então, se você alterar isso para 27, também funcionará. Lá vamos nós. Vamos voltar para a próxima aula para substituir esse texto de amostra por algum texto real 42. Usando Figma AI para gerar dados de amostra: Primeiro de tudo, vamos selecionar esta carta e pressionar Altman K, transformá-la em um componente e renomeá-la através nosso painel de camadas aqui para cartão de destino E, como você provavelmente adivinhou, vamos movê-lo para fora daqui, para nossa seção de componentes cada vez maior aqui E depois copie um aqui embaixo. Vou colocar esses dois juntos e, em seguida, para o pai aqui, vamos fazer um espaçamento de 40 pixels Lá vamos nós. Portanto, tem mais espaçamento em relação ao topo Agora, para este, vamos usar alguns dados de amostra. Então, por que não abrimos o splash para nos dar uma foto da cidade Vamos começar com Nova York. Basta deixar um deles aqui. Então, com a moldura aqui selecionada, cliquei na imagem e ela a colocou diretamente na moldura Linda. E depois faremos Nova York. EUA gostam disso. Faremos a avaliação por enquanto e deixaremos os sete dias, e talvez alteremos o preço para algo em torno de $5.000 Então, isso está parecendo bom. E agora, se você quiser adicionar outro, o FIGMA continuará colocando-os abaixo aqui, então é aí que precisamos de outro layout automático aninhado Então, ao selecionar essas duas cartas de destino, pressione Shift A e, em vez do layout horizontal, que você poderia fazer, vamos fazer rap. O que o rap fará é, na verdade, empurrar qualquer carta adicional para a próxima linha. Agora, só para mostrar, vamos encher o recipiente com a largura aqui. Agora, se fizermos na horizontal, o que acontecerá se continuarmos duplicando nossas cartas Vai continuar assim. E não é isso que queremos. Queremos que ele realmente se espalhe para a próxima linha ou para a próxima linha em nosso design E é aí que temos esse recurso de layout automático de encapsulamento. Agora, se continuarmos duplicando, ela vai para a próxima linha, que é o que queremos Agora vou desfazer isso e ter apenas dois por enquanto. Agora, para esta de Nova York, vou mudá-la para outra cidade. Vamos fazer Istambul e substituir este aqui, ou simplesmente vamos por outro aqui, este, vamos fazer Item Turkey e alterar o preço para, digamos, 3.000 E em vez de sete dias, vamos fazer cinco dias. E em vez de 4,7, vamos fazer 4,5. Vamos deixar o espaçamento de 24 pixels entre eles por enquanto E podemos realmente usar o Figma AI para gerar mais conteúdo para nós Queremos gerar muito mais, mas não queremos realmente escrever todos eles sozinhos. Podemos simplesmente arrastar essa duplicata com um novo conteúdo, e isso pode atrapalhar o layout automático em apenas um segundo E vamos arrastá-lo até que tenhamos alguns. E, como você pode ver, ele gera várias cidades e países diferentes, vários preços, datas, classificações diferentes e assim por diante por si só. Eu só quero ir em frente e garantir que isso encha recipiente e se espalhe para o próximo Agora, a única coisa que ele não pode gerar no momento são imagens. Então, tudo o que precisamos fazer é encontrar essas cidades no Splash e substituir as imagens Nós podemos fazer Londres. Clique duas vezes nesta imagem, selecione uma, Tóquio, selecione uma imagem, selecione esta. Indo para Paris, selecione um. Sidney e até o último aqui. Linda. E agora temos algum conteúdo que geramos usando o Fig MyI em apenas alguns minutos. Isso é maravilhoso. Agora, olhando para isso, o espaçamento é um pouco exagerado, então talvez em vez de 24 pixels, possamos fazer 32 Incrível. Isso está começando a ficar muito bom. Agora, esse espaçamento vertical também pode ser um pouco maior Então, vamos fazer 32 pixels aqui. Incrível. Isso está começando a ficar muito bom. Agora, temos mais algumas coisas a acrescentar aqui. Ainda não adicionamos o ícone popular e o botão aqui, então vamos voltar para a próxima seção para adicionar essas duas partes também 43. Proporção bloqueada: Então, um problema que temos agora com os cartões e a forma como os configuramos, momento, eles têm uma largura fixa de 318 pixels. Nesse caso. Digamos que, por algum motivo, queremos usar uma forma mais quadrada e alterar esses 250 pixels. O que acaba acontecendo é que a imagem perde a proporção e fica um pouco diferente. Então, só para demonstrar, eu vou até aqui. Temos o mesmo cartão aqui. Como você pode ver, conforme eu redimensiono, a imagem também é redimensionada E isso normalmente não é o que queremos em um layout como esse, em um cartão como esse. Portanto, o FiCMA tem um recurso chamado proporção bloqueada, que nos permite bloquear a proporção dessa energia para que isso não aconteça Agora, para fazer isso, basta acessar a placa componente, selecionar a moldura que contém a imagem e, em seguida escolher este ícone aqui, bloquear a proporção. Agora, se voltarmos à instância, fazemos a mesma coisa, você vê que a imagem não está perdendo sua proporção, então a imagem não está mudando como antes. Portanto, eu definitivamente recomendo isso especialmente para componentes que redimensionarão seu projeto para bloquear a proporção da imagem, garantindo que a largura e a altura permaneçam sempre intactas 44. Criando tags: Eu estava vendo isso e percebi que, na verdade, não precisamos de um botão, como precisávamos originalmente em nossos wireframes, porque os próprios cartões podem funcionar como Portanto, temos essas imagens e não precisamos necessariamente que o usuário tenha um botão aqui, semelhante ao que a Figma fez aqui com sua versão E é por isso que é ótimo usar esses recursos do AIA. A única coisa da qual não sou muito fã é do espaçamento que ainda existe Parece um pouco abarrotado. Então, por que não tentamos dar aos nossos designs um pouco mais de espaço para respirar e experimentamos o espaçamento de 48 pixels entre os cartões Sim, não temos essa quarta carta aqui, mas acho muito importante nossos designs tenham esse espaço. Para fins de consistência, seria bom se também espaçássemos nossas entradas aqui para corresponder a isso Incrível. Também queremos adicionar uma tag para mostrar os itens populares ou os destinos populares. E podemos fazer isso por meio de uma bela tag aqui com um ícone. Então, vamos abrir ícones de fósforo e procurar um ícone de fogo. Clique em um. Essa é boa. Podemos adicioná-lo em nosso quadro aqui, e talvez possamos adicionar um título aqui, popular. Faça o layout automático desses dois juntos. Este ainda não está aqui, então queremos ter certeza de que está dentro. E então vamos autolayar esses dois. O texto é muito grande, então vamos usar o tamanho negrito do rodapé ou, na verdade, não precisamos que ele esteja em negrito, até mesmo um rodapé é bom E para melhorar o visual, podemos colocá-lo no lado superior direito ou no canto superior esquerdo aqui Agora, você vê que não fica muito bem com as cores e em cima dessas imagens. Então, seria bom se esse layout automático também tivesse um preenchimento branco e fizéssemos com que o raio fosse muito alto para que ficasse completamente circular Um pouco de espaçamento, talvez dois ou quatro pixels das laterais e da parte superior, seria bom E, na verdade, esse espaçamento é um pouco pequeno, especialmente na horizontal Então, talvez queiramos fazer oito horizontalmente. E esse ícone aqui, vamos redimensioná-lo para 16 por 16 Vamos mudar o ícone para uma bela laranja. E, de fato, podemos realmente fazer um bom gradiente de laranja. Por que não fazemos um gradiente aqui? E para a primeira cor, vamos fazer um belo laranja aqui. E a segunda cor aqui, vamos fazer um bom tipo de laranja mais escuro. Isso parece bom. Agora, aqui embaixo, isso parece muito melhor. E, claro, nem todos deveriam ter o ícone popular. Só precisamos dele em s. A primeira coisa para o texto aqui é fazer com que o texto 500 ou o texto 400 sejam realmente melhores. Vamos criar uma propriedade booleana e chamá-la de Is popular. Por padrão, vamos deixar como false, criar propriedade. Em seguida, selecionaremos essa tag aqui e vincularemos a visibilidade à sua popularidade. Agora vamos aqui e talvez façamos por um deles. Talvez esse de Londres seja popular. O de Tóquio é popular. E agora é mais aleatório. Isso está começando a ficar muito bom e só temos mais alguns elementos para adicionar. Nosso cartão está praticamente completo para nossa página de descoberta de destinos. Está faltando um filtro no botão de classificação e, em seguida, nas coleções aqui. Vou deixar as coleções para você fazer como um exercício, agora que fizemos o design do seu cartão. Portanto, nossas coleções são basicamente grupos de destinos diferentes, então podem ser coisas como escapadelas românticas ou viagens divertidas ou viagens de um mês, qualquer categoria que você possa imaginar E se precisar de ajuda, definitivamente acesse o Chat GPT para obter ideias para diferentes coleções Então, esse será um exercício para você fazer sozinho. Farei uma versão em meu próprio arquivo e, claro, você terá o link caso queira dar uma olhada em como eu fiz isso. Agora vamos voltar para a próxima textura para trabalhar nos botões de filtro e classificação 45. Usando layouts de grade: Antes de passarmos para nossos botões de classificação e filtros, quero mostrar algo novo recentemente que a Figma anunciou na configuração de 2025, que são os layouts de grade Portanto, embora aqui estejamos usando AP agora para nosso layout automático nessa grade de resultados, na verdade há uma nova opção agora chamada grade, e atualmente está em Btu, mas é um pouco mais flexível do que o layout automático de rap, que agora está aqui quando você seleciona a horizontal. Então, vou mostrar em apenas um segundo como isso se aplica. No momento, temos esse contêiner de embrulho e, à medida que redimensionamos aqui, os elementos internos são redimensionados Mas se prosseguirmos e realmente selecionarmos essa nova opção de grade, agora veremos que temos uma grade de três por dois, então três colunas por duas linhas. Você pode mudar isso para três por três, se quiser, e então você pode ter mais cartas. partir daqui, você pode alterar a margem da esquerda e da direita da grade na parte superior e inferior, e é aqui que você pode escolher a lacuna entre as colunas da grade e da mesma forma com as linhas da grade. Vou deixar isso como 48 pixels para ambos. E agora, ao ampliar, você verá que tem essas opções aqui. Na verdade, você pode mover as cartas em diferentes posições, então não precisa necessariamente seguir a convenção do embrulho Dessa forma, se você tem essa carta aqui que eu criei, se eu a trouxer aqui e colar, automaticamente, ela toma o lugar de uma grade, e eu posso movê-la para decidir onde eu quero que ela fique. Agora, se eu quiser expandir isso, posso mover esta carta aqui para esta caixa e depois expandi-la para o outro lado. E agora está expandido em duas colunas, como você pode ver aqui. E, por padrão, todas as minhas colunas têm uma largura automática, o que significa que elas serão preenchidas ou ocuparão o máximo de espaço possível. Mas você também pode fazer um personalizado. Então você pode definir isso para 200 pixels. E agora essa coluna terá apenas 200 pixels, mas você precisará ir individualmente e garantir que cada cartão esteja em um recipiente cheio para que seja aplicado corretamente. Mas é claro que, em um caso como esse, não gostaríamos disso. Então, se você voltar aqui e remover esse número, ele voltará automaticamente para Auto. Dessa forma, você pode brincar com seu design e ter posicionamentos diferentes, que lhe dá mais flexibilidade para escolher onde deseja que seus elementos estejam Portanto, sinta-se à fazer um experimento com grades à medida que avança no curso Terei uma cópia da minha tela de destino nas maquetes, caso você queira dar uma olhada mais de perto 46. Botões de classificação de filtro: Agora, queremos adicionar um filtro e um botão de classificação e , em seguida, um texto adicional para mostrar quantos resultados o usuário está vendo. Então, vamos adicionar um texto aqui entre as entradas e os resultados, e vamos escrever o número de resultados Vamos apenas como exemplo, escrever 42 resultados. Altere isso para o corpo e altere a cor do texto para o texto 300. E agora, na mesma linha, vamos adicionar alguns botões de filtro e classificação. Agora vou arrastar uma cópia desse botão até aqui e uma cópia desse botão até aqui fazer o layout automático desses dois usando Shift A, fazer o layout horizontal. Agora, esse contêiner principal está um pouco errado. Então, vamos continuar e, na verdade , usar esse conteúdo, para que caiba em três cartas com o espaçamento que temos Dessa forma, o que podemos fazer é o preenchimento aqui e usar um espaçamento automático E para esse botão, vamos encher os recipientes. Então, está ocupando todo o espaço aqui. Nesta pesquisa, queremos realmente alterá-la para talvez um tipo secundário de botão e alterá-la para classificá-la por relevância. Obviamente, eles podem clicar para alterá-lo. E faremos outro e faremos um layout automático entre esses dois com um espaçamento de 16 pixels e conteúdo abrangente Para o espaçamento, vamos aumentá-lo para 24, e este será um filtro Seria bom ter alguns ícones ao lado desses botões. Então, vamos fazer algo semelhante com nosso botão, onde também adicionamos ícones a ele. Mas primeiro, vamos encontrar dois ícones, 14 Sort, 14 filter usando ícones de fósforo Vamos procurar SRT. Essa é boa. Nós vamos filtrar. Essa é boa. Ambos estão aqui, pressione o Comando K em ambos, renomeie o ícone de filtro E essa vai ser uma barra de ícones. Desculpe, essa é na verdade um filtro, e essa vai ser opa. Essa vai ser uma espada. Parece que eles não estão realmente dentro da nossa seção aqui. Queremos trazê-los e, na verdade fazer 20 pixels por 20 pixels para o tamanho, alterá-lo para 500 primários para a cor. E agora vamos trazer um deles aqui. Agora, para este, queremos alterá-lo para a cor branca, já que está em um botão azul e colá-lo aqui, e para este, vamos redefinir todas as alterações, para que ele volte para a mesma cor que aqui. E vamos adicionar uma propriedade booleana, mostrar o ícone esquerdo e transformá-lo em falso Agora, selecionando os dois desta forma, vamos vincular a visibilidade para mostrar o ícone esquerdo. E mais uma coisa, na verdade, antes de fazer isso, também vamos fazer uma nova propriedade chamada troca de instância, vamos chamá-la de ícone E, por exemplo, vamos escolher o ícone e classificar um, criar uma propriedade e vincular essas propriedades ao dispositivo e trocar ao ícone e vincular a visibilidade ao ícone Showleft Então agora podemos ir até aqui. Selecione os dois, mostre o ícone esquerdo neles. Agora, um deles será classificado. O outro será filtro. Lá vamos nós. Incrível. Então, temos esses botões agora. Eles permitem que o usuário filtre os resultados. E, na verdade, um corpo grande pode parecer um pouco melhor aqui pelos resultados, e está começando a parecer muito melhor. Vamos organizar automaticamente esses dois e na verdade, aumentar um pouco mais o espaçamento entre eles, talvez 40 pixels. Eu acho que é melhor. Então, o que aconteceria se eles clicassem em classificar ou filtrar Podemos abrir listas suspensas aqui para mostrar as diferentes opções, o fato de que eles podem classificar por popularidade, preço ou opções de filtro, como podem escolher orçamento, duração, etc., etc., etc Ou podemos abrir um contêiner de motor que é uma caixa de motor na parte superior. E como nosso filtro e classificação mais básicos, acho que uma lista suspensa funcionará bem Então, quando não voltaremos na próxima palestra para criar esses menus suspensos para ver como ficaria se alguém clicasse nesses filtros ou os classificasse 47. Design de menu suspenso: Na verdade, crie nossos menus suspensos para alguns lugares. Podemos usar esse menu suspenso não apenas para classificar pelos filtros Podemos até mesmo usá-lo na lista suspensa aqui se eles clicarem na foto do perfil e falarem na foto do perfil, então criaremos uma lista suspensa genérica qual podemos ajustar e fazer alterações ou criar várias variantes para várias variantes Em termos das opções aqui, escrevemos que as opções de classificação popularidade por preço e por classificações Assim, podemos ter essas como opções e lista suspensa e, em seguida, temos orçamento para filtro, duração, tipo de experiência e clima, voltando aos nossos projetos. O que queremos fazer é criar uma lista suspensa e podemos criar uma na tela aqui e depois começar a movê-la para lá, só para ver como ficaria. A primeira coisa que quero fazer é pressionar T para começar um texto e escrever, e faremos o tipo de bif Então, vamos fazer relevância. E então eu pressionarei Shift A para criar um layout. Altere o preenchimento para branco e altere a cor do texto ou o texto 500. Agora, em um layout automático, você sempre pode criar uma largura fixa, se quiser. Então, o que isso significa é que você pode realmente arrastar a largura aqui ou a altura e criar uma largura especificada. Então, para algo como uma lista suspensa, onde sabemos uma largura específica que queremos que nossa lista suspensa tenha, eu apenas trago isso aqui apenas para mostrar uma relação. Isso ainda é um pouco pequeno. Pode ser um pouco maior. Ou podemos até mesmo torná-lo do tamanho desse botão aqui, que é 245 E então o que queremos fazer é aplicar um corpo têxtil aqui Então, quando você tem uma largura fixa aqui para o layout automático, se o conteúdo ficar mais longo, ele não muda a largura, como você pode ver. A largura sempre permanece a mesma. Mas você pode alterar o conteúdo do abraço para que o texto encha o recipiente Dessa forma, se houver algum texto extra, ele se espalhará horizontalmente para fora Vou para a próxima linha em vez de sair da caixa ou do contêiner. Em vez disso. Então, colocaremos a relevância aqui e, em seguida, queremos uma pequena marca de seleção para indicar que a relevância está atualmente selecionada para a classificação por Eu abro ícones de fósforo, pego um cheque e aqui e ele é colado lá, lindo É um pouco grande demais. Então, usaremos uma ferramenta de escala, qual acabei de pressionar K no teclado. Às vezes, é melhor usar a ferramenta de escala para redimensionar, caso um traçado ou outras coisas possam ficar muito finos se você usar uma ferramenta de movimentação simples Então, vamos escrever 16 por 16. Eu acho que isso é muito bom. E podemos aplicar até mesmo as 500 cores primárias. E só para mostrar que esse é o selecionado, podemos alterá-lo para negrito corporal, na verdade. Agora esse é o tipo. Podemos aplicar um estilo semelhante desse botão até aqui. E se você quiser realmente copiar um estilo desse botão e colá-lo aqui, basta selecionar seu botão, basta selecionar seu botão Alt Command C ou Alt Control C, e aqui, Alt Control ou Alt Command V. Mas a única coisa que acontecerá é que todas as propriedades serão coladas Então, agora voltamos ao conteúdo do HC em vez de uma altura ou largura fixas. Então, podemos simplesmente digitar 245 aqui. Opa, 45, e isso é aplicado antes. Agora, o preenchimento aqui ou nas margens esquerda e direita são 24 Acho que podemos reduzir isso para 16. E faremos desses dois seu próprio layout automático usando Shift A. Agora temos o layout automático. E pressionaremos o Comando D para duplicá-lo. Mas em vez de um layout horizontal, queremos um vertical, então temos opções diferentes que o usuário pode selecionar. E, obviamente, nós realmente queremos nos livrar da marca de seleção Você pode se livrar dele ou simplesmente escondê-lo. Para ocultar, comande Shift H ou novamente, você pode clicar no ícone aqui. Dessa forma, você pode ativá-la novamente se quiser mostrar que a relevância está selecionada ou outra opção está selecionada, ou outra opção está selecionada, e essa não está mais em negrito, e vamos alterá-la para distância Ou, na verdade, queremos popularidade. E então vamos duplicar esse layout automático pelo preço E especificaremos de baixo para alto e, em seguida, duplicaremos mais um e especificaremos de alto para baixo para que o usuário tenha a opção de mostrar de alto para baixo ou de baixo para alto pelo preço, e talvez também por avaliações Então, isso parece bom. Mais uma coisa que podemos fazer para que nossa lista suspensa pareça um pouco melhor visualmente é aumentar a diferença entre as diferentes opções, o que é ótimo, mas também podemos adicionar uma linha divisória entre elas Agora, nós já criamos uma linha divisória aqui, na verdade. Então, vou segurar o Command para selecioná-lo e simplesmente copiá-lo da nossa página de login diretamente no nosso menu suspenso O bom é que, se você colar, tudo o que você precisa fazer é alterar a largura para encher o recipiente e movê-lo para cima e para baixo. E tudo o que você precisa fazer para duplicar isso rapidamente entre cada item, basta pressionar o Comando D para duplicá-lo e a seta para baixo. D, Comando D, seta para baixo, comando D, seta para baixo. Agora temos essa linha entre itens diferentes para criar um melhor tipo de separação visual entre eles. Agora, estou segurando o comando e a tecla shift para selecioná-los todos juntos. Acho que essa cor é um pouco forte demais. Então, talvez possamos realmente desvinculá-lo de nossos tecidos e criar uma versão mais leve Eu acho que isso é bom. Como alternativa, você também pode fazer a Primária 50. Ambas são boas opções. Vou deixar na primária 50, na verdade. O problema é que, se você o trouxer aqui, ele entrará no layout automático e bagunçará tudo Se você quiser ver como ficaria , na verdade , você pode fazer duas coisas. Ou você pode realmente usar shift e seta para a direita ou seta para a esquerda aqui para trazê-lo para o quadro manualmente sem arrastá-lo acidentalmente para dentro de um quadro de layout automático ou outra Se estiver dentro daqui, em qualquer quadro de layout automático, você pode clicar neste botão que diz Ignorar layout automático e esse elemento específico ignorará o layout automático Você pode movê-lo para onde quiser e ele não interagirá com as regras de layout automático. Queremos espaçar um pouco isso e estamos apenas mostrando como ficaria quando estivesse aberto. E embora seja bom, a única coisa que isso poderia usar é uma separação entre o plano de fundo e o primeiro plano Devemos mostrar que esse menu suspenso está aberto ou em um estado aberto. Então, o que podemos fazer aqui é criar uma sombra mais forte para mostrar isso, então podemos adicionar um efeito por padrão, o efeito é sombra projetada, que é o que queremos, e queremos aplicar uma sombra com Y um pouco mais alto, então é mais vertical para baixo, como você pode ver aqui, e podemos aumentar o desfoque então é mais vertical para baixo, como você pode ver aqui, para tentar 16 ou uma sombra mais forte para mostrar isso, então podemos adicionar um efeito por padrão, o efeito é sombra projetada, que é o que queremos, e queremos aplicar uma sombra com Y um pouco mais alto, então é mais vertical para baixo, como você pode ver aqui, e podemos aumentar o desfoque para tentar 16 ou até 24. Experimente 30 aqui. Isso é melhor. E quanto à opacidade, eu sempre gosto de colocá-la um pouco mais baixa Não queremos que seja muito visível. Então essa é boa. Você pode ver claramente que está separado do plano de fundo. Então, isso é bom. Está aberto. E então, se eles clicarem em uma opção aqui ou em qualquer outro lugar na tela, esse menu suspenso será fechado. Então, para elementos como esse, em que você deseja mostrar para, digamos, um desenvolvedor que trabalhará nisso, o que eu gosto de fazer é colocar essa o que eu gosto de fazer é colocar essa lista suspensa fora dos meus designs, dar um nome a ela, para que possamos fazer a lista suspensa de classificação e você sempre possa usar Portanto, se você pressionar C no teclado, poderá deixar comentários para outras pessoas. Você pode marcar seu desenvolvedor e escrever que esse é o menu suspenso para a opção de classificação. Essa é uma maneira de fazer isso. Outra forma é usar o DevMo para deixar anotações Falaremos sobre isso em futuras palestras, então não vou falar sobre isso agora Então, com isso, há também a opção de filtro ou o menu suspenso do filtro. Vou deixar isso como uma tarefa para você fazer. E, novamente, você sempre terá acesso ao meu arquivo, caso queira ver como eu fiz isso. E quando terminar com isso, vamos voltar na próxima palestra para começar nossa próxima página, que será a página de descrição ou a página de reserva, como você quiser chamá-la Esta é a página que, na verdade, está logo após esta página. Então, quando um usuário, digamos, clica em Londres, Reino Unido, ele será levado à descrição desse item ou, novamente, o nome não é realmente importante O que importa é que seja uma tela de reserva. É um lugar onde eles podem ver mais informações sobre esta página. Esta é a página da qual também fizemos o wireframe aqui Eu tenho um wireframe aqui onde destaquei os diferentes elementos desta página Então, vamos dar uma olhada nisso mais e, novamente, em um estilo semelhante, começar do topo, ir até o final e começar a projetar. 48. Página de detalhes da viagem: Acesse nossa página de detalhes da viagem. Eu esqueço que é assim que vou chamá-lo por enquanto. E meu design está aqui. Vou me livrar desse primeiro rascunho gerado pela IA. E vamos dar uma olhada em nossos wireframes para ver o que temos nesse design Então, do topo, temos uma barra de navegação que já projetamos. Queremos ter um botão Voltar para que os usuários possam voltar facilmente à página de pesquisa ou à página de descoberta de destinos. Queremos o nome do destino. Então, semelhante ao que temos no cartão, a cidade e o país, estamos apenas chamando de cidade e país, mas eles poderiam ter nomes mais interessantes. E talvez exploremos isso daqui a pouco usando o Figma AI também Mas antes de nos aprofundarmos nisso, temos nossa classificação inicial aqui. Temos o ícone de popularidade ou a tag, bem como o marcador ou o botão Salvar Assim, você pode marcar esta viagem se quiser vê-la mais tarde Algumas imagens neste site, para que possamos incluir a imagem da viagem. Então, agora, temos apenas uma imagem da cidade. Mas você pode imaginar que, em algumas situações, essa viagem de quem quer que tenha sido criada possa ter várias imagens de talvez pessoas se divertindo nessa viagem e assim por diante Talvez sejam imagens geradas pelo usuário. Vou deixar isso para você, se você quiser experimentar algo fora do que eu projetei ou desenhei aqui O objetivo disso não é fazer com que seja exatamente como eu estou fazendo, mas também incluir sua própria criatividade. Portanto, sinta-se à vontade para seguir direção que achar útil. Então, logo abaixo, queremos uma chamada à ação para que eles selecionem uma sala. Então, o próximo passo para eles escolherem essa viagem é selecionar um quarto no qual eles vão dormir. E aqui, temos alguns ícones das comodidades incluídas nesse destino ou , novamente, no pacote de viagem. Então, o que está incluído, e podemos tê-los em formato de ícone e tal. Então temos nossa acomodação. Então, esses são cartões para ver os diferentes tipos de quartos e o preço por noite. Com a opção de filtrar ou ver as datas em que eles já se inscreveram nesta página. Então, se eles já aplicaram algumas datas de 1 e 2, pode aparecer aqui. Caso contrário, eles poderiam inseri-lo, assim como o número de viajantes, que poderia afetar o preço que eles pagam. E se eles inserirem algumas datas, você pode imaginar que podemos realmente alterar esse preço por noite para o preço total que essa viagem lhes custará. Então, isso seria interessante de explorar. Logo abaixo delas estão as opções de reserva, então podemos até mesmo colocar esse preço total na opção de livro aqui. E então temos algumas classificações. Portanto, temos diferentes cartões de avaliação ou depoimento ou cartões de classificação que podemos criar, bem como alguns destinos semelhantes Portanto, isso pode ser semelhante aos cartões de destino que já criamos. Podem ser outras opções que eles possam estar considerando. Isso tem uma boa quantidade de conteúdo dentro desta página de detalhes. Achei que seria bom incluir tudo o que o usuário precisará naquele momento Se você se colocar no lugar do usuário e estiver acessando uma página de agendamento, quais são as coisas que você está se perguntando e seria bom incluir e garantir que você inclua aqui. Então, esses são os que eu pensei fariam sentido aqui. E o objetivo é que, ao clicar em Reservar, eles acessem a página de reserva, de onde possam preencher o restante de suas informações pessoais, informações de pagamento, então adicione um cartão para pagamento. Podemos ter algumas opções adicionais aqui para a viagem, como seguro, coisas diferentes. Talvez como um aluguel de carro, etc., etc ., e depois um botão para concluir a reserva E ao lado temos um resumo do que eles estão reservando. Então, examinaremos esta página, é claro, mais tarde. Por enquanto, vamos nos concentrar na página que estamos criando. Semelhante à página de descoberta de destinos, vamos detalhar isso passo a passo. Primeiro, vamos nos concentrar nessa parte superior ou no tipo de seção de herói dessa página de detalhes específica. Então, vamos incluir as informações básicas, algumas descrições aqui e um botão para selecionar a sala, junto com esses ícones aqui e as imagens. Então, vamos começar com isso e tudo o mais abaixo. Voltaremos a trabalhar nisso nas próximas palestras. Então, se você estiver pronto, vamos começar a projetar. Esta é uma página empolgante. 49. Design de cabeçalho de viagem: Tudo bem, então vamos montar essa parte superior da nossa página de detalhes do destino Em primeiro lugar, vamos duplicar esse quadro aqui usando Alt Podemos deixar a Navbar aqui, mas podemos nos livrar desse conteúdo aqui Vamos começar com um texto. E isso será para o nosso botão Voltar. Nós responderemos. Você também pode responder a todos os destinos que realmente dependem de você. É bom dizer ao usuário para onde exatamente ele irá se clicar aqui. Queremos que este esteja a 32 pixels do topo, eu acredito, e vamos fazer 48 pixels da esquerda. Então, é bom e uniforme com nossa grade. Eu quero incluir um pequeno ícone ou Chevron aqui. Então, vamos aparecer em fósforo e pesquisar Chevron, há uma boa aqui que você pode usar Vou selecionar os dois juntos e pressionar Shift A, mas fazer uma horizontal. Linda. Agora, o problema é que, em vez de uma largura fixa, queremos um conteúdo abrangente Isso é muito melhor. Acho que o espaçamento está bom aqui porque o ícone em si já tem algum preenchimento, então não precisamos realmente espaçá-los. Mas se você usar um ícone que precisa ser espaçado, você sempre pode ajustar a lacuna aqui entre seu Chevron Você faz com que pareça quatro pixels aqui, até mesmo. E então queremos selecionar uma linha à esquerda , mas no meio. Então, verticalmente, não está na parte superior, não está na parte inferior Está bem no meio. E para a cor de seleção, que novamente, em um caso como esse em que temos um Chevron e um texto, significa que estamos alterando o texto ou a cor de ambos significa que estamos alterando o texto ou a cor de Podemos configurá-lo para texto 400 ou até mesmo texto 300. Portanto, é um botão sutil que não precisa ser muito óbvio ou óbvio, desde que faça o trabalho aqui, o que eu acho que acontece. Aí está nosso botão Voltar. Queremos nome do destino, cidade, país, classificação, popularidade e economia, e também a imagem aqui. Então, vamos começar com a imagem porque podemos simplesmente copiar uma dessas imagens. Vamos trabalhar no de Londres, Reino Unido. Então, estou clicando duas vezes até ter essa moldura com uma imagem nela, pressionando o Comando C no meu teclado, voltando aqui, selecionando nossa moldura e pressionando o Comando V para colá-la Apenas me certificando de que nosso alinhamento aqui esteja correto. Agora, uma coisa aqui é que eu colei no quadro, que também tem essa tag popular no ícone de favoritos, mas não queremos exatamente isso Vou pressionar o Comando G para criar um grupo para esses dois. Portanto, agrupar as coisas permitirá que você as mova facilmente e também mova essa tag para fora do caminho Nós os teremos ao lado, quais precisaremos em apenas um segundo. Este parece bom, exceto que podemos tê-lo um pouco maior. É aqui que nossa grade seria muito útil. Então, ao rotular nossa grade, podemos ver exatamente onde também seria um bom lugar para expandir nossa imagem. E eu acho que aqui, assumir mais de quatro colunas é perfeito. Na verdade, temos cinco colunas. Acho que é uma boa divisão entre cinco colunas e sete para o resto das informações aqui. Como alternativa, você também pode fazer quatro aqui, mas acho que as imagens são importantes e devem ser grandes o suficiente para serem vistas aqui. Para esses pequeninos aqui embaixo, podemos, por enquanto, duplicar este aqui e criar um menor E estou segurando a tecla Shift para manter a restrição às proporções Caso contrário, sua moldura ficará em todo lugar. Portanto, mantenha pressionada a tecla shift se quiser a mesma proporção entre largura e altura. E uma coisa é que, ao reduzir isso, você vê que o raio da borda ou o raio do canto não está mudando, então parece um pouco estranho porque é Então, vamos ajustar isso em apenas um segundo. Se habilitarmos nossa grade mais uma vez, acho que você pode fazer alguns ajustes aqui para que, em primeiro lugar fique bem e cada uma dessas pequenas imagens possa ser sua própria grade. Então, agora podemos duplicar um e colocá-los aqui. Vou montá-los automaticamente e depois duplicá-los mais algumas vezes até que tenhamos cinco Agora, com um layout automático selecionado, se você quiser fazer alterações rápidas em todos os itens ao mesmo tempo, depois de selecionar o layout automático, se pressionar Enter, você selecionará cada pequena coisa abaixo ou dentro dele. Então, agora podemos rapidamente fazer uma alteração e fazer esses oito pixels para o raio do canto Vamos ver como isso parece. Ok, parece decente. Obviamente, precisamos de algumas imagens diferentes lá, e talvez seja bom ter uma borda para algum traçado para elas. Vou selecionar este, criar um traçado e usar o 200 secundário Looking good, e vou aplicar um traçado para esses também, do secundário 200 Looking good. Agora precisamos adicionar nossos rótulos aqui. Então, vamos começar com os rótulos por enquanto. Nome do destino. E faremos um H dois ou talvez um pouco grande demais, então um H três pode ser bom. Aqui, coloque 900 como cor da fonte, permitindo que nossa grade veja novamente onde podemos colocá-la. Agora, para o espaçamento aqui entre esses dois, vamos fazer 40 pixels ou podemos até fazer 48 Então, temos nosso nome de destino. Queremos cidade e país. Então, vou copiar a cidade e o país daqui para cá, você não precisa fazer tudo duas vezes. Nós faremos a leitura. Na verdade, vou apenas copiá-lo com o ícone aqui. Temos a etiqueta de popularidade aqui e este ícone de marcador. Então, eles estão todos juntos agora, mas é claro que devemos organizá-los automaticamente para mantê-los uniformes. Este deve ser um conteúdo. E por algum motivo, este está ignorando o layout automático. Portanto, queremos que todos eles não ignorem o layout automático. Mas é claro que o espaçamento entre eles é muito pequeno. Vamos mudar isso para talvez 32 pixels ou até 48 pixels. 32 pixels ou até 40 pixels. Separe-os a 16 pixels daqui. Layout automático. Vamos adicionar outra camada de texto aqui. Este é um texto descritivo. Vamos contar isso mais tarde. Agora, se você quiser uma caixa de texto fixa, você sempre pode alterar sua caixa de texto de uma largura automática para um tamanho fixo. Então, se eu corrigir isso, o que acontecerá é que o texto será automaticamente espalhado para a próxima linha até aqui E como tem uma altura fixa, ele usa o encapsulamento automático a partir da largura aqui. Então é assim que ficaria, ou você pode escolher uma largura maior ou maior. E então queremos selecionar um quarto a partir de nossos ativos locais Vamos tentar clicar aqui para que agora ele diga “selecione um quarto”. Em vez disso, podemos alterá-lo para ver a disponibilidade. Acho que soa melhor. Agora, este não está incluído em nosso layout externo, então queremos incluí-lo neste também. Então, este, na verdade, queremos criar conteúdo quente, que ele encolha e cresça com o recipiente, e queremos este em vez de um fixo com também conteúdo quente Então, agora, essa camada de texto é o que mantém o limite do layout automático principal. Mas o espaçamento entre tudo é um pouco apertado, então podemos mudar isso se mudarmos para 40, então é demais entre esses, então podemos fazer o layout automático deles separadamente e fazer 24, e o resto fica bem Vou mudar este para, na verdade, 16 pixels para a lacuna. E vamos fixar a altura para este. E o que vamos fazer é trazê-lo para que fique alinhado com esta imagem aqui. Acho que ficaria melhor. E para o texto em si, vamos encher o recipiente para que fique aqui Se o texto for muito longo, não queremos exagerar muito. Então, o que faremos é clicar nas configurações de tipo aqui e truncar o texto Portanto, se o texto for muito longo, ele ficará truncado assim Isso parece melhor. E se demorar muito, sempre podemos ter um botão para ver mais ou ler mais logo abaixo. Não vou adicionar isso aqui, mas você sempre pode adicioná-lo. Incrível. Não temos os itens ou ícones incluídos aqui. Voltaremos na próxima seção para reuni-los, bem como alguns exemplos de conteúdo para nossa página 50. Usando ferramentas de escrita de IA no Figma: Então, o FiGMA AI, na verdade, nos fornece muitas ferramentas de escrita, e podemos realmente tornar o conteúdo muito melhor usando apenas a IA, e você não precisa mais sair do FiGMA Você pode simplesmente fazer isso aqui. Então, por que não dar uma olhada no que ele pode fazer por nós acessando nosso menu de ação. E então, se você começar a ler e escrever, verá algumas opções Você pode pedir à Figma que reescreva algo, encurte algo ou traduza para Agora, agora, eu quero realmente reescrever esse nome de destino para um nome melhor Então, por que não pedimos que ele crie um nome de viagem que seja empolgante e abreviado para viagem, digamos, em Londres, Reino Unido. Vamos ver o que acontece. Basta pressionar Enter e, em seguida, OK, esse é outro. E se você não gostar, pode pedir que ele faça alterações. Você pode pedir que seja mais curto ou mais casual. Vamos pedir algo mais casual. Ok, isso é um pouco longo demais. Faça alterações mais curtas. Eu não gosto muito disso. Quero reescrevê-lo com uma atividade específica que é popular em Londres e mantê-lo curto. Vamos ver. Ok, isso é interessante. Pode fazer um mais curto. Eu vou dizer para seguir em frente. E veja o que isso faz. Ok, podemos continuar com isso. Você pode continuar pedindo que faça alterações e, é claro, também pode intervir e fazer suas próprias alterações. Acho que essa é boa e podemos solicitá-la e reescrever o texto descritivo e substituí-la por uma descrição de como seria uma viagem de uma semana em Londres, Reino Unido, para um viajante que viagem de uma semana em Londres, Reino Unido deseja reservar essa Vamos ver o que acontece aqui. Incrível. Acho que isso é muito bom por enquanto, muito melhor do que o texto original. E em vez do tamanho do rodapé, vamos fazer com que seja do tamanho do corpo E eu vou trazer a altura daqui para aqui. Então, na verdade, nosso botão de visualização de disponibilidade coincide com a parte inferior aqui e eu vou somar esses dois de forma ordenada e esses dois juntos também Muito melhor. Vamos voltar na próxima palestra para reunir os ícones do que está incluído em termos de comodidades e, em seguida, continuar até nossa seção de acomodações 51. Lista de recursos: Então, para a próxima parte da página de detalhes do destino, queremos adicionar alguns ícones aqui que mostrem as comodidades que estão incluídas como parte do destino ou da viagem que eles estão fazendo. E dando uma olhada aqui, podemos adicionar isso logo abaixo de nossas imagens aqui. A propósito, eu também adicionei algumas imagens do plug-in Unsplash Se você não fez isso com as diferentes imagens aqui embaixo, você também pode reservar um segundo para fazer isso. Agora, para o título desta seção, podemos chamá-lo de O que está incluído e depois ter alguns ícones e talvez texto para explicar o que eles significam. Então, vou adicionar uma nova camada de texto aqui, o que está incluído. E para o tipo que eu quero fazer, estamos em um seis é bom. Vou trazer isso aqui, espaçando-o a 48 pixels do topo aqui. E agora, antes colocar isso em um quadro de layout externo com o resto do conteúdo aqui, vou primeiro colocar em negrito este aqui, então pressiono o Comando B aqui. E então, para ícones, vou usar os ícones de fósforo do plugue aqui para arrastar alguns ícones Então, algumas coisas sobre as quais podemos escrever são e eu vou adicionar apenas alguns ícones. Sinta-se à vontade para acompanhar, se quiser. Vou adicionar um ícone de natação e, no momento, ele está passando pela minha moldura. Não consigo ver totalmente, mas vou chegar lá em apenas um segundo. Vamos fazer uma toalha aqui. Eu sei Então, os ícones estão aqui. Vou arrastá-lo logo abaixo para que possamos vê-lo. Vamos fazer um café para que possamos ver se há café incluído nesta viagem ou na máquina de café. Talvez façamos um no café da manhã ou, na verdade, não tenhamos um, então talvez garfo Ok, esse funciona. Se podemos dizer que o café da manhã está incluído ou não. Vamos tocar uma campainha. Só para mostrar se há conciage, talvez conciage 24 horas por dia, 7 dias por semana ou algo parecido Se buscarmos ajuda, temos esta aqui, então podemos dizer que temos suporte 24 horas por dia, 7 dias por semana ou algo parecido incluído Vamos ver. O que mais podemos colocar aqui? Provavelmente quero mencionar o WiFi. Essa é uma questão importante. Acho que são bons para começar por enquanto. Então, para esses ícones, são colados como SVG, que significa que podemos redimensioná-los e reformatá-los facilmente e eles não perderão sua qualidade, o que Vou simplesmente selecionar todos eles juntos desta forma e pressionar Autoaout ou Shift A. É muito mais simples. E então eu vou fazer exatamente a mesma coisa com esse título “O que está incluído”. Os ícones podem ser um pouco maiores. Então, o que podemos fazer é clicar nesse Autoeuframe que acabamos de criar pressionar Enter para selecionar todos os componentes secundários dele E eu vou pressionar K para acessar nossa ferramenta de habilidades, e temos aqui a largura e altura que podemos definir para esses ícones. Então, vou tentar 32 por 32. Isso é um pouco melhor. Mas, em vez disso, queremos ter certeza de que isso esteja no conteúdo do abraço A mesma coisa com este. Os ícones estão um pouco escuros no momento. Vou clicar em Escape para sair dessa ferramenta de escala. Adicione um pouco mais de espaçamento aqui, talvez 16 pixels. Para isso, o que está incluído, talvez possamos fazer um 900 secundário. Para os ícones, vou fazer uma cor cinza personalizada cor cinza em algum lugar aqui onde não seja muito ousada nem muito forte. Eu gosto desse aqui. Acho que seria bom se você adicionasse alguns títulos ao lado desses ícones para que eles saibam o que isso significa. Então, vou escrever um e puxar e depois fazer talvez um tamanho de rodapé ou até mesmo esse tamanho de corpo funcione Agora, vou incluí-lo nesse layout automático e, em seguida, vou fazer o layout automático desses dois juntos, aproximá-los, talvez com oito pixels de distância. Vou repetir isso para todos os ícones. Então, sinta-se à vontade para fazer isso também. Máquina de café, café da manhã. Layout automático desses dois, oito pixels, caneta Seage Whoops Eu não sei soletrar. Lá vamos nós. Oito pixels. Suporte 24 horas por dia, 7 dias por semana. Oito pixels, e então escreveremos Wi-Fi ou faremos em alta velocidade. Wi Fi, traga isso aqui. Vou colocar esses dois e oito pixels. Agora, é um pouco longo demais . Eu não quero que demore tanto. Acho que podemos diminuí-lo e talvez nos alinhar ou alinhá-lo com essa largura aqui Então, por que não desenhamos a largura aqui e depois fazemos um embrulho agora para esta criança, vamos fazer um embrulho e encher o recipiente. Mas esse aqui, nós não queremos realmente fazer rap. Queremos que este seja vertical. Lá vamos nós. É isso que estamos procurando. Agora, o espaçamento entre esses pode ser um pouco menor, talvez 24 pixels, 24 pixels Isso pode ser bom o suficiente. Você pode até mesmo fazer isso com 16 pixels aqui. Agora, para o texto, podemos fazer uma cor cinza um pouco mais escura do que os ícones. Deixe-me vir aqui. Lá vamos nós. Então, agora temos uma seção que já foi incluída. Essa é uma forma de apresentá-lo. Você também pode apresentá-lo em dois layouts automáticos. Então, essa é uma maneira de fazer isso. A outra seria adicionar um layout automático para cada três e depois fazer um horizontal aqui. E uma vertical para cada criança e faça assim. Essa é outra maneira de fazer isso. Dessa forma, se você tiver mais ícones , eles serão adicionados ao lado aqui, e podemos simplesmente criar conteúdos interessantes aqui. Isso pode ser um pouco mais organizado para apresentá-lo desta forma. E aqui podemos adicionar um pouco mais de espaçamento. Então eu acho que isso parece bom. Podemos voltar na próxima seção para começar a trabalhar em nossa seção de acomodações, que é a parte mais interessante desta página 52. Campos de acomodação: A seção é nossa acomodação, onde mostraremos os diferentes quartos que o usuário pode reservar. Junto com a imagem, o tipo de quarto, o preço por noite, e serão necessários três campos aqui. Os campos serão as datas, seja, de e dois, e depois o número de viajantes. Então, podemos voltar aqui. Vou apenas pegar emprestado o título que temos aqui e usar ls para duplicá-lo. E outra coisa que vou fazer é usar um layout automático entre esses dois. Lá vamos nós. E eu vou mudar este para alojamento, trazê-lo para cá. E, na verdade, vou recortá-lo usando o Command X e colá-lo. Lá vamos nós. Agora queremos ter esses campos para que possamos acessar nossos ativos, ativos locais. E, na verdade, podemos arrastar o campo de entrada que temos aqui. Para o ícone, vamos fazer o do calendário já que é um campo de data, e podemos duplicá-lo e eu vou segurar a tecla Shift, selecionar todos esses três, fazer o layout automático e Vou mudar esta para de e colocar algumas datas aqui, para mudar esta, e talvez possamos torná-las um pouco menores aqui. Vou colocar esses dois juntos automaticamente também, aproximá-los, 16 pixels E então queremos mais um campo, que é o número de viajantes. Agora, no momento, não temos um campo suspenso, mas o campo suspenso normalmente é usado para permitir que os usuários escolham entre É semelhante a um campo de entrada, mas tem uma pequena seta na lateral onde os usuários podem entender que esse é um campo suspenso. Na verdade, também poderíamos usar o mesmo campo de entrada como um campo suspenso Você não precisa necessariamente criar um componente diferente. E se eu gosto de fazer isso, podemos simplesmente adicionar uma nova propriedade booleana, chamada de Dropdown Então, por padrão, vamos transformá-lo em falso. E agora basta acessar o ícone de fósforo, pesquisar a seta Vamos tentar e ver o que aparece Esse é o que estamos procurando. Agora, está aqui. É uma cenoura. É chamado de ícone da cenoura. Podemos simplesmente colá-lo aqui. E mude a cor para talvez 300 primários. Vou pressionar K e redimensionar isso para talvez 16 pixels. Eu acho que é melhor. E então você acha que vamos vincular a visibilidade disso. Aqui, dois que são suspensos. Agora, se formos até aqui, podemos criar outro campo, chamá-lo de viajantes com dois s. E vamos mudar o campo dois como menu suspenso E podemos esconder o ícone esquerdo assim. E como espaço reservado, colocaremos apenas um adulto Agora, olhando para ela, a flecha está um pouco invisível. Então, talvez possamos voltar aqui e usar o painel Layers, basta selecionar aquele, selecionar o vetor e talvez torná-lo primário 500. Um pouco melhor. E eu vou clicar em K. Na verdade, coloque-o de volta em 24 pixels e mude-o para 20 pixels Vamos ver se isso parece melhor, é um pouco melhor, com certeza. Incrível. Agora, o que eu quero fazer é essa caixa preencha o contêiner, e queremos escolher automático para o espaçamento entre os itens, porque eu quero adicionar algum espaçamento aqui entre a acomodação e esses Então, vamos deixar esses campos aqui. E aqui, em vez de um alinhamento superior, podemos fazer um alinhamento central ou um alinhamento inferior aqui, que eu acho que parece um pouco Então, aqui, teremos apenas os tipos de quartos. Para os tipos de quarto, voltaremos à próxima seção para montar um bom componente de cartão para ele 53. Cartões de tipo de quarto: Na verdade, nossos cartões de tipo de quarto não estão muito distantes dos cartões que temos aqui. Na verdade, podemos reutilizar algumas partes dele, e tudo o que precisamos fazer é alterar o nome aqui para tipo de quarto e o preço por noite aqui, em vez do preço total que temos aqui Portanto, temos duas opções. Agora podemos acessar a instância aqui e criar outra variante disso ou podemos realmente criar um componente diferente. Quero criar um componente diferente apenas para facilitar um pouco , caso precisemos fazer alterações posteriormente. Eu o copiei e, no momento, é uma instância, então queremos desanexá-lo para que possamos criar um novo componente usando o Command Alt K, e vamos chamá-lo de Room card Incrível. Então, algumas diferenças. Não temos mais favoritos ou marcadores para este Só queremos a foto do quarto aqui, e essa vai dizer tipo de quarto. E esse preço será de 100 dólares por noite, digamos, apenas por uma amostra E nós realmente não precisamos desses. Podemos deixar a classificação para que você possa ver as avaliações por quarto. Mas acho que podemos deixar essa e fazer essas. Vou copiar um, colar aqui e, em seguida, segurar a tecla Shift, selecionar esses dois e fazer o layout automático deles com 24 pixels com talvez 32 pixels de espaçamento Vamos duplicar este para fazer outro layout automático, e este será um envoltório com recipiente de enchimento para que , se você tiver vários quartos diferentes, ele passe para a próxima linha Começando a ficar bem. Agora, eu não sou um grande fã da aparência real aqui, então talvez possamos fazer um layout vertical aqui. Acho que é um pouco melhor. E então o espaçamento entre esses pode ser de 16 pixels. Acho que parece um pouco melhor. Agora, para esses tipos de quarto, vou selecionar um deles aqui e usar make image. Um quarto de hotel com uma cama. Vamos ver o que isso faz. Ok, esses são muito bons. Vou pedir que você faça mudanças e faça uma cama pequena. Então, podemos ter uma cama menor nesta. Ok, esse é melhor. Vamos fazer Twin Room. Altere o preço para talvez $80 por noite para este. E então este poderia ser o quarto king, na verdade, este, vamos fazer o quarto queen, e este será o quarto king. Este vai sair por 100 dólares por noite, e este talvez por 120 Vou usar a IA para criar uma imagem para este. Quarto de hotel com, vamos fazer duas camas queen size para este. Isso é bom. E faremos isso e criaremos uma imagem. Agora, se você não pode usar os recursos de IA ou não quiser usar os recursos de IA, pode pesquisar totalmente essas imagens no Unsplash ou em outro lugar Só estou fazendo isso para que possamos aproveitar esse recurso e também ter uma boa imagem aqui. E faremos um quarto de hotel de luxo com cama dobrável, só para termos um mais bonito por $120 por noite Parece um pouco diferente. Eu gosto que a orientação da aposta seja assim. Eu gosto desse. Legal. Agora, uma coisa que podemos acrescentar a essas cartas é que talvez, primeiro lugar, vamos alterar aqui as classificações de cada uma. E podemos adicionar o número de avaliações que cada quarto tem. Então esse tem 123, e talvez esse seja muito bom. Então é 4,9 e 125 pessoas ficaram aqui e avaliaram. Lá vamos nós. A outra coisa que podemos acrescentar é o número de pessoas que cabem nesta sala. Então, se você for para a instância local, podemos adicionar outro texto aqui e simplesmente adicioná-lo aqui. E escrever dorme um, digamos, e queremos criar conteúdo Vamos ver como isso fica aqui. Ok, isso parece muito melhor. Dorme um Talvez este acomode dois, e este dorme três ou algo parecido Quase esqueci. Para esses cartões, na verdade, também queremos um botão de livro. Agora, para esses botões, quero um novo botão diferente daquele que criamos aqui. Porque eu quero que fique alinhado à esquerda e, no lado direito, podemos ter um texto para mostrar o preço total dessa acomodação e quanto custará Então, vou até a instância da placa local e, na verdade, criarei um novo botão aqui. Agora, é claro, também podemos criar outra variante de nossos botões . Essa é outra maneira de fazer isso. Então, por que não fazemos isso estendendo isso aqui, arrastando dois componentes do botão para fora e apenas esticando-os um pouco E vamos criar uma nova propriedade para o botão, e vamos chamar essa variante e chamar a propriedade wide por padrão, vamos defini-la como não. Então, esses serão nossos botões largos, então vamos selecioná-los e mudar isso para sim, e esses já são não. Agora, se você adicionar um texto aqui, digamos $0. No momento, tudo está sendo pressionado para o meio do botão, o que não é o que queremos. Queremos que tudo seja empurrado até as pontas do botão. E então temos que mudar a diferença aqui de dez para automática. E a lacuna nas laterais também é um pouco demais, então talvez possamos fazer 16 pixels. Vamos fazer exatamente a mesma coisa aqui. Na verdade, tudo o que você precisa fazer aqui é copiar o texto aqui, alterá-lo e alterá-lo para o texto 500. Lá vamos nós. Altere o espaço para automático e o espaçamento para 60. Ok, isso parece bom. Agora temos um botão largo, mas os tipos estão confusos aqui Então, queremos ter certeza de que o tipo para este também ainda é primário e este também é secundário. Lá vamos nós. Então, agora temos um botão primário que não é largo, um botão secundário que não é largo, um primário que é largo e um secundário que é branco. Então, queremos usar um dos brancos em nosso cartão aqui. Então, vamos arrastar ou copiar este aqui, o principal aqui. Vou apenas arrastar essa seção de componentes um pouco mais para cima. Você pode ver o botão. E então vou segurar todo o botão, clique duas vezes aqui na lateral ou na borda desse botão para alterá-lo para preenchido. É o mesmo que ir aqui e clicar em preencher. Isso é apenas um atalho para fazer isso. Então, mostraremos o botão aqui, e o texto desse botão será sala de reserva ou talvez este livro esta sala. E então o preço total à direita. Digamos que já tenhamos datas selecionadas em vez de $0, isso pode mostrar o preço total Então, se eles tiverem duas noites, digamos que serão 160, algo parecido. E vamos fazer preços diferentes para esses: um é 200 e este será 240. Então, agora temos os botões para que cada quarto seja reservado. Como alternativa, você pode alterar o tipo de botão para secundário. Acho que os dois realmente funcionam bem aqui. Então aí está, agora temos um botão para cada quarto ser reservado. Isso parece bom. Incrível. Então, com isso, temos nossa seção de acomodações pronta e, em seguida, temos mais duas seções, alguns destinos semelhantes, o que é bem rápido. Então, temos alguns cartões de avaliação que vamos criar na próxima palestra. 54. Cartões de classificação: Estou ficando sem espaço aqui na vertical em nossa página de descoberta de destinos Então, vou expandi-lo um pouco verticalmente. Portanto, temos espaço suficiente para nossa seção de classificação e nossa seção de destinos semelhantes. Portanto, em nossa seção de classificação, temos em nossas classificações de wireframes aqui, o número total de avaliações e estrelas, e então temos alguns cartões de classificação que o usuário pode percorrer, e podemos rolar horizontalmente aqui ou também setas para ir para a esquerda e para a Então, para fazer isso, vamos voltar aqui, copiar o texto aqui, usar Alt para duplicá-lo E vou trazê-lo aqui para o contêiner principal, mas trazê-lo aqui usando a seta para baixo, e parece que eu cometi um erro de digitação lá, então resolvi isso E essa vai ser a audiência. E queremos ter as estrelas e o número de avaliações. Então, talvez possamos pegar isso emprestado e trazê-lo aqui. E queremos colocar esses dois juntos automaticamente. Experimente 16 pixels. E como esse é para todo o destino, talvez possamos aumentar um pouco o ícone dois, 24 ou até mesmo escrever 24 por 24. E aumente um pouco o número. Digamos, 534. E logo abaixo, teremos alguns cartões de avaliação, e nesses cartões de avaliação, queremos ter uma foto da pessoa, algum texto para mostrar sua avaliação e talvez seu primeiro nome ou algo parecido. Então, vou criar um cartão aqui, adicionar um texto aqui. Esta é minha avaliação. Obviamente, vamos mudar isso e, por enquanto, vou fazer o layout automático pressionando Shift A. E podemos simplesmente aplicar um preenchimento branco aqui, alterar o raio do canto para 16 e, em seguida, desenhar um oval pressionando O no meu teclado e desenhar uma foto de perfil talvez 48 pixels por 48 e simplesmente recortá-la aqui. Lá vamos nós. Talvez eles possam ter uma largura fixa aqui 440. Agora, vou ativar minha grade de layout aqui para a página e usá-la para obter uma boa largura fixa aqui. Lá vamos nós. Então, podemos ter três cruzes como essa, e ficará bem. Ainda não terminamos, então vamos continuar trabalhando apenas em uma: esconder nossa grade aqui. E queremos fazer uma linha à esquerda e talvez 16 pixels da parte superior inferior. Então, essa será a avaliação do usuário e, logo abaixo, pressionaremos o Comando D para criar outro texto. A para colocar essas duas camadas de texto e fazer logo abaixo uma da outra. Talvez com oito pixels e esse seja o nome do usuário, digamos, Maria. Mas para este, vamos fazer um tamanho de rodapé. E podemos adicionar um bom traço aqui também, usando o 100 primário. E, claro, podemos transformar isso em um componente, pressionar o comando K e simplesmente renomear o cartão de classificação, e vamos trazer isso para nossa biblioteca de componentes aqui Copie um deles, cole-os aqui, agrupe-os ou faça o layout automático deles. E acho que para o espaçamento, podemos mudar a lacuna aqui para 32 no interior, duplicá-las, colocar automaticamente as três cartas e embrulhar e encher E vamos mudar o espaçamento entre eles para 24 pixels. Isso parece bom. Vou apenas selecionar Esta é minha avaliação e usar nossa ferramenta de redação de IA para dizer que escrevo uma avaliação para usuários que viajaram para Londres e gostaram. Vamos ver o que acontece . Ok, vamos lá. Agora temos um problema aqui com o texto em que ele está sendo derramado para fora do contêiner Vamos até aqui e ver o que está acontecendo. Então, essa caixa aqui está abraçando o conteúdo, mas o conteúdo pode ficar infinitamente longo e continuará abraçando-o na mesma direção Então, em vez de fazer isso, o que queremos é o recipiente de enchimento, e podemos fazer isso alterando isso para recipiente de enchimento. Então, não importa o que aconteça, mas o texto aqui ainda está configurado para abranger o conteúdo Então, também queremos que o texto seja preenchido com um contêiner. Então, agora o texto terá uma largura fixa da largura do contêiner, então ele continuará sendo derramado até o próximo E como é um componente, nós o consertamos em um só lugar. Não precisamos consertá-lo aqui. De qualquer forma, já foi corrigido. E outra coisa é que queremos que a foto do perfil esteja talvez no topo e talvez o nome do usuário também esteja lá. Acho que isso faria mais sentido. Então, por que não trocamos esses dois e usamos um alinhamento superior esquerdo como este Vou simplesmente mudar isso para aquilo. Vamos ver se isso parece um pouco melhor. Mas o que vou fazer é esse texto daqui e colocá-lo automaticamente em um layout com uma imagem aqui para que possamos centralizá-lo E então, para todo o contêiner, faremos isso. Lá vamos nós. Isso parece muito melhor. Dessa forma, podemos até adicionar um texto do outro lado. Fazendo o layout automático com esses dois, fazendo a horizontal preenchendo o contêiner e alterando a lacuna para automática. E faça a linha central e altere isso para um texto para o timestamp, então pode ser há quatro semanas Então, podemos até ter um timestamp e podemos reduzir o preenchimento deste para um texto 300 e este pode ser um texto 500 e o mesmo que este aqui, texto Muito melhor. Agora podemos encurtá-los um pouco para dois aqui para que tenham a mesma altura Lá vamos nós. Isso está começando a ficar bom. Podemos simplesmente mudar o nome aqui Max, Adam, e depois dar algumas fotos para eles usando um plugin que eu realmente gosto chamado Avatar. E você pode escolher qualquer um deles. Há muitos. Vamos apenas escolher este aqui. Avatar do perfil do usuário. Opa. Você pode usar qualquer pessoa que faça esse gerador de Avatar aqui. Você pode simplesmente clicar em Colocar foto continuamente e ele colocará a foto de uma pessoa aleatória lá. É bom para. Agora, alguns deles vêm com um limite. Então eu acabei de atingir o limite dessa. Sinta-se à vontade para alternar entre diferentes plug-ins para ver qual deles funciona melhor. Lá vamos nós. Isso já parece muito melhor. E pensando bem, não acho uma boa ideia fazer uma rolagem horizontal aqui porque isso não é realmente típico. Então, o que podemos fazer é fazer duas coisas para melhorar isso aqui. Primeiro de tudo, para esses dois, vamos fazer um layout horizontal como esse. E então por que não adicionamos um botão secundário aqui? Aperte um botão aqui. Opa. Queremos colocá-lo. Lá entramos aqui, e talvez devêssemos organizá-los e fazer menos espaçamento aqui e alterá-lo para secundário porque não é um botão importante, na verdade, é um botão secundário e depois mostrar ver todas as avaliações ou algo parecido O usuário pode clicar em ver todas as avaliações e ir para outra página para ler todas as outras avaliações. Então, isso é tudo para os cartões de classificação. Vamos voltar na próxima palestra para montar a última parte desta página, a página de destino similar 55. Página de detalhes do destino: A última seção da nossa página de detalhes do destino é uma seção de destino semelhante. Então, vamos duplicar esse texto mais uma vez no contêiner principal aqui Destinos semelhantes. Você também pode chamá-lo de outros destinos populares que também funcionam. Você não precisa necessariamente nomeá-lo da mesma forma que eu o estou chamando E então, simplesmente, vamos pegar alguns desses cartões aqui. Talvez esses três aqui, usem o Comando C e depois cole-os aqui. Agora, agora, eles estão dispostos verticalmente porque estão nesse contêiner principal Então, queremos fazer um layout automático entre eles usando Shift A e, em seguida, fazer um layout horizontal. Lá vamos nós. Então, esses são alguns outros destinos populares, mas para o espaçamento entre eles, você também deve fazer 32 Está parecendo muito bom. E acho que esta página está praticamente concluída. Vamos fazer uma revisão de cima para baixo e garantir que tudo esteja bem e que não haja nada que queiramos mudar. Agora, há algumas coisas aqui que vou fazer para aperfeiçoar esta página. A primeira aqui é: acho que podemos destacar o título aqui. Parece melhor. Para este botão aqui, parece estranho sem nenhum texto semelhante a este popular Então, por que não adicionamos um texto para este aqui. Vamos salvar ou marcar como favoritos. Destino e , obviamente, não tão grande. Vamos fazer trabalhos corporais ou até mesmo de rodapé corporal. E vamos cortar isso e trazer isso para cá. E eu coloco esses dois e talvez oito pixels é um bom espaçamento entre eles. E podemos mover esse destino, basta marcar o destino Altere isso para talvez um 900 primário ou um 800 primário. Ok, isso parece um pouco melhor, então está mais claro o que é. E o espaçamento entre tudo e aqui geralmente é um pouco demais, talvez 32 pixels façam um bom trabalho Então, isso parece bom. Disponibilidade. Vamos levá-los diretamente para cá. há um pouco de espaço vazio aqui, entanto, há um pouco de espaço vazio aqui, e você pode fazer duas opções. Uma é que você pode simplesmente alterar isso no layout do que fizemos aqui para ser horizontal. Então, isso realmente funciona da mesma forma. Então, talvez eu faça isso em vez disso, para que não haja uma lacuna estranha A acomodação parece boa. Temos nossos de dois viajantes, então eles os escolhem. A única coisa que pode estar faltando é apenas um botão para eles atualizarem os resultados Se eles os alterarem, no momento, não há como atualizar os resultados Então, queremos fazer isso, trazer o alinhamento aqui. Então, está na parte inferior e, em seguida, encontre os quartos. Lá vamos nós. É um pouco melhor. Isso parece bom, as avaliações parecem boas. As avaliações, por qualquer motivo, este texto é um pouco grande demais, então vamos fazer body em vez disso. Acho que um corpo grande é demais. Isso parece melhor. E com isso, podemos realmente melhorar o espaçamento em vez de 16 pixels Vamos fazer 24 pixels da parte superior e inferior. Ok, na verdade, isso parece bom, e outros destinos populares parecem muito bons. A única outra coisa que eu poderia fazer é aumentar o espaçamento entre tudo em vez de 48 pixels Talvez possamos fazer algo como 64. E acho que há mais espaço para respirar entre tudo e tudo parece muito mais polido dessa forma Legal. Vou apenas tornar esta página um pouco menor. Existe nossa página de descoberta de destinos, ou na verdade, ela deveria ser chamada de Detalhe do destino. Lá vamos nós. Essa é a nossa página de detalhes. Vamos voltar à execução para trabalhar em nossa página de reservas Então essa é a página que aparecerá quando eles realmente clicarem em Reservar esta sala. Ele vai para esta página onde eles inserirão suas informações e confirmarão a reserva. 56. Tela de reserva: É hora de trabalhar em nossa tela de reservas aqui, e esta página é bem simples Então, basicamente, o usuário clica no livro em um desses quartos Ele vai para a página de confirmação da reserva onde eles preenchem algumas informações, que geralmente você vê em uma plataforma de reserva, como nome e sobrenome. E talvez muitas dessas informações possam até ser pré-preenchidas se eles já estiverem logados e já tiverem adicionado o formulário de informações Mas, como não temos essas páginas para coletar essas informações, presumiremos que o usuário precise preenchê-las de qualquer maneira, caso queira usar um e-mail ou número de telefone diferente para suas informações pessoais para esta reserva E então temos algumas informações de pagamento e campos aqui para adicionar. Então, muito disso é baseado em campo. E então queremos adicionar alguns cartões aqui para alguns complementos, que podem ser coisas como adicionar um aluguel de carro à sua viagem ou adicionar seguro ou adicionar coisas diferentes, etc., etc E, em seguida, um botão para concluir a reserva. E no lado direito do painel aqui, queremos um cartão para mostrar a imagem do quarto que eles estão reservando, talvez junto com a cidade ou a viagem ou algo parecido. Então, talvez o nome da viagem, junto com o quarto que eles estão reservando. Eles estão reservando um quarto com as datas aqui, o número de pessoas que estão hospedadas e , em seguida, o preço total. Agora, esse pode ser um bom lugar para também colocar nosso botão de reserva. Portanto, não precisa necessariamente ir até o final aqui, e poderíamos, na verdade, fazer com que os dois lugares o tivessem, e talvez possamos consertar isso. Então, quando estamos realmente construindo o protótipo, podemos fixar esse elemento na tela Tudo bem, então vamos começar por aqui. Queremos começar de cima para baixo. Vamos começar adicionando nosso botão Voltar e título do NavBR aqui Então, para facilitar as coisas, vou simplesmente duplicar a página de detalhes do destino usando o Comando D. Basta mover um pouco até aqui e renomear nossa tela para página de reserva E eu vou me livrar completamente do conteúdo por enquanto. E em vez de voltar para todos os destinos, podemos voltar para a viagem. E logo abaixo, podemos ter um texto semelhante aqui. Vou usar Alt para arrastar isso aqui, ou melhor, uma cópia aqui. Certifique-se de que o espaçamento seja o mesmo de todo o resto e altere-o para confirmar sua reserva ou sua viagem e apenas certifique-se de que tudo esteja devidamente espaçado Lá vamos nós. Mova isso aqui a 24 pixels daqui. E logo abaixo, queremos ter alguns campos e também queremos um título aqui para essa seção. Então, para o título, acho que podemos usar primeiro, vamos colocar esta aqui, e depois podemos usar uma fonte menor aqui, talvez de quatro anos, cinco anos. Acho que a idade de cinco anos é boa e vamos mudar isso para informações pessoais. Como agora, podemos deixar isso em negrito aqui. E então esses, eu quero fazer o layout automático usando Shift A com 48 pixels com o espaçamento E então, a partir de nossos ativos, vamos arrastar algumas informações aqui. Vamos movê-lo para lá. E esses eu quero criar um layout automático com talvez 24 pixels. Para esse campo, não precisamos realmente de um ícone. Vamos apenas escrever o primeiro nome, apenas um exemplo de primeiro nome aqui, e depois vamos fazer o sobrenome. Normalmente, esses campos geralmente estão próximos um do outro, então podemos até mesmo fazer um layout automático que seja horizontal aqui, talvez com um espaçamento de 16 pixels Está parecendo bom. Vamos mudar este para conteúdo quente para a largura. Isso parece bom e precisamos de um campo de e-mail e número de telefone. Esses, queremos colocá-los aqui no quadro principal. Mude este para número de telefone mais um, um, dois, três, um, dois, três, quatro, ou um, dois, três, quatro, assim. Apenas um exemplo de texto. E então podemos ter um endereço de e-mail ou apenas e-mails no Domínio, algo assim. Talvez possamos até ter esses dois próximos um do outro também. Isso é bom. Então, queremos algumas informações de pagamento. Então, para essa, vou duplicar esta seção e alterá-la para detalhes de pagamento, algo parecido Altere este para o número do cartão de crédito, supondo que só tenhamos cartão de crédito como opção aqui, e então usaremos o cartão de crédito e precisaremos da data de validade. Então, não façamos isso como data de validade, escreva algo assim Podemos criar um conteúdo único ou talvez um pouco maior, pegar 20 pixels, duplicá-lo e colocá-lo automaticamente ao lado dele E esse será CVV, que é um código que está na parte de trás ou algo assim E acho que geralmente também temos um nome no cartão. Então, talvez queiramos fazer cartão de crédito. Mais antigo que o número, podemos simplesmente colocar um número aqui como este. Você quer que o texto do espaço reservado tenha uma aparência semelhante ao que eles devem inserir para que eles tenham uma ideia do que esperar E às vezes você vê o código postal ou o CEP dependendo de onde você está, então podemos fazer códigos postais e deixar isso aqui também. Isso pode ser necessário para alguns cartões de crédito, e vamos apenas expandi-los, mas eles não estão sendo expandidos, então queremos selecioná-los e encher o recipiente. Portanto, temos informações de pagamento. E então, para esses, acho que são muito grandes por algum motivo. Provavelmente, uma pessoa não tem um nome tão longo, então podemos torná-lo um pouco menor, como 480 no total, e também fazer esses recipientes de enchimento de 480 para eles. E eu vou fazer exatamente a mesma coisa com eles. A mesma coisa aqui. E estou apenas usando uma tecla Alt e um duplo clique para fazer com que todos encham o recipiente. Portanto, boa parte desta página já está pronta Vamos voltar a trabalhar em nossos complementos e depois trabalharemos na placa lateral aqui. 57. Design de cartão adicional: Para a próxima seção, temos uma seção adicional com alguns cartões de coisas que as pessoas podem adicionar à viagem. Então, vou copiar um título aqui para ele e chamá-lo complemento perfeito para sua viagem, algo assim. E então vamos ver se podemos reutilizar qualquer um dos cartões que temos O cartão de coleção é muito parecido com o que queremos adicionar. Mas, novamente, não é bem o que queremos. Então, talvez possamos criar outro cartão específico para adicionar, mas usar um design semelhante ao cartão de coleções. Vou duplicar isso usando Alt, desanexar o instante e, em seguida, criar um novo componente usando o Command Alt K e renomear este para adicionar Então, esse será o nome do complemento. Já temos uma foto. Isso é ótimo. Queremos um botão para adicionar esse complemento, então talvez copiemos esse botão aqui. Isso aumenta sua viagem e talvez o preço do item. Então, vamos deixar $0 por enquanto. Eu acho que isso é bom. Vamos trazê-lo aqui. Então, agora, a única coisa é que eu realmente não gosto de como esse botão é muito primário aqui. Não queremos que essa seja uma ação primária ou cause confusão sobre quais botões pressionar, então estou apenas mudando isso para secundário aqui. Então, teremos três deles. Site por site. E essas, não queremos que sejam tão grandes, então vamos fazer essas larguras fixas. Esses cartões são um pouco grandes demais. Então, por que não tornamos essa imagem um pouco menor? Mantendo Shift e juntos, e talvez fazendo a imagem como 270 ou algo parecido. E então, para o nome do complemento, vamos apenas fazer um corpo ao mesmo tempo, abraçar o conteúdo aqui E a mesma coisa aqui. Vamos apenas escrever conteúdos de abraços Não queremos que seja muito proeminente ou muito grande aqui. E então vamos substituí-los por complementos reais. Vamos apenas escrever sobre aluguel de carros e, para este, escreveremos atividades divertidas. E sinta-se à vontade para escrever o que quiser. Seguro completo ou faremos um seguro de viagem. E então, para as imagens, vou usar, na verdade o Unsplash e não a IA para esta E vamos alugar um carro. Eu não sei o que vai acontecer. Vamos ver. Ok, vamos usar apenas alguns, vamos usar apenas um desses. Claro, vamos com esse. Atividades divertidas. Vamos apenas fazer. Qual é uma atividade divertida que você faz em Londres? O London Eye, não tenho certeza. Eu nunca fui, então vamos inserir o London Eye aqui a partir de uma dessas fotos. E então, na verdade, essa parece um pouco deprimente. Nós faremos esse. E então o seguro, talvez vamos apenas escrever um seguro, ver o que surge. Eu só vou escolher uma boa imagem aqui. Você não precisa necessariamente usar este. É apenas um bom que eu encontrei por enquanto. Então, agora temos esses complementos que parecem bons. Você pode adicioná-los à sua viagem. Muito legal. E então, com isso resolvido, podemos voltar na próxima palestra para colocar este cartão ao lado aqui Antes disso, vou colocar uma reserva completa real aqui. Basta adicionar o botão aqui e torná-lo máximo 480 e confirmar a reserva, e esse será o custo total da viagem ou algo parecido Basta colocar um número aleatório aqui, 2240 como este. Seria bom se também tivéssemos a moeda, caso você esteja pagando em uma moeda diferente. Então, agora queremos aquela carta ao lado. Vamos voltar para a próxima seção e fazer isso juntos. 58. Página de confirmação: Mas, principalmente nesta página, queremos ter um pequeno cartão de informações ao lado que mostre talvez o quarto, talvez a cidade em que você está fazendo a reserva, todos os pequenos detalhes que você gostaria de saber antes de confirmar sua reserva. Quando você está em qualquer outra página, como Airbnb ou Expedia, ou onde quer que reserve suas viagens, você tem algo semelhante em ver todas as informações antes você tem algo semelhante em ver todas as informações antes de pressionar o botão OK Como você está fazendo uma compra grande, você quer ter certeza de que o usuário tenha a tranquilidade ter selecionado as datas certas e selecionado o número correto de viajantes, e o preço é visível e não oculto e assim por diante. Portanto, isso é muito importante criar uma ótima experiência do usuário. Então, vou criar esse cartão de cima para baixo. Queremos usar um cartão que só esteja realmente visível nele, então eu realmente não preciso necessariamente torná-lo um componente. Na verdade, vou pegar emprestado um desses , talvez o cartão do quarto, e simplesmente retirá-lo, mas desanexar a instância e criar uma completamente única Às vezes você quer um de folga. Você não precisa necessariamente criar um componente, como neste caso. Então esse é o caso aqui, vamos apenas garantir que seja o mesmo espaçamento lateral Então aqui, digamos que o usuário tenha escolhido o quarto queen. Então, eu estou usando o Alt Command C para copiar as propriedades desse retângulo aqui, que agora é essa imagem E então eu vou segurar este usando o Command para selecioná-lo e depois fazer Command Alt V. E isso é só colar as propriedades, que neste caso, é apenas a imagem aqui. Então, rapidamente temos essa imagem ali. E então o que seria bom seria uma foto também da cidade que eles estão reservando. Então, talvez também possamos pegar essa foto aqui. Também estou usando o Out Command C. Vou usar o Command C para copiar esse quadro aqui. Mas o que eu estou pensando é um círculo bonito, legal, tipo, ou algo parecido com isso para mostrar que eles estão reservando em Londres ou algo parecido. Então, o que eu quero fazer é, para essa moldura, definir a primeira de todas, torná-la bem menor e também torná-la um retângulo ou, desculpe, quadrado Talvez seja, vamos fazer 64 por 64. Você também pode usar o comando e as setas para redimensionar suas coisas em apenas um pixel por vez Assim, você pode criar tamanhos exatos como esse. E então talvez possamos fazer com que ele circule totalmente apenas definindo o raio do canto aqui como muito alto E para esse traço, queremos colocá-lo do lado de fora e talvez torná-lo com três pixels e um pouco mais escuro, algo como 800 secundário ou algo E agora quero colocar isso em cima dessa imagem, mas não quero que faça parte do layout automático. Eu só quero que esse círculo tenha um lugar específico aqui sem seguir esse layout automático. Há duas maneiras de fazer isso. Eu posso agrupar esses dois para que eu possa manter esses dois e apenas a seleção de grupos ou até mesmo a seleção de quadros. E dentro desse quadro, como não é um layout automático, posso colocá-lo como quiser. Outra forma, que você também pode fazer sem precisar fazer isso, é escolher esta para ignorar o layout automático. Portanto, podemos ignorar o layout automático aqui e depois colocá-lo aqui. Mas a única outra coisa que acontecerá é, como você pode ver, como você pode ver, talvez seja necessário redimensionar ou reformular algumas coisas para fazer o espaçamento funcionar ou até mesmo alterar o espaçamento até mesmo alterar o espaçamento Então, vou usar o primeiro método apenas para tornar as coisas um pouco mais fáceis. Alguém para enquadrar essas seleções ou até mesmo agrupá-las , de acordo com você. Os lugares aqui talvez o tornem um pouco maior. Claro, 78 por 78 parece bom. Então, há uma foto da viagem aqui ou da cidade em que eles estão reservando e, em seguida, vamos escrever um título que inclua a cidade aqui. Então, vou pegar emprestada aquela cidade, algo assim. Talvez mova isso para baixo. Opa, diminua um pouco, tenha a cidade aqui. Eu também vou cortar isso, trazer isso para esta moldura aqui. Vou usar a mudança nas setas aqui para mover isso Mova isso para o assento um pouco aqui. Ok, esse é um design interessante. Talvez mova isso um pouco para o lado aqui e a mesma coisa aqui. Então, temos a cidade. Talvez a cidade pareça melhor desse lado, na verdade. E eu vou fazer um texto mais leve, como o texto 300. Nós temos o tipo de quarto, então vamos escrever quarto King. Ou não é um quarto king. É um quarto duplo com cama queen size. Write dorme $200 por noite, e então faremos cerca de cinco noites ou algo parecido E então, nós realmente não precisamos das classificações aqui, porque eles já deveriam saber disso antes. O que mais temos que poderia ser útil? As datas? Sim, para as datas, podemos simplesmente pegar emprestado o texto dentro desses campos e do ícone E aqui, use um layout automático horizontal e inclua conteúdos abrangentes para ambos Esse aqui, o texto é um pouco longo demais. Então, vamos fazer o conteúdo do HG. Faça outro texto. Faça o layout automático e faça na horizontal e talvez apenas no automático aqui e encha o recipiente. Então eles têm um espaçamento como esse, e então duplicamos isso e fazemos exatamente a mesma coisa na horizontal, enchemos o recipiente, automaticamente , e escrevemos isso como dois Este deve ser um conteúdo. E o espaçamento entre esses dois é um pouco demais, então eu os coloco automaticamente juntos e talvez faça com que sejam oito pixels Agora eu quero que esses dois realmente estejam aqui. Então, o que posso fazer é tornar a largura igual à largura aqui, que é 122, e dessa forma, obterei o mesmo resultado. Lá vamos nós. E isso acomoda dois é um pouco aleatório aqui, então vamos colocá-lo aqui e fazer com que já esteja em conteúdo quente Podemos simplesmente remover esse quadro de layout automático apenas fazendo isso em grupo. Então, temos um quarto queen deluxe $100 por noite vezes cinco noites, acomoda duas pessoas desta data até esta data E o espaçamento entre eles é um pouco demais, então vamos fazer oito pixels E vamos encher o recipiente para os dois e, na verdade, a mesma coisa aqui, encher o recipiente. Isso também funciona. Tudo bem. E então esses textos são muito escuros porque deveriam ser apenas espaços reservados, então faremos o texto 500 Na verdade, esse de e dois não precisa estar tão escuro, então vamos fazer o texto 300. E vamos realmente dar tudo isso um preenchimento de branco com algum espaçamento, talvez 16 pixels de todos os lados E então vamos fazer o raio do canto aqui. Talvez 30. Vamos tentar 32 looks. Isso pode ser demais, então talvez 24. Isso parece bom. E agora estou apenas me certificando de que está bem alinhado. Então, recebemos esse cartão personalizado que parece bom. Acho que tem praticamente tudo nesse preço total. Podemos simplesmente colocá-lo neste botão aqui. Vamos pegar emprestado esse botão daqui para que possamos colocá-lo aqui dentro O que queremos fazer é encher o contêiner e excluí-lo. E o botão está um pouco perto demais de todo o resto. Então, por que não pressionamos Enter? Então, selecionamos tudo dentro desse layout automático e pressionamos Shift para desmarcar o botão , e então fazemos Shift A. Então, há um layout para todo o conteúdo lá Dessa forma, podemos adicionar um pouco mais espaçamento entre o botão e o resto do conteúdo Acho que temos tudo aqui. Isso está começando a ficar muito bom. E isso realmente dá ao usuário uma boa ideia do que está acontecendo aqui. Mais uma coisa que eu recomendo que você faça é colocar o sono talvez na mesma linha desses $100 por Então, vamos colocar o conteúdo do abraço lá e colar isso e fazer um layout horizontal E então, talvez no início deste texto, façamos um Alt oito. Então, ele cria como um círculo e adiciona algum espaçamento como este, exatamente assim Não precisamos desse espaçamento extra, isso é suficiente. E, obviamente, o preço aqui não faz sentido porque, tipo, $100 por noite vezes cinco noites deveria custar cerca de 500 USD Então, vamos atualizar isso, para também faça sentido nos designs. Então, isso é tipo, 500 USD. Isso também é 500 USD. Agora, se você tiver outras taxas de serviço e coisas assim, pode sempre listá-las abaixo. Então, podemos sempre dividir o preço aqui e mostrar, tipo, esse é o preço disso, e então há uma taxa de serviço, e depois há um imposto e tudo mais, e então chega a esse valor. Mas, para este projeto, vamos simplificar e manter as coisas assim. Este botão aqui com esse raio de canto parece um pouco errado. Então, podemos arredondar totalmente esse botão um pouco mais ou até mesmo usar, tipo, um botão totalmente arredondado para este. E acabei de fazer uma alteração personalizada nessa. Você pode fazer isso. Não vai aplicá-lo a nenhum outro botão. Isso é apenas para esse botão específico. Então, isso parece bom agora. Agora, fizemos esta página. Terminamos com a página de reserva. Isso parece incrível. A única outra coisa é que digamos que o usuário confirme a reserva. Normalmente, você deseja mostrar algum tipo de página de confirmação depois disso ou como uma confirmação da viagem que está sendo confirmada. Então, vou deixar isso como um projeto para você fazer sozinho, como uma espécie de lição de casa para praticar Portanto, sinta-se à vontade para dedicar algum tempo para fazer isso. Eu vou fazer isso também. E então, obviamente, no final do curso, você terá acesso ao link do mFLe para que possa sempre comparar, contrastar e partir daí Então, com isso, praticamente encerram todas as páginas que estamos fazendo juntos aqui para o nosso projeto Aqui temos um fluxo completo de usuários, desde a inscrição, verificação de sua inscrição, navegação por destinos, escolha de um destino e visualização de todos os pequenos detalhes e alguns quartos abaixo dos quais você pode reservar, alguns cartões de classificação e assim por diante E também temos uma página de confirmação para confirmar essa viagem. E, obviamente, há muito mais em um aplicativo como esse que você pode adicionar e projetar, como o menu suspenso de perfis, etc., e exploraremos alguns deles juntos à medida que avançamos na e exploraremos alguns deles juntos à medida que avançamos Mas o próximo passo para nós é ver como podemos transformar esse design em uma versão compatível com dispositivos móveis que você também possa usar em um dispositivo móvel. E para fazer isso, aprenderemos como usar pontos de interrupção para ter um design diferente para dispositivos móveis, mas também usar os mesmos designs que fizemos até agora e apenas ajustá-los para um design móvel Então, vamos voltar à próxima seção do curso para falar sobre como transformar nossos designs em dispositivos móveis. 59. Design responsivo com variáveis: Nós terminamos com nossas páginas da web aqui e queremos transformá-las em dispositivos móveis. Há várias maneiras de fazer isso. Obviamente, podemos acessar cada página individualmente e depois dar uma olhada no conteúdo que temos e tentar formatá-lo de uma forma amigável no celular. Então, por exemplo, para a tela, pressionaríamos F em nosso teclado e iniciaríamos uma moldura de telefone aqui, digamos, no iPhone 16, e você pode realmente fazer qualquer tamanho aqui para o tamanho do telefone. E então você teria que copiar cada elemento dentro do seu quadro e, um por um, reorganizá-los. Então essa é uma maneira de fazer isso, e vamos explorar isso também. Mas quero começar explicando como você pode realmente usar variáveis para facilitar o design responsivo Portanto, mesmo com variáveis, há alguns elementos que você precisaria mudar para dispositivos móveis. Portanto, temos essa barra de navegação no topo aqui e, provavelmente, no celular, ela parecerá um pouco diferente Talvez em vez desse usuário, você sabe, o nome completo aqui, tivéssemos apenas o ícone do usuário ou a foto do perfil do usuário e, em seguida, seguido por esse ícone de sino. Portanto, pode parecer um pouco diferente. Portanto, precisaremos criar componentes diferentes com base no celular ou na web. Nesta palestra, mostrarei como você pode usar variáveis e modos variáveis para criar tamanhos diferentes para suas páginas Então, aqui, temos uma largura de página aqui para o projeto web. São 14 40 pixels aqui para mim. Pode ser um pouco diferente para você se você começar em outro tamanho de quadro, mas é mais ou menos desse tamanho. E então temos um celular. Então, se eu pressionar F no meu teclado e, digamos , usar o iPhone 16 Pmax, aqui temos esse tamanho de celular de 440 pixels E, claro, há diferentes tamanhos de pixels que você pode definir, mas eu vou usar esses dois por enquanto. Eu vou usar 144440 para o tamanho do celular. Então, se você abrir o painel de variáveis aqui, podemos realmente criar uma nova coleção. Então, vamos criar uma nova coleção ou até mesmo essa coleção que eu tenho não está sendo usada no momento, então eu posso simplesmente renomeá-la e chamá-la de dispositivos Opa. Se você tiver um erro de digitação como eu, basta renomeá-lo, corrigi-lo, e então vamos criar uma variável com número como valor ou tipo, e vamos alterá-la para o tamanho do dispositivo, e aqui vamos ter uma versão web 14.40 pixels, e então eu vou criar outra E vamos chamar isso de margem de nossa página, ou você pode até mesmo chamá-la de margem. E esse será o espaçamento nas laterais. Então, agora eu tenho 48 pixels, na verdade, então eu vou ter isso em 48. E agora, se você ver aqui, temos um número para a largura aqui que já é um número definido. Mas se você realmente aplicar uma variável aqui, se você aplicar a variável para o tamanho do dispositivo, agora ela está vinculada a esse tamanho variável do dispositivo, e eu sempre posso alterá-la a partir daqui. E aqui para ver nosso conteúdo, queremos realmente garantir que tudo esteja em um layout automático. Então, vou agrupar esses dois juntos em um quadro de layout automático e também esses dois juntos. Então, vou fazer o layout automático desses dois juntos, e depois também este aqui. Portanto, temos uma área de conteúdo aqui e, em vez de ter as margens em zero aqui ou o preenchimento em zero na horizontal, vou aplicar a E agora temos um preenchimento adicional aqui. Mas, por causa disso, podemos realmente expandir isso para assumir todo o conteúdo. Então, podemos fazer isso ou simplesmente definir a largura como também uma variável pri e fazer o tamanho do dispositivo Então, agora, eles estão vinculados a variáveis. Mas veja, nada realmente acontece se eu minimizar isso e não temos realmente nenhum propósito de definir essas variáveis agora. Mas se você prosseguir e configurar um modo diferente clicando em novo modo variável e ligando para esse celular, podemos realmente alterar os números aqui. Então, para dispositivos móveis, teremos um tamanho de dispositivo 440 e, em vez disso, a margem da página será definida como 24 Então, agora, se você clicar aqui e, em aparência, se você clicar no botão de divisão, aplicar o modo variável, podemos mudar o dispositivo Então, se usarmos dispositivos móveis, agora o dispositivo foi configurado para celular. Esta área aqui foi configurada para o tamanho 440 do celular, o preenchimento mudou. Mas é claro que ainda temos um problema em que as coisas não organizadas como queríamos ou esperávamos. Idealmente, o que queremos é que as coisas sejam espaçadas adequadamente A SEC não é perfeita. Algumas das coisas não se encaixam, e precisamos fazer algumas mudanças para que funcionem. Então, como exemplo, aqui temos os complementos para sua viagem e, em vez de ter uma largura fixa, no momento, não é conteúdo. Então, o que queremos fazer é embrulhar esse e definir uma largura máxima. Portanto, não importa o que aconteça, a largura máxima será a largura do tamanho do dispositivo, que é 440 aqui E, na verdade, em vez de 440, você pode configurar outra variável aqui para chamá-la de tamanho do conteúdo e já remover essas margens E esse será o tamanho do conteúdo dessas caixas aqui. Então, vamos voltar para a próxima seção para reunir isso nesta página 60. Propriedade de largura máxima: Configure as variáveis e aplicamos o modo para que possamos realmente alterar o tamanho do nosso dispositivo para web e celular. E algumas dessas coisas já estão melhorando. Mas o que precisamos fazer é configurar uma largura máxima para nossa área de conteúdo para que não o conteúdo se espalhe Então, vamos dar uma olhada no que está acontecendo agora com nossa página. Se voltarmos para a web agora , temos um layout automático aqui em que, independentemente do tamanho, o conteúdo interno não muda nem se adapta, e não é isso que queremos. Então, em vez disso, se você configurá-lo como um embrulho, quando o conteúdo estiver sendo reduzido, pelo menos isso aqui vai para cá em vez de ficar à direita, então, no celular, podemos apresentá-lo Agora, talvez você não queira fazer isso dessa maneira. Talvez você queira realmente mostrar isso além de confirmar sua viagem. E, claro, se você quiser mostrar isso no topo, o que não faz muito sentido, mas você pode fazer isso indo aqui e colocando o primeiro no topo. Então, agora isso corrige esse problema. Nossos campos aqui são um problema porque estão corrigidos agora em 480. Então, vou colocar esses dois juntos e, em seguida, vamos definir uma largura máxima. Mas antes de fazermos isso, vamos definir uma nova propriedade aqui para nossas variáveis, e essa também será um número, e vamos chamar isso de conteúdo. Largura, que na web , será 14 40 -48 vezes dois Então essa é a área máxima de conteúdo que podemos ter. Então isso será 13 44. E no celular, será 392. E então vamos fazer com que isso aqui tenha uma largura máxima. E vamos aplicar uma variável à largura máxima da largura do conteúdo. Então, agora, o que está acontecendo é que, por padrão, está em 480 pixels, mas a largura máxima que isso terá está no caso web 13 44. Mas se mudarmos isso para celular, veja, agora são apenas 392 Mas o único outro problema é que dentro desses layouts automáticos, também precisamos fazer com que o conteúdo interno tenha a largura correta definida Então, vamos entrar e ver o que está acontecendo. Este também está definido como 480, mas agora queremos encher o contêiner para este e também para este porque agora o quadro de layout automático pai está lidando com as larguras aqui Então, agora vamos ver o que acontecerá se mudarmos para celular. Ok, alguns dos campos parecem muito melhores. E este aqui, porque há dois juntos, queremos encher o recipiente e depois entrar e aplicar um recipiente de enchimento em ambos para que fique assim no celular. Então, agora, se ligarmos a web, é assim que fica. Agora, se configurarmos isso como móvel, os campos parecerão bons. Se configurarmos para web , também ficará bom. Só que temos um pequeno problema, que é o fato de que, quando alternamos entre os dois, o campo aqui, a largura que já temos , é transferida para o celular Normalmente, o que queremos fazer é duplicar essa página e, em seguida, ter uma versão móvel dela Então, vamos mudar esse para celular. E muito rapidamente, temos uma versão móvel e podemos simplesmente expandi-la. Lá vamos nós. E tem apenas alguns outros problemas aqui. Portanto, isso aqui também deve ter uma largura mista de aplicar uma largura de conteúdo variável. E aqui para este botão, ele deve estar no recipiente de enchimento. E este aqui também deve ter uma largura máxima de você adivinhou, conteúdo e largura E então isso está começando a ficar muito bom. E, como você pode ver, conseguimos alternar entre dispositivos móveis e web muito rapidamente e é assim que você pode usar variáveis para ter um design responsivo em todo o seu projeto Vou deixar que você escolha se deseja continuar usando variáveis para seus designs móveis responsivos E na próxima seção, faremos juntos outra forma de fazer isso manualmente, que também funciona sem usar variáveis, algo que eu também faço com frequência. Mas antes de fazer isso, precisamos corrigir essa barra de navegação na parte superior para que tenhamos uma versão móvel. Então, vamos voltar à próxima seção para aprender como criar uma variante para dispositivos diferentes 61. Variantes de componentes para dispositivos: Muitas vezes, você deseja criar componentes que possam ser usados na Web e em dispositivos móveis Às vezes, você precisa alterar seus componentes para que haja um para dispositivos móveis e outro para a web. Então, por exemplo, o snap board aqui deve ter uma versão móvel e uma versão web Isso é um pouco diferente. Então, vamos até o componente aqui, onde temos nesta seção aqui, e vamos criar outra variante para ele que será específica para dispositivos móveis. E vamos chamar essa variante de dispositivo, e eu vou expandir para que tenhamos espaço à direita aqui, adicionar outra variante, e vamos chamá-la de celular. Opa. Lá vamos nós. E vamos definir a largura para aplicar o tamanho variável do dispositivo. E vamos definir a largura 440, que é o tamanho do celular e simplesmente trazê-la para o lado aqui E, obviamente, isso não parece ótimo. Então, vamos selecionar o logotipo e alterá-lo para que seja talvez um seis para celular. E, em seguida, o preenchimento horizontal, vamos fazer a margem da página e, em seguida, vamos aplicar o modo variável do celular para que ele esteja sempre seguindo o do celular E, de fato, você pode fazer a mesma coisa com sua largura. Você pode simplesmente aplicar um tamanho variável do dispositivo e, como configuramos o modo como móvel, ele sempre acompanhará o celular. Dessa forma, se alguma vez fizermos uma alteração no tamanho do nosso celular, então, de repente, decidimos nosso celular deveria ser 500, tudo será aplicado automaticamente. Então esse é o benefício de usá-lo dessa forma. Ou digamos que você queira alterar a margem no celular para 16 pixels, essas alterações acontecem automaticamente. Então, no celular, não queremos o nome. Só queremos excluir o nome, e talvez o espaçamento entre esses dois possa ser de 24 pixels Este poderia ser um pouco maior, talvez com apenas cinco anos. Isso parece bom. Então, esse é chamado de web. Esse não tem nome. É chamado apenas de padrão, então queremos alterá-lo para web. Vou redimensionar isso aqui. E então o que queremos fazer é ir também às variáveis e criar um nome de dispositivo aqui. Então, vamos fazer uma variável de string chamada device, ou você pode fazer o nome do dispositivo. Este vai ser web, escrito exatamente da mesma forma, e este vai ser móvel Soletrado exatamente da mesma forma que aqui. Dessa forma, você pode informar à sua página quais componentes usar. Então, se você for até aqui, podemos ir para o que temos no celular e, em vez de mudar isso manualmente para celular toda vez, podemos realmente aplicar a variável chamada nome do dispositivo. Então, o que está acontecendo aqui? Como você pode ver, se eu mudar isso para a web, então eu tenho um pequeno bug aqui, e eu só quero ter certeza de que, se isso acontecer com você, você sabe exatamente o que está acontecendo. Se você já teve um problema como esse em que um de seus componentes está preso em um determinado modo, é provável que você tenha aplicado uma aparência aqui a esse componente específico ou modo variável, mas não a tenha removido, porque agora, se estivermos alterando o modo variável para a página inteira, tudo deve mudar. Algo não está mudando, então isso significa que você está aplicando um modo variável a um componente específico. Então você não quer fazer isso. Você deseja removê-lo para que ele herde automaticamente qualquer modo que ele herde automaticamente de aparência ou qualquer modo variável que você tenha em todo o quadro ou página aqui Agora, se mudarmos isso para celular, será usando a barra de navegação do celular. Se fizermos isso na web, será usando a barra de navegação da web. Então é assim que podemos passar uma variável para uma variante e usar variantes diferentes para criar componentes diferentes para usar lá. Então, você pode imaginar que isso pode ser útil e útil quando você trabalha em marcas diferentes Se quiser que seu aplicativo funcione em várias marcas, você pode alterar o nome da empresa rapidamente ou de propriedades diferentes Então você tem muita flexibilidade , o que é bom. Agora, enquanto ainda estamos falando sobre variáveis e as usando para nosso design responsivo, mais uma coisa que podemos mudar aqui são os tamanhos das fontes em dispositivos móveis Assim como fizemos com o nome da empresa aqui, alguns dos tamanhos de fonte no celular são um pouco grandes demais. Na maior parte da página, funciona e parece bom, mas, especificamente, esse pequeno cabeçalho que temos aqui é muito grande no celular. Na web, parece bom. Então, vamos voltar à exextura para fazer uma aula de minivariáveis sobre fontes 62. Variáveis de fonte: No celular, queremos usar tamanhos de fonte diferentes. E, de fato, há muito mais propriedades que você pode aplicar às suas fontes usando variáveis. Então, vamos explorá-los rapidamente. Portanto, temos nossos estilos locais aqui para nossos diferentes textos de cabeçalho e corpo de texto. E dentro de cada uma, se você editar as propriedades, é claro, podemos mudar a família da fonte. Podemos alterar o peso e o tamanho da fonte, mas também podemos aplicar variáveis a eles. Então, podemos escrever isso como uma variável e aplicá-la aqui clicando em Aplicar variável. Então, novamente, você pode alterar rapidamente sua família de fontes, digamos, de todo o seu projeto, em vez de ter que passar por todas elas e alterá-las lá. A outra coisa que você pode fazer é definir o tamanho da fonte usando uma variável aqui embaixo. E você também pode fazer isso para o peso da fonte. Agora, o que me interessa para nosso caso específico é o tamanho do celular. Queremos que, para esse específico que temos, digamos, três anos, tenhamos um tamanho para a web, que é 39 pixels, que é 39 pixels, e talvez queiramos definir um tamanho menor quando o tamanho de três anos estiver sendo usado em um celular. Como fazemos isso? Se voltarmos às nossas variáveis, podemos criar uma nova coleção, e vou chamá-la de fontes. Vamos criar uma variável e defini-la como número. E escreveremos H em três tamanhos. Teremos um modo como web e outro como móvel. A única coisa que esqueci de mencionar é que os modos só podem ser usados se você tiver um Pcount com Então, se você não fizer isso, continue aplicando apenas um modo para sua web. E se você está pensando, é claro, em fazer um upgrade, eu recomendo para que você possa aplicar modos diferentes Então, aqui para a nossa web, vamos aplicar o mesmo tamanho de 39 pixels e, em seguida, talvez no celular, possamos fazer 30 pixels. Vamos tentar isso e ver se é muito grande. Então, agora, se formos para o nosso H três, em vez de ter um tamanho fixo de 39 pixels, vamos até aqui e aplicar um tamanho variável H três. Agora, como configuramos isso como parte de uma coleção de variáveis diferente, não faz parte dos dispositivos. Precisaremos definir nossa página aqui, onde precisaremos alterar ou aplicar nosso modo variável para que as fontes também usem o tamanho do celular. Se você não quiser lidar com esse inconveniente, você pode ir até aqui e, na verdade, acessar seus dispositivos e também configurar tamanhos de fonte aqui como uma coleção diferente Então, eu vou fazer isso como um exemplo. Você não precisa fazer isso. Eu posso criar um número aqui, digamos, para o meu tamanho H dois, e depois outro para o meu tamanho H um. Opa E então eu posso simplesmente agrupá-los. E chame esse grupo de tamanhos de fonte. Ele ainda está na coleção de dispositivos, então você também não precisaria aplicar o modo variável para fontes. Mas atualmente, a forma como eu o configurei é que ele está em uma coleção diferente. Portanto, também precisarei aplicar o modo variável para fontes de celular. E, bum, nosso texto aqui agora está aplicando o tamanho H três para celular, o que é incrível. Acho que podemos até aumentar isso para 32 pixels. Vamos tentar isso. E isso parece bom. É assim que podemos usar variáveis para alterar nossas fontes e os tamanhos dependendo da tela em que você está. Então, aprendemos a usar variáveis até agora na criação de design responsivo Vamos voltar ao setor ex para tentar outra forma usando restrições 63. Usando restrições: Como usar variáveis para criar diferentes tamanhos de dispositivos, mudar rapidamente nossa página da web para uma página móvel e assim por diante. E acho que agora é um bom momento para aprender a criar também design responsivo usando restrições Portanto, as restrições no Figma podem ser encontradas no lado direito do painel Às vezes, pode não estar visível, então talvez seja necessário clicar neste pequeno botão que diz restrições e você verá as restrições aplicadas aos seus itens O que as restrições fazem é permitir que os elementos dentro do seu quadro reajam e, em vez disso, respondam ao tamanho do quadro do conteúdo ou do quadro principal Como exemplo, agora, por padrão, cada elemento em seu design terá uma restrição superior e esquerda O que isso significa é que, se você expandir sua moldura, se alterar o tamanho, por padrão, tudo tentará manter a esquerda e a parte superior restritas, que ela esteja sempre conectada à esquerda e à parte superior do seu projeto Vou duplicar essa página de descoberta de destino apenas para criar uma versão móvel usando apenas restrições Agora, para a barra NAV aqui em cima, se eu segurar a tecla shift, também definirei uma restrição horizontal esquerda e direita Então, agora também está restrito à direita. O que acontecerá é que, se expandirmos nosso quadro, o Navbar agora o expandirá com o tamanho do quadro e, se eu o reduzir, ele também ficará menor Agora, é claro, ainda temos esse problema em que certos componentes terão uma aparência ruim, então tecnicamente ainda precisaremos mudar isso para uma versão para dispositivo móvel Isso ainda é necessário. Agora, é claro, neste momento, a forma como isso é configurado usando a versão móvel é configurada para uma largura fixa. Mas se removermos temporariamente essa largura fixa, podemos redimensioná-la para a largura que quisermos para o nosso dispositivo Agora, como está ocupando a página inteira aqui, ainda fará a mesma coisa. Ele ainda encolherá e se expandirá. Em relação ao contêiner principal, que também está sendo redimensionado Agora, para este, podemos fazer exatamente a mesma coisa com o conteúdo. Se eu mergulhar aqui, o tamanho aqui pode funcionar para o tamanho de um tablet E então o que podemos fazer é aplicar também uma restrição superior esquerda e direita Mas antes de fazer isso, vou mostrar rapidamente quais são as outras restrições Portanto, podemos ter uma restrição correta. Então, agora o que acontecerá é que, se uma página se expandir aqui, esse conteúdo sempre ficará à direita Se eu centralizar , como você adivinhou, o conteúdo ficará no centro, o que também pode funcionar, aliás E isso é usado com mais frequência na web. Você também pode usar a habilidade. E quando você o define como habilidade, se você expandir sua página, o que acontecerá é que esse conteúdo também será estendido horizontalmente para corresponder dependendo de quanto você o está expandindo É um pouco diferente porque, como você pode ver, o espaçamento entre a esquerda e a direita é diferente Então, está diminuindo e se expandindo. Não é o mesmo que configurá-lo para a esquerda e para a direita. E, na maioria das vezes, não queremos usar escala. Em uma página como essa, esquerda e direita fazem mais sentido. E agora as coisas ficaram um pouco confusas. Na verdade, vou usar o Comando Z até termos este e depois mudá-lo para a esquerda e para a direita Então, agora, essa é uma solução melhor em que as coisas se expandem aqui e também diminuem para corresponder a tamanhos diferentes, como uma tela móvel Isso não é perfeito e você ainda precisará trabalhar com o layout automático para corrigir isso no celular. Então você pode fazer um monte de coisas para corrigir isso. Portanto, para esse elemento aqui, por exemplo, talvez você também precise quebrá-lo para que, se a página estiver diminuindo, e para esse quadro, queiramos definir o contêiner do campo Então, agora, se a página está diminuindo, os campos também estão se movendo para novas linhas. A mesma coisa aqui. Para este, queremos fazer um embrulho e ele já está no recipiente de enchimento, então isso deve funcionar. Aí está. Então, muito rapidamente, temos uma página que pode funcionar em dispositivos móveis. Não é um mau começo. Na verdade, isso foi muito rápido de configurar, mas você ainda pode querer um design diferente em seu celular para que ele não ocupe muito espaço na parte superior com todos os campos e a forma como tudo está configurado. Então, idealmente, você ainda quer fazer algumas personalizações nisso Mas usando restrições, alteramos rapidamente tamanho do conteúdo aqui para que ele dependa do tamanho da página ou do tamanho do quadro Agora, ainda não abordamos as restrições verticais, mas se jogarmos com as restrições verticais, você também tem opções semelhantes que as coisas podem ser restringidas da parte inferior até a parte superior e inferior, no centro e na escala Se você fizer a parte inferior, se a parte inferior da página se expandir, o conteúdo se moverá aqui para manter o mesmo espaço entre, você sabe, onde isso termina aqui e a parte inferior, que é de 684 pixels Então, ele tentará manter esses 684 pixels. Novamente, por padrão, ele está definido como superior. Então, ele manterá qualquer espaçamento que tenha da parte superior desse quadro, que é 136, que é o que temos por padrão E, claro, temos outras opções, como centro. Portanto, se a página se expandir, ela tentará mantê-la centralizada de acordo com onde estava E você também tem a mesma opção de escala. Então é assim que você usa restrições. Porém, quando você começa a usar largura máxima e todo o layout e as variáveis, é menos necessário usar restrições Portanto, não é algo que você provavelmente usa diariamente, mas você tem essa opção. Muito rapidamente, se você também quiser alterá-las rapidamente , mas usar o visual aqui, você sempre pode definir isso como topo a partir daqui Você pode definir isso para baixo a partir daqui. Ou, se você segurar a tecla shift, poderá configurá-la para cima e para baixo. Da mesma forma, se você segurar a tecla shift, poderá simplesmente desligar um ou outro. Você pode definir para o centro a partir daqui. E lembre-se, você está controlando as restrições horizontais a partir daqui, e então essas linhas verticais são para você controlar suas restrições verticais Mas, por padrão, queremos definir este para cima e este para a esquerda e para a direita para que possamos rapidamente, se alterarmos isso para 440, podemos configurar rapidamente um design móvel Sim, agora que temos uma página móvel, talvez você queira fazer alterações aqui e os elementos internos não estejam tão espaçados E então talvez você queira definir os campos como largura total aqui. E talvez esses possam ser de layout automático. E então, a partir daqui, podemos definir esse para 16 pixels também. E eu quero trazer o preenchimento para que fique a 24 pixels dos lados e 24 pixels da parte superior E então ele simplesmente se expandiu, então está ligado também. Talvez você precise fazer alguns ajustes aqui e ali para melhorar isso no celular, mas deve ser relativamente simples Então, com algumas mudanças simples, você pode ter um design móvel para sua página de descoberta de destinos. 64. Organizando nosso arquivo: Dediquei algum tempo para concluir minhas versões móveis. Caso contrário, reserve um tempo para fazer isso nas outras páginas que você não fez. E agora, nesta palestra, quero organizar tudo rapidamente e garantir que o projeto pareça polido A única coisa que me chamou a atenção quando eu estava passando por isso é que, para nos inscrevermos com número de telefone e nos inscrevermos no Google, para nos inscrevermos no Google, podemos fazer com que pareça um pouco melhor apenas com o ícone ou o ícone do Google lá. Então, agora temos esse ícone de mostrar à esquerda que podemos usar. E então, para o nosso ícone, temos apenas os ícones limitados que configuramos. Obviamente, podemos voltar aqui e alterar ou adicionar outro ícone. Se você simplesmente abrir o navegador e pesquisar por um SVG. Então, vamos ver se consigo. Estou apenas abrindo ícones do Foster para ver se talvez eles já tenham um logotipo do Google aqui. E eles sabem. Você pode usar este aqui que eles têm ou simplesmente pesquisar o logotipo do Google, SVG, em seu navegador, e então você verá um que se parece com este e apenas adicioná-lo aqui em seu projeto Pode não ter sido adicionado, então vamos trazê-lo aqui. Vou só colar, e isso é muito grande. Queremos fazer, vamos ver o quão grandes são esses , 20 por 20. Então, queremos apenas pressionar K em nosso teclado para rapidamente escalar isso para 20 por 20. E então vou trazê-lo aqui e também transformá-lo em um componente e chamá-lo de ícones do logotipo do Google para que possamos rapidamente, em nosso botão aqui embaixo, alterá-lo para o logotipo do Google. Isso parece muito melhor e muito semelhante ao que temos em outros aplicativos. Agora assine com o número de telefone. Podemos simplesmente fazer com que o usuário preencha seu número de telefone e diga: continue No momento, parece um pouco estranho, como se estivesse faltando o campo do número de telefone Então, por que não copiamos um campo aqui e colamos aqui e depois chamamos esse de? Número de telefone, e vamos colocar um exemplo de número de telefone mais um, dois, um, dois, um, dois, três, um, dois, três, quatro, traço aqui E então vamos colocar esses dois e aproximá-los um pouco, talvez com oito pixels de distância. Então, eles parecem estar relacionados. Isso parece um pouco melhor. E sempre podemos nos inscrever primeiro com a opção Google e depois ter a opção de número de telefone. Então, isso é uma pequena melhoria. Esta página parece boa. Esta página também está ótima. Temos os menus suspensos aqui, e então meu celular parece um pouco disperso O que podemos fazer é separar os designs móveis e depois o design da web separadamente, apenas para organizar rapidamente o arquivo. Então, podemos simplesmente ir aqui e fazer uma seção. Vou apenas desenhar uma seção ao redor das telas do meu celular e chamá-la de seção móvel. E então eu vou pressionar Enter para selecionar todos os quadros internos e apenas organizá-los por meio desse pequeno ícone. E então, ao organizar todos os seus quadros, você pode rapidamente aproximá-los, talvez com 100 pixels, espaçando entre eles. E então, se você clicar duas vezes nas bordas da seção, ela será redimensionada automaticamente para corresponder ao conteúdo interno Então, agora temos todas as páginas móveis lá, e podemos fazer exatamente a mesma seção páginas da web aqui. Você não precisa fazer isso, mas acho que é melhor. Em seguida, basta ter uma versão web e pressionar Enter para selecionar todos os quadros e organizá-los aqui. O filtro e tudo ficaram um pouco bagunçados lá, mas vamos consertar isso e fazer a primeira linha E traremos esse filtro suspenso para este outro, logo aqui embaixo, onde deveria estar. E vou manter os dois espaços um pouco mais afastados deste. Lá vamos nós. Essas são nossas telas móveis e, em seguida, temos nossos componentes, que também já são uma seção. Então, parece bom. Temos uma seção de componentes, temos uma seção web e móvel. Agora, agora mesmo, temos essas maquetes aqui. Você sempre pode criar novas páginas e mover sua web ou celular para essas páginas. Eu gostaria de ter um aplicativo simples como esse, tudo em uma página. Tudo bem, então isso parece muito limpo e organizado, e agora é hora de voltar e realmente transformar isso em um protótipo Então, vamos fazer isso juntos na próxima seção. 65. Testando nosso aplicativo com o DesignPro: Organizamos nosso arquivo e ele está começando a ficar ótimo. Agora, para levar nossos designs para o próximo nível, há algumas coisas que podemos fazer para verificar novamente e garantir que nossos designs sejam acessíveis e que não haja problemas de interface que os usuários enfrentem ao usarem nosso aplicativo. Um plug-in que achei muito útil para nos ajudar com isso se chama Design Pro. Se você pesquisar em Plug-ins e widget para Design Pro, encontrará esse plug-in de revisão de design de IA e poderá abri-lo Esse plug-in nos ajuda a melhorar a cópia em nossa página, verificar a acessibilidade e auditar nossa interface de usuário. Reserve um segundo aqui para assinar uma conta. Nós vamos fazer isso também. Depois de fazer login, você verá a página que selecionou. Então, se eu mudar para outra página, vejo a página que estou vendo agora e posso optar por fazer uma revisão nessa página. página na qual estou interessado agora é nossa página principal, que é a página de descoberta de destinos, porque essa é provavelmente uma das páginas mais visitadas. Mas é claro que você pode executar esse plug-in em qualquer página e, de preferência, em todas as páginas de seus designs. A partir daqui, posso escolher uma avaliação, um profissional de design, melhorar nossa cópia, auditar a IA, detectar quaisquer problemas de interface do usuário e nos ajudar a seguir as melhores práticas. Certifique-se de que nosso design atenda às diretrizes de acessibilidade, que pode ser muito importante no design para garantir que seus designs sejam acessíveis e funcionem com todos. E para páginas de destino e lugares em que você tem chamadas para ações, elas podem ajudá-lo com a conversão e aumentar sua conversão nesses sites Você sempre pode obter uma avaliação individual de um especialista se quiser uma avaliação mais profissional sobre isso. Vamos executar a interface de auditoria aqui para ver que tipo de problemas de interface essa página pode ter. Então, vamos clicar em Vamos revisar. Levará um segundo para buscar o design, examiná-lo e fazer com que sua IA verifique tudo nesse design Tudo bem, agora a interface de auditoria está pronta para ser usada. Podemos dar uma olhada no feedback aqui. Então, primeiro, ele lhe dará algumas coisas positivas encontradas em nosso design. Apenas duas fontes foram usadas, ótimos pares de fontes. Isso é incrível. E tudo isso é ótimo para ver como designer. E logo abaixo, você verá tudo o que precisa corrigir. Então, aqui, podemos clicar em Inspecionar para ver exatamente de onde vem essa dica E está mencionando que o logotipo aqui e seção do perfil do usuário devem estar na mesma linha de base vertical Portanto, combina com o logotipo. Como há uma pequena diferença aqui, essa tem 48 pixels, enquanto a fonte aqui é 38 pixels. Então, visualmente, não está exatamente na mesma linha que você vê no centro Essa é uma ótima solução. Na verdade, podemos acessar nossa barra de navegação diretamente e fazer essa alteração para que esse texto tenha 48 pixels e fique no centro para o meio E agora, se voltarmos, mesmo que não seja muito óbvio , essas são mudanças sutis que são importantes em seus projetos. Sim, isso foi útil e simplesmente descarte. Então, sabemos que terminamos com isso. Em seguida, vá para o próximo. Estou dizendo que a cor laranja aqui pode ser a mesma que esta aqui em termos de marca. Então isso é 800 secundário. Então, podemos simplesmente acessar nosso cartão aqui e aplicar o 800 secundário. Na verdade, eu quero fazer isso para o outro também. Então, sem voltar aqui, definitivamente parece mais alinhado agora. Vou descartar isso Então, há muito mais que isso nos deu aqui, e podemos examinar cada uma delas em profundidade e até mesmo fornecer a fonte de onde elas vêm. Eu recomendo que você consulte essas fontes para realmente entender, especialmente como designer que está apenas começando, que esse feedback realmente se baseia? Acho que, no geral, fizemos um bom trabalho ao montar esse design porque obtivemos muitos pontos positivos Vamos testar nossa página de detalhes do destino, escolher uma auditoria de acessibilidade, executá-la e ver que tipo de resultados obteremos aqui. E em apenas alguns segundos, o feedback está pronto. Portanto, está nos dando uma classificação com base na cor do texto e nesse plano de fundo. Ele nos dá algumas sugestões sobre como podemos corrigi-lo aqui também, e podemos aplicá-las diretamente aqui. Portanto, esse é um plug-in muito útil, e eu recomendo que você o use em seus projetos. 66. Exportando nossos designs: Portanto, antes de começarmos a trabalhar em nossos protótipos, quero mostrar rapidamente como você pode exportar seus designs do FiGMA Digamos que você tenha um amigo, colega ou colega trabalho solicitando algumas versões PNG de seus designs Obviamente, você pode compartilhar o arquivo Figma com eles, e abordaremos isso na seção futura Mas se você quiser exportar rapidamente seus designs daqui para sua área de trabalho ou para qualquer outro lugar, pode selecionar molduras e, aqui embaixo, você pode ver uma seção de exportação e clicar em Configurações de exportação e, por padrão, é um X, que é o tamanho original. Mas é claro que você pode alterar isso para dois x se quiser uma imagem com mais resolução ou maior resolução e, em seguida, escolher o tipo se quiser JPEG, PNG, SVG ou PDF Em seguida, basta clicar em Exportar e ele perguntará para onde você deseja exportá-lo e, em seguida, você obterá um PNG. E então ele perguntará onde você quer seu PNG, e então você escolherá, obtenha esse bom PNG aqui para compartilhar com outras pessoas. Legal. Agora, digamos que você queira exportar a seção inteira aqui apenas para mostrar no que você está trabalhando Na verdade, você pode exportar toda essa seção da web e visualizar como seria. Na verdade, exportaria tudo junto como uma imagem. Então, como é gigantesco, estou apenas mostrando uma prévia dele . Isso é o que pareceria. Mas provavelmente você deseja exportar quadros individuais internos e todos os elementos e outras coisas. Se você tiver uma seção como essa, basta pressionar Enter para selecionar todos os quadros internos e exportar várias coisas ao mesmo tempo. Assim, você pode exportar sete camadas. E o Figma exportará individualmente todas as suas molduras como uma imagem E isso pode ser útil para os desenvolvedores entrarem aqui e, digamos que eles queiram usar o mesmo ícone de estrela aqui, eles podem simplesmente entrar e selecionar esse vetor e exportá-lo como um SVG, o que permitirá que eles o usem em seus projetos com muita facilidade Então é assim que nós o exportamos. Também quero mostrar, se você quiser mostrar seu projeto em seu portfólio ou torná-lo bonito, como podemos utilizar alguns dos arquivos da comunidade para colocar nosso projeto em um computador real e torná-lo interessante 67. Designs prontos para portfólio: Então, isso é bom. Podemos exportá-los como molduras individuais, o que parece legal. Mas tenho certeza de que você deseja colocar esses designs em seu belo portfólio e fazer com que pareça legal. E é aqui que podemos usar um pouco de magia e figma, bem como os arquivos da comunidade Portanto, se você acessar os arquivos da comunidade e pesquisar e acessar a página inicial aqui dos arquivos da comunidade, poderá pesquisar, digamos, laptop, maquete ou algo parecido, ou se quiser a versão móvel, ou se quiser a versão móvel, poderá pesquisar uma maquete para E você pode ver vários como esse aparecerem. Portanto, fique à vontade para escolher o que você deseja. E há muitos gratuitos, e você pode ver quais combinam com a atmosfera do seu portfólio Só por exemplo, vou escolher um deles só para mostrar isso, vou escolher um dos gratuitos daqui Abra-o, encontrei este lindo que vou usar, só para mostrar como isso funciona. Você clicará em Abrir para abrir o Infigma e, em seguida, ele solicitará que você cole seu design Então, você pode realmente acessar esta página que eles têm nesta página específica e ler como ela funciona. E ele usa um plugin chamado Mockups Plugin. Agora, pode ser diferente do arquivo que você encontrou, mas esse é o que eu encontrei, e vou apenas copiar minha página de descoberta de destino e trazê-la aqui e ler as informações. Mas vou te mostrar rapidamente como isso funciona. Então, vamos para essa cena. onde diz espaço reservado, vamos colar nosso design E, obviamente, é assim que aparece, então você pode simplesmente fazer alterações se não parecer bom. Então, logo de cara, essa cor vermelha é realmente irritante. Então, eu vou mudar isso e vou trazer isso aqui um pouco. O resto parece bom por enquanto. E então o que você quer fazer é abrir seus plug-ins. Você deseja pesquisar esse plug-in de maquete e abri-lo E o que esse plugin de maquete faz é que você coloque sua moldura dentro de uma E atualmente é um plug-in pago, então você pode optar por usá-lo gratuitamente inscrevendo-se para um teste gratuito. Então, sinta-se à vontade para fazer isso. Tenho certeza de que existem versões gratuitas, mas se você estiver pronto para montar seu portfólio, definitivamente vale a pena se inscrever para o teste gratuito. Agora você deseja pesquisar esse plug-in Mk up na guia de plug-ins e, depois de abri-lo, poderá ver uma página solicitando que você se torne Pro, mas não precisa simplesmente clicar em Distorcer Isso é o que você quer. Então, você deseja selecionar a camada que deseja colar na outra camada. Então, logo aqui, diz , selecione a forma vetorial. Então, primeiro, ele pede que você selecione a camada na qual deseja colar seu quadro, e é essa aqui, a tela, e a camada que queremos colar é um espaço reservado E então você quer aplicar, e pronto, ele pega seu design a partir daí, distorce de uma forma que fica bem no laptop e fica legal E você pode simplesmente exportar isso para qualquer lugar que quiser. É assim que você cria formatos interessantes e apresentáveis de seus designs para compartilhar com outras pessoas ou com seu portfólio, e assim por diante E agora acho que estamos prontos para voltar e transformar isso em um protótipo ao vivo que podemos testar em nossa web e dispositivos móveis 68. Definindo um fluxo de usuários: É hora de se divertir montando protótipos realistas Então, nas próximas palestras, descobriremos como podemos usar a ferramenta de prototipagem para realmente apresentar nosso aplicativo a usuários em potencial ou a outras partes interessadas e membros da equipe de nossa equipe, investidores e assim por diante Antes de começarmos com um protótipo, queremos definir nosso fluxo de usuários E, claro, você pode fazer isso usando papel e caneta ou simplesmente definindo e escrevendo exatamente onde você deseja que os usuários acessem no aplicativo. Normalmente, em um protótipo, começamos com uma página inicial em que escolhemos a página inicial em que o fluxo do usuário começa e podemos ter fluxos de usuário diferentes Podemos ter um fluxo de usuário para um usuário conectado que começa na página de descoberta de destinos Podemos ter um fluxo de usuários para um usuário que ainda não se inscreveu, então vamos iniciá-lo na página de inscrição, que é o que vamos fazer Vamos montar um protótipo que inicie o usuário na página de inscrição. Em seguida, vamos duplicar a tela, fazer com que possamos realmente parecer que estamos preenchendo as informações, digamos, o e-mail e a senha. A partir daí, o usuário se inscreve e vai para a página de verificação, que novamente duplica essa página, parece que temos algum código de verificação digitado, continuar e acessar nossa página de descoberta de destinos Agora, em nossa página de descoberta de destinos, temos a opção de levar o usuário a essa página de Londres, Reino Unido, que já criamos. E também vamos nos aprofundar um pouco em como podemos realmente usar variáveis em nossa prototipagem Portanto, não importa em qual opção o usuário clique, pelo menos nas quatro primeiras aqui, porque o plano pago da Infigma atualmente só pode ter quatro modos, e vamos usar os Então, faremos com que fique na mesma página ou, na verdade, duplicaremos essa página E nessa página, sem precisar fazer cada cidade diferente, faremos com que as variáveis possam realmente fazer o trabalho por nós. Só para explorar isso, se você quiser ter essa opção, como você faria para configurá-la em seu protótipo E então vamos realmente reservar o quarto. Assim, quando o usuário acessa a página em que pode ver a página de detalhes do destino, ele pode navegar. E a partir daqui, eles irão em frente e reservarão um quarto de onde irão para a página de confirmação da reserva. E aqui, novamente, teremos outra cópia desta página com informações preenchidas e confirmaremos a reserva. Agora, há uma página que vem depois disso, que é para confirmar ou ver sua viagem confirmada. E nessa página, vamos nos divertir um pouco com as animações e ver como podemos realmente animar um bom cartão de reserva confirmado com alguns confetes em segundo plano usando animações e presentes em segundo plano usando animações Então, esse é o fluxo de usuários que vamos usar. Você pode fazer exatamente a mesma coisa no celular. Vou deixar isso como um exercício para você fazer. É exatamente o mesmo processo que vamos seguir. E antes de fazermos isso, o que vamos fazer é voltar na próxima seção e descobrir como podemos usar o Figma AI para realmente criar protótipos para 69. Faça protótipos com IA: Na verdade, o iGMA AI também pode nos ajudar a montar protótipos, examinando seus quadros e tentando entender como fazer conexões entre eles, e de como fazer conexões entre eles, tentando entender como fazer conexões entre eles, e de forma alguma é perfeito ou algo parecido, mas ajuda em projetos mais simples Portanto, se você tiver um projeto mais complicado, ele pode nem funcionar, mas você sempre pode tentar e, se não funcionar, você sempre pode revertê-lo ou corrigir as conexões Então, para acessá-lo, tudo o que você precisa fazer é acessar o painel de ação aqui ou a guia de ação aqui embaixo, e então você vê esse protótipo de criação E se você clicar nele, ele solicitará que você selecione alguns quadros de nível superior. Então, queremos selecionar alguns dos quadros mantendo pressionada a tecla Shift. Então, vamos escolher todos os nossos quadros aqui e, em seguida, podemos pressionar Command Enter ou simplesmente criar um protótipo Demorará um segundo e começará a misturar todas as conexões aqui E, como você pode ver, ele fez um trabalho muito bom. Ele já criou muitas conexões entre páginas diferentes. Portanto, ele sabe que, se você clicar em Inscrever-se, ele acessará esta página para a verificação. O mesmo que se inscrever com o número de telefone. E, a partir daqui, clique em Continuar, ele deve ir para Destination Discovery e, em seguida, clicando especificamente nesses dois cartões, levaremos você até a página de detalhes do destino. E vemos que, mesmo para o Bbton, ele realmente sabe como mandar o usuário de volta ou qual é o botão B. E se você clicar em qualquer um dos botões aqui, agora isso nos levará à página de reserva, embora isso não esteja correto. O que queremos fazer é que, se eles clicarem em Exibir disponibilidade, não queremos que isso leve o usuário até aqui. Queremos que o usuário realmente vá até esta seção de acomodação ou provavelmente no protótipo, não queremos que nada aconteça Também não queremos encontrar quartos para levá-los até lá. Isso é só para ajudá-los a encontrar quartos aqui. Então, basta clicar em uma dessas opções para levá-los a esta página. Vemos que temos nosso botão Voltar aqui. Assim, podemos realmente visualizar isso mesmo executando-o e vendo como é. Então, se eu clicar em Inscrever-se, vou para a verificação e continuo. Eu posso escolher este aqui, vai aqui. Incrível. Mas, novamente, temos essas conexões que estão erradas, então não queremos que elas cheguem lá. Queremos que a sala de livros realmente nos leve até lá. E enquanto você está no modo de visualização, em segundo plano, minha moldura está mudando apenas para me mostrar exatamente em qual quadro estou. E eu posso testar os botões traseiros também, e funciona. Não há animação nem nada parecido, então é como um protótipo básico montado, mas funciona E a partir daqui, ele não sabe para onde ir porque não há outra página depois dessa. Aqui, você pode realmente manter essas conexões ou clicar nas conexões individuais e remover essas conexões apenas clicando em menos aqui Então, se você não quer esses e esses estão errados, podemos alterá-los ou simplesmente removê-los aqui e depois dizer guarde. E se você o mantiver, todas essas conexões que FIM AI fez serão mantidas e você poderá usá-las em seus protótipos Agora, obviamente, não vou fazer isso porque também veremos como conectar manualmente como conectar manualmente esses quadros . Mas lembre-se de que você pode usar o FGM AI para reunir suas conexões entre as diferentes páginas, forma muito rápida e fácil Mas é claro que também estamos aqui para aprender tudo sobre como fazer isso sozinhos. E é por isso que voltaremos na próxima palestra para começar a duplicar alguns dos quadros e construir juntos um bom protótipo 70. Páginas com estado preenchido: Portanto, para essas páginas, como nossa verificação de inscrição, queremos duplicá-las e mostrar um estado preenchido E essa é sempre uma boa prática apenas para mostrar como seria o protótipo quando o usuário realmente preenchesse suas informações e parecesse mais Então, vou duplicar alguns dos quadros aqui que contêm textos, e eu simplesmente uso lá e arrasto a cópia E você pode simplesmente dar à sua moldura um nome diferente como talvez um traço preenchido ou algo parecido, apenas para diferenciar os dois E aqui, para nossas entradas, acabei de perceber que só temos um tipo de espaço reservado Não temos um tipo em que o texto seja realmente preenchido. Então, queremos corrigir isso com outra variante que nos permita que o texto fique no estado preenchido. Então, vamos fazer isso rapidamente. Então, vou expandir esse quadro de componentes mantendo o comando lá, trazendo isso um pouco à tona, nosso campo de entrada. E basta criar outra variante abaixo. E vamos chamar essa propriedade. Vamos clicar neste aqui. Basta movê-lo um pouco para baixo. Está muito perto de lá. E vamos chamar essa propriedade de um, fill e então podemos ter essa como falsa e essa como verdadeira. E a única diferença é que, para esse texto aqui, queremos fazer o texto 500. Então parece que é um texto preenchido. E então podemos simplesmente ir até aqui. Vamos escrever um exemplo de e-mail como max.do@gmail.com ou algo parecido, e então você pode clicar no campo e fazer o estado preenchido. E a mesma coisa com a senha, altere-a para preenchida. Parece que inserimos algumas informações. E então, para criar uma conexão entre esses dois, basta clicar duas vezes. Faça um protótipo para que, quando um usuário clicar em um desses campos, ele acesse esta página e pareça que ele preencheu as informações E você pode fazer isso simplesmente arrastando as conexões entre cada uma ou mantendo a tecla Shift pressionada para selecionar as duas Portanto, se o usuário clicar em um ou, você poderá desenhar uma conexão usando esse pequeno círculo Então, se você ver o círculo aparecer, é assim que você pode adicionar conexões. E então você quer simplesmente arrastá-lo para esse quadro aqui. Então, basicamente, por padrão, o gatilho está no clique. Portanto, sempre que o usuário clicar nesses campos, um ou ele navegará até a página do campo de inscrição E altere manualmente essas ações também. Você pode alterá-la para algumas opções diferentes que temos, que exploraremos, e então você também pode definir a página de destino. Mas como arrastamos a conexão manualmente para esta página e desenhamos o macarrão lá para que seja chamado para a tela, não precisamos mais fazer isso E a animação é instantânea, mas você tem algumas opções diferentes. Para esse tipo de página, você pode dissolver ou simplesmente instantâneo. Para algo assim, normalmente deixo no Instant. Basicamente, agora, se você apenas executar o protótipo na página de inscrição ou na visualização prévia, clicando em qualquer página, podemos escolher onde nosso protótipo começa Então, estou clicando no quadro de inscrição e, se você clicar neste botão de reprodução aqui, ele o apresentará ou você também poderá visualizá-lo, que acabamos de fazer na palestra anterior, mas a apresentação abrirá em uma nova guia como esta E aí está. E agora, se eu clicar nesses campos, parece que os arquivamos. Incrível. E agora, como duplicamos esta página, qualquer conexão que a página já tivesse, como o botão de inscrição, ainda funcionará e nos levará para a próxima página, que, é claro, essas conexões são do protótipo make que tivemos na última Então, vamos deixá-las lá, talvez nos livrarmos desta aqui, e você pode se livrar das conexões clicando nelas e clicando em Excluir. Então, deixaremos tudo o que já foi inventado por enquanto e, em seguida, exploraremos isso juntos sobre como fazer isso sozinho. Por enquanto, se quiser, você pode duplicar sua página de verificação, você pode duplicar sua página de reserva, e eu tenho um estado preenchido, que é o que eu também farei Então, à medida que você avança no protótipo, parece que também estamos preenchendo as informações Então, dedique um segundo para fazer isso e, na próxima palestra, continuaremos com o resto de nossas conexões 71. Dissolver animações: Então, aqui, agora queremos criar a conexão entre os botões e a página de verificação. Portanto, se você ainda não fez isso, crie uma conexão entre o botão de inscrição e estabeleça uma conexão com a página de verificação. Que eu já tenho aqui, e vai clicar em Navegar até a página de verificação e fazer isso instantaneamente sem uma animação. E a partir daqui, eu também tenho outra página. Então, clicando em qualquer lugar neste campo aqui ou em qualquer um desses campos em todo o quadro, podemos realmente estabelecer uma conexão com esse estado de campo. Parece que eles preencheram o código de verificação e, em seguida, clicando em Continuar, os levaremos para esta página. Agora, em seu protótipo, você também pode remover conexões desse botão Continuar, então eles precisam clicar nesses campos para primeiro preenchê-los e depois continuar Mas isso realmente depende de você. Você pode fazer isso totalmente ou pode pular isso Uma coisa boa sobre as interações é que, se você quiser fazer alterações rapidamente em qualquer interação que vá para a mesma página, você pode clicar nesse botão aqui, que selecionará todas as interações correspondentes, que agora são esses dois botões. Então, de repente, digamos que, para essa conexão, eu queira realmente dissolver, só para ver como ela se parece. Eu posso fazer isso daqui, e a animação agora se dissolverá. Então, parece que essa página meio que desaparece nesta página, o que é bom E você pode escolher diferentes curvas de animação, então você pode escolher a entrada fácil e pré-visualizá-la aqui para ver sua aparência ou suavizar, entrar e sair Agora, é um pouco difícil ver o que isso parece, então vou aumentar a duração só para mostrar a vocês. Então você vê que todos eles têm uma curva de animação ligeiramente diferente. E você sempre pode fazer um personalizado se quiser obter mais detalhes sobre como ele aparece. Eles também têm algumas predefinições como essa, que são boas principalmente para, por exemplo, movimentos em animações, e vamos explorá-las em um segundo Mas antes disso, vamos selecionar uma opção simples de atenuação e 300 milissegundos, que é o tempo necessário para a animação ser executada Só para pré-visualizar isso, vou mudar para minhas maquetes Então, agora, se eu clicar aqui e você continuar, haverá um pequeno desvanecimento, que é diferente de, por exemplo, ir desta página para esta página Tudo bem, certifique-se de ter essa conexão para que botão Continuar também acesse nossa página Destination Discovery E nesta página, na verdade, podemos fazer algumas coisas diferentes. Podemos escolher se, em nosso protótipo, queremos mostrar ao usuário um destino ou de e para, ou podemos simplesmente fazer com que ele clique em Londres, Reino Unido E a partir daqui, podemos escolher algumas datas para as quais o usuário reservará a viagem. Então, duplicaremos essa tela em apenas um segundo quando chegarmos a essa conexão Parece que o usuário escolheu algumas datas e, a partir daí, veremos a atualização do preço. E então, uma vez atualizado, podemos enviá-los para uma página de reserva que faça sentido, que corresponde a essas cinco noites, acomoda duas e assim por diante Mas antes de fazer isso, vamos voltar à nossa página de descoberta de destinos. Aqui também temos filtros e classificados por botão que queremos realmente dar vida ao nosso protótipo, já temos as molduras para ele se você não tiver as molduras, espere um segundo e desenhe-as Você quer que sejam quadros individuais e não apenas grupos. E agora eu tenho um quadro de layout automático para os dois, o que também é bom. Você pode ter um layout automático ou uma moldura real. Vamos voltar para a próxima seção para explorar como configurá-las como sobreposições Portanto, não precisamos realmente criar outra tela que mostre esses filtros sendo adicionados ao quadro. 72. Conexões de sobreposição: Palestra, aprenderemos uma nova conexão que podemos realmente fazer, chamada de conexão sobreposta Uma conexão de sobreposição basicamente permite que você abra outro quadro dentro do quadro em que você já está Portanto, no modo de protótipo, você pode abrir itens como menus suspensos, modelos e esses tipos de quadros dentro do quadro atual E isso torna mais fácil que você não precise duplicar quadros e ter um que tenha o modelo aberto ou fechado, e é muito simples criar essa conexão Digamos, queremos fazer isso com o botão de filtro aqui. Simplesmente clicamos até termos o botão do filtro. Então, quando o usuário clica no botão do filtro, queremos arrastar uma conexão para nossa lista suspensa de filtros aqui e E então nosso gatilho estará no clique. Então, quando o usuário clica nele, há vários gatilhos diferentes para os quais você pode alterar isso, mas não precisaremos disso Queremos que eles façam isso quando clicarem no filtro. Agora queremos a ação em vez de Navegar até, que é o que temos feito até agora, que leva o usuário de uma página para a outra. Queremos realmente mudar isso e selecionar a sobreposição aberta. E o que a sobreposição aberta fará é abrir essa moldura em cima daquela Então você vê que a sobreposição é atualmente uma lista suspensa de filtros, que é o que selecionamos Por padrão, a posição é centralizada, o que significa que ela estará no centro da página, o que não é o que queremos E temos várias opções diferentes aqui, então no canto superior esquerdo, no centro superior, etc., ou podemos escolher manualmente onde o quadro suspenso filtrado será aberto em nosso quadro será aberto em Se você clicar nele, verá aqui onde a sobreposição será aberta e você poderá realmente movê-la Assim, você pode movê-lo logo abaixo do botão do filtro com talvez um pouco de preenchimento entre eles (dez pixels) E agora ele abrirá exatamente aqui, além de todo o resto. Agora, temos algumas opções diferentes. Podemos escolher adicionar um plano de fundo. E se você escolher um plano de fundo, então no protótipo, tudo o mais que não é esse filtro Então, todo o resto aqui temos um fundo, que é 25% transparente, que é 25% pacto com um preenchimento preto, mas não queremos isso Só queremos que não haja antecedentes. E então podemos escolher se o usuário clica em qualquer outro lugar fora do quadro do filtro, isso fechará a sobreposição E sim, queremos isso porque isso faz sentido, e a maioria dos aplicativos tem uma interação semelhante. E então podemos escolher como ele se abre. Então, podemos nos dissolver. Podemos nos mudar para cá. E se você escolher entrar, o filtro virá de lados diferentes. Assim, podemos fazer com que a moldura do filtro apareça da parte inferior da tela ou da direita da tela. Não é muito comum ver isso, e vamos explorar isso em um segundo para ver como será. Então, por enquanto, vou mantê-lo como movimento, mas você verá que esse não é realmente o tipo de movimento padrão para este caso. Move In é ótimo para coisas como alertas ou caixas modais e assim por diante E então eu vou seguir em frente e mostrar como isso se parece Então, se você voltar, agora, se você clicar nesses filtros, ele abrirá. Na verdade, ele se moverá de cima para baixo ou de baixo para cima. E se você ver o que parece, ele desaparecerá. Mas, novamente, essa não é uma interação comum ou uma animação comum que você verá. Você pode fazer isso instantaneamente ou simplesmente dissolver. Vamos fazer um instante para ver como isso parece, e parece muito mais natural. momento, dentro do filtro, você não pode realmente interagir com nada, nem mesmo com os filtros aplicados ou limpar todos os botões, mas você pode mudar totalmente isso para que possa tê-lo. Então, se você clicar em uma determinada duração da viagem de dica ou talvez em algo aqui, as coisas mudarão. Então, não vamos complicar muito porque , você sabe, uma lista como essa, você realmente não quer que seja tão complicado no protótipo Mas faremos uma coisa. Faremos com que, se eles clicarem nos filtros aplicados, também fechemos a sobreposição Agora, se você clicar aqui, no botão para aplicar filtros, se você tentar arrastar uma conexão, verá que há dois tipos de conexão diferentes que aparecem aqui e podemos escolher rapidamente qualquer um deles. Podemos escolher B aqui, o que é bom para conexões de navegação ou podemos escolher a sobreposição fechada, que é o que queremos Então, agora o que dissemos é que, quando eles clicarem em Filtros aplicados, fechem essa sobreposição Se eu excluir este, também posso criá-lo simplesmente indo para o lado direito aqui e fazendo mais uma ação de clique e fazendo mais uma ação de clique alterando isso para fechar a sobreposição Aí está. Agora, se eu clicar em NAppliedFilters, ele também fechará a sobreposição e, se eu clicar em qualquer lugar externo, ele também fechará A lacuna é um pouco demais aqui. Então, se você quiser fazer essas alterações rapidamente, basta clicar na interação que você já criou e, em seguida, movê-la um pouco para cima e usar as teclas de seta para mover as coisas um pouco para baixo ou para cima. E acho que esse espaçamento faz mais sentido aqui. Portanto, você também pode fazer com que as sobreposições também sejam trocadas Então, só para mostrar que, para o tipo 1, vou criar outro segurando Alton para duplicá-lo E então eu vou fazer com que este fique em negrito, então é selecionado, e então eu vou colocar a marca de seleção aqui também e depois removê-la daqui. E para este, eu vou tirá-lo do negrito. Portanto, parece que escolhemos a popularidade agora. Então, em nosso protótipo, queremos criar uma interação com esta página e clicar em vez de Navigate two, vamos trocar a sobreposição Então, em vez disso, a sobreposição será trocada por esta aqui, e será instantânea Então, agora vamos criar outra conexão de sobreposição entre a ordenada por, que por padrão é definida como relevância, arrastar até aqui e, em seguida, vamos fazer OnClick em vez de Navigate two, E, em vez de centralizá-lo novamente, queremos escolher manualmente onde ele é exibido. Então, basta escrever abaixo e ordenar com dois pixels abaixo, vamos deixá-lo ligado instantaneamente e depois fecharemos ao clicar fora. E agora vamos ver como isso vai ficar. Eles clicarão nele. Vou abrir por relevância. E então, se eu clicar por popularidade, ela realmente trocará a sobreposição por popularidade Mas eu realmente não posso mais voltar à relevância , a menos que entremos aqui e também criemos uma conexão entre esses dois e, digamos, troquemos a sobreposição Então, quando eu clico em Relevância, a sobreposição volta para relevância e, em seguida, popularidade Veja, você pode realmente escolher qual classificação será exibida aqui E agora você está pensando: Ok, isso é legal, mas esse texto aqui, onde diz ordenado por relevância, não está mudando Então, podemos realmente fazer com que a Figma entenda quando fazemos interações como essa e mudamos a classificação para popularidade Podemos mostrar popularidade aqui? Porque isso seria muito legal. Então é aí que as variáveis entram quando estamos trabalhando com nosso protótipo Então, por que não voltamos para a próxima palestra para aprender como usar variáveis e definir variáveis para variáveis e definir variáveis que possamos tornar nosso protótipo ainda mais dinâmico 73. Variáveis em protótipos: Palestra, vamos criar uma variável que representará o texto dentro desse botão aqui, que seja relevante no início E então, se eles clicarem nesse menu suspenso e mudarem para, digamos, popularidade, queremos que o texto ou a variável mude para popularidade. Então, para fazer isso, vamos criar uma nova variável aqui. Então, vamos entrar em nosso modo de design, clicar nas variáveis locais. E se você não vê variáveis locais, certifique-se de que não tenha nada selecionado. Basta clicar em qualquer lugar externo até ver as configurações gerais da página e, em seguida, abrir as variáveis, e criaremos uma nova coleção que chamarei de geral. Então, para algo assim, podemos simplesmente manter essas variáveis em uma coleção geral. Realmente não importa como você chama isso. Vamos criar uma variável e usar a string one. E para este, você não precisa de modos diferentes. Portanto, mesmo na versão gratuita do Figma, você também pode configurar isso em seu protótipo Vamos chamar isso de um tipo por. Você pode nomeá-lo como quiser. E para o valor, queremos alterá-lo para relevância, que é a classificação original por configuração. Agora, o único desafio aqui é que, porque temos apenas um texto em nossos botões, não podemos vincular parte de um texto a uma variável. Agora, o ideal é que o texto ordenado por seja um texto separado da relevância Portanto, precisamos que essa relevância seja sua própria linha de texto e não junto com a ordenada por Então, só para mostrar como isso funciona, vou fazer algo que geralmente não recomendo fazer em seu projeto, mas, neste caso, vou clicar com o botão direito do mouse e desanexar a instância desse botão Então, agora esse botão não está mais seguindo a instância do botão. Você pode ver que agora tem uma borda azul , ao contrário desse botão de filtros. E aqui no painel Layers, agora é apenas AutoLayouFrame sem conexão com o componente de botões que temos Portanto, se você fizer alguma alteração no componente do botão, isso não será refletido nesse botão, mas isso também nos permitirá ajustá-lo ao nosso gosto Para um caso como esse, o que eu quero fazer é cortar o texto por relevância e duplicá-lo pressionando o Comando D. Agora, o espaçamento para esses dois é um pouco demais, então vou segurar a tecla Shift A enquanto tenho os dois selecionados E em vez de dez pixels, talvez possamos fazer quatro pixels entre eles. E para o segundo texto, agora o que eu quero fazer é aplicar uma variável a esse texto para que esse texto pegue o valor do texto ou da string da tabela de variáveis que temos. E você pode fazer isso indo até aqui para aplicar a variável ao lado do texto e , em seguida, selecionar classificar por. E agora, por algum motivo, mentalidades definem variáveis ou valores, e isso porque, quando escrevi relevância aqui, elas não salvaram Mas só para mostrar como isso funciona, se você substituí-lo por relevância e pressionar Enter, aí está. Agora mudou para relevância. Então, agora temos esse texto vinculado a essa variável, qual quer que a alteremos, ela mudará aqui automaticamente. Agora, o que queremos fazer é que, quando o usuário clica em popularidade, também queremos definir a classificação da variável como popularidade E aqui, vice-versa, queremos definir a classificação por variável como relevância. Então, vamos tentar isso. Vamos clicar em popularidade. E vemos que já temos uma interação que, ao clicar troca a sobreposição por essa lista suspensa que tem a popularidade selecionada, mas você também pode ter uma interação extra se clicar aqui e em uma nova Então, nessa interação com um clique, podemos tê-la, então também fazemos outras coisas. Então, neste caso, o que queremos fazer também definir uma variável. E em nossa variável set, queremos escolher o texto que acabamos de criar e queremos alterá-lo para popularidade, que é apenas uma variável de string. Então, vamos clicar em String literal e fazer essa mudança na popularidade Agora, a ação é definir a variável classificar por popularidade quando eles clicarem em popularidade, e podemos ver isso aqui. E podemos adicionar mais interação. Então, ao clicar, mais coisas acontecem. Não precisamos fazer nada a partir daqui. Isso é tudo que precisamos fazer. E então faremos exatamente a mesma coisa, mas quando eles clicarem em Relevância. Então, vamos clicar na interação aqui, escolher mais aqui, definir a variável, encontrar a variável ordenar por, ou você pode pesquisar rapidamente por ela, classificar por e pressionar Enter e escrever relevante. Então aperte Enter e pronto. Então, agora vamos pré-visualizar isso. Se acessarmos nossas maquetes, podemos clicar em classificar por e alterá-las para popularidade Então, isso mudou aqui agora para popularidade. Você pode clicar fora, navegar para outra página, voltar e ainda está classificado por popularidade Então, podemos ir até aqui e depois alterá-lo para relevância. No entanto, um problema é que quando fechamos isso e o abrimos novamente, abrimos automaticamente aquele que tem a relevância selecionada. Portanto, não é tão dinâmico quanto gostaríamos que fosse , então há uma maneira de fazer isso funcionar se você realmente transformar seu menu suspenso de classificação em um componente. Então, vou explicar isso rapidamente na próxima palestra. 74. Variáveis em componentes: Solucionamos um pequeno problema com nosso protótipo, em que abrimos a classificação por popularidade e depois a fechamos, diz popularidade aqui, mas a abrimos novamente, e é relevante Então, por que isso está acontecendo? Isso porque, no momento, estamos abrindo a sobreposição com a relevância selecionada Então, como fazemos essa dinâmica para que até mesmo essa parte funcione? Bem, podemos usar componentes para isso. Então, para fazer isso, o que vou fazer é transformar esse menu suspenso em um componente usando o Antigo Comando K, e agora é um componente. Vamos nos livrar daquele com a popularidade selecionada por enquanto e, em seguida, criaremos diferentes variantes com todos os diferentes itens selecionados. Vamos voltar ao modo de design. Variante de propriedade, e vamos chamá-la de selecionada. Agora, essa parte é muito importante. Você quer soletrar exatamente como você escreve a variável. Então, em nossa variável, também temos relevância, assim como ela é digitada aqui com R. A ortografia é muito Agora vamos adicionar outra variante. Vamos arrastar isso até aqui. E agora vamos chamar isso de. Você adivinhou a popularidade. Novamente, não tenha pressa, verifique se a ortografia está correta Desta vez, vamos selecionar a popularidade colocar a marca de seleção e abrir o negrito desta Nós vamos fazer outro. Este vai ter um preço baixo demais. E vou literalmente copiar o texto daqui e defini-lo como selecionado. Vamos colocar em negrito, trazer a marca de seleção aqui, excluir esta E vamos fazer mais dois, um, dois. Este com preço alto a baixo em negrito, classificações, e eu vou tirar o negrito neste, tirar o negrito deste, cortar a marca de verificação, trazê-lo Corte a marca de verificação, traga-a aqui. Então, agora temos uma variante para cada uma selecionada. Só precisamos renomear os outros, então certifique-se de renomear este de alto para baixo Pressione Enter e esta obter classificações exatamente como está digitada aqui Pressione Enter e aí está. Agora, nossa conexão foi perdida porque você não pode criar uma conexão de sobreposição diretamente com os componentes Você precisa de uma instância disso. Então, copiaremos uma instância aqui para nossa lista suspensa. E o que você quer fazer agora é criar uma conexão com este. Mas antes de fazermos isso, dentro de seus componentes, você também pode criar conectividade. Os protótipos também podem ser configurados dentro de seus componentes. Por exemplo, aqui, temos popularidade ao clicar em popularidade, vemos que definimos variáveis ordenadas por popularidade, mas também queremos mudar e selecionar popularidade. E o que isso fará é mudar entre as variantes. Então, estamos pedindo à Figma que também altere a sobreposição para popularidade E agora vamos ter que fazer isso para todos os diferentes. Então, vou deixar isso como uma tarefa para você fazer. E, por enquanto, vou apenas fazer a popularidade e a relevância. Então, agora vamos fazer isso por relevância e também vamos definir a variável Classificar por como relevância. E aqui está, agora temos a popularidade funcionando, e temos a relevância funcionando. Então, agora o que queremos fazer é quando o usuário clica em Classificar por, queremos abrir a sobreposição Então, para classificar agora com um clique, queremos que ele abra essa sobreposição, que é a instância desse menu suspenso de componentes Queremos que seja manual e , em seguida, escolha logo abaixo, e deixaremos todo o resto como está. Agora, se você acabou de fechar o protótipo, abra esta página novamente para que possamos redefinir tudo Porque toda vez que você executa seu protótipo, você está redefinindo suas variáveis Agora podemos definir a popularidade. Mudou, mas ainda temos o problema. Como você pode ver, se eu mudar isso para popularidade, isso mudará para popularidade. Ela permanece como popularidade e, se eu mudar para relevância, ela muda para relevância e permanece relevante. E você também pode fazer isso com seus outros . E adivinha? Se você mudar para popularidade, que não é a padrão, clique aqui e volte. Ainda está em popularidade. Vamos ver o que está acontecendo aqui nos bastidores. O que está acontecendo é que você está abrindo essa instância e Figma se lembra da última vez que o componente foi fechado Portanto, lembre-se de que a última vez que você abriu esse componente, você estava em popularidade. É por isso que ele abre com a variante selecionada. Agora, se você for para o modo protótipo, se for para a interação, há esse gerenciamento de estado aqui Na verdade, você pode redefinir o estado do componente. Então, toda vez que você clica para abrir essa sobreposição, o estado do componente é redefinido Então, se você fizer isso, agora, se você abri-lo, ele voltará à relevância. Então, tecnicamente, isso aqui não está realmente vinculado às variáveis, mas podemos fazer outra coisa para torná-lo muito mais inteligente e vinculá-lo às variáveis, indo para o modo de design e escolhendo qual delas está selecionada Escolha uma específica ou podemos aplicar a variável com ordenar por. E agora, seja qual for a variável que selecionamos, isso mudará com base nisso. Então, só para mostrar rapidamente aqui, se eu mudar o valor disso para popularidade, de repente, aqui temos a popularidade selecionada. Se eu selecionar preço, baixo para alto, com exatamente a mesma grafia, este será selecionado Então, por padrão, é relevância. Agora, se você tiver um erro de digitação ou digitar algo aleatório, por padrão, ele apenas selecionará o primeiro, mas queremos deixá-lo relevante, mas você ainda quer ter certeza de que não está redefinindo o estado porque, não importa o que aconteça, ele sempre será redefinido para o primeiro Então, agora esse menu suspenso é completamente inteligente e está vinculado às nossas variáveis 75. Interação com o mouse: Já em nosso protótipo, usamos a interação com um clique para que o gatilho esteja sempre no clique, o que significa que o usuário clica um botão ou clica em uma determinada coisa e algo acontece Existem outros gatilhos que podemos realmente usar. Um deles que eu quero configurar agora com você é a interação com o mouse Então, enquanto você passa o mouse sobre um botão, normalmente em um site, você recebe alguns comentários para ver que está passando o mouse Mesmo quando estou aqui, mouse sobre uma determinada guia, você pode ver que a guia está destacada em Assim, você pode ver que está passando o mouse sobre ele e está prestes a clicar e está em um Então você pode fazer a mesma coisa com seu botão aqui. Eu quero ir ao painel de design, configurar uma nova variante e chamar essa propriedade de Hover Por padrão, vou defini-lo como falso. E então vou arrastar isso um pouco para que tenhamos espaço. Vamos duplicar todos os botões diferentes que temos, então criamos uma interação de passar o mouse para todos E vamos mudar a opção “passar o mouse aqui” para verdadeiro. Portanto, agora temos uma nova propriedade de foco com false e true. Esses serão falsos, então não serão pairados, e esses serão pairados E, normalmente, o que queremos fazer é definir uma cor um pouco diferente, mais escura ou mais clara Então, para este, vamos fazer um pouco mais escuro, talvez o primário 800 ou, na verdade, um talvez o primário 800 ou, na verdade, pouco escuro demais, talvez o primário 600 E então, para nossos botões brancos aqui, queremos fazer talvez uma cor cinza. Então, apenas um pouco mais escuro. E também para o traçado, queremos fazer um traçado cinza, então vou mudar o traçado para ficar mais cinza. Então, essas serão as interações de passar o mouse. E agora só temos que criar a interação indo até o painel do protótipo e criando conexão entre esse botão e este aqui Mude para Hover e queremos escolher uma boa animação de dissolução E em vez de enclick, queremos passar o mouse sobre a parede. Enquanto o usuário estiver passando o mouse sobre o botão, ele mudará para este aqui e, quando ele não estiver mais passando o mouse, ele voltará automaticamente para Pensando bem, isso pode ser uma diferença um pouco pequena, então vou fazer com que talvez seja a primária 700. Lá vamos nós. E agora vamos fazer exatamente a mesma coisa, mas entre os botões diferentes. E o Figma se lembrará das últimas configurações que você definiu em sua interação Então, com exceção de mudar esta para baleia pairando, a mesma coisa entre essas, enquanto paira, e por último, de mudar esta para baleia pairando, a mesma coisa entre essas, enquanto paira, e por último, essas enquanto paira. E agora, em todo o projeto, nossos botões têm interação com o mouse e são aplicados em todos os lugares para todos os botões Agora, se você se lembra desta aqui, separamos a instância desta É por isso que você não tem uma interação para isso. Mas se você for a qualquer lugar do seu projeto em que esteja usando seus botões, agora há uma interação com o Hubbard É hora de concluir lentamente nossas conexões. Então, estamos trabalhando um pouco na página Definir descoberta de destino e, em seguida, em nossa página de detalhes do destino, vamos voltar na próxima aula para começar a criar mais interações na página de detalhes do nosso destino e, lentamente, concluir nosso protótipo 76. Role para a interação: Página de detalhes do destino, já temos uma conexão criada para destinos B a A. Se você não tiver uma criada pelo FIC MI, sempre poderá adicionar uma nova interação e clicar em W para escolher Action Back. O que o Action Back faz é enviar o usuário do protótipo de volta exatamente para onde ele veio Então, se eles vieram dessa página e clicaram na página de detalhes do destino, ela voltará para esta página, veio de outra página do protótipo voltará exatamente para aquela página Então, nós já criamos isso. Para este botão aqui, ver disponibilidade, queremos realmente fazer com que, ao clicar , o usuário role para baixo até a seção de acomodação, porque é aí que o usuário realmente executa a ação final de escolher seu quarto e depois reservar Então, podemos criar uma interação aqui. Vamos escolher clicar em Rolar dois, e essas seções já foram criadas. Podemos alterar o deslocamento aqui no pergaminho, que veremos em apenas um segundo, e depois podemos escolher se é instantâneo ou animado Acho que a animação fica melhor. Então, agora aqui, se eu clicar em Exibir disponibilidade, ele rola o usuário até a acomodação, o que parece legal Agora, aqui no topo, poderíamos usar um pouco mais de espaçamento para que seja como o verão aqui E para fazer isso, podemos usar esse deslocamento. Se definirmos um deslocamento negativo, o usuário será ligeiramente deslocado Então, agora, se fizermos isso de novo, teremos um pequeno preenchimento de 20 pixels aqui em cima, o que é muito melhor É assim que você pode criar duas interações de rolagem. 77. Criação de variáveis de produtos: Eu queria que criássemos produtos diferentes usando modos para que nossa página de detalhes do destino fosse dinâmica. Mas achei que seria melhor criar uma tela de reserva dinâmica ou uma página de reserva que mudará com base no quarto real que você selecionou E para fazer isso, usaremos duas propriedades para nossas variáveis. Teremos um para o quarto selecionado. Então, escreveremos qual quarto selecionamos ou qual tipo de quarto, em vez disso, e então teremos uma propriedade pelo preço total. E aqui, você pode notar que eu já preenchi algumas dessas informações, então alterei esses campos para preenchido é igual E então eu escrevi alguns exemplos de datas aqui, para que correspondam à próxima tela onde temos cinco noites e dormimos duas, e tudo isso é uma combinação entre as duas Então, sinta-se à vontade para reservar um segundo para fazer isso. E então faremos com que, quando eles clicarem em Reservar quarto, dependendo de qualquer um deles, quando acessarem esta página, o preço aqui seja dinâmico, então ele mudará com base no quarto selecionado e, em seguida, altere-o a partir daí Então, agora queremos configurar duas variáveis diferentes em nossa coleção geral, mas não importa onde você as armazena. Vamos criar uma variável de string chamada Sala selecionada. E então este mudará para qual sala você selecionou. E, por padrão, vamos deixá-lo para o quarto duplo. Portanto, esse é o padrão. E então queremos ter outra variável, uma variável numérica, desta vez chamada preço total. E, por padrão, vamos defini-lo 80 vezes 5400. Então esse é o preço total de $80 por noite vezes cinco noites E agora, nesta página, temos esse cartão de reserva aqui, que não é um componente, mas queremos realmente transformá-lo em um componente pressionando o comando Alt K. Vou apenas trazê-lo para fora daqui Então, eu arrastei o componente principal de lá e o substituí por uma instância do cartão da sala E então vamos criar uma variante para as diferentes salas. Então, adicionaremos uma variante com a propriedade chamada quarto selecionado e teremos duas ou três diferentes. E nós os chamaremos adequadamente. Então, teremos um quarto duplo. M então temos um quarto queen, então teremos um quarto king. E então essas duas imagens, vou segurar o Command Alt C e selecionar essa imagem usando o comando e , em seguida, o Command Alt V para colar isso lá. A mesma coisa aqui. E agora só precisamos alterar o preço de cada quarto 80, 101, 20, então este deve custar $80 por noite Este deve ser 100, o que é, e este deve ser 120. Agora temos um diferente para cada quarto, e queremos mudar isso para um quarto duplo, que é exatamente o que temos aqui. Queremos mudar a propriedade deste para um quarto queen size. E então este para o quarto King. Lá vamos nós. Agora podemos realmente escolher qual sala será selecionada a partir daqui e vamos realmente aplicar a variável para realmente aplicar a variável que, se essa variável mudar, digamos que ela mude para quarto queen, isso aqui também mude. Mas eu vou simplesmente ordenar que Z volte para o Twin Room. A única outra coisa que precisamos fazer é mudar isso para a variável de preço total que criamos e, para essa, faremos isso na próxima palestra 78. Preço total dinâmico: Queremos que esse preço total seja vinculado à variável local cujo preço total acabamos de criar. Estamos usando esse botão aqui. Mas, na verdade, queremos separar a instância para que possamos criar um botão personalizado para nós mesmos Então, vou comandar D para duplicar esse texto. Basta colocar o cifrão lá, e então eu vou comandar D mais uma vez, e desta vez, vou ter apenas o dólar lá. E desta, vou remover o cifrão, remover o dólar e o espaço. Então, temos essas três camadas de texto individuais e vamos pressionar Shift A. Agora, o espaçamento entre esses 500 e USD pode ser maior Então, vou definir automaticamente o cifrão e o número, pressionar Shift Enter para selecionar o principal e alterá-lo para talvez quatro pixels. Lá vamos nós. Agora, esse número 500, vamos mudar o texto para que ele aplique a variável do preço total. E então vou copiar esse botão e excluir o antigo que temos. Lá vamos nós. Então, agora esse botão de reserva confirmada é realmente dinâmico e muda com base nesse preço total variável. Mas o que precisamos fazer é fazer duas coisas. Aqui, vamos atualizá-los com os preços reais. Então 80 vezes cinco é 400, 100 vezes cinco, 500, 120 vezes cinco é 600. Então, isso realmente faz sentido. E então, quando o usuário clicar em cada botão, atualizaremos essa variável de preço total e escolheremos o quarto selecionado Então, vamos fazer o protótipo. Nós vamos mudar isso. Então, clique em Navegar até a página de reserva. Isso é bom. Mas também vamos adicionar a variável definida e vamos definir duas variáveis. Um deles será o preço total. Defina isso para 400. Se ainda não estiver definido como 400, defina a variável, a sala selecionada, escreveremos quarto duplo e, em seguida, criaremos a mesma interação aqui com um clique e, em seguida, definiremos essas duas variáveis, a sala selecionada como quarto Queen e também a variável definida, totalizando 500. Por fim, para o quarto king, vamos criar essa conexão Defina o quarto variável selecionado como quarto King. Defina o preço total para 600, aí está. E agora isso deve realmente mudar com base no quarto que selecionamos automaticamente, e os preços também devem mudar. E podemos ver isso em ação. Se voltarmos aqui, clique em Jogar aqui ou em Apresentar. Este aqui, temos o quarto duplo, 400 USD, este aqui. Encontramos um problema em que o quarto realmente não estava mudando. Isso se deve ao fato de que, quando adicionamos essas alterações variáveis, já havíamos acessado a página de reserva Então, na verdade, não estávamos fazendo nada mudando a sala selecionada. Portanto, o FIGMA completa as interações em ordem desordenada de cima Portanto, precisamos colocar o Navigate two até o final e fazer isso somente quando ele terminar de alterar quarto selecionado e o preço total para os valores adequados A mesma coisa para este botão aqui. Queremos ir até aqui, alterar a navegação para ficar totalmente na parte inferior e, para esta aqui, alterar a navegação para até a parte inferior. Então, agora, se voltarmos, o quarto duplo, temos o quarto duplo aqui, 400 USD. Para o quarto queen, temos o quarto queen aqui, 500 USD, do quarto king, temos o quarto king aqui e 600 USD. E fizemos tudo isso sem precisar criar várias telas de reserva. É apenas aquele que muda dinamicamente com base em qual você clica E agora temos um preço total que também é dinâmico. Podemos até copiar esse botão para que ele também corresponda ao nosso outro. E se você quiser este aqui, podemos simplesmente alterar o preenchimento para ser o mesmo dos outros. Então, agora, quando vamos para qualquer sala, os dois botões estão mostrando o mesmo preço. Então isso é ótimo. E algo que seria muito legal está nesta página se também pudéssemos adicionar os complementos à viagem e ver o preço total refletido com esses complementos adicionados Vamos voltar para a próxima palestra para fazer isso juntos. 79. Lógica condicional e operações: Agora, esses complementos, perfeitos para sua viagem, não têm preços, então vamos apenas adicionar alguns preços aleatórios a eles. Então, para este aluguel de carro, faremos 300, e depois para as atividades divertidas, faremos 150 e, em seguida, seguro de viagem completo, talvez 100. Aí está. Vou copiar esta seção aqui também e substituir essa outra seção que tenho pelos preços adicionados. Este é para o estado preenchido. Agora, o que queremos fazer é que, quando eles clicarem em Adicionar à sua viagem aqui, queiramos fazer com que esse preço também acrescente esse preço aqui à viagem. Também queremos colocar uma lógica condicional para que isso não aconteça várias vezes. Isso acontece apenas uma vez e, depois de adicionado, não queremos que o usuário o adicione várias vezes e apenas uma vez, e pronto. Agora, outra coisa adicional que vou deixar você fazer depois disso é que, depois que o usuário clicar em adicionar à sua viagem, você poderá criar outra variante aqui em que essa adição à sua viagem será removida da sua viagem , caso ele já a tenha adicionado E então você pode fazer exatamente a mesma lógica que vamos fazer, mas o contrário, então ele remove esse valor do preço total. Então, em nossa variável definida, também podemos definir a lógica. Então, vou clicar duas vezes para clicar nesse botão de viagem do ADT e, abaixo dos protótipos, adicionarei a interação com um clique E para a ação, vamos definir a variável e encontrar o preço total. E vamos novamente encontrar o preço total. Então, agora estamos definindo o preço total, por si só. E então temos algumas operações aqui para que possamos fazer uma adição. Mais 300, e eu vou escrever 300 aqui. Então, isso significa que, qualquer que seja o preço total nesta página, adicione 300 a ele. E como esse número e esse número estão vinculados a essa variável, eles mudarão automaticamente para nosso preço total. Se voltarmos aqui, agora eu clico, temos um total de 500 USD. Se eu clicar em sua viagem, isso se tornou 800 USC em ambos os lugares Mas, como você pode ver, eu posso continuar fazendo isso e o preço continua subindo e subindo, mas não deveria ser assim. Isso só deve acontecer uma vez. Então, para fazer isso, vou fechar isso para redefinir minhas variáveis. E o que vamos fazer é abordar aqui o que é chamado de condicional Agora, essa lógica condicional nos permitirá escrever se as declarações, que são simplesmente maneiras de dizer, se uma determinada coisa é verdadeira, apenas a executam e, caso contrário, fazem outra coisa Então, isso fará sentido em apenas um segundo. Agora temos essa condicional escrita aqui, e nosso preço total definido está fora dela Então, o que queremos fazer é escrever forma que a condição seja se. Mas, no momento, não temos realmente nada a ver com o fato o usuário já ter adicionado aluguel de carro à viagem ou não. Então, para fazer isso, o que queremos fazer é configurar três novas variáveis em nossas variáveis locais. Janela aqui, vamos fazer com que sejam booleanos, para que possam ser verdadeiros ou falsos E, por padrão, vamos deixá-los falsos. A outra será uma atividade divertida, acrescentou. Vou ligar para o seguro de viagem adicionado e deixar como falso. E agora quero que , quando o usuário clicar nesse anúncio de sua viagem, a variável apropriada se torne verdadeira E então, se isso já for verdade, não permite que o usuário adicione mais $300 à viagem porque ele já a adicionou Então, podemos acessar esse botão aqui novamente, ir para o protótipo e fazer com que, se eu for escrever a condição, acrescente o aluguel de carros Então, estamos vendo que o bullying que acabamos criar para o aluguel de carros adicionado é igual a verdadeiro. Portanto, se o aluguel de carro adicionado for verdadeiro, o que, por padrão, é falso, então, agir, simplesmente não faremos Vamos deixar em branco para que nada aconteça. Mas em outros casos , em outras palavras, se for falso, vamos arrastar esse preço total definido para o preço total mais 300 que acabamos de criar para a declaração s. Então, o que isso significa é que, se o aluguel de carro adicionado for verdadeiro, não faça nada porque já foi adicionado, mas se não for verdade, então eles não têm um aluguel de carro adicionado, então, nesse caso, vá em frente e adicione-o ao preço. Mais uma coisa aqui é que precisamos realmente alterar essa variável adicional de aluguel de carros. No momento, não estamos definindo isso como verdade. Mas aqui, quando definimos o preço total como preço total mais 300, também devemos adicionar outra variável definida, e esta definirá o aluguel do carro como verdadeiro. Então, vamos definir o preço total e, em seguida, vamos dizer que o aluguel de carros adicionado agora é verdadeiro. Agora, se executarmos isso mais uma vez na página de detalhes do destino. Assim, podemos selecionar o quarto, digamos, quarto queen. Temos nosso quarto queen size, 500 USD no total. Vamos adicionar um aluguel de carro e pronto. Se eu clicar em um clipe, você verá que nada está acontecendo. Não estamos adicionando mais a esse preço. Já foi adicionado. Aí está. E agora, deixarei isso como uma tarefa se você quiser criar outra variante para removê-la de sua viagem para que você possa alternar entre essas duas variantes E nesse caso, se você acabar fazendo isso, você pode fazer isso aqui, quando você tiver seu aluguel de carro adicionado igual a verdadeiro, já que quando você tiver seu aluguel de carro adicionado igual a verdadeiro, seu botão agora dirá removido de sua viagem, você pode realmente seguir em frente e fazer exatamente a operação oposta Você reduzirá o preço total para o preço total -300 e seguida, adicionará o aluguel de carros novamente às quedas Assim, você pode continuar alternando entre menos e mais. Então, vou deixar isso como uma tarefa se você decidir fazer, mas não precisa E, claro, você pode aplicar exatamente a mesma coisa nos outros dois botões. E eu vou deixar isso também para você, se você quiser fazer isso. Eu vou fazer isso no meu projeto e, se você quiser, você sempre pode encontrar o link do meu projeto para revisar como eu fiz isso. Então, agora temos uma página de reserva realmente totalmente dinâmica. Está ótimo. Voltaremos na próxima palestra para criar uma página de agendamento confirmada com algumas animações interessantes Então, vamos fazer isso juntos na próxima palestra. 80. Elementos fixos: Falha. Tudo em nosso protótipo é rolável, que significa que tudo rola conforme Mas há certos elementos que queremos fixar na tela. Por exemplo, esta barra de navegação aqui, e também quando você vai para esta seção aqui, queremos que essa coisa seja fixada no lado em que o usuário rola Faça isso, é muito simples. Tudo o que você precisa fazer é selecionar os elementos em seu protótipo que você deseja corrigir E, de fato, agora, se eu tiver apenas uma barra de navegação selecionada, posso fazer essa alteração em apenas uma barra de navegação, mas o Figma facilitou muito o uso das camadas correspondentes selecionadas Portanto, selecione todas as camadas correspondentes nesta seção, que também são todas essas barras de navegação nas outras páginas. Assim, podemos aplicar isso em todas as páginas, ir até o painel de protótipos e mudar de posição Em vez da rolagem padrão com o pai, altere-a para fixa. Então, agora o que acontecerá é não importa onde o usuário role, essa barra de navegação superior sempre o seguirá e permanecerá no E também queremos fazer exatamente a mesma coisa com esse cartão. Então, podemos mudar isso para fig devido ao fato de que ele faz parte desse contêiner pai. Então, tudo o que precisamos fazer é recortar isso e colar em todo o quadro. Dessa forma, podemos colocá-lo manualmente onde quisermos. Assim, podemos escolher onde queremos, tipo, aqui mesmo. 48 pixels da direita, e agora podemos escolher fixo. Portanto, está sempre corrigido. E pode parecer melhor se for um pouco maior. Lá vamos nós. Isso parece muito melhor. Portanto, não importa aonde o usuário vá, essa parte está sempre apostando, para que ele possa confirmar a reserva de qualquer lugar Então é assim que você pode fixar seus elementos no protótipo. Agora, estamos na parte divertida que voltaremos e aprenderemos como podemos realmente aplicar o botão de reserva confirmada e depois mostrar uma pequena animação. 81. Animação inteligente: Temos três tipos diferentes de animações que vimos. Há um instante em que estamos usando, exploramos o Dissolve. Já exploramos como usar o move in. Agora, há esse outro chamado Smart Animate, e o que ele faz é incrível Ele analisa dois quadros e tenta criar uma animação automaticamente entre eles, e é por isso que é chamado de Smart Animate E para dar um exemplo disso, o que vamos fazer é criar uma página de confirmação mostrando que a viagem está uma página de confirmação mostrando sendo reservada e, finalmente, um estado que mostre que a viagem está realmente reservada Então, para fazer isso, primeiro vou expandir um pouco esta seção . E então eu vou duplicar essa página cheia de reservas. Então, agora eu dupliquei esta página, e o que vamos fazer é fazer que esse lado da tela fique em altura ou desapareça, e o outro lado se mova para o centro Então, vamos fazer o design e depois mudar a aparência para 0%. E a mesma coisa para a viagem de volta, porque não precisamos desses 0%. E então queremos mover isso para o meio da tela. E então vamos para esta página preenchida e, a partir do botão de reserva confirmada, lidaremos com a outra mais tarde. Vamos fazer uma animação inteligente e vamos experimentar a suave e de 800 milissegundos Então, é um pouco lento. Na verdade, até 1 segundo, que é 1.000 milissegundos Vou clicar nesta versão preenchida, jogar, descer aqui, clicar em Confirmar reserva e pronto. A outra parte desapareceu e ela se moveu para o centro. E tudo isso aconteceu por causa do Smart Animate, percebendo o que há de diferente entre esses dois quadros e juntando-os usando a animação inteligente Agora, tudo o que precisamos fazer é trocar o cartão aqui, que ele mostre o conteúdo diferente, como o quarto que está realmente sendo reservado no momento E então, uma vez reservado, talvez após o atraso de dois segundos ou algo assim, possamos navegar para outra página que realmente mostre que eles estão sendo confirmados Então, vou dar um nome a esse. Carregamento da página de reserva. Então, está carregando e, em seguida voltaremos à próxima palestra para criar um cartão que mostre a viagem que está sendo reservada Portanto, podemos usar isso como um estado de carregamento antes de finalmente mostrar um estado confirmado. E só para mantê-lo limpo, vou mover isso de volta para cá como uma página separada. 82. Estado de carregamento: Temos essa página de carregamento, mas nosso cartão interno não corresponde ao estado de carregamento. Então, por que não acessamos nosso cartão ou cartão do quarto e criamos três variantes diferentes para cada uma que mostre o quarto que está sendo reservado E então podemos ter outro para quando finalmente estiver reservado Então, precisaremos de mais seis. Mas antes disso, vamos começar com a versão de carregamento. Então, por que não criamos uma nova propriedade de variante, a chamamos de status e deixamos o padrão como padrão e, em seguida, duplicamos essas e chamamos o status dessas propriedades de carregamento Então, todos os três estão prontos para carregar. E então, no carregamento, queremos mostrar que estamos reservando este quarto. Então, talvez reescrevamos esse texto para reservar seu quarto duplo e alteremos esse texto para talvez o texto 200 Vamos deixar as datas e, em seguida, não precisaremos mais de um botão porque a ação já está acontecendo, mas será bom ter algum tipo de animação de carregamento aqui. Então, podemos realmente usar uma ferramenta interessante chamada arquivos Lodi para fazer isso Portanto, se você acessar os arquivos Lodi, basta pesquisar os arquivos Lodi, e está em plug-ins e Esses arquivos Lodi aparecerão e talvez você precise fazer login para usá-los, mas isso nos dá uma tonelada de animações que podemos usar em nosso espaço Se você acessar o Discover, podemos pesquisar o carregamento e ver vários tipos diferentes animações de carregamento Se você quiser um específico, talvez um simples, seria legal mostrar, um avião ou algo parecido. E há muitos gratuitos que você pode usar, e também muitos premium. Sinta-se à vontade para navegar e ver exatamente de qual você gosta. Esse é legal. Vou usar essa animação simples e inseri-la como um Jif E apenas o tamanho médio está bem. Então, está sendo inserido e está aqui. Mas isso é um pouco grande demais, então vou diminuí-lo e colocá-lo dentro desse layout automático, mas agora é um pouco grande demais, então torne-o um pouco menor. E então, na verdade, não precisamos das datas porque mostraremos isso quando a confirmação real acontecer. E aqui escreveremos como reservar seu quarto duplo em Londres K. E para o N, vamos mudar isso para também enviar uma mensagem de texto 200 E não precisamos dessa Londres, Reino Unido pois já a temos aqui agora. E esse texto pode ser centralizado, e também podemos fazer alinhamento central superior para que esse plano fique no meio Para esses dois, vamos colocá-lo de lado. Então, podemos duplicar este para os outros quartos. Lá vamos nós. Vou pegar a imagem emprestada e colá-la e também mudar o título aqui, quarto queen, quarto king e assim por diante, e me livrar dessas duas e mudar o status dessas para carregando, esta para quarto queen E este para o quarto King. E tudo o que precisamos fazer agora é acessar este aqui no carregamento e alterar nosso status para carregamento. Então, agora vamos ver o que vai acontecer. Volte, clique em Confirmar reserva e pronto. Nossa animação de carregamento parece legal. E depois de talvez 5 segundos ou algo assim, podemos alterar esse cartão para uma versão confirmada. Então, vamos fazer isso juntos na próxima palestra. 83. Finalizando nosso protótipo: Por fim, queremos fechar o ciclo fazendo com que essa página mude para um status confirmado e, em seguida, veremos que a viagem foi concluída e isso marcará o fim do nosso protótipo Então, vamos expandir isso um pouco mais e depois duplicar esta página para que possamos alterar 12 páginas de trabalho concluídas E então, tudo o que queremos que aconteça é que, após um certo período de tempo, essa página navegue automaticamente até essa página. E no Figma, podemos fazer isso criando interação a partir do próprio quadro. Para este quadro. E em vez de onclick, vamos escolher após o atraso O que After Delay nos permite fazer é esperar um período de tempo na Síria. Em vez de o usuário realmente interagir com ele, estamos apenas esperando algum tempo antes que o carregamento mude para confirmar E podemos fazer 3 segundos por 3.000 milissegundos, navegar até esta página e também podemos manter a animação inteligente, para que a animação inteligente mude entre essas duas Como alternativa, o que você pode fazer é que, em vez de ter uma página diferente, você também pode tê-la em seus componentes, então crie-a para que, após um certo tempo, esse componente alterne por outro. Portanto, ambos são métodos corretos. Não há certo ou errado. Você pode fazer qualquer um dos dois. Agora, quero fazer com que o status confirmado seja semelhante a este, mas mostre que você já reservou a viagem Então, eu dupliquei esse aqui e, em vez de confirmar, vamos simplesmente remover o botão Não precisamos mais de um botão aqui. E então vamos adicionar outra camada de texto aqui e escrever reserva confirmada e talvez alterar esse texto para seis anos. Vou usar o 800 secundário. Aí está. Em vez disso , cinco noites, podemos simplesmente escrever a cobrança total. Então, vamos duplicar esse texto, livrar disso aqui, apenas mantenha o cifrão. Livre-se do cifrão aqui e, em seguida, alteraremos esse texto para aplicar o preço total variável. E vamos organizar automaticamente esses dois sem espaço entre eles. Como alternativa, você também pode entrar aqui e escrever algo como pago. Então, diz $400 pagos e, em seguida, altere o espaçamento aqui para quatro. Então parece melhor. Em vez disso, outra alternativa é cobrada no ponto três, um, dois, quatro. Digamos que esse seja o cartão para o usuário. E, na verdade, não precisamos dormir muito. Em vez disso, podemos simplesmente escrever um quarto duplo para dois ou dois adultos. Com isso cobrado deste estado para este estado. Agora vamos alterar esse status para concluído. E tudo o que vamos fazer é duplicá-lo mais duas vezes para os outros quartos Aplique a imagem certa entre elas e, em seguida, escreva esta como quarto queen, quarto king. E, finalmente, certifique-se de que este também seja um quarto com cama queen size. E é o nome da variante e o quarto King no nome da variante. Aqui embaixo, tudo o que estamos mudando é o status para concluí-lo. E então vamos adicioná-lo aqui embaixo, ir até nossos ativos, botão e inseri-lo aqui. E queremos que, na verdade, esteja apenas na moldura. Então, vamos colá-lo no quadro, para que não dependa do layout automático. E vou trazê-lo até aqui em algum lugar perto do cartão, bem no meio da página e depois vou para o meu painel ou algo parecido. Apenas certifique-se de que esteja centralizado e adicione uma interação Então, este nos leva de volta à página Discovery do destino onde podemos descobrir mais viagens. Agora deixe-me explicar mais uma vez o que está acontecendo. Depois de 3 segundos, vamos passar automaticamente desta página para esta aqui, e tudo o que muda é que essa carta está sendo preenchida e, em seguida, há um botão aqui que nos leva de volta à página de descoberta do destino. Então, se virmos isso mais uma vez em ação com layout automático e muito bom, vamos ver como fica. Confirme a reserva, venha aqui, passem 3 segundos e pronto, reserve, confirme um quarto duplo para dois adultos. Cobrança de 500 neste cartão, desta data até esse estado. E você pode ver que esse preço é realmente atualizado com base no que tínhamos antes. Acesse meu painel. Linda. Vamos rodar esse protótipo do topo no Lex 84. Testando nosso protótipo da web: Construímos um protótipo incrível juntos, e acho que agora é hora de analisá-lo mais uma vez e ver como podemos melhorá-lo e garantir que tudo esteja bem A primeira coisa é que queremos criar fluxos, então saltamos automaticamente entre diferentes fluxos usando o painel de protótipos Se você clicar em qualquer tela enquanto estiver no modo de protótipo, poderá adicionar um novo ponto de partida do fluxo Vamos adicionar um à nossa página de inscrição e chamar esse fluxo de inscrição. Um novo usuário passará por esse fluxo e, em seguida, por uma página de descoberta de destino, então chamaremos um novo fluxo e chamaremos esse que está conectado Fluxo de usuários. Agora, se em algum momento executarmos o protótipo, podemos alternar entre esses diferentes fluxos Agora, esses fluxos foram criados meio que por acidente. Portanto, se você já tiver fluxos criados acidentalmente, basta clicar neles e excluir Agora você pode alternar entre um fluxo de inscrição, ir diretamente para essa página ou ir diretamente para um usuário conectado Por padrão, quando você está no painel de protótipos e clica no Canvas, você pode escolher o dispositivo no qual executará seu protótipo Assim, você pode fazer algo como um erro do MacBook, e ele apresentará seu projeto como ele apareceria em um erro do MacBook Agora, é claro, não parece muito bom porque não o projetamos especificamente para um erro do MacBook Nós o projetamos para essa tela, que tem 14 40 cm de largura. Portanto, se você selecionar qualquer tela que não se encaixe perfeitamente nela, pode não parecer incrível. E, geralmente, eu apenas executo o protótipo em um tamanho personalizado, e esse tamanho personalizado pode ser exatamente o que você já configurou para a moldura Então, no meu caso, é 14 40 por 1080. E, como você pode ver, é bom, está fixo entre todas as páginas, não importa o tamanho da página entre seus diferentes quadros, fica bom. Então, vamos executar o protótipo e você pode redefinir um protótipo Então, se, digamos, começar com um fluxo de inscrição e você acidentalmente acabar em algum lugar, você sempre pode pressionar R para redefinir o fluxo e voltar para a primeira tela do fluxo Então, agora estou de volta na tela de inscrição. Vamos rodar o protótipo uma vez a partir daqui. Sou um novo usuário. Acabei de entrar. Quero inserir meu e-mail e senha para me inscrever no Wanderis, clique em Inscrever-se aqui e preciso inserir meu código de verificação que acabei de receber para o meu e-mail Linda. Vou inserir isso, clicar em Continuar e estou no aplicativo. Incrível. Até agora, na verdade, tínhamos uma foto de uma pessoa real aqui Portanto, não executamos o plug-in Avatars uma vez e apenas colocamos um usuário aqui Linda. Não tenho certeza se é Max ou Tom Cruise, mas funciona. Vamos colar isso. E agora estamos trancados no Max Stove. Temos uma bela foto aqui em cima. Nós podemos ir até aqui. Podemos abrir a guia Filtros. Muito legal. Aplique o filtro. Podemos classificar e mudar isso para popularidade ou voltar para relevância. E podemos selecionar Londres, Reino Unido, para ler mais sobre essa viagem. Parece incrível. Vamos ver a disponibilidade, clique aqui mesmo. Leia as avaliações. Incrível. Há outros destinos que eu posso conferir. E digamos que eu realmente queira reservar um belo canguru para mim. Essas datas não parecem corretas, então por que não consertamos isso rapidamente. Queremos ter certeza de que está escrito as mesmas datas na outra página, que era 060-12-0605 Agora, precisamos repetir isso aqui também, ali e aqui. Então, adivinhe? Na verdade, você pode acessar Design e clicar na variação de várias edições, e o texto é detectado em vários lugares, e podemos fazer uma alteração muito rápida em todos eles Lá vamos nós. Agora volte ao nosso protótipo. Parece muito melhor. Outra coisa que seria boa, embora não seja necessária, é combinar o número de pessoas este quarto acomoda com esta página Portanto, certifique-se de que ele acomoda um, dois e três, respectivamente. Então esse deveria ser um dorminhoco. Esse deveria estar dormindo. Agora, ainda estamos na ferramenta de edição múltipla, então vamos sair daí Então, nós apenas editamos um por um. Este acomoda dois, e este dorme três. Então, isso combina agora. Sempre posso voltar e selecionar outro quarto, como um quarto queen size, digamos que o preço seja alterado. Eu posso ir em frente e preencher minhas informações. Se eu quiser adicionar algum aluguel de carro à minha viagem. Agradável. Eu o adicionei e algumas atividades divertidas, e o preço reflete isso. E agora eu posso clicar em Confirmar reserva. Infelizmente, esse botão ainda não funciona, então estamos perdendo essa conexão. Vamos selecionar esses botões aqui pressionando a tecla shift para que possamos selecionar todos eles, ir até o protótipo e arrastar uma conexão de um deles, que arrasta a conexão de todos eles agora para o carregamento da nossa página de agendamento Parece bom. Agora podemos clicar em Confirmar reserva em qualquer lugar. Vamos fazer isso a partir daqui. E está faltando alguma coisa aqui. Então, vamos voltar. Então, agora temos a conexão aqui. Em vez de dissolver, queremos fazer uma animação inteligente e fazer uma animação suave e de 1.000 milissegundos, o que é 1 Então, estamos de volta aqui agora. Você sabe o que? Talvez não precisemos de atividades divertidas, então vamos removê-las, clicar em Confirmar reserva aqui e pronto, ele está carregando seu quarto Queen em Londres, Reino Unido, e confirmando a reserva. Quarto Queen para dois adultos, 800 dólares. Linda. Vamos voltar ao meu painel. Então esse é o nosso protótipo na web como um exercício, sinta-se à vontade para fazer aquele para dispositivos móveis usando as conexões semelhantes que construímos na web E na próxima palestra, voltaremos para aprender como podemos realmente testar seus protótipos móveis em seus próprios 85. Usando o aplicativo Figma no celular: Então, para mostrar como você pode executar seu design Figma em seu celular para ver como seus designs ficam ou como fica seu protótipo, vá em frente e baixe o aplicativo Figma na Google Play Store ou na Apple App Store Agora, se você ainda não fez login, vá em frente e faça login exatamente na mesma conta que você está usando no Figma, e você pode ver seus projetos aqui Eu posso ver meu projeto Vanderweis. Eu posso abri-lo e navegar nele, e você vai para as diferentes páginas, as maquetes aqui Agora, o bom é que, se você acessar esse recurso de espelhamento aqui embaixo, você pode clicar em Começar a espelhar e mostrar exatamente a página que você está vendo no seu aplicativo no seu computador, e eu posso mudar rapidamente aquela que eu quero ver e ir para as diferentes e ver quais mudanças eu quero fazer no celular ou como isso funciona no celular Claro, isso ainda não é um protótipo. Então, quando você transforma isso em um protótipo, você pode realmente ver como seu aplicativo ficaria em uma tela móvel A qualquer momento, você pode segurar dois dedos e depois sair desse modo. E com isso, isso encerra nossa seção de prototipagem. Vamos voltar à próxima seção para aprender como trabalhar juntos no Figma e se você usa dicas e truques completos 86. Colaborando no Figma: Um dos benefícios e a parte mais divertida de trabalhar na Figma é colaborar com outras pessoas na medida que sua equipe cresce e você tem mais designers com quem trabalha, as pessoas podem participar e realmente fazer edições enquanto você faz suas próprias edições ou podem deixar comentários, feedback e vocês podem trabalhar juntos com muita facilidade Para colaborar com outras pessoas no figma, tudo o que você precisa fazer é compartilhar o projeto com elas Ao clicar em Compartilhar, você pode escolher quem convidar para o seu projeto. Você pode digitar o e-mail deles aqui e convidá-los para o seu projeto, ou você pode copiar o link e compartilhá-lo com qualquer pessoa em um bate-papo ou onde quer que você se comunique. Agora, por padrão, você pode ter essa que tem acesso, não a ninguém. Portanto, certifique-se de clicar nele e mudar para qualquer pessoa. Por padrão, às vezes ele é definido apenas para pessoas convidadas. Dessa forma, o público pode acessá-lo, e somente as pessoas que você convidar com seus e-mails poderão acessá-lo. Agora, com isso em qualquer pessoa, você pode escolher o que qualquer um pode fazer. Então, por padrão, ele está configurado para exibir. E, normalmente, é isso que você deseja manter, a menos que queira que pessoas do público editem seu arquivo. Então, se você está colaborando publicamente com o mundo, certeza, você pode ir em frente e mudar isso para isso Mas, geralmente, está à vista. disso, para maior segurança, você sempre pode fornecer uma senha para as pessoas colocarem quando estiverem tentando acessar seu arquivo. Nas configurações avançadas, você também pode escolher se os visualizadores podem copiar, compartilhar e exportar esse arquivo ou se ele é apenas para visualização , ou se ele é apenas para visualização sem exportação e sem duplicação e Também há acesso fácil para copiar rapidamente o link do protótipo Então, se você quiser compartilhar rapidamente um link para o protótipo, se quiser copiar um link para o modo Dev Então, se você está compartilhando isso com seus desenvolvedores, seria uma boa ideia compartilhar com eles. E, claro, se você estiver criando um arquivo de comunidade, sempre poderá compartilhá-lo com a comunidade. E dessa forma, você pode adicionar pessoas ao seu projeto. Qualquer pessoa que tenha sido adicionada ao seu projeto, você pode ver aqui. Então, esse é outro usuário que eu tenho, e eu posso escolher se essa pessoa pode ver, editar ou se tornar a proprietária do arquivo, ou eu posso simplesmente removê-la completamente do arquivo. É assim que você pode gerenciar quem está visualizando seus projetos. momento, estou em outra conta de usuário e posso ver que, quando outro usuário está no meu arquivo, posso ver exatamente o que ele está vendo, onde está o cursor do mouse, o que é legal. Sempre posso clicar aqui para segui-los e ver exatamente o que eles estão fazendo e o que estão vendo? Então, no momento, não estou controlando a tela. Esse outro usuário é quem está dando uma olhada nas diferentes páginas. Se alguém estiver apresentando ou se você estiver apresentando, essa seria uma boa opção para compartilhar com as pessoas. Depois, você sempre pode clicar em Parar quando terminar de segui-los. Agora, o outro usuário pode examinar seus designs, deixar comentários. E quando eles deixarem um comentário, você pode ver o comentário deles aqui. Por padrão, esse azul significa que o comentário é vermelho. Então, se você clicar nele, ele ficará cinza assim. Mas você sempre pode alterná-lo de volta para Marcas vermelhas se quiser voltar para ele Claro, você pode reagir, curtir e escrever um texto de volta E você pode até mesmo compartilhar imagens ou mencionar pessoas e animogis E é assim que você pode colaborar e obter facilmente feedback dos membros da sua equipe Depois de resolver esse problema, posso simplesmente resolver o comentário e ele desaparece, embora eu sempre possa acessá-lo novamente no painel de comentários, mostrando os comentários resolvidos aqui e, em painel de comentários, mostrando os comentários resolvidos aqui e, seguida, posso ocultá-los novamente. Esse painel de comentários mostrará todo o feedback deixado no projeto, porque agora eu resolvi esse comentário. Não está sendo exibido, mas se o outro usuário ou até mesmo eu, digamos, eu quiser fazer algumas anotações para aumentar isso, que você possa deixar notas para si mesmo assim ao redor do arquivo. E ao começar a adicionar comentários, você os verá se acumulando aqui e poderá resolvê-los rapidamente a partir daqui ou excluí-los também Outro recurso interessante é que você pode realmente ativar o bate-papo por voz aqui no Depois de clicar nele, um pequeno pop-up será aberto e você poderá realmente conversar com outras pessoas no figma Agora, vamos voltar para a próxima palestra para aprender um pouco mais sobre bibliotecas e equipes 87. Bibliotecas de equipe: Até agora, estamos reunindo componentes aqui mesmo em nossa seção de componentes, e está apenas neste arquivo local. Nós realmente não o publicamos ou editamos em nenhum lugar. Mas quando começamos a trabalhar em um componente e em vários projetos e arquivos diferentes, Figma permite que você os publique e use facilmente em vários arquivos e faça alterações apenas em um só lugar Então, em vez de ter projetos diferentes com vários arquivos diferentes, ter todos os componentes diferentes que são os mesmos componentes, você pode simplesmente tê-los em um só lugar. E, normalmente, isso estaria em um projeto separado ou arquivo de assinatura separado, e então você pode ir até sua biblioteca e ver que você tem dentro desse arquivo a biblioteca Wanderwis, e você pode realmente ir em frente e publicá-lo, para que você possa usá-lo em arquivos diferentes Ele solicitará que você mova isso para um projeto, se estiver atualmente em seu rascunho. Agora, quando você estiver pronto para publicar sua biblioteca, ela mostrará todas as coisas diferentes que serão adicionadas a essa biblioteca, para que você tenha todas as variáveis. Assim, mesmo que as variáveis sejam adicionadas quando vemos todas as cores, as variáveis do dispositivo serão compartilhadas em arquivos diferentes. Todos os estilos que adicionamos para nossas diferentes fontes, todos os componentes aqui, você pode até adicionar uma descrição do que mudou. E então, quando você clicar em Publicar, levará um segundo. E, como você pode ver, ele começa a carregar e leva algum tempo até que essa biblioteca seja totalmente publicada. E agora, aqui em um arquivo completamente novo, posso navegar pelas bibliotecas da equipe e na verdade, navegar pelas bibliotecas que publiquei, e posso usá-las nesse arquivo ou, se já estiver usando outra biblioteca diferente, posso trocar as bibliotecas aqui Se eu adicionar isso a esse arquivo, agora que está adicionado, posso usar os mesmos componentes nesse arquivo completamente novo que não tem nada a ver com Vanderweis Agora, se eu escrever um texto aqui, posso escolher as mesmas fontes que trouxe da minha biblioteca. Então, todos eles vêm da minha biblioteca com exatamente a mesma fonte, e então eu posso vê-los, mas você não pode mais vê-los em estilos locais ou variáveis locais. Porque eles já publicaram nessa biblioteca. Agora, você não precisa fazer isso em seu projeto. Eu só vou te mostrar o que aconteceria se você fizesse uma mudança rápida. Digamos que, de repente, temos outro ícone do Google e o chamamos de algo como o logotipo dois do Google ou algo parecido. Então, agora temos um novo componente em nossa biblioteca ou se temos um novo botão ou um novo campo de entrada e assim por diante. Portanto, nos ativos da biblioteca, há uma alteração que ainda precisa ser publicada, e essa alteração é exatamente o logotipo do Google que alteramos. Então você pode ir em frente e publicá-lo, e você pode ver: Ok, este é o componente que foi adicionado, o novo logotipo do Google. Você pode escrever uma descrição do motivo pelo qual essa mudança aconteceu. Você pode publicá-lo. E aqui em seu outro arquivo, você já tem aquele logotipo do Google dois. Você pode usá-lo em seu projeto. Agora, se eu já estava usando um botão e algo aconteceu com o botão, você pode realmente vê-lo nas atualizações. Eu vou te dizer que esse botão mudou e esse é um novo design. É assim que você pode usar bibliotecas para gerenciar os mesmos componentes em vários projetos diferentes com sua equipe. 88. Modo de desenvolvimento: O que é esse modo de desenvolvimento aqui? Como o usamos e o que ele faz? Como atalho, você pode pressionar Shift D para alternar o modo de desenvolvimento, e isso está disponível atualmente em um DevMDE basicamente permite que você dê ao desenvolvedor acesso ao seu arquivo de uma maneira mais amigável ao desenvolvedor Portanto, o painel de propriedades muda completamente para que seja mais amigável para alguém que possa estar transformando esse design em código. Como desenvolvedor, posso mudar minhas unidades para usar pixels ou RAM. Eu posso mudar meu idioma. Então, se eu já estiver usando outro idioma, posso escolher esses aqui. E há vários plug-ins que você pode ativar para mostrar até mesmo tipos diferentes de códigos. Então, se você estiver trabalhando com react, podemos ver o código react em oposição ao CSS. Agora, como desenvolvedor, posso selecionar qualquer coisa aqui, digamos, esta placa de espaço, e ela me mostra todas as informações específicas que me interessam sobre o preenchimento, o peso, os raios dos cantos Eu recebo o código diretamente aqui como um JSX. Eu posso ver os tecidos, todas as cores usadas e com o código hexadecimal facilmente disponível Portanto, não preciso adivinhar ou clicar em cada elemento individual apenas para descobrir como projetá-lo ou como codificar o front-end para Agora, se as alterações foram feitas ao longo de algum tempo, posso comparar as alterações aqui para ver como essa página mudou ao longo do tempo. Quais são algumas das coisas novas que aconteceram? Eu posso ver que a última alteração que fizemos foi que costumava haver o botão de inscrição com o Google, depois o movemos, adicionamos um logotipo a ele e também adicionamos esse quadro com um número de telefone como este. Então, como desenvolvedor, é muito fácil entrar e ver o que mudou em seu arquivo FiGMA Dessa forma, você pode compartilhar com seus desenvolvedores como usar esse recurso para entender rapidamente o que mudou desde a última vez que eles estiveram aqui. Eles sempre podem acessar os ativos aqui, para que possam rapidamente dar uma olhada nos ativos, como este botão aqui, e você sempre pode abri-lo no playground para ver como as diferentes variantes e propriedades alterarão o botão. Qual é a aparência do hover? é a aparência desse ícone esquerdo? E se não for largo e tiver um ícone? Você pode obter todas as propriedades facilmente a partir daí. Você pode até mesmo alterar o ícone aqui, e tudo isso, como diz, fique à vontade para experimentar, pois nenhuma dessas alterações está sendo feita. Tudo o que está acontecendo é que estou apenas brincando com o botão para ver quais são as diferentes variações dos botões. Eu posso fazer a mesma coisa com qualquer outro componente que tenha propriedades. Agora, quando estiver no modo Dev como designer, você pode adicionar algumas anotações para os desenvolvedores saibam exatamente o que você está pensando Você pode marcar certas coisas. Digamos que eu queira enfatizar que o espaçamento entre eles deve ser de exatamente 32 pixels Posso desenhar aqui, arrastar e mostrar exatamente a aparência da margem e do preenchimento entre os diferentes elementos Eu posso adicionar anotações. E as anotações são úteis. Posso deixá-los em um elemento específico, para que eu possa deixá-los como exemplo. Posso adicioná-lo aqui e dizer: Este é o tempo total da viagem, não o número de noites. E adicione esse rótulo aqui ou anotação. E essa anotação só é visível no modo def. Então, se eu fechar o Modo Desenvolvedor, você verá que ele desaparecerá, mas este pequeno círculo aqui está me mostrando há anotações aqui no modo de morte, que você também pode ver clicando duas vezes nele Agora, como desenvolvedor, também posso adicionar alguns recursos. Então, se eu estiver usando o Jira ou outra plataforma, posso colar o link e ter acesso a eles facilmente Posso usar muitos plug-ins que agora estão disponíveis para me ajudar a transformar esse design em código, incluindo FiGMA to code, e eles funcionam muito bem em algum nível Agora, muitos deles funcionam muito bem, mas vou deixar isso para você experimentar se for um desenvolvedor Lembre-se de que você pode compartilhar o acesso ao modo Desenvolvedor clicando em compartilhar aqui e, enquanto estiver no modo Desenvolvedor, ele compartilhará um link somente para o Modo Desenvolvedor. E outra dica útil, em geral, se você estiver compartilhando seu arquivo Figma selecionando um quadro específico e clicando em Compartilhar, você está permitindo que a pessoa que abre o link acesse especificamente esse quadro Então, quando chegarem ao seu arquivo, estarão exatamente nesse quadro. E isso se aplica tanto no modo Dev quanto no modo design. A mesma coisa se aplica aos protótipos, aliás. Se você estiver no modo de protótipo, deseja compartilhar esse protótipo com o desenvolvedor, mas como usuário de login, basta acessar o fluxo desejado e depois compartilhar o protótipo e compartilhar o protótipo E agora a pessoa que abrir esse protótipo irá diretamente para aquele ponto de partida ou fluxo Agora, é claro, eles sempre podem alternar fluxos diferentes aqui, mas esse é o fluxo inicial que eles verão. 89. Variações de anotação: Muito tempo depois de filmar o último vídeo do DevMo, Figma anunciou um novo recurso que permite que você faça ainda mais com as anotações quando se trata de deixar anotações em todo o projeto para anotações Agora, você verá na sua barra de ferramentas que tem essa pequena seta aqui e pode expandir a ferramenta Commons e , na verdade alterná-la entre anotações Medição, é claro, usamos isso na última palestra. Mas se quisermos fazer anotações, podemos clicar aqui ou, como atalho, Shift T, e podemos deixar anotações e podemos deixar anotações rapidamente em todo o nosso design. Então, se você quiser deixar uma anotação sobre essa tag popular, digamos que podemos deixar uma aqui, e a nova atualização aqui é que você pode até mesmo definir uma categoria para Então, podemos dizer conteúdo ou se isso está relacionado ao desenvolvimento ou interação, acessibilidade e assim por diante. E para este, vamos apenas criar uma tag de desenvolvimento e dizer que a tag deve ser exibida para viagens que são populares apenas entre os usuários. Assim, você pode adicionar anotações facilmente, mesmo quando estávamos no modo de design sem mudar para o modo de desenvolvimento Obviamente, você sempre pode clicar em Escape e voltar ao modo de comentários usando C e também deixar comentários em todo o projeto. 90. Histórico de versões: Então, vimos como , no modo Dev, você pode comparar as alterações entre suas versões anteriores do arquivo. Mas e como designer? Existe uma maneira de voltar rapidamente para uma versão que eu já estava usando Digamos que eu fiz algumas mudanças. Eu não gosto deles. A equipe odeia isso. voltar para a versão anterior. Tudo que você precisa é do histórico de versões, que pode ser acessado a partir do nome do seu arquivo aqui com esta pequena seta e mostrando o histórico de versões. histórico de versões mostra todas as alterações feitas ao longo do tempo. E, como você pode ver, há seis versões de salvamento automático, e eu posso clicar para ver nessa data específica a aparência do meu arquivo. Então, se eu clicar em, digamos, 16 de novembro, de repente, verei que meu arquivo parece completamente diferente. Assim, posso envelhecer ainda mais e ver todas as alterações que fiz no meu arquivo ao longo do tempo. Então, se eu quiser voltar para aquela época, sempre posso fazer isso clicando aqui e dizendo restaurar esta versão Ou, se você encontrou uma versão específica que deseja nomear, pode dar a ela um nome específico para se lembrar dessa versão exata. Então eu vou até aqui. Vejo que os componentes foram publicados aqui, e esta é a versão atual, e posso simplesmente fechá-la quando terminar de examinar o histórico da versão. 91. Renomeando camadas com IA: Mais algumas ferramentas de IA que realmente não usamos neste projeto. Já usamos muito, mas definitivamente podemos ver mais quatro que são muito úteis. O primeiro é nomear nossas camadas. Agora, ao longo deste projeto, não estamos realmente nomeando nossas camadas Tudo é apenas quadro 31, quadro 44, quadro 40, você entendeu. Nada é realmente organizado. Se alguém estiver vendo esses nomes de camadas, talvez não tenha ideia do que está acontecendo. Então, o Figma, na verdade, tem um recurso de IA que nos permite renomear camadas Tudo o que precisamos fazer é executar o Comando K ou abrir o painel de ação e clicar em renomear camadas Demorará um segundo, mas, como você pode ver, para o que você selecionou, Figma dará um nome a eles Pode não ser perfeito, ele chamou essa grade aqui de grade de resultados, mas talvez você queira chamar essa grade de destino ou algo desse tipo. Mas, novamente, essa é uma melhoria muito melhor do que a que tínhamos antes. Temos um contêiner de coleções, título de coleções, grade de coleções. Portanto, a convenção de nomenclatura que ele usa é muito boa. Experimente em molduras diferentes ou, se quiser renomear camadas para todas as suas molduras, peça para selecionar algumas camadas e, na verdade, você pode selecionar várias molduras diferentes, se quiser, ou simplesmente pressionar Enter enquanto tiver uma seção selecionada, e você notará que há muitas camadas, então talvez seja necessário ler algumas páginas por vez Então experimente. É uma ótima maneira de deixar seu arquivo mais organizado. 92. Removendo o fundo com IA: Acontece com bastante frequência quando você arrasta uma imagem para o FIGMA. Encontrei esse ícone de escudo que posso usar para o seguro de viagem aqui ou algo parecido, e quero remover o fundo. Agora, você pode fazer isso no Photoshop se tiver ele e outras ferramentas Mas se você não tiver, o Figma torna mais fácil agora do que nunca realmente remover o fundo E tudo o que você precisa fazer é usar uma ferramenta de IA chamada Remover plano de fundo. Se você não conseguir encontrá-lo, basta procurá-lo na pesquisa aqui. Você pressiona e ele analisa a imagem e remove o fundo. Simples assim. 93. Traduzindo nosso aplicativo com IA: Imagine que fizemos esse Vander weiss para nosso cliente. Eles o lançaram no mercado. Está indo muito bem e, de fato, eles tiveram um ótimo público na França. Como traduzimos esta página ou todo o projeto para o francês? O Figma AI torna isso muito simples. Tudo o que você precisa fazer é simplesmente copiar uma página. Digamos que essa página de detalhes do destino tenha uma versão em francês dela. E tudo o que você precisa fazer é executar a opção translate to aqui e escolher o idioma, e há vários. Vou pesquisar francês. E, como você pode ver de cima para baixo, ele escreverá a página inteira em francês, incluindo os botões, os rótulos, as datas e incluindo os botões, os rótulos, as até as resenhas. E aí está. É assim que você pode traduzir usando IA para outro idioma e ter seu aplicativo pronto para vários mercados. 94. Atalhos de teclado: Chegou até aqui, em primeiro lugar , parabéns. Em segundo lugar, você deve ter notado o quanto eu uso atalhos de teclado do layout automático, Shift A para abrir o modo de desenvolvedor, Shift D. Muitos dos comandos Alt C, Command Alt B para copiar e colar estilos rapidamente, e assim por diante Há muitas e você não consegue memorizá-las tanto quanto quiser Eu apenas as pratico e me acostumo com elas. Figmas facilitou isso mostrando atalhos do teclado aqui embaixo , onde diz ajuda e recursos E você tem essa opção de atalhos de teclado aqui. Você pode abri-lo. E ele mostrará todos os diferentes atalhos que você tem Você pode mostrar e ocultar a interface do usuário dessa forma, e ela mostra sua vida à medida que você as usa. Você pode navegar por diferentes ferramentas. E para qualquer coisa que eu usei, ela será exibida em azul, então essas são as que eu usei, mas eu não usei, por exemplo, a ferramenta Caneta, então está me dizendo que se você usar uma ferramenta de caneta, ela ficará azul, o que significa que você a desbloqueou ou a usou Então, gamifica para que você possa aprender um novo atalho vendo quais você ainda não experimentou, para que você possa experimentar esses 95. Conclusão: Parabéns por concluir este curso. Já percorremos um longo caminho e poucas pessoas chegam até aqui. Então, parabéns por montar este projeto, aprendendo todas as ferramentas que a FICMA tem E, claro, o aprendizado não para por aqui. Para se tornar um ótimo designer de produto, você precisa praticar. Você precisa continuar trabalhando em mais projetos, adicionando-os aos seus portfólios, que você possa se destacar e conseguir o cliente dos seus sonhos ou o emprego dos seus sonhos Então, com isso, agradeço novamente por participar deste curso e fazer parte dessa jornada conosco. Se você tiver alguma dúvida, sinta-se à vontade para entrar contato e deixar um comentário se este curso tiver sido útil para você. Boa sorte e bom design.