Design UI/UX no Figma: mais de 5 projetos reais(2022)

1. Introdução (Design UI/UX com Figma): Bem-vindo ao design UI UX com Figma. Este é o melhor tutorial do planeta. Por limitação do que sou designer de UI UX, YouTuber, freelancer, criador de conteúdo e programadores. Até o momento, ensinado ou toneladas de Turim pessoalmente e online. E estou tão animado para ser seu instrutor neste curso. Como aluno deste curso, você terá acesso a todas as quatro horas de conteúdo de vídeo em HD. Qual conteúdo? Tutoriais passo a passo, projetos interativos, exercícios e modo. Vou orientá-lo por todo o processo passo a passo à medida que você acompanha comigo neste curso. Neste curso, vamos falar sobre princípios e fundamentos do design gráfico, até a criação de produtos de retirada. Aprendendo sobre UX, UI e interação, e criando um processo de design completo para você usar com todos os seus projetos e clientes futuros. Vamos aprender todas as ferramentas modernas e tecidos moles das principais empresas para se deitar como Figma. Agora, o design é a habilidade valiosa que não fica desatualizada facilmente, como a maioria das habilidades técnicas por aí. Estou usando Figma por quatro anos e sei que cada tick e dicas para este curso cobrirão todas as saídas do Y se X desde o início até o avanço. Depois de percorrer a interface, vou guiá-lo passo a passo através da criação de projetos reais legais do PHI, como criar aplicativos, aplicativos de mídia social, desculpe, por plataforma auditiva, aplicativo de player de música. E o último está surpreso. Eu projetei este curso para todos os designers, se você é apenas um iniciante em projetar públicos e design emocionados, estou procurando aprender esse novo campo, Martin. Então, por que ainda estamos esperando por este curso tem tudo o que você precisava para dominar em Figma. Então, junte-se à classe e vamos começar a projetar. 2. A diferença entre UX e UI: Que tipo de realmente grave Bem-vindo de volta com outro vídeo. Então, neste vídeo, vamos aprender sobre o que é o design y, design UX e qual é a diferença entre UI e UX? Ui design e design UX são dois dos termos mais confusos e conflitos no design da web e do aplicativo e, termos mais confusos e conflitos no design da web e do aplicativo e compreensivelmente, portanto eles são rigidamente colocados juntos em um único termo, como o design UI UX. E a ferida do serviço parece estar descrevendo a mesma coisa. E muitas vezes é difícil encontrar a sólida discrição dos dois que discordam muito longe no jargão. Mas não tenha medo até o final deste vídeo, você terá uma boa compreensão do que os diferencia e como eles se relacionam entre si. Então, vamos mergulhar. Então, a primeira coisa que queremos discutir é que o que é branco está na urina você, eu não representava interface de usuário. A interface do usuário é o layout gráfico de um aplicativo. Consiste no botão que o usuário clica no texto, eles lêem a imagem, texto do controle deslizante no campo e todo o resto do item que você transforma em x obtemos. Isso inclui layout de tela, animação de interface de transição e cada micro indireto muito projetado. Esse trabalho era para designer de interface do usuário, decidiu como será o aplicativo. Eles precisam escolher o esquema de cores, mas depois moldar a largura das linhas e as fontes usadas para textos. Vocês são designers criam a aparência e o Philip e aplicativos, interface de usuário, designer gráfico de ativos de design de interface do usuário. Eles são simultâneos com a estética. Cabe a eles garantir que interfaces do aplicativo atraem visualmente estimulantes, tentadas adequadamente a corresponder ao propósito. E eles precisam se certificar de que cada elemento visual preencha, Unidos tanto ácidos quanto entradas. Então, a próxima coisa é, o que é design UX? Você estende a experiência do usuário ou a experiência do usuário do aplicativo é determinada pela forma como eles interagem com você. É o experiente, suave, ER, entidade ou grosso ou confuso. Vamos narrar o aplicativo filológico ou parece confuso? Interagir com as pessoas para enviar forma muito eficiente a tarefa que elas se propuseram a alcançar? Ou parece uma luta? As experiências do usuário são determinadas pelo quão fácil ou difícil é interagir com o elemento da interface do usuário que o designer de interface do usuário criou. Portanto, o USD é outro também concordo com a interface do usuário do aplicativo. E é por isso que as pessoas ficam confusas. Nossa diferença entre os dois. Mas enquanto que se eu fiz em nossa tarefa, estamos decidindo como a interface do usuário ficará. Enorme débito e são encarregados de determinar como a interface do usuário opera. Determinou a estrutura da interface e a funcionalidade, como ela é organizada e como todas as partes se relacionam umas com as outras. Em suma, eles projetam como a interface funciona. Se funcionar bem e totalmente transparente, o usuário terá uma boa experiência. Mas se a navegação for complicada, então um usuário ruim experimenta provavelmente designer dos EUA trabalhar em nosso segundo cenário. Há também certas análises de dados homeodomain em todos os projetos de UX, designers criarão renderização de wireframe da interface em direção e obterão feedback do usuário. Eles interagirão isso em seu design. É importante para nós desejarmos ter uma compreensão holística dos preppers do Pauser para interagir com o aplicativo. Então, como eles trabalham juntos. Então você projetou, decida como a interface do usuário funciona enquanto o designer de interface decide como a interface do usuário se parece. Este é um processo muito colaborativo e as duas equipes de design tendem a trabalhar juntas à medida que a equipe de UX está desenvolvendo o fluxo do aplicativo. Como todos os botões nunca fazem você passar por sua tarefa e como a interface atende eficientemente às necessidades dos usuários de informações. A equipe da interface do usuário está trabalhando em como todo esse elemento de interface aparecerá na tela. Digamos que, em algum momento do processo de design, ele decidiu que botões extras precisam ser adicionados ou fornecidos na tela. Isso mudará a forma como os botões precisarão se organizar e podem exigir a mudança de forma e tamanho. Para a equipe de UX determinará a melhor maneira definir o botão enquanto as equipes de interface do usuário se somarem, elas são projetadas para se adequar ao novo layout. Comunicação constante e colaboração entre UI, UX projetam uma ajuda para garantir que a interface de usuário final tenha a melhor aparência possível. Ao mesmo tempo em que opera de forma eficiente e intuitiva. Existem alguns arriscados, como pesquisar vitais tanto para o UI quanto para o designer de UX. É importante que ambas as disciplinas reúnam o máximo de informações possível para ajudá-los elaborar o design apropriado. E ambos seguem uma abordagem semelhante. O que pesquisará, o que o usuário quer, o que o especialista da aplicação do tipo de estar sendo desenvolvido. Os cidadãos são frequentemente uma sessão de usabilidade da interface interativa, onde o usuário real interagirá com versão dimensionada de determinada funcionalidade ou design visual sendo texturizado e determinará se o design está se movendo pelo caminho adequado. Para a bolsa é integrada a cada interação. Esse processo envolve a dispersão protótipos de baixa fidelidade, como wireframes, a entrada do elemento de interface para avaliar rapidamente uma resposta do usuário à funcionalidade que está sendo testada. Isso também pode promover protótipo visual de diferentes origens possíveis da aparência e preencher a interface para determinar qual usuário prefere. Em todos os casos, a pesquisa ajuda a orientar a marca do designer estadual à medida que eles constroem sua contribuição. No entanto, a dívida da interface do usuário e do UX e R estão procurando é muito diferente. Então, isso é tudo sobre o motivo pelo qual os designers UX projetam e percebem a diferença entre eles. E também discutimos algumas chaves de pesquisa. Então é isso para o vídeo de hoje. E verei vocês no próximo. 3. Introdução a figma e baixar figma: Seja o que for, se você voltar a ele outro vídeo. Neste vídeo, vamos aprender sobre Weber general Figma, e também como baixar Figma para o seu PC. Então, como você pode ver, abri a versão do navegador Figma. Basta ir ao seu navegador e digitar figma.com assim. E depois de pressionar Enter, esta página estará aberta. Então, como você pode ver, o espaço parece muito legal. Ele já tem alguma animação nesta primeira página. Além disso, alguns, acho que esses são a reutilização. Vamos ver um por um. Então, no topo, temos esse logotipo. Depois disso, temos produto. Nos produtos, temos design, prototipagem, sistema de design e downloads daqui, vamos baixar nosso software. Vamos baixá-lo para minha carta. Então, vamos ver o que está na empresa. Na empresa Temos todos os seus clientes e entre em contato com as vendas. Se você clicar em preços, haverá três opções. Vamos usar a versão gratuita. E se você quiser comprar o fornecimento de origem ou todo o NIOSH e você pode fazer isso, mas eu vou sugerir que você use a versão gratuita. Digamos que a guia Comunidade na comunidade, temos arquivados e modelos e plugins. E também temos algumas opções como eventos e transmissão ao vivo, melhores práticas de privacidade e programas de nutrição e grupos de usuários. Portanto, estamos interessados em arquivo e 10 bits em um arquivo e Tenbrunsel, temos 1000 modelos mais. Podemos usá-lo em nosso projeto. Também temos plugins. Então, mostrarei como usar plugins em nosso projeto em vídeos futuros. Na empresa, acho que eles realizaram blogs, carreira, nossa história e Central de Ajuda. Se necessário, ajude você pode entrar em contato daqui. Sei que você é novo aqui. Então, clique no botão Inscrever-se e você pode conectar sua conta do Google. E você também pode usar e-mail e senha para criar a conta na Figma. Mas vou sugerir que você use a conta do Google porque se você adicionar seu e-mail e senha, você precisa se lembrar da senha. Então, se você se conectar com sua conta do Google, não precisa se lembrar da parcial da Figma. E se você clicar no botão Inscrever-se e ele mostrará sua conta do Google e você poderá digitá-la e apenas se conectar a ela. Então, não vou fazer isso porque já tenho a conta Figma. Então, vou bloquear minha conta do Google porque é muito simples. Ok, esta é minha conta. Depois de fazer login em nossa inscrição na Figma, este é o painel que você verá. Então, neste painel, temos algum motivo, comunidade de cães e seu projeto e sua equipe, seu perfil. E você também pode ver as opções daqui. Então, vamos olhar essas coisas no próximo vídeo. Então eu preciso, acho que tinha dois logotipos para mostrar como baixar Figma. Então, vamos entrar no produto e basta fazer o download. Ok, depois de clicar em Download, esta página aparecerá. Você pode ver que você pode baixar Figma para macOS ou Windows. Você pode usar seu dispositivo Apple ou Android para a visualização. E também encontramos um toro, mas estamos interessados em aplicativos de desktop. Então, estou usando o Windows, então vou clicar no Windows. Se você estiver usando o Mac, clique no macOS. Então eu já instalei no máximo, então não preciso baixá-lo novamente. Então você precisa clicar no botão Salvar. Ele vai, ele vai dominar para você. Então é isso para o vídeo de hoje. E mostrarei mais coisas no próximo vídeo. Então fique atento para isso. Sou eu assinando. Obrigado por assistir e verei vocês no próximo. 4. Figma Interface: Bem-vindo de volta. Neste vídeo, vamos aprender nosso painel na Figma. Então, quando você instala o software, você pode ver que a interface ficará assim. Se você entrar na Figma, estamos em viagem. E então também a interface é a mesma. Depois de instalar quando você faz login na Figma , as interfaces ficam assim. Agora estamos nos últimos tempos, no EP recente, temos alguns arquivos da figma, prototipagem em Figma de wireframing de obesidade e algumas cores. Você pode escolher para sua equipe. Mas você está trabalhando para si mesmo, então você não precisa criar uma equipe. Como você pode ver, criei um projeto. Este projeto é sobre web design. Então, a próxima opção são rascunhos, interrupções. Não temos arquivos de projeto. Se você acabou de dizer, vamos clicar neste projeto. E se você quiser mover esse arquivo para o projeto, você pode fazer isso. Certo, o projeto está aberto agora. Então, o que você precisa fazer é clicar neste botão de seta para baixo, e este menu aparecerá. E a partir daqui você pode mover esse arquivo para o projeto. E você também pode pesquisar seu projeto aqui. Ou se você quiser criar um novo projeto, também pode clicar em Novo projeto e MOOC. Então, ele está mostrando que seu projeto é movido. Então, este agora é o arquivo do projeto. Agora, se entrarmos em Casa e você puder ver que o arquivo não está em D drops agora. O arquivo está no primeiro projeto. Você pode ver aqui. Portanto, a próxima opção é comunidade. A comunidade é uma das maiores características da Figma. A partir daqui você pode baixar plug-ins, gema fixa, sistema de design, wireframes, ilustração , ícone e muito mais. Como você pode ver, já criamos modelos. Você pode usar esses modelos em nosso projeto. Então, vamos pegar este. Então você pode ver esta página da web. Portanto, esta é a página da Web da plataforma de e-learning. E se você quiser saber mais sobre esta página da web, você pode clicar nela. E isso mostrará mais algumas coisas, nossa página da web. E você também pode saber quem é o criador. opioides também podem segui-los daqui. Se você quiser vir, você também pode fazer isso a partir daqui. Então, por enquanto, vamos vazá-lo. E também podemos gostar daqui e apenas clicar nele para litigar. Depois de duplicar o arquivo, você pode ver que o projeto está aberto nos rascunhos. Mas se você quiser mover esse projeto para o seu projeto, basta clicar no projeto MOOC e selecionar seu projeto. Como eu não criei nenhum projeto aqui, mas se eu clicar em Padrão e ele vai passar para o primeiro projeto, se você quiser. Você também pode ler esta página, mas, por enquanto, vamos aprender nossas coisas. Então, vou fechar esta guia. Então, vamos para casa novamente. Então, se você é novo aqui e quer criar um novo projeto, você vai entrar no primeiro projeto pode clicar neste botão de adição e apenas clicar no arquivo de design. Digamos até que seja sem título, mas se quisermos renomeá-lo, você também pode renomeá-lo a partir daqui. Digamos que seja um aplicativo. Então eu vou, vou digitar Enter. Então, vamos limpar o quadro e escolher qualquer pessoa como o iPhone. E podemos adicionar elementos de você, como uma linha. Ou se você quiser adicionar outra forma como um triângulo ou elipse Polígono. Ok, você pode fazer todo tipo de Tóquio, mas vamos ver a interface. E você pode ver o pelágico que você criou. É, não é realmente gotas. E se você quiser excluir este arquivo, basta clicar com o botão direito sobre ele e apenas excluí-lo. E se você estiver trabalhando com sua equipe, basta clicar em Criar uma nova equipe e o nome da equipe e clicar no botão Criar uma equipe. Mas atualmente estamos apenas trabalhando sozinhos, então não vamos criar uma nova equipe. Vamos fechar esta página. Portanto, há mais opções como se houver esse botão de notificação. Você receberá uma notificação aqui. E este é o perfil. A partir daqui, você pode acessar como plugins. Atualmente eu flutuei esse plug-in de fotos. E se você quiser, e se eu quiser desinstalá-lo, posso clicar neste botão e ele vai se desdobrar para mim. E você também pode baixar quantas reclamações da comunidade. E na comunidade eu tenho meu nome, perfil de molaridade Beecher Stowe, no meu próprio estilo. Então eu tenho o mesmo nome imediatamente. Bibliotecas e aplicativos de conexão e tudo isso. Se você quiser adicionar mais para acompanhar, também pode adicioná-los de você. E você pode, se quiser sair depois de concluir um projeto, você também pode fazer login no formulário aqui. E eu acho que esse terno, isso é tudo sobre o painel Figma ou a interface. Então, no próximo vídeo, aprenderemos sobre as ferramentas Figma e muito mais. Então, obrigado por assistir a este vídeo e verei vocês no próximo. 5. Importar arquivos figma no Figma no Figma: Bem-vindo de volta. Neste vídeo, vamos aprender sobre como importar arquivos como arquivos Figma, arquivos esboço e modelos. Então, como você pode ver, eu tenho essa equipe. Vamos entrar nisso. E eu tenho alguns arquivos nele. Então eu não vou Newton este, então vou fazer este para importar, tudo bem. Vá para Novo. E você pode ver que temos o botão Importar, então clique nele. E eu tenho um projeto Figma. E você pode ver que a extensão está preenchida. Então clique nele e clique em abrir. Então, levará algum tempo. Nossos leads finais na fronteira feitos com sucesso. Então, se eu entrar no projeto. Então você pode ver que este projeto está aberto agora, para que eu possa fazer alterações, se quiser. E na página 1, temos quatro quadros. E para dois quadros são páginas da Web e, e esses dois quadros para o aplicativo. E isso também é página da Web. Se você quiser fazer algumas alterações, você também pode fazer isso a partir daqui. Então é assim que importar um projeto do arquivo local. Digamos que se você quiser baixar como nossos modelos, que você possa digitar o Google, baixe modelos Figma. Então eu achei este site realmente útil, figma.com. Então, neste site, temos muitos projetos. Então você pode simplesmente clicar nele e baixá-lo da exibição. E o próximo tamanho do passo é como, digamos que este seja o Figma template.com. Nesta foto, tínhamos muitos modelos e todos esses modelos são livres para fazer para que possamos reter, você pode fazer alterações. E você também pode se inspirar neste projeto se não estiver tendo ideia de como fazer seu próximo projeto. Então eu baixei esse projeto de você. Digamos que se você quiser gostar de importar arquivo de esboço, você também pode fazer isso. E para recursos para esse arquivo de esboço, você pode usar este site chamado Sketchfab dot, assim diz. Então, neste site, temos um grande recurso de sabão, como modelos gratuitos, e você pode dizer wireframe. Também guardo também para o Android Icon e tudo isso. Então eles baixam este. E você já fez no arquivo, eu já baixei este. Então você pode vê-lo. Então, não vou apenas ouvir. E você pode ver esse arquivo de exercícios que baixamos e extraímos. Clique nele. Você pode ver o arquivo de esboço. Vá para Figma, clique em Novo e importe. Então, atualmente, o mesmo limite de arquivo DEM que g. Então eu tenho que fazer alguma coisa. Então eu quero fazer neste. Mais uma vez, clique em Nova importação. E este é um arquivo de esboço. E clique em Abrir. Portanto, nosso arquivo está importando. Você pode ver o nome e o arquivo é importado com sucesso. Feito. Então clique nele. Então, depois de oferecer o arquivo, até mesmo ver que o aplicativo é assim. Então, estamos apenas me dizendo para que os telefones em queda não estejam disponíveis para que possamos substituí-los por qualquer outro formulário. Portanto, há um problema com o arquivo Sketch, então temos que ganhar esses formulários. Mais uma vez. Vamos para casa e pegar este porque eu tenho que te mostrar algo. E logo quando criei esse pedido completo, uma grande interface do usuário, digamos que eu queira mover esse projeto para gostar do meu novo projeto. Então você pode ver que temos opções como múltiplas. Então, se eu clicar nisso e nas opções V8, como rascunhos, e esta é minha equipe. E se você quiser criar uma nova equipe, você também pode fazê-lo a partir daqui. Então, atualmente, eu quero me mudar. Eu vou equipe de programas imaginários. Então, vou clicar neste e me mover, acho que é mono 2 primeiro projeto. E podemos ver que nosso projeto é 0. É assim que você pode importar de um arquivo, esboçar arquivo e baixar esses modelos. Então isso é importante. E verei vocês no próximo. 6. Ferramentas no Figma: Então, somos muito severos. Voltaremos a ele outro vídeo. Neste vídeo, vamos aprender sobre ferramentas. Vamos criar um novo projeto. Vamos clicar no botão Novo e você pode ver as opções como arquivo de design, Figma, arquivo de salto, importar e procurar modelos. Você pode ver a partir daqui que você pode escolher Templars como para iPhone 11 Pro Max, ou você pode escolher como outros smartphones. Ou, se quisermos criar nossa página, você também pode escolher um desktop, ou também pode escolher um slide de 16 anos a nove. E se você quiser, você também pode escolher aqui esses modelos pré-fabricados. Também preservamos a apresentação do sistema de design e wireframe. E se você clicar na comunidade do CMO, ela o redirecionará para a seção da comunidade. E também tem modelos de gerenciador de fig. Atualmente, é a versão beta. Então, estamos interessados no espaço em branco. E você pode ver aqui que atualmente é um programador imaginário equipes e primeiro projeto. E você pode ver que é o primeiro projeto. Então, precisamos de uma tela em branco. Então, vou com o arquivo de design. Depois de criar um novo arquivo, a interface ficará assim. E se você quiser renomeá-lo, basta clicar neste menu suspenso e simplesmente renomeá-lo a partir daqui. Você também pode mover para projetar, excluir, lubrificar e exportar, e também pode visualizar a cadeia de origem. Então, por enquanto, vou apenas renomeá-lo. Vamos renomeá-lo em ferramentas. E como você pode ver, há um logótipo Figma no lado esquerdo. E se eu clicar neste Meno, você poderá ver as opções. A partir desta opção de seção rápida, você pode pesquisar qualquer coisa como eu quiser pesquisar como polígono. Eu posso usar diretamente. E você pode simplesmente desenhar o polígono assim. Pássaro. Vamos dar uma olhada nas mais opções. E, e a partir daqui você também pode ir para File Edit, View, object vector taked Ahrens plugins. Atualmente instalei o único plug-in que são fotos. E você pode, também podemos adicionar que há mais opções, como bibliotecas de integração e desempenho. E você também pode ver a conta hairpin para usar a versão web do Figma , então a opção pode ser diferente. Nem todas as opções, algumas opções como nesta seção, você receberá o aplicativo para desktop. Certo? Certo, este é o movimento. A partir daqui. Você pode mover seus vetores, objetos, imagens e tudo isso. E também há opções de escala. Ok, o próximo é o quadro. Como você pode ver no atalho é F. Se você pressionar F no teclado, ele tem alguns modelos como telefone, tablet, desktop, apresentação, assistir às mídias sociais das pessoas e comunidade Figma. Mas se você quiser criar como baseado na Web, você pode escolher essas opções como desktop, MacBook, MacBook Pro e iMac. Na maioria das vezes eu escolho o MacBook Pro. Então, vamos clicar nele. Em seguida, o modelo está na tela e no quadro, também temos uma opção de fatia. Acho que a ferramenta Slice não é muito usada, então vou pular isso. Ok, na próxima seção temos formas como um retângulo, setas de linha, elipse, polígono, estrela. E se, se você quiser colocar uma imagem da mídia local, também poderá fazer isso. E vamos escolher um retângulo. Você pode simplesmente arrastá-lo no quadro. E você pode ver nesse retângulo é criado aqui. Mas se você quiser desenhar quadrado, o quadrado perfeito, então você tem que segurar Shift no teclado assim. E você pode ver que o quadrado é desenhado, desenhado o quadro assim. Mas se eu remover meu dedo da nave, então você pode ver que a forma mudou agora. E isso aconteceu com todas as formas. Como se eu quisesse criar um círculo. Então você pode ver que eu escolho a elipse e estou arrastando isso. E eu estou morrendo o círculo na tela, mas não são as pesquisas é o ol. Então eu quero criar o círculo. Então vou segurar Shift no teclado. Então, como você pode ver, agora é um círculo assim. E aqui está como uma árvore muito legal. Você pode ver que há quatro pontos no lado leste. E se eu arrastá-lo para dentro, você pode criar um círculo como este. E se eu quiser criar um ícone, você pode usar essa opção para torná-lo bordas mais nítidas em canto arredondado. Acho que já mostro como usar essas coisas em vídeo anterior, mas acho que não mostro como fazer o item do Likud. Como se você duplicasse esse círculo, basta clicar nele e segurar Alt no teclado e arrastá-lo. Sempre que você quiser assim e deixá-lo. E você também pode mudá-lo para outra forma já encontrada para tornar esse círculo pequeno. Você pode segurar o shift e arrastá-lo para baixo assim. Faça com que seja menor e menos placas explícitas aqui. Poderia ser nosso logotipo, assim. Ok, a próxima opção é girar da dor. Você pode criar formas, formas aleatórias como esta. Também podemos fazer rodas a partir dele. Digamos assim. Como se juntar. Assim. Você pode ver se quiser, você também pode adicionar uma cor nela. Basta clicar no preenchimento e neste botão mais. E você pode ver e a cor, e a cor é cinza. E se você quiser fazer algumas alterações, e então você pode escolher, ou você pode simplesmente pressionar V no teclado e apenas seguir este ponto vermelho. Você pode simplesmente arrastá-lo assim. A forma vai mudar. Assim. Se você quiser mudar essa cor cinza para outra cor, basta pressionar este ícone e apenas, e simplesmente arrastá-lo nesta seção de cores. Você também pode usar gradiente se quiser. Você pode ver a mudança de cor agora no quadro, assim. Ok, a próxima opção é lápis. A partir daqui, você pode desenhar assim. E a próxima opção é texto. Vamos adicionar algum texto na tela assim. Qualquer coisa como aleatório. O tamanho da fonte é muito pequeno. Então, se quisermos torná-lo maior, basta selecionar a fonte usando Control a. E você pode ir para esta seção de texto e alterar o tamanho da fonte para P2. Vou mantê-lo até 48. Assim, podemos ver os tamanhos de fonte aumentados agora. E você também pode alterar o tipo de fonte assim. Minha fonte favorita é videocassete. Então, vou escolher este. E você pode ver a fonte assim. Se você quiser. Você também pode adicionar traços, efeitos e tudo isso. E a próxima ferramenta é Ferramenta Mão. Digamos que se você tiver mais de um quadro, vamos duplicar esse quadro. Pressione Alt e mova-o assim. E, atualmente, se você estiver trabalhando como primeiro quadro e quiser mover um quadro para outro. Você pode usar essa barra deslizante para mover para outro quadro. Mas não é isso. Mas se você tiver muitos quadros, como três ou quatro quadros, podemos usar a mão. E o atalho para a ferramenta manual é borda. E você pode ver que a mão está no quadro. E sim, você pode arrastá-lo assim. Segundo quadro. O primeiro quadro. E a próxima ferramenta é o comando. Digamos que você esteja trabalhando no projeto e sua própria maneira eu recomendo no quadro como este é o logotipo. Então você pode me dizer o que você gosta. Essa é a mudança. Assim. Certo. Eu cometi muitos erros ortográficos. Então você deveria mexer com saber que esse é o logotipo para que não precisemos fazer nenhuma alteração. Então você é outro parceiro ou um colega de equipe pode responder a esta mensagem, ok? E basta clicar na resposta. Certo? Mas você pode ver quando eu entrar na ferramenta Mover, então ela ficará invisível. Mas se eu entrar em comentário novamente, então ele está visível agora. E, novamente, você pode ver que este é o logotipo não pode mudar. E seu companheiro de equipe, senhor. Certo. Essas são todas as ferramentas na Figma que você pode usar para fazer qualquer projeto como este seria Mary gosta de um projeto muito estranho na tela. Então é isso por hoje. E verei vocês no próximo. 7. Painel de camadas: Bem-vindo, bem-vindo, bem-vindo. E isso será ao redor aprender sobre como criar camadas, páginas e componentes. Portanto, este é um projeto do vídeo anterior. Então, como você pode ver, temos duas listas que são MacBook Pro para encerrar meu MacBook Pro V1. E dentro dela tem como vetores, elipses, círculos e tudo leva ao texto. E se quisermos criar uma nova página, uma página em branco, vou clicar neste botão mais. E se você quiser renomeá-lo, você pode renomear o que quiser. Por enquanto, vou escolher pares para pressionar Enter. E você pode ver que o espaço está completamente vazio agora. Mas se eu quiser esse quadro, mova da página 1 para a página 2 ou só quero copiar. Você pode simplesmente pressionar Control C e simplesmente ir para a página dois e pressionar o controle V. E você pode ver nosso quadro na página um. Agora está no quadro, e nós apenas copiamos em um quadro. Digamos que se você quiser copiar todas as coisas da página 1 para a página para ir para a primeira página e selecionar todos os amigos enxutos usando Controle ou Comando D no Mac. E Controle C para cópia. Agora vá para a página dois e pressione controle V. E você pode ver todas as coisas da primeira página. Agora está na página dois. Portanto, são nossas páginas em D. E você pode ver que esta é a lista, o MacBook Pro 21. Então, essas são as camadas. E digamos que eu tenha esse círculo, mas é logotipo, e eu quero usá-lo de novo e de novo. Posso transformar esse logotipo em componentes como selecionar este círculo, ir para o Departamento DOE. E você pode ver esse ícone do meio. Isso é criar um componente e o atalho é Control Alt e clique nele. E se entrarmos em ativos, você poderá ver o MacBook Pro V1 e o componente é a ferramenta Ellipse como esta. E se quisermos usar isso e arrastá-lo para a tela assim. E queremos ajudar quando você está trabalhando com muitos amigos. Todo grande projeto. Então, essas são todas as coisas sobre camadas, páginas e SSRS. Então essa é a sua foto. E verei vocês no próximo. 8. Componentes figma: Bem, então ele realmente precisa ser bem-vindo de volta a outro vídeo. Neste vídeo, vamos aprender sobre os componentes. Em vídeos anteriores, aprenderemos sobre como criar componentes e como usá-los. Mas neste vídeo, vamos aprender mais sobre componentes, como o tipo de coisas que você pode fazer com os componentes. Digamos que você esteja projetando um aplicativo, o aplicativo do navegador Hub. E você tem várias páginas como essa. E você tem ícones como este. E você tem que usar esses ícones nesta página superior do barco. Tipo, digamos que eu queira adicionar este ícone do YouTube. Então, vou apenas selecioná-lo. E vamos mover esse quadro. Como eu disse, a maioria desses ícones. E também queremos esse ponto e vírgula na próxima página. Isso foi duplicado usando alerta no Mac, é a tecla Option, assim. Mas eu quero mudar a cor desse ícone como o ícone do YouTube. Então, vou entrar em preenchimento e transformá-lo em comércio. Certo? As cores mudam. Agora. Você pode ver a cor real. Mas, ao mesmo tempo, também quero gostar da cor de gênero desse ícone também, mas tenho que fazê-lo novamente. Então, neste caso, os componentes vão nos ajudar. Vamos mover esse hype no domingo. Este espaço em branco, também, este. E selecione o ícone. E aludi anteriormente como criar um componente. Então vá no amino da barra superior, selecione este botão de diamante e clique nele. E agora você tem um componente. Então, como você saberá que isso é um componente ou não? Então, se você ampliar isso, você pode ver o pequeno ícone de diamante em você. E também há um componente. E isso também é chamado como componente após componente ou padrão. Então, se entrarmos no ativo Pentland e você puder ver nosso logotipo do YouTube, agora é componente. Você pode arrastá-lo assim e colocá-lo funcionando muito bem. Você quer assim. Então, vamos fazer deste Instagram também um componente e esse ícone do PayPal. Portanto, este também é o botão componente mais. Então, esses são os componentes. Agora podemos arrastá-lo assim, colocá-lo onde quiser, assim. Então, o que eu quero fazer é exibir esse ícone, também no próximo quadro. Pressione Alt e arraste-o para o próximo quadro, assim. Este é o componente mestre e esse é o componente filho. E o que eu quero fazer é que eu quero mudar a cor disso e disso. Então, o que vou fazer é clicar, vou selecionar esse componente mestre e vamos projetar painel e clicar nessa cor de seleção. Então, atualmente, essa cor preta e eu quero mudar, você vai gostar de ler. Então, vou arrastá-lo para o fardo sobre o vermelho. E você pode ver o componente mestre e também a cor do componente filho também é alterada no quadro de um e também em diferente também. Então, por causa disso, você não precisa mudar a cor de novo e de novo nos quadros diferentes. Vamos fazer o painel de navegação. E podemos simplesmente adicionar todos os elementos nele. E vamos criar esse painel de navegação em componentes para que não precisemos arrastá-lo no segundo painel de caneta repetidas vezes. Então, vamos criar um painel de navegação. Vamos escolher um retângulo. Você pressionará R para o atalho para criar um painel de navegação simples como este. Então, criamos essa barra de navegação. Então você pode ver na seção posterior no primeiro quadro, iPhone 11 Pro Max, o retângulo está na parte superior. Então v vai, se v, se eu arrastar este YouTube, ícone do YouTube em desbarrado, então ele não vai exibir. Você pode ver. Então, se eu mover esse retângulo no lado negativo, assim no final do quadro. E se eu arrastar esse ícone do YouTube novamente no painel de navegação, e você puder ver que o logotipo está visível agora. Então, vamos arrastar esse ícone um por um. Ok, o painel de navegação é criador. Então, vamos selecionar isso e você pode pressionar o botão Componente para criar o componente. Então agora este é um componente e você pode ver o componente no painel Ativos dentro do iPhone 11 Pro Max 1. Digamos que se eu mover isso para fora desse quadro. Portanto, não é componente universal. E você pode simplesmente arrastá-lo no quadro assim. Certo? Então, esses componentes e esses componentes são totalmente diferentes. Fizemos isso no painel de navegação depois de criarmos um componente. Então, esses são os diferentes. Se eu excluir este, você poderá ver que o componente mestre do painel Ativo não foi excluído agora, mas não desse painel de navegação. Então, esse tipo de coisa que você pode fazer com um componente. Então isso é 24. E verei vocês no próximo. 9. Guia /painel: Bem-vindo de volta. Neste vídeo, vamos aprender nossa uma das penalidades mais importantes que foi projetado no painel. Então, vamos abrir este projeto. Então, se eu clicar neste topo, você pode ver o painel de design e ver a posição x e y. Estamos cansados ângulo. E se você quiser fazer os colonos redondos, você não pode gastá-los daqui. Se você quiser adicionar o layout automático, você vai fazer isso a partir daqui. Mas se eu clicar nisso, você pode ver se está bagunçado. Então, não vou fazer isso. Então pressione Control Z para desfazer as coisas. Certo, agora é normal. E se eu quiser adicionar uma coluna, você pode fazê-lo a partir daqui. Atualmente, é ingrediente. Então, vamos escolher a cor e você pode definir quanta coluna você quer, como atualmente, dedicada é cinco. Então, principalmente na indústria, eles usaram o fracasso. Então, vamos ficar com ele. Então você pode ver que podemos ajustar esses textos assim de acordo com essas colunas. Então, ficará mais melhor. Ok. E temos opções como camada, traço colorido de silício, efeitos e exportação. Então, vamos olhar um por um. Então, vamos remover isso. Certo? Então, se eu clicar neste logotipo, você poderá ver a posição x e y. Então, se eu quiser entre como um menino, posso gerar a partir daqui, como atualmente é 100 ohms, então eu posso fazer isso bem, é como um 100. Então você pode ver que é j agora. E se você quiser, você pode mover isso manualmente assim. Você também pode alterar a largura e a altura. Como atualmente o opiáceo é como 1906. E você pode ver que é uma espécie de palavra distrito esticado. E vamos rastrear a hidrólise. Então podemos ver que parece muito estranho. Torne isso normal. Certo. Então, a partir desta opção, podemos fazer proporções de restrição. Então, digamos que se eu mudar isso para 200, então ele automaticamente adicionará apenas EPR em altura. Vejamos outro exemplo. Digamos que eu faça, vou compensar até 250. Assim, você pode ver a mudança de tensão de acordo com a altura. Então, vou torná-lo normal. Então, se você quiser alterar o ângulo desse logotipo, você pode fazê-lo a partir daqui. Digamos que 45. Você pode ver a corrente pendurada agora. Então, se eu me mover mais para o logotipo e você puder ver meu cursor, você muda. Então eu posso me mover como manualmente. Ou você pode simplesmente ir aqui e digitar 0. E se você quer gostar de fazer esta rodada, então é um, já é redondo, então eu não vou fazer isso. Então, digamos que se você tem um quadrado como este e você quer mudar os cantos afiados para como redondos. Então, a partir daqui, você pode fazer isso acontecer. Digamos, vamos dar valor. E você pode ver cantos afiados estão mudando para a cidade. Então, a partir da restrição, podemos começar nossos logotipos e botões de navegação. Por exemplo, se eu clicar no meu logotipo e vamos para a restrição. Restrições. Certo? Então, atualmente, não está à esquerda e no topo. Então, se eu mudar para um direito e Morton e se eu decidir meu vamos dizer este quadro, você pode ver o logotipo, ele é movido para fora desse quadro. Então, o que eu quero fazer é que, quando eu redimensionar essa fase, o logotipo tem que ficar aqui. Então, eu quero fixar esse logotipo nesta posição. Então o que vou fazer é que vou para a intervenção e a posição 4, isso é vivido e tem que estar no livro. Então, digamos que se eu selecionar esse quadro novamente, tivesse decidido, você pode vê-lo girar agora. E você pode fazer a mesma coisa com esse contato domiciliar e sobre. Digamos que eu queira fixar um contato doméstico e sobre, mas eu quero fazê-lo ao mesmo tempo. De novo e de novo. Então, o que eu quero, então o que vou fazer é clicar em Início e manter pressionado Shift, clicar em Contato e clicar por conta própria. Portanto, este contato domiciliar sobre é selecionado. Então eu quero fixar nesta posição. Então, vou entrar em restrições. E atualmente não está do lado certo, então vou escolher brilhante e o policiamento deve ser ensinado. E se eu clicar neste quadro e redimensioná-lo menos. Então você pode ver que foi. Então é assim que você pode usar a consciência. Então, a próxima coisa são camadas. Então, a partir disso, você pode escolher diferentes modos de mesclagem como adaga Modibo, clavícula, assim. Então garanta que eu selecionei o quadrado. Digamos que eu queira mudá-lo para multiplicar. Então, vou clicar na multiplicação. Então você pode ver o efeito. Tornou-se transparente. E também tem a cor cinza. Então, se você quiser mudar a cor, você também pode alterá-la daqui. Mas atualmente vou deixá-lo como está. Então, meu favorito é como essa exclusão. Você pode ver a magia. Então, isso se torna um filme negativo. Por enquanto, vamos apenas multiplicar. Se você quiser usar outras opções, como esquiva de cores de tela grande, você pode usá-la. Basta brincar com ele. Certo? Então, se você quiser, você também pode diminuir ou aumentar a obesidade da web. Então, atualmente, é 100%, então vou para graus até 60. Então você pode ver que ele se tornou um transplante alfabetizado. Para contratar. Você pode simplesmente clicar neste botão. Ele será automaticamente. Então, vamos tornar normal a 100% como este. Então, vamos mudar a cor. Você pode ver, podemos mudar a cor assim. Então, vamos escolher este. Certo? Então, a partir daqui, você também pode, se quiser, você também pode adicionar o código hexadecimal e colá-lo aqui. E também podemos diminuir um enfileirado é opacidade 50%. Ou se você quiser se esconder, você pode se esconder assim. E digamos que você não queira cor, basta pressionar esse botão e ele será removido. Vamos desfazer isso. Então, o próximo é derrame. Então, traço, você pode adicionar um traço. Então você pode ver quando clico no traçado, que já adicionou o traçado preto. Então eu quero mudar para outra cor. Então eu posso clicar nessa caixa que é de cor. E eu posso arrastá-lo na paleta de cores quando, onde eu quiser. Então, vamos escolher esta lição, esta vermelha. Ok, você pode ver que a borda é vermelha. E se você quiser adicionar uma cor de gradiente semelhante. Então você pode simplesmente ir para esta caixa. E a partir daqui você pode escolher linear. Então você pode adicionar dois pilares. Então, atualmente, está chovendo. Então, vou adicionar a segunda cor, como a cinza. Assim, você pode ver o hub se tornar o vermelho e o hub se tornar núcleos. Então, vamos torná-lo sólido por enquanto. Certo? Você também pode aumentar ou diminuir o oposto. Você também pode adicionar o código hexadecimal. E você também pode escolher diferentes formatos de pellets como RGB, CSS, pois SSL é SB. Então, se você quiser aumentar o traçado, você pode simplesmente adicionar o número como menos ar em bem. E você pode ver que o derrame é aumentado em cinco. E digamos que, se você quiser, o traço deve estar centralizado, você pode escolher o centro. E você também pode fazer isso por fora assim. Então, a partir desses três botões, você terá mais opções. Como se eu não tivesse traços, como um estilo de traçado deveria ser sólido ou traço. Então, atualmente, obrigatoriamente, o sólido. Então, vou escolher o dash. Então você pode vê-lo se desapegando. Então, se você quiser adicionar quanta dívida e quanto Gabby quer, você já pode se familiarizar. Então, por padrão, acho que é 10, então vamos fazer até 15. Certo? E o que devemos usar o aplicativo Desk? Então, por padrão, é como Satanás para nenhum. Então, se você quiser, você pode fazer quadrado ou redondo assim. Então, o desktop se torna por aí. Então você pode ajustar a junção como se fosse um chanfro milimétrico e acho que este é por aí. Assim, você também pode adicionar esse ângulo delta daqui. Então, vou deixá-lo como está. Parece muito bom. Mas só essa raiz quadrada parece boa. Então é assim que você pode adicionar um traçado em formas e objetos. Então, vamos escolher o efeito. Então, a partir do efeito, você pode adicionar, vamos adicionar o efeito neste texto emergente do programador. Então eu escolhi esse texto e o sangue do playground atualmente. Vamos remover este e adicionar novo efeito. Isso é sombra. E você pode ver que esse texto é como girar. Então, se eu quiser, também vou adicionar a quantidade de sombra que eu quero. Então, atualmente, é como por que está cheio e o sangue é 4. Então, quando x aumenta, y. vamos aumentar demais. Então você pode ver a sombra. Então, vamos gastar os próximos 40. Então você terá esse efeito de sombra de gota legal. Então, por isso é demais, então vou inventar listas de gostos, tudo bem. E deve ser 0. Agora parece muito legal. Então, se você quiser, você pode mudar as cores como efetivas sozinho. Por enquanto vou sair como está, porque parece muito legal. Então, eu só gosto do quanto você quer de você. Se você quiser, você também pode escolher diferentes modos de mesclagem, como misturas de cores marrom escuro de várias partes, suaves, leves e tomadas. Vamos usar multiplicar. Certo, vamos olhar. Eu normalmente não fiz. Digamos que se eu clicar em outro elemento como uma lista, eu clico neste quadro. Em seguida, as únicas opções de design, como camadas de quadro, serão diferentes para esse elemento. mesmo para esse elemento, esse elemento para todas as coisas. Acho que esqueci de falar sobre mais sobre efeitos. Então eu vou fazer, e vamos adicionar outro quadrado. Certo, assim. Então, se eu entrar em efeitos, então atualmente estou recebendo opcional e solto sombra. Então, se você quiser, você também pode escolher opções como Sombra interna, desfoque de camada. Então, vamos ver um por um. Vamos usar a sombra interna. Assim, podemos ver que a sombra interna é adicionada. Você pode ver aqui. Se você quiser, você também pode incluir o, o sangue. Como vamos adicionar os 20 e os 20. Então, agora você pode ver o curto interno dele. Então, vamos escolhê-lo novamente. E vamos fazer isso. Assim, você pode ver que o efeito de desfoque da camada é adicionado a ele. Também podemos adicionar sangue de mícron nele assim. Então, essas são todas as coisas que você pode fazer com efeitos. Digamos que eu tenha esse quadro, a área de trabalho três, e quero adicionar como uma imagem no fundo oposto. Vamos adicionar essa imagem de pizza. Arraste e solte isso no quadro assim. Certo? Acho que é como realmente confuso. Então, vamos escolher a tela da área de trabalho e você pode ver a imagem nas imagens na parte superior. Então, o que eu quero fazer é que eu quero ver todas as opções como as formas, texto sobre tudo isso. Então, vou mover isso na parte inferior. Então você pode ver, podemos ver todas as opções. Então, vamos diminuir a opacidade disso. Você pode ver na imagem pendente de design e o oposto, é 100 atualmente, então vamos escolher até 20%. Em seguida, nossos botões de navegação e todas as coisas neste quadro ficarão visíveis. Se você quiser. Você também pode escolher os diferentes modos de mesclagem como segunda-feira por clavícula, exclusão, diferença, diferença e tudo mais. Então, vou sair como ele está passando atualmente. E se você clicar nesta imagem , você receberá esse mineral. Como restrições de exposição, saturação, temperatura e tonalidade realces e sombra. E você pode abordar a imagem de você, assim. Então, depende totalmente de você. Então, eu sou como brincar com isso. Então, se você está trabalhando no projeto como realmente legal, então, vamos ter certeza de que você tem um certo deve ser perfeito. Então, há um tipo de coisa, você pode fazer isso com o painel de design. Então isso é lamentável. E verei vocês no próximo. 10. Ferramenta e fontes: Bem-vindo de volta. Neste vídeo, vamos aprender sobre. Então, como você pode ver, eu tenho esse quadro chamado desktop one. E para acessar o texto, podemos colocar P para código curto. Vou considerar o ícone 2k plus genuíno. E se eu clicar no quadro e digitar texto nele, assim, se você quiser, você também pode copiar colar seu texto usando o controle C e o controle V. Portanto este é o primeiro método selecionado no texto e clique na tela. E você será discutido e poderá digitar o que quiser assim. E o segundo método é que você pode selecionar texto e desenhar a dimensão de acordo com seu projeto assim. Você pode digitar o que quiser nesta caixa. Eu quero apenas copiar pasta assim. Se você quiser abordar esse texto anda novamente, você pode acessá-los clicando nele. E isso adicionou isso de acordo com seu projeto, assim. Digamos que se você quiser aumentar o tamanho da fonte desse texto, você pode selecioná-lo e depois ir para o painel de design. E você pode ver o menu de texto. E a partir daqui você pode ajustar a fonte. Tipo, que tipo de telefone você quer atualmente faz em Roboto? Então, se quisermos mudar outra fonte, como digamos caixões. E você pode simplesmente digitá-lo e clicar nele. Não quer mudar para você. Se eu quiser dizer quatro formas diferentes, você pode pesquisar nele. Então, por enquanto, estou apenas nos Poppins. Então, vamos aumentar o tamanho da fonte em até 50. Digamos que se você quiser mudar sua fonte, regular para negrito, você pode alterá-la daqui. Atualmente, está em regular. Podemos entrar neste menu e posso selecionar Negrito. E você pode ver seu texto em cada quadro genuíno. Agora, se você quiser, você também pode usar o atalho chamado controle e B para alterar sua rotação normal muito negrito, também a bordo assim. Também temos outras opções como linha extra, fina, leve, regular, média, semi negrito, extra negrito e preto. E você também pode escolher essa opção, se quiser. O texto nasce agora. Então, como você pode ver, eu tenho esse paradoxo e vamos aumentar a fonte oposta. Então selecione este parágrafo e canonicamente, o tamanho da fonte é como habitar. Então, vamos compensar o tipo 30. Certo? tamanho da fonte é aumentado. Então, vamos adicionar apenas este. Assim. Digamos que eu queira alinhar esse texto no centro poder ir a este menu. A partir daqui, posso alinhar minhas ferramentas de texto, à esquerda, ao centro e à direita. Então, atualmente, ele está ao vivo para este centro da avenida. Então você pode ver que nosso teste é alanina para centro. E também podemos alinhar nossa notação para escrever. Ao fazer isso, terminamos. Então eu gosto disso, o néfron, então vou deixá-lo assim. Digamos que queremos adicionar um espaçamento entre letras. Você pode fazer isso daqui. E o país fez 0%. Então, vou aumentar para gostar do phi. E novamente veja como um espaçamento entre letras está neste texto. E se você quiser adicionar como um angustiante, você pode adicioná-lo de você atualmente para 0. Vamos adicionar o bolsista flex. E você pode ver como o espaçamento paralelo é adicionado ou aqui. Você também pode ajustar esse texto de acordo com seu quadro. Atualmente, isso está no topo. Quero editar esse texto no meio para poder escolher essa opção chamada align middle. Então meu texto será alinhado, ancorado neste texto. E atualmente está em Milão. E também vamos alinhar a sacola Oberlin e também a arma como esta dos alunos. A partir deste menu Complementos, você pode escolher diferentes opções, como Divisão de Elementos, parágrafo, recuo, estilo de lista. Casos posteriores, como se você quiser fazer suas suposições altas ou maiores, você também pode fazer isso daqui. E você também pode ver a visualização do texto. Então, digamos que eu escolha este centro para que você possa ver a prova para isso. E o aparentemente está à esquerda. Então, vamos escolhê-los. Centro. E este é o caminho certo, e esta é a recursão justificada e frontal. Se você quiser sublinhado ao seu gosto, você pode fazer, você pode adicioná-lo a partir daqui. Você pode ver que o sublinhado é adicionado em seu texto. Você também pode adicionar um tachado nele. Escolha esta declaração de fonte mínima. E você pode ver que o texto agora está marcado. E também podemos adicionar a venação paralela. Então conectado em 0, vamos somar como 20. E você pode ver que o recuo é adicionado em nossa prevalência. E também podemos adicionar os pontos de bala como pontos e a lista como esta que você pode ver que o ponto é adicionado aqui. E se eu escolher o número um, então você pode ver 12 é adicionado aqui. Digamos que você copie, colou algum texto da internet. E o texto alt está em letras minúsculas. E se você quiser aumentar todo o texto em letras maiúsculas, podemos alterá-lo de você indo a partir disso mais tarde obtém Meno, e pressione este botão maiúsculas. Assim, você pode ver que nosso texto está agora em maiúsculas, e você também pode transformá-los em minúsculas novamente. E se você quiser mudar para título, caso de título, você também pode fazê-lo a partir daqui, muito usando esse título recebe Meno. E a partir desta seção você também pode adicionar os números. E temos muitas opções daqui, mas estamos interessados apenas nessas opções como alinhamento, declaração, organização pai, estilo de lista, minúscula , caso n. Vamos selecionar este texto. Vamos adicionar alguma cor nele. Então, atualmente, está em sólido. Então descobrimos que você também pode torná-los brilhantes usando esse linear. A primeira cor é vermelha. E vamos transformar essa cor como um livro como esse. E vamos aumentar a opacidade até o máximo, a menos que eu faça essa barra. Assim, você pode ver que o gradiente é adicionado ao nosso gosto. Portanto, o efeito de gradiente é adicionado neste texto. Então, se você quiser aumentar ou diminuir o oposto, você pode ajustá-lo a partir daqui. Digamos que eu queira diminuir o oposto da liquidez não era. Então você pode ver que o oposto está diminuído, faça 100. E se você quiser ocultar o texto, você pode gostar do formulário híbrido aqui, assim. E se você quiser remover, o efeito, pode clicar no botão Menos. Então, o texto se foi. Agora, vamos pressionar Control Z para desfazer essa coisa. E você também pode adicionar um traçado nele. Então, se eu clicar no traçado, você poderá ver que o traçado foi adicionado neste texto. Se eu ampliar isso, você pode ver o traçado. E também podemos mudar a cor do Destiel. E você também pode aumentar ou diminuir a opacidade e também aumentar a homenagem. Queremos, por padrão, que seja um. Então, vamos escolher encontrar. E você pode ver que o traçado agora é phi, e você também pode mudar a posição do seu traçado como atualmente ele está fora para que você possa escolher dentro. Nossa desvantagem de higiene central é legal, então vou escolher lá fora. Então, vamos adicionar algum efeito. Então, se eu clicar nesse efeito, você pode ver, por padrão, o efeito de sombra de soltar será aplicado sobre ele. Você pode ver que ele ensinou sombra sobre este texto. Se você quiser fazer algumas alterações, você pode fazer isso a partir daqui. Como atualmente y é quatro. Se você quiser adicionar apenas essa explosão dessa sombra, você pode fazê-lo a partir daqui. Então, atualmente y é 4, então vamos escolher uma lectina. A sombra é o nosso distrito de acordo com a posição Y, ou seja, dez. E você também pode adicionar exatamente o oposto, a fórmula. Por padrão, são 25. E eu acho que parece legal. Então, vou sair como está. E também podemos adicionar outros efeitos como Inner Shadow, camada de desfoque e vegetais. Atualmente, vou escolher a sombra. Então, essas são todas as opções que obtemos com o texto. Então isso é acessível, Julia, e eu vou ver vocês no próximo. 11. Imagens no figma: Bem-vindo de volta. Dessa forma, vamos aprender sobre a imagem. Então, vamos criar um retângulo. Um retângulo simples como este. E atualmente está cheio de cor cinza. Então, está sólido agora. Mas eu quero substituir essa imagem de veto sólida. Então, vou clicar no menu suspenso. E vou para essa imagem. E você pode ver que temos esse padrão como tabuleiro de xadrez. Então, a partir daqui, você pode escolher uma imagem. Então, se eu clicar nisso, ele será direto para minha pasta. Então, a partir daqui, posso escolher imagens diferentes. Então, digamos que vou escolher este. Então esta é a imagem de nós coreanos. Atualmente, é muito popular em todo o mundo. Se você quiser assistir a esta série, você pode auditar na Netflix. Assim, você pode ver que, por padrão, ele é preenchimento. Então, o que está preenchido? Então, digamos que eu tenha essa forma e quando eu a redimensionar, você pode ver as imagens se ajustando de acordo com essa forma. O próximo é os pés. Então, o que ele faz é que, digamos que quando eu gosto de redimensionar meu contêiner, então você pode ver que a forma da imagem não está mudando. A única continuidade do Scheppach está mudando. Então é assim que você pode usá-lo. A próxima é a colheita. Então, a partir do corte, você pode cortar sua imagem como outros assuntos como Photoshop e tudo isso, assim. E se eu fechar isso, você pode ver as imagens cortadas agora. E se eu entrar novamente neste preenchimento, então eu posso cortar essa imagem novamente assim. E o próximo é o título. Então, o que faz com que ele repita a imagem de acordo com a forma. Você pode ver. Digamos que eu redimensionei meu contêiner assim. E você pode ver que a imagem está se repetindo de acordo com o tamanho desse contêiner. Assim. Parece legal. Você pode ver o padrão infravermelho aqui. Certo? Então, essa é uma opção que você pode jogar com ela. Então, a próxima opção, atualmente menos assunto em campo. Você só se sente entorpecido. E se você quiser girar essa imagem, você pode fazê-lo a partir daqui. Do botão interrompido. Se eu clicar nesta imagem será encaminhada em nitrogênio. E lembre-se de uma coisa, só a imagem vai girar, não a nave. Se eu fizer uma forma como essa, se eu girá-la novamente, você poderá ver apenas as imagens girando, não a forma. Se você quiser ajustar sua imagem. Temos opções como exposição, contraste, saturação podem pregar alertas, destaques e rasos. Se você usar o Adobe Lightroom, talvez conheça todas as listas. Portanto, há três maneiras de importar suas imagens em seu projeto. Vamos criar um quadro, um quadro de dados como esse. E se eu mover minha imagem na área de trabalho, você poderá ver as imagens. Além disso, agora tenho que ajustá-lo manualmente. Então, vamos limpar algumas formas como perfil de elipse. Digamos que você tenha que adicionar imagem nisso. Então você pode fazer isso usando menos imagem. Ele pode entrar em forma. E você pode escolher a opção chamada Inserir imagem. E você também pode usar cursos curtos como conclusivos. Então, vou selecionar este. Vamos fazer a imagem. Clique em Abrir. E você pode ver imagens no meu cursor. E se eu clicar no círculo, a imagem está subindo. Então, as imagens vão colocar nesse círculo. E também o mesmo com esse polígono. E se você quiser fazer alterações energéticas, selecionar esse círculo e ir para preenchimento. E você pode alterar todas as opções, como cortar por turno, feed e tudo isso. Digamos que este perfil de imagem seja um tipo de retrato um pouco para cima, para que possamos fazê-lo assim. E o próximo método é importar suas imagens que apenas arrastam e soltam, selecionam nossa imagem e arraste-a o seu software Figma como este, e você pode endereçá-la libertária onde quiser, como isso. Então, essas são tudo o que você pode fazer com imagens. Então esse é o seu portfólio e 0 no próximo. 12. Operações boolean no Figma: Bem-vindo de volta. Neste vídeo, vamos aprender sobre as operações booleanas. Então, quais são as operações da operação booleana? Você pode criar uma forma personalizada. Como se você quiser criar um logotipo, você pode fazer isso usando operações booleanas. Vamos fazer algumas fichas como uma elipse. Vamos pegar outra elipse como essa e selecionar ambas usando Shift. Então você pode ver na barra superior que temos com uma operação. Então, o primeiro é a união. Digamos que você queira combinar duas formas juntas que você possa selecionar essa seleção de união. E agora está combinado. E só eu desfazer esse controle. D ou normal novamente. Vamos voltar para subtrair que eu posso fazer isso. A partir daqui. Eu estava tentando selecionar ambas as formas e ir para operações booleanas e subtrair a seleção. E você pode ver a operação de subtrair. Certo, vamos desfazer este. Certo? Então, a próxima é a seção de introdução. Então você pode ver em sua jurisdição, apenas a seção do meio permanece, n Todas as coisas desapareceram. Agora, você pode ver esta seção de interação permanece apenas. Então, a próxima é a seção aguda. Ao explorar apenas a seção de introdução será cortada. E todas as coisas permanecerão como estão. Então, vamos clicar na seção. Você pode ver que apenas distinto é cortado. Então você só precisa brincar com ele. Você pode editar formas de modo, como, digamos retângulo, assim. E vamos todos eles. E vamos escolher a seção de desculpa. E você pode ver que a opção booleana é executada nessas três formas. Apenas limitado. Você pode personalizar a forma. Se você quiser fazer um logotipo, você também pode fazê-lo a partir daqui. É tipo de nível. Então você pode simplesmente colocá-lo no topo, assim. Então é assim que você pode fazer um navio personalizado usando operações booleanas, então deci em diante. E verei vocês no próximo. 13. Fama de alinhamento e distribuição: Bem-vindo de volta. Neste vídeo, vamos aprender sobre como alinhar as coisas na Figma. Então, como você pode ver, eu tenho esse projeto aberto, vamos chamar mais tarde obstáculo. Então, como você pode ver, eu tenho esta página de login. Digamos que esses ícones sejam muito math.pi assim. E você quer alinhá-los assim. Então, dessa forma, vamos usar esses botões de alinhamento para selecionar várias coisas. Em Figma, você tem que segurar Shift. Então clique no botão Twitter e segure Shift e, em seguida, clique no facebook e, em seguida, no Google. Assim, você pode ver que as várias coisas estão selecionadas agora. Então, agora vá para o painel de design. Então, atualmente, esses três logotipos não estão alinhados verticalmente, então vamos alinhá-los em casa com verticalmente. Então, temos um botão especial para isso. Então você pode ver que isso é alinhar o botão vertical. Então, se eu clicar nisso, você pode ver que nosso logotipo está alinhado verticalmente, mas há um problema. E o problema é que você pode ver o espaçamento não está correspondendo aqui. Então, temos que adicionar esses espaços. Assim, podemos adicionar espaços usando esse mínimo de heroínas. Portanto, temos opções como na opção Mais, como espaçamento vertical de distribuição amarrada e distribuir o espaçamento horizontal. Então, vamos selecionar o espaçamento horizontal distribuído. E você pode ver que nossos logotipos estão alinhados e a espécie também é a mesma entre eles. Então é assim que você pode alinhar as coisas na Figma. Então isso é importante para você e eu vou ver vocês no próximo. 14. Bibliotecas de equipe figma: Bem-vindo de volta. Neste vídeo, vamos aprender sobre a biblioteca da equipe. Então, o que é considerado biblioteca? Se você entrar como qualquer um dos seus arquivos e se quisermos ativos, poderá ver as opções. Você pode ver esse ícone de livro. E se clicarmos nisso, isso aparecerá este menu. Então você pode ver e representamos em bibliotecas. E o arquivo atual é sem título. Você pode ver que este é o sem título. Como se você quiser usar esses componentes em mini-projeto, para que você possa usá-los, mas atualmente estou usando a versão gratuita. E se eu clicar nisso, você pode vê-lo. Está me dizendo que é apenas para a conta profissional. Não é para a conta gratuita. Portanto, há muitas outras opções como eu realmente não preciso desse ícone de filtro, nosso arquivo da comunidade Figma. Então, novamente, use isso. Então, vamos ligar isso. E você pode ver os ícones assim. E eu posso arrastá-lo. Então, posso usar esses ícones em meus projetos. E também está me mostrando minha equipe criativa que é programadora imaginária. E se eu abrir isso, ele só me dirá que tipo de cores eles são usados nessa equipe de programadores restante. Então, vamos para o Lar e iremos para a comunidade. E nesta seção de ícones temos esses ícones de moldura. Clique nele. E se você quiser usar isso, todos os ícones, você pode simplesmente clicar neste botão duplicado e ele vai duplicar para você. E então você pode usar isso, todos os ícones desta biblioteca de equipe. E temos que apenas alternar essa opção. E podemos arrastá-lo o projeto ou quadro assim. E também mostrará que tipos de ícones usamos neste projeto. Usamos esse orador de mulher honesta e também este sinal de aviso. Então, esse tipo de coisa que você pode fazer com uma biblioteca de equipe. Então é isso para o vídeo de hoje. E verei vocês no próximo. 15. O painel de código no Figma: Bem-vindo de volta. Neste vídeo, vamos aprender sobre o painel de inspeção. Então, se eu clicar neste painel de inspeção, você poderá ver opções como carvão. Você também pode ver o CSS. E se eu clicar nisso, você poderá ver as opções como iOS ou Android. E esse é o código. E se eu clicar nisso, esta é a tabela. A partir daqui, você pode ver isso na cor de fundo, meu não colorido para cima este projeto que é verde e atualmente não estou selecionado editando, ele está em segundo plano. Se eu selecionar isso, meu primeiro quadro como um desktop. E você pode ver opções como atualmente estou selecionado desktop um quadro e todas as propriedades como altura estranha, lábio superior e mesclagem. A cor. Atualmente, somos totalmente brancos, então a cor lê, o código hexadecimal é FFA para 16. E você pode ver a parte principal também. Digamos que você seja um companheiro de equipe seja um desenvolvedor web, um desenvolvedor web front-end e ele esteja trabalhando com CSV. Então, ele pode simplesmente copiar essas propriedades e você pode simplesmente colá-lo em sua chamada. Portanto, você não precisa escrever emitindo como apenas essas propriedades, como altura ou posição de altura e cor de fundo. E se eu clicar neste texto do modelo de programa imaginário, então ele me dirá. Você pode ver todas as propriedades como ocultaríamos, deixaríamos, mesclamos e apenas o texto. E tudo é o conteúdo que você pode ver no Photoshop, ele dirá, que tipo de fonte eu usei, um tamanho híbrido, comprimento ou quais são as cores que usei como eu usei uma cor de gradiente e coisas do gênero. Quando é roxo e um é como uma cor de lavanda. E neste curso, e você pode ver a opção CSS, iOS e Android. E se eu clicar neste botão IS. E você pode ver que temos código iOS, para que possamos simplesmente copiá-lo e colá-lo em nosso núcleo de desenvolvimento de aplicativos iOS. E também é o mesmo para o Android. Você pode simplesmente copiar e colar em código de desenvolvimento como este. Você também pode visualizá-los. Qual é o índice para isso? Como cores e tipo de tamanho deformado, altura e tudo mais. Ou faz a exclusão ou faz a posição y. Então você pode ver que eu uso esse monstro, ele alterna forma para outro com o estilo 700 é normal. Se eu mudar isso em negrito, isso me mostrará que este é o parafuso. Então, também me dirá sobre qual é o tamanho do pixel, atualmente 60 pixels. Qual é a altura da linha e tudo isso? Portanto, há uma opção que você terá no painel de inspeção. Então essa é a sua pasta. E verei vocês no próximo. 16. Prototyping no Figma: Bem-vindo de volta. Neste vídeo, vamos aprender sobre o protótipo. Então, vamos criar um quadro. E vamos criar outro. Certo, temos dois quadros agora. E você pode renomeá-lo o que quiser para a ferramenta de movimentação. E renomeie-o como esta manhã também. Certo, vamos criar um quadrado neste quadro. E o atalho é, e você vai criar um quadrado. E você pode ver que o quadrado está na primeira tela. Então, vamos copiar esse quadrado no segundo quadro, assim. E vamos fazer esse quadrado em círculo usando esses pontos. Certo? Então, agora entre em protótipo. Na seção do produto, você tem opções como modelo de fundo. Este é o modelo objetivo do iPhone 11 Pro Max, e este é o nome do dispositivo e você pode alternar este sem violino duas posições horizontais, verticais. Então, vamos mudar o plano de fundo para branco, assim. Veja no fundo para branco. Então, o que eu quero fazer é que quando eu, quando eu vou clicar neste quadrado, ele tem que mudar para esse círculo. Se eu clicar no quadrado, você pode ver que há um ponto branco no lado direito do quadrado. E se eu clicar nisso, você pode ver que há um fio como este. E se eu mover isso no segundo quadro e artista para ele, então você pode ver que este painel de introdução aparecerá. Então, a partir daqui, você pode adicionar opções, como no prazo, você precisa fazer essa ação. Como se eu tocar nisso, essa raiz quadrada mudará para esse círculo. Então você pode definir todas as coisas daqui. Então, por enquanto, vou escolher no toque. E agora chegamos ao círculo. Estamos navegando a partir desta página. Para fazer isso, vamos escolher navegar e estamos navegando de quadrado para círculo. Do primeiro quadro é quadrado e a segunda premissa círculos. Então é por isso que está dizendo o círculo. Na maioria das vezes, a opção final da missão está na instância. Então, temos que escolher o inteligente e a emissão para ter esse efeito legal. E você também pode definir a hora. Atualmente não tem 300 milissegundos. Se você quiser, você pode alterá-lo daqui. Mas, por enquanto, vou sair como está. E agora vamos clicar neste botão Reproduzir ou no botão presente. E você pode ver a nova janela aparecer. E você também pode ver que o fundo é branco. Se eu clicar neste smartphone, você pode ver que isso está me dizendo que esta é a tecla de atalho. E se eu clicar neste quadrado, você pode ver que ele está mudando para círculo. Mas se eu clicar no círculo novamente, não é querer alterá-los para quadrado. Então podemos fazer isso. Vamos entrar no projeto novamente e basta clicar neste círculo. E você pode ver esse ponto. E você pode mover esses dois primeiros quadros assim. Você pode ver o painel de interação. Por enquanto, vou sair, pois é como todas as opções, como smart emission e on-time outlet. Então, vamos entrar no projeto novamente. E você pode ver atualmente ele está em um círculo. E se eu clicar nisso novamente, e você pode ver que o círculo está mudando para se importar agora. E se eu clicar nisso novamente no quadrado, você pode ver a tangente para circular agora. Então eu tenho um projeto como eu fiz esse projeto aleatório para o propósito de demonstração. Você pode ver esses botões de navegação como contato doméstico sobre. Então, o que eu quero fazer é que eu quero juntar esses dois botões de conexão nesta página e sobre nossa navegação até a última página. Então você realmente sabe o que fazer. Você pode pausar o vídeo e pensar sobre isso, como vamos fazer isso. Então, vamos fazer essa conduta. Atualmente estou no painel de protótipos, para que você possa ver neste botão Plus e menos arrastá-lo para este segundo painel, segundo quadro e listas. Clique sobre isso, a menos que participe dessas ferramentas. Terceiro painel, assim. E se eu jogar isso, se eu clicar neste quadro, então você pode ver, então as crianças do hospício estão em contato e sobre e se eu clicar neste contato, então você pode ver a troca de quadros em contato. E vamos fazer isso de novo. Então, atualmente nesta página não temos nenhuma chave de porta de host, então temos que limpar essas coisas. Mais uma vez. Nós só nos juntamos a esta primeira página, então temos que fazer isso para a segunda, terceira. Então, vamos fazer isso para a segunda página. De casa, temos que ir para a página inicial e, portanto, esta é a página de contato, então não precisamos fazer nada com isso. E vamos clicar no sobre e arrastá-lo o terceiro quadro assim. E o mesmo para o botão “pitch from home”. Ele tem que ir para a página inicial e, uh, do contato. Ele tem que ir para a página de contato assim. E se eu clicar nisso, um desses fios e você pode ver que há detalhes de introdução, como no prazo. Ele tem que continuar a ferramenta de desktop não como esta. Então, por enquanto, estamos apenas interagindo com essas páginas para que não precisemos escolher nenhuma outra opção como o Smart Dimension e tudo isso. Mas se você quiser, você pode fazer isso como se pudesse simplesmente usar mover para fora. Você pode ver essa pequena animação ou aqui. Então, exiba novamente. Então, como você pode ver atualmente na página de contato e nas teclas de atalho Alto home e sobre e se eu clicar nesta casa, você pode ver que estamos atualmente na página inicial e nas listas. Vamos mudar para contato. Então, atualmente em contexto. Então, vamos para o quadro. E se eu clicar neste contato, você pode ver neste movimento. Então, há como podemos protótipo do seu projeto. Para este projeto, escolho este hiper protocolo 0.9. Você pode escolher o que quiser, como. Os elementos do Ipad Pro são profissionais. Você também pode escolher Apollodorus. Mas esta é a alma da página da web, e é por isso que eu escolho isso. Você pode dizer que o iPad Pro, porque isso tem uma resolução maior. Então eu acho que é isso. Então isso é proporcionado para fazer vídeo e eu vou ver vocês no próximo. 17. Rolagem horizontal e vertical: Bem-vindo de volta. Neste vídeo, vamos aprender sobre como adicionar qual chamada mais profunda e rolagem horizontal. Então, vamos escolher um quadro. Vamos escolher o iPhone 12 Pro Max. Digamos que estejamos projetando aplicativos como o Instagram. E nesse aplicativo temos histórias. Ok, vamos selecionar todos eles. E menos. Traçado laranja. O acidente vascular cerebral vai ser branco. Vamos fazer dela uma árvore. Certo? Agora, clique com o botão direito sobre ele. Vá para Plugins. E, e eu já lhe disse como adicionar plugins na Figma. Então eu acho que nós plug-in chamado fotos. Então clique nele. Ok, então a partir daqui você pode escolher diferentes opções, como pessoas de animais argumentaram se estenderem à sua cidade e alertas. Mas atualmente vamos adicionar, atualmente vamos escolher aleatoriamente. Digamos que haverá pessoas profissionais habituais. Então, vou escolher pessoas. E ele automaticamente fará círculo e contará todos eles. E vou adicionar todas essas imagens no círculo. Você pode ver assim. Então, vamos fechar este. Ok, então imagens adicionadas. Agora vamos, vamos agrupá-los. Então clique com o botão direito sobre ele e faça com que ele agrupe Usando, você também pode usar o Controle G para agrupá-los. Você pode clicar com o botão direito sobre ele. Escolha essa seleção de grupo. Certo, vou guardar nesse grupo agora. Então clique com o botão direito sobre ele novamente e escolha a seleção de quadros. E agora basta arrastá-lo na moldura do iPhone. Assim. Às vezes, será difícil ganhar a história dentro desse quadro. Então, finalmente me elevei depois disso. Então, as histórias são adicionadas no iPhone 12 Pro Max. Então, agora clique no conteúdo do clipe. Agora selecionamos o conteúdo do clipe. Vamos redimensionar esse algoritmo para esse quadro assim. Ok, agora vamos criar uma cópia de campo. Vou usar alguma dimensão aleatória para isso. Então, porque é apenas para fins de demonstração nesta resolução. Certo, acho que selecionei seis. Então, selecione todos eles com o botão direito do mouse nele. Vá para plugins, clique nas fotos. E nas fotos você pode ver que temos uma opção chamada aleatória. Clique nele e escolha aleatório. Então, se você quiser, se quiser adicionar manualmente, você pode usar a opção chamada Inserir imagem e adicionar imagens de seus arquivos locais. Ok, agora todas as imagens são adicionadas nesta primeira seção. Agora feche essas fotos. Agora clique com o botão direito sobre ele, faça um grupo. Você também pode usar o atalho Control G. Grupo distinto agora. E, novamente, clique com o botão direito sobre ele e escolha a seleção de quadros. Certo? Então, depois da Seleção de quadros e arraste este campo para o nosso quadro assim. Ok, agora clique no conteúdo do clipe. Certo, vamos ajustar esta primeira seção assim. Agora vá para o protótipo. E você pode ver a primeira seção selecionada. E atualmente não há rolagem. Vamos escolher um vértice disposto e outros turistas escolhem a rolagem horizontal. E vamos tornar esse quadro mais escuro porque hoje em dia eles são bastante famosos. E também gosto de usar o modo escuro. Então, vamos apresentar este. Então você pode ver que o aplicativo é assim. Então, acho que tenho algum público com problemas na Internet. É por isso que a imagem não está carregando. Então, se eu arrastar o mouse para o lado esquerdo e ver que a rolagem está acontecendo ou no smartphone. E também nesta primeira seção, rolagem, esse tipo de suave. Se você rolar, você pode ver que é assim. É assim que você pode adicionar pontuação vertical e uma rolagem horizontal em seu aplicativo ou páginas da Web. Então é isso para o vídeo de hoje. E verei vocês no próximo. 18. Máscaras na figma: Bem-vindo de volta Neste rebelde e aprenda sobre como usar a massa. Então, como você pode ver na minha tela, tenho diferentes tipos de blop na minha tela. Na área de trabalho, um íon, é de cor. Mas o que eu quero fazer é que eu quero colocar a imagem neste globo para que eu possa fazer isso. A maneira tradicional de fazer isso é apenas descondensar. E você pode ir para formas e colocar a imagem ou aqui. Ou você pode ir preencher e escolher solar para imagem do que é. Para mim. Você também pode escolher uma imagem, mas também pode usar massa para fazer a mesma coisa. Então, vamos pegar, emitir alguma imagem aleatória. Vamos pegar esta imagem e implícita ou aqui que corresponda às camadas ou você, Ok, No segundo vetor que é nosso soprado, eu quero colocar esta imagem. Então deixe-me gostar de vários atributos no lado direito e apenas verificar novamente no lado esquerdo. Ok, então agora posso mais 0 público-alvo de imagens. Então, para fazer isso, sente-se no vetor v. Queremos colocar sua imagem e selecionar sua imagem. E agora agrupe-os usando o controle. Então, é grupo agora. Então, o que devemos fazer é um DAG é ir para o grupo B, grupo duas coisas, guerreiro. A primeira é essa imagem e secundária é o nosso bloco. Então selecione o blog, clique com o botão direito do mouse sobre ele, clique em usa uma máscara e você pode ver que a imagem está dentro dessa área azul. E você também vai abordar este blog. Como cortar, esse atributo de imagem para cima, assim. Então, é assim que você pode usar a máscara. Sei que você pode estar pensando que a imagem da lição pode ser mais simples, como selecionar a forma e ir para a imagem e usar imagem semelhante do seu disco local e deslocar já aqui. Eu sei muito simples, mas também não uso muito mascaramento. Portanto, depende totalmente de você. Se necessário, alguma personalização, você pode usar essa técnica de mascaramento. Então, vamos colocar essa imagem sobre isso. Vamos colocar essa imagem neste bloco. Colocar imagens tipo de mascaramento. Mas é como um processo muito simples. Então é assim que você pode usar o mascaramento. Então essa é a quarta derivada. E verei vocês no próximo. 19. Figma exportando | . JPG PNG SVG PDF |: Bem-vindo de volta. Nesta unidade, vamos aprender sobre como exportar seu projeto. E o arquivo PNG JPEG terá n é região. Então, como você pode ver, eu tenho esse clone no Instagram e quero exportar esse quadro. Existem muitas opções para exportar na Figma. Então, vamos dar uma olhada em um por um. O primeiro é ir para o arquivo Figma. E você pode ver que temos o botão Exportar. E atualmente selecionamos o iPhone 12 Pro Max 2. Este é o quadro e está no formato PNG. E você também pode ver a resolução aqui. Agora clique em Exportar. E ele pedirá onde queremos armazenar seu projeto. Então, vamos criar uma pasta aqui. E digamos que esse projeto nessa pasta. Clique no salvar. Este grupo é baixado na pasta de exportação e você pode ver que nosso projeto foi exportado. O segundo método é o seletivo do quadro. Vá para o painel de design e vá no final. E você pode ver que temos uma opção de exportar aqui. E atualmente este x e sai como está. E se você quiser exportar em diferentes formatos, como JPEG, SVG, ou você pode escolher essas opções. Digamos que queremos exportar isso para como um JPEG. Clique neste EPEC e clique em Exportar, correspondência do iPhone 13 também. E você também pode ver a pré-visualização deste aplicativo. Então clique no botão Exportar e ele perguntará onde você deseja armazenar. Então, atualmente, queremos armazenar isso para baixar e exportar a pasta. Então clique na venda. E vamos para Download. E você pode ver que ele está realmente no formato JPEG. Este está no formato PNG. E o mesmo com este SVG e PDF. Atualmente, gostamos de exposição na listagem. E digamos que se você quiser exportar vários quadros, você pode ir para Arquivo e escolher exportar quadros para a polícia. E seu projeto será exportado para o formato PDF. Então clique nesta seta. E vamos abrir este. E você pode ver que nosso arquivo é aberto no Chrome. E estes são nossos quadros, quatro quadros do nosso aplicativo de música. Então é assim que você pode exportar vários arquivos no Parlamento. Digamos que você queira compartilhar esse projeto com alguém e você queira exportá-lo para um arquivo Figma como. Então vá para arquivos novamente e clique nesta cópia local do C1. E ele perguntará onde você quer armazenar. Então, queremos cair na pasta de exportação, clique na venda. E este é o nosso arquivo Figma. E se você quiser compartilhar com alguém com o Gmail ou você pode compartilhar esse arquivo diretamente e eles podem abrir esse arquivo em seu software Figma. Então, esses são todos os metais para exportar nossos projetos. Então esse valor religioso importa, e eu o verei no próximo. 20. Modelo no photoshop: Bem-vindo de volta Nesta rebelião e aprenda sobre como criar mock-ups no Photoshop. Então, vou criar uma maquete desse quadro. É um clone do Instagram, mas você pode compartilhar ou curtir o host de alguém, selecionar o quadro e ir para o painel de design. Tal para exportação. Você pode ver que a exportação está no final do painel de design. Então, o que queremos fazer é que eu quero exportar esse quadro para a imagem, que está no formato PNG. Você pode escolher diferentes formatos como JPEG, SVG, PDF, mas eu quero isso em PNG. Então, vou escolher um PNG. E se você quiser ver um azul, também podemos ver um azul daqui, este. E agora clique em Exportar. Então, ele exportará o disco local mais novo. Atualmente, selecionei esses downloads específicos, então ele irá salvá-lo nessa pasta. Então, vamos clicar na venda. Então, vamos para downloads. Então você pode ver que esta é a imagem explorada nesta pasta. Vamos abrir seu navegador favorito e procurar mockups gratuitos. Ou você pode acessar este site chamado free peak. Nisto, na verdade, haverá muitos modelos de graça para usar a busca por maquetes do iPhone e pressione Enter. E queremos que este seja um formato GIF que seja o formato Photoshop. Então você pode ver que podemos filtrar nesta categoria. Então, temos apenas um quadro. Então, vamos escolher um único quadro. Este aqui. Acho que este parece bom. Então, vamos baixar este. Configure o quadro, clique no download e clique em Download gratuito. Após o download atualmente, o formato de fato. Então você precisa extrair essa pasta. Você pode usar um excedente como 7 Zip ou esfregá-los para extrair a pasta zip onde o arquivo é baixado. Extraia esse arquivo, clique com o botão direito sobre ele. Eu tenho 7-Zip. Então, vou usar o 7-Zip. Você pode ver o arquivo do Photoshop e a imagem desse mock-up. Então vá para o Photoshop. Então clique no botão Abrir. Esta é a nossa pasta. Nós extraímos e escolhemos o arquivo. O arquivo está aberto agora. Então vá para camadas. E esta é a imagem inteligente. Então você pode ver o pequeno ícone de imagem aqui. Então clique duas vezes nele. E acho que tivemos que excluir essa pasta, então vou fazer essa. Agora selecione sua imagem que exportamos kate. Então arraste esta imagem para Photoshop e cole-a nesta tela em branco. E você pode ver as imagens bestial aqui. Agora salve esta imagem usando o Control S. E ela está pedindo no lugar a final antes de salvar. Então clique no local. Certo, a imagem é colocada. Agora vamos ao nosso arquivo original. E você pode ver que temos nossa maquete, mas há um problema. Você pode ver que há um texto e eu quero remover esse texto. Portanto, o texto exclui este e é diligente. Agora. Agora vamos exportar essa imagem. Vá para Arquivo e vá para Exportar. E você pode escolher Exportar como ou clicar em Exportar como PNG. Vou clicar em Exportação Rápida como PNG. E vamos salvá-lo em downloads. E clique em Salvar. Vamos para a pasta Download. Você pode ver nosso lema. Vamos abrir este. E você pode ver que é assim que nossa maquete se parece. Então é assim que você pode criar mock-up dentro do Photoshop. E você pode acessar este site. E você pode, se quiser, usar um mock-ups de mesa e apenas procurá-lo e apenas baixar o modelo de desktop e importá-lo para o Photoshop. E todos os processos são iguais. Então é assim que você pode criar mockups no Photoshop. Então é isso para a camada original. E verei vocês no próximo. 21. Plugins no Figma: Bem-vindo de volta. Neste vídeo, estamos aprendendo sobre plugins. Você pode ver que eu tenho um quadro ou um backstop. Então eu clico nele. Você pode ver que temos a opção chamada plugins. Assim, você pode gerenciar seus plugins a partir daqui. Se você já instalar alguns plugins. E se você quiser plugins italianos, você pode clicar na comunidade de plugins do navegador. Agora vá para a guia plug-in. A partir daqui, você receberá muitos plug-in. Você pode usar este projeto sênior de plug-in. Digamos que você queira instalar esse plugin chamado blobs. Então, basta clicar neste botão, botão Instalar. Então você também saberá sobre qual é a função disso. Ele também mostrará quem é o criador deste plugin e quando ele é criado, e quanto as pessoas não relacionam esse plugin. Então, vamos instalá-lo. Vamos rejeitar. Então clique com o botão direito do mouse sobre ele, vá para plug-ins novamente e você pode ver que o plugin está instalado, então clique nele. Então, o que o sangue faz é que ele cria algumas ações aleatórias para você. O valor do contrato cúmplice 10 é bom. Então, vamos clicar nos blocos MEG. Então você pode ver que ele criou alguma mudança aleatória para usarmos em nosso projeto. Então, se você quiser, você pode dar um valor diferente, digamos 31. Então nossa nova forma está aqui. Então, esse tipo de equipe que você pode fazer com este plugin. Agora vamos dar uma olhada em fotos atuais de um plugin. Há uma das minhas chamadas de plug-ins favoritas. Vou te mostrar o porquê. Você pode ver que este é o plugin. E este plugin temos muitos sites que têm imagens stock e Julio, mas não tínhamos um plugin. Assim, você pode ver que o plugin está instalado, então clique com o botão direito sobre ele plugins e você pode ver nas fotos. Então, o blog de fotos está aberto. Agora, você pode pesquisar fotos como se você quiser gostar de pesquisar qualquer específico mas você pode pesquisar na área. Também recebemos arquivos de dar álbuns e entorpecido e biblioteca. E você também pode escolher diferentes tipos de categorias, como tecnologias, arquitetura de cidade portuária e tudo mais. Mas eu gosto dessa opção aleatória. Tipo, digamos que eu tenha essas duas formas e quero colocar a imagem nessas duas formas. Então, vou entrar em conjunto. E posso escolher diferentes opções como animais, cidade, praia, pessoas. Mas também há uma opção chamada aleatória. Então, ele automaticamente escolherá duas previsões e ganhou um lugar nessas formas. Então, se eu clicar nesse aleatório, você pode ver as duas fotos inseridas nesta forma. E parece meio legal. Isso ajudará você quando você estiver criando um aplicativo de mídia social e esse aplicativo, você tiver uma sessão de estudo e quiser colocar todas as imagens de cada vez. Então você pode usar esse recurso aleatório e você pode escolher pessoas. Então, nessa história e finalmente, um dos rostos das pessoas, agora sabemos como instalar o plug-in, como usá-los. Então, vamos ver como desinstalar os plugins. Então clique com o botão direito do mouse sobre ele e vá para plug-ins novamente e clique em Gerenciar plug-in. E você pode ver que atualmente infectamos esses dois plug-ins quando você primeiro é o foco de lóbulos e segmentos. Então, basta clicar neste três.me. E isso dará opções como escassez e desinstalação. Então, vamos clicar na desinstalação. E nosso plugin está desinstalado. E a partir daqui você também pode navegar pelos diferentes plugins. No próximo ano, vou dizer os cinco principais plugins para usar em seus projetos. Então essa é a sua água. E verei vocês no próximo. 22. 5 DEVE ter plugins para designers figma: Bem-vindo de volta. Neste vídeo, vou dizer os cinco principais plugins para economizar seu tempo. Então, em princípio, aprendemos sobre como instalar o plug-in, plug-in desinstalado e como usá-los. Então eu aprendo agora como acessar o plug-in, clique com o botão direito do mouse em seu quadro, vá para Plugins. E você pode ver nos plug-ins infravermelhos aqui, uma das minhas fotos favoritas de plug-ins que eu uso muito há dias, um dos meus amigos recomendou este plugin Unsplash também é ótimo e é meio que, o interface é o mesmo. Temos todas as categorias como tecnológicas ou para abstrato e todas aprendemos. Neste editorial, obtemos muitas fotos, preservações. E se você quiser pesquisar em uma pasta específica, você pode pesquisar aqui. Lugar anunciado. Também obtemos essa opção aleatória, como fotos. Digamos, digamos que você esteja liberando um campo no Instagram. E nisso você precisa adicionar várias fotos. Então você pode simplesmente adicioná-lo localmente, mas levará muito tempo. Então você pode selecionar todos eles, todo esse retângulo e apenas clicar na inserção aleatória. E, em última análise, adicionará todas essas fotos nessas formas. Então você pode ver que o 34 plus é adicionado em nossa forma assim uma vez. Vamos falar sobre o próximo plugin. Isso é blush. Digamos que seu cliente queira adicionar instituição em seus projetos. Então você pode usar esse plug-in chamado blush. E por menos você pode ver que recebemos muita ilustração. Também conhecemos nossos criadores e que tipo de ilustração temos. Gosto dessa intrusão chamada rabiscos abertos. Então, o que temos que fazer é isso, digamos que você queira criar um aplicativo de meditação. Então, vamos clicar nesta ilustração de meditação. E ele adicionará automaticamente essa imagem ao seu quadro. Você pode redimensioná-lo assim e adicionar algum texto aqui. Nesta ilustração, não temos a opção de alterar a cor porque você pode ver se eu clico neste ícone de cor, precisamos de agente profissional. Portanto, depende totalmente você quer comprar uma abordagem e você pode comprá-la. Mas há outra administração, eles são totalmente gratuitos e você também pode mudar a cor um pouco. Acho que esse poder se move. Vamos fazer isso, este. E digamos que eu tenha uma imagem disso. Você pode ver que temos opções como cor da pele. Contém a roda de cor da pele daqui, você pode escolher a ferramenta conta-gotas para a cor diferente. Você também pode mudar o guerreiro mais próximo, como a face inferior, superior da cabeça e tudo isso. Tipo como Bitmoji, Snapchat. Nós conseguimos, temos muitas opções para trocar nossas roupas enfrentadas pela fase e saída do remetente. Então, digamos que queremos 10 mais baixo nesta flor é mais curto. Se eu clicar nisso, você pode ver a corrente lateral próxima agora. Você pode dizer o sexo do tônus muscular como este. É assim que você pode usar o blush. Vamos falar sobre o terceiro plug-in que é estúdio de mock-ups. E também é um dos semelhantes. Meu plug-in. Ele está emparelhado, mas você pode usar algum modelo gratuito. Então você pode ver este iPhone e iPad. Vamos, vamos usar este quadro é quadro. E basta clicar neste mock-up. E você pode ver que nossa interface está na tela como esta. Portanto, se você quiser exportar, basta clicar no botão Exportar como um arquivo ou como documento. Documento de idioma atual. E isso salvará você em seus arquivos locais, como na área de trabalho ou na unidade C. Você pode salvá-lo onde quiser. Então você pode ver um mock-up é nossa história no meu arquivo local, na pasta de download. Então eu posso abri-lo a partir desse seguimento. Então, a maquete é meio que se parece com isso. Você pode compartilhá-lo com seus amigos ou colegas para que saibamos como seu aplicativo se parece. O último plugin é que eu uso muito chamado wireframe. Então, neste plugin, você terá muitas opções, como se estivesse criando um site, você pode escolher wireframe para web, Oliver fazendo, criando um aplicativo. Você pode escolher o diafragma móvel ou podemos obter muitas opções aqui, como crianças diferentes, como kit wireframe de 360 graus para web e dispositivos móveis. Se eu clicar neste kit de wireframe de 360 graus para celular, eu teria opções diferentes aqui. Digamos que eu queira usar este. Vou arrastá-lo no meu quadro. Então, ele realmente vai adicionar no meu quadro. Eu posso adicionar apenas filmar assim, assim. Você também pode esticá-lo. Antes deste plug-in nossas vidas a fazer é que eu uso para criar todos os elementos para wireframe manualmente usando formas. E depois de fazer essa forma, desejo agrupá-los e entrar em componentes. Eu uso esses componentes em wireframe. Mas, gerenciando esse plugin, ainda podemos muito tempo como uma lista, digamos que eu quero criar um aplicativo de reprodutor de música. Então eu posso fazer uma pesquisa aqui, ou posso simplesmente percorrer esta janela e você pode vê-los no elemento wire-frame. Eu posso colocá-lo aqui. E podemos adicionar como este. E vamos adicionar um pouco. Assim, você pode ver em um minuto que criamos um wireframe para o nosso aplicativo player de música. Portanto, essa imagem é uma espécie de lista negra e faz isso apontar. Eu gostaria porque na armação de arame usamos apenas bicicletas como essas. Portanto, este é o wireframe para nossa camada de aplicativo de música. Ao usar isso, você pode economizar muito tempo. Acho que esqueci de dizer ao nosso plugin chamou os ícones. Em nossos projetos de P&D. Eu uso este pacote de ícones, mas de maneira diferente. Eu costumava entrar em ácido, para a biblioteca Tim. E a partir disso eu usei para os ícones. E a partir disso eu uso ícones. Mas usando este plugin, posso simplesmente clicar, digamos que eu queira usar esse botão no meu aplicativo. Eu posso clicar nele e, em seguida, adicionar apenas alguma dimensão aqui. E isso aqui. Com este plugin, você pode economizar muito tempo. Você pode ver aqui. Então esses são nossos cinco plugins para usar em um projeto para dizer muito tempo. Então é isso para a relatividade. E verei vocês no próximo. 23. O que é o wireframe?: Bem-vindo de volta a outro vídeo. Neste vídeo, vamos aprender sobre o que são tipos de wireframe de wireframe e o melhor ponto de espectro enquanto as mulheres. Então, onde quer que você saiba, o site é a resolução simplificada da estrutura básica, ou talvez possamos chamá-lo esqueleto AAP, site ou aplicativo. Wireframes de devocional. Algo que dá uma imagem clara sobre a usabilidade. O estilo é muito importante, mas no início do design, pode ser um pouco distrativo. Assim, ele pode mudar o foco da funcionalidade para algo extravagante, como cor ou jarro. Como os wireframes são tão simples, ele mantém o foco na questão importante como funcionalidade e usabilidade do site e experiência do usuário. Existem consideravelmente duas camadas de wireframing. O afortunado é wireframing de baixa fidelidade, e o segundo é wireframing de alta fidelidade. Em wireframing de baixa fidelidade, os desenvolvimentos são apresentados com formas cinza como um retângulo e círculo, ou simplesmente linhas. E em um nível de alta fidelidade, a interface do usuário adivinha um pouco mais de detalhes, como logotipo da marca, textura de texto real ou sombra também. E assim, no caso de textura e dívida, tente sempre ser conteúdo real, que finalmente estará no site principal em vez de maio pessoa. Talvez isso, você pode obter uma perspectiva real do design. Agora vamos falar sobre as melhores práticas para a frente. Então, a primeira regra aqui é sobre estética. E isso é para mantê-lo simples. Quero dizer, muito simples. Emitido não usar nenhuma cor em vez de branco, preto e cinza usa no máximo duas formas em todo o design. E, claro, use uma fonte simples como Roboto ou platô. Nada extravagante. Eles representavam gráficos e caixas de imagem. Wireframe é o estágio em que você considera telas wireframe toda a versão do design para diferentes tipos de dispositivos, seja para desktop ou celular ou tablet. Além disso, você precisa considerar a orientação desse modelo. Dispositivos como telefones ou tablets. Você também precisa ter em mente o contexto do usuário do dispositivo específico. No final, seja qual for a tecnologia ou software que você usa, há muito melhor do que uma simples caneta e papel. Se você quiser projetar um modal de interface do usuário originalmente, começarei no bom papel antigo com um lápis. Então lá vai você. Então isso é tudo sobre wireframing. Como o que é wireframing Pi. Então, wireframing e melhores práticas para a saúde. Então isso é um fotoresistor lá, e eu vou ver vocês no próximo. 24. Wireframe com figma: Bem-vindo de volta. Neste vídeo, vamos aprender sobre como fazer wireframes. Mas vamos abrir um novo arquivo. Você pode clicar neste botão mais e clicar em Design. Tudo bem. Certo, vamos renomear esse arquivo. Então, vamos escolher um quadro. Vou literalmente o que é o wireframe? Portanto, neste vídeo, vamos fazer instalações baixas, reformulando-a como suporte como um wireframe de baixa taxa. Digamos que estejamos criando um site de portfólio simples. E só queremos adicionar algumas informações nele, como navegação, botões, imagens, texto e o logotipo. Então, vamos começar com o logotipo. Para logotipos. Há desenhar um círculo. Ok, vamos fazer alguns botões de navegação como contato doméstico e sobre. Então, deslize o menu de texto e clique na tela. O primeiro é em casa. Vamos aumentar o tamanho da fonte até 24. Certo? Texto do programa e segure Alt e clique em. Certo? E o último por mais ou menos assim, isso seria contato. E o último é sobre, então fizemos uma dúvida razoável. Então, vamos alinhá-los juntos. Segure Shift, selecione Contato e selecione sobre florestas aleatórias na parte inferior. Depois disso, Alan eles juntos verticalmente e menos Alan eles para distribuir o espaçamento horizontal. Ok, então este botão de navegação está alinhado agora. E vamos adicionar alguns jarros. Não exatamente arremessadores. Então ele vai dizer que eu fiz, temos que colocar a imagem aqui. E para isso podemos adicionar algumas linhas nele. Você é durável, você saberá. Portanto, esse espaço é para a imagem. Certo? Assim. E vamos fazer algumas caixas para texto. Primeiro, selecione o retângulo. E esta pode ser a nossa caixa de título principal, então pode ser o seu nome. E, em seguida, selecione outro retângulo. E neste retângulo menor, podemos recuperar essas informações sobre você. Como o que você faz, Que tipo de trabalho você faz? E vou deixar, e digamos que você queira adicionar algum link. E vamos nomeá-los um por um. Então isso pode ser intitulado. Então este é o parágrafo. Este é o botão Join. Então, depois de fazer wireframe, você pode gostar de fazer um projeto como este que eu fiz aqui. Você pode ver esse projeto. Então você pode ver esta primeira página. É exatamente como nosso wireframe. Isto é para o logotipo, é para os botões de navegação de soma inferior. E esse espaço é para uma imagem. Você pode ver que esta é a imagem e desesperá-la. E o último é o botão Entrar agora. Então é assim que você pode fazer um wireframe em fema. Vamos fazer wireframe simples sobre como botão de login. Vamos escolher o telefone. Há um círculo de desenho. Vamos fazer um retângulo. Entrada de login ou uma entrada de texto. Vamos fazer outro retângulo ou você pode simplesmente selecionar esta caixa e esta Alt e arrastá-la para baixo. E vamos mudar a cor sobre isso. Portanto, o usuário não o fará. Então, nesta caixa, temos que preencher nosso inventário e gostar de login, e vamos colocar algum nome de usuário de texto. Então, vamos diminuir o tamanho da fonte será utilitários. Vamos compensar como 14 O K. assim. Cientistas, assim. Este é o botão de login, então vamos adicionar texto aqui. Vamos aumentar o tamanho da fonte. Selecione o atual é 14 listas para que o reflexo seja movido para Miller. E podemos fazer como encaminhar o botão Senha aqui. Então, vamos fazer isso adiante um pouco pequeno. Tipo dez. Certo, assim. E podemos fazer algumas caixas. Ou aqui, digamos que o usuário queira fazer login pelo Google, Facebook, no Twitter. Então ele pode fazer isso. Vamos escolher um retângulo como este. Arraste, arraste. E nesta caixa, vamos adicionar, isso é para o Facebook. Isso inclui os formulários. E isso é para o Google. Atualmente, estou alinhando-os manualmente, mas você pode usar esse fardo, como usá-los. Então, o próximo último é o Twitter. Vou ser assim. Então, vamos alinhá-los. Esses botões estão alinhados juntos agora. E você pode ver nossas páginas de login criando assim. E você pode adicionar outra opção como botão de inscrição aqui. Então, vamos escolher outro triângulo, ou você pode simplesmente selecionar essa caixa. E esse cálculo, assim. O texto pode ser cadastrado. Portanto, este é o login do telefone wireframe. Portanto, este é o wireframe da nossa página de login da página de inscrição. Então você pode ver que fiz um projeto que eu uso este biofilme para uma referência para criar um projeto. Então você pode ver que esta é a nossa página de login. Então você pode ver que esta é a página de login e esta é a página de inscrição. Mas neste wireframe, fiz duas coisas em um só lugar, como login, página de inscrição bayesiana dentro de uma página. Então, se você quiser, você pode fazer assim ou criar páginas de login como esta, como separadas para página de login e página de login da organização separada e auditoria como Google, botão Facebook. Aqui embaixo. Você pode ver no wireframe do logotipo como Facebook, Google e Twitter, então esse é o nosso logotipo. Então, neste projeto, o que eu quero excluir, então eu fiz esse logotipo maior e adicionei alguma imagem também em segundo plano. Alguns efeitos e todos aprendem. Portanto, este é o wireframe de baixa taxa. Então, neste wireframe, então, desta forma, de Viena, coisas importantes como virtual seja o nosso logotipo, que será a nossa versão de caixa de login da nossa inscrição e o nome de usuário, senha e tudo mais. Então é assim que você pode fazer wireframe na Figma. Então V fez uma página simples aqui e, portanto, também o smartphone. Ok, você pode ver você no próximo vídeo. Vou mostrar a vocês como fazer wireframe no qual chamei wireframe dot cc. Então fique atento para isso. Então, isso é o que religião. E verei vocês no próximo. 25. Como criar wireframe no wireframe.cc: Bem-vindo de volta. Neste vídeo, vamos aprender sobre como fazer wireframe, wireframe dot cc. Então, provisoriamente, aprenderemos sobre como fazer wireframe na Figma. E a partir disso, também criei alguns projetos. Você pode ver esta página da Web e esta página de login e página de inscrição. Então, vamos fazer um wireframe neste site chamado wireframe CC. É uma das maneiras mais simples criar wireframe para seus projetos. Então vá para este site, pode ver o link ou aqui. Quando você quiser, vá para este site, ele pedirá uma inscrição como. Então, se você quiser, você pode se inscrever, mas eu vou sugerir que você pule esse processo. E depois de pular isso possuído, a interface ficará assim. Assim, você pode ver no lado esquerdo, temos opções como, a partir daqui, podemos escolher dispositivos diferentes, como para o desktop ou o software. Podemos usar este modelo ou V se você quiser gostar, criar alguns aplicativos para o seu tablet, você pode escolher esse formato. E isso também é para o smartphone. Você pode escolher este, mas eu gosto de escolher este, o quarto. Então, vamos criar uma página de login simples para o nosso smartphone. Então, depois de soltar o mouse, você pode ver que eu recebo essa opção. Então eu quero que essa parte seja uma caixa. Então, vou escolher esta caixa e a caixa agora. Então você pode, se quiser, você pode olhar como se eu não goste disso. Então, vamos fazer, tipo, digamos que eu queira adicionar nesta seção. E você pode ver esse botão de imagem. Então, a partir dessa hora, esta é a seção de imagens. Temos que colocar a imagem aqui. E podemos fazer um ícone de logotipo simples aqui assim. Se você quiser, você pode colocar isso no nível médio ou à esquerda ou à direita. Por enquanto, vamos colocar 0 aqui. Vamos fazer caixas para nossa página de login. Palha. Caixa tão simples. Portanto, esta é a caixa do nosso UserInput. Desenhe outra caixa e podemos simplesmente selecionar esta caixa e copiar colar como Figma selecionando a caixa e segure Alt e arraste donald assim. E se você clicar duas vezes nele, obteremos paleta de cores. A partir daqui. Você pode escolher cores diferentes. Portanto, isso é para botões de login, então vamos escolher essa cor. Então, vamos adicionar texto nele. Portanto, este é o botão de texto. Então, e este é o botão de login, menos endereço 200 aqui. E então vamos mudar a cor op-eds. Ou você pode fazer esse login em negrito ou itálico. E se você quiser, você pode sublinhar esse texto assim. E quanto menos mudar a cor do texto aqui. Então, atualmente, ele é verde, então vamos torná-lo branco, assim, e vamos aumentar o tamanho da fonte. Este é o nosso botão de login e este é o campo de texto do nome de usuário. Vamos fazer outra textura ou avançar possível. Segure e arraste-o para baixo. Vamos mudar essa cor para preto e ficar com o tamanho da fonte, negrito e sublinhado, renomeá-la para senha de encaminhamento. E podemos fazer login como outras opções como Facebook, Google e Twitter. Assim, podemos adicionar essas caixas aqui também. Então, vamos adicioná-los. E se você quiser misturá-los , você também pode fazer isso. Selecione a caixa ou alcançada. Configuração. A segunda, a terceira caixa. E você pode ver que temos, temos este botão Elemento. Clique nele. E você pode ajustar de acordo com sua exigência. Então eu quero alinhá-los juntos na parte inferior. Então, vou clicar em baixo. Então, está alinhado. Agora, vamos adicionar texto nele. Portanto, este é o botão do Facebook ou do Google. E podemos gostar de macos, texto simples. Por aqui. Selecione esse texto, segure Alt e arraste essas ferramentas para baixo. E podemos adicionar largura de texto como login. O usuário saberá, podemos fazer login com Facebook, Google e Twitter assim. Então este é o wireframe simples com Katelyn, este fio da sua FCC. E se você clicar no botão Salvar, ele salvará para você. E você pode apenas, se você gosta de trabalhar com seu projeto, como este. Então você pode fazer uma referência a partir dele. Como onde deveria estar o logotipo, onde deve ser imagem, caixa, onde devemos entrar no botão e encaminhar o botão postural e tudo isso. É assim que você pode usar wireframes ou site da CC para criar wireframes simples e bonitos. Acho que é mais simples que Figma. Ou você pode ver que criamos na Figma alguns wireframes. Mas acho que é como nós, uma experiência semelhante, mas gosto de usar este site chamado Y de North Jersey porque é muito simples de usar. É por isso que prefiro usar este site. Portanto, depende totalmente de você. Se você não usar, você pode até usar Figma ou usar este site. Então é assim que você pode criar wireframe, sistema de porta wireframe. Então é isso para o vídeo de hoje e verei vocês no próximo. 26. Configuração de equipe e criar um projeto de equipe: Bem-vindo de volta. Neste vídeo, vamos aprender sobre como criar uma nova equipe. Então, como você pode ver, temos uma opção aqui chamada criar um novo túmulo. Então clique nele. E você pode nomear o que quiser. Então, vamos nomeá-lo Test e clique em Criar uma equipe. Ok, agora você pode adicionar os membros da sua equipe e adicioná-los usando o ID de e-mail. Atualmente estou trabalhando sozinho, então não vou adicionar nenhum ID de imagem. Então, vou pular por enquanto. Então, vou deixá-lo como vindo, escolha um plano. Então, temos opções como organização profissional de inicialização. Então eu estou trabalhando sozinho, então vou escolher o gratuito. Então, como você pode ver, arquivos de alinhamento estranhos em gotas para os arquivos Figma em equipe, arquivo gem fixo definitivo e o projeto de uma equipe. Então, vamos escolher o gratuito. Então você pode ver que nossa equipe foi criada, ou seja, teste. Então, vamos criar um projeto. Você pode clicar neste botão mais e adicionar arquivos como este arquivo m. Se você corrigiu o arquivo gem, você pode, se tiver um arquivo, também pode importá-lo. Você também pode navegar pelo modelo e adicionar ao seu projeto. Até agora vou escolher o arquivo de design. Vamos renomeá-lo primeiro. Apk. Ok, se eu entrar em um projeto semelhante novamente, no projeto de equipe, você pode ver como o gosto épico é criado. Então, no Teams, podemos adicionar quantos arquivos quisermos. Tipo, digamos que eu queira criar um objeto simples, mas no formulário do site. Então, vou clicar neste arquivo Novo e de design. E vamos renomeá-lo para Taste. Desculpe por ter escrito errado. Isso. Vá para casa. E você pode ver que temos teste web e teste. Portanto, há o benefício de usar o Teams. Certo, vamos nessa equipe. E a partir daqui você também pode adicionar, o que é o projeto, como se você estiver construindo como comida entregando m, você pode adicionar uma descrição para ele. E se você quiser convidar um membro, você também pode convidar daqui. E a partir daqui você verá quem tem o eixo deste projeto. Como atualmente estou trabalhando. Sou o único que tem acesso para este projeto. E você também pode ter algumas configurações como queremos alterar o nome. Você também pode alterá-lo daqui, ícone, alça de perfil. E se você quiser fazê-lo desta vez, você também pode excluí-lo. E se você quiser habilitar algumas bibliotecas, você também pode fazê-lo a partir daqui. Portanto, esse é um plano e o faturamento é para profissionais. Você pode comprá-lo daqui. Então, vamos entrar no projeto agora. Se você quiser, você também pode marcar esse projeto como um projeto favorito clicando em Iniciar. E você também pode compartilhar seu projeto usando a molaridade. Você pode adicionar vários IDs de e-mail aqui. Ou você pode simplesmente copiar este link e colá-lo em seu grupo do WhatsApp ou no Gmail. Digamos que você queira excluir essa equipe, você pode simplesmente ir para essa equipe que é gosto e clique com o botão direito do mouse sobre ela. E temos opções como renomear, alterar, ícone e excluir. Então, vamos excluir. E temos que adicionar esse nome de equipe. Isso são testes. E clique em Excluir equipe. É assim que você pode usar equipes para criar, projetar vários arquivos, aplicativos, sites e tudo mais. Então isso é importante para Julia e eu verei vocês no próximo. 27. Colabore no tempo real time(Teams): Bem-vindo de volta, melhora a preocupação. Aprenderemos sobre como criar uma equipe. Então, dessa forma, podemos usar o poder da equipe. Então, o que quero dizer com poder é que fema é uma plataforma onde a equipe projeta juntos. Ele une todos em seu processo de consulta. Isso dá vida à sua ideia. Digamos que seus companheiros de equipe saem do outro lado do globo. Ele ou ela pode trabalhar com você ao mesmo tempo no mesmo projeto. Então, há a equipe de pó em Figma. Vou te mostrar como fazer isso. Então clique no nome da sua equipe. Digamos que atualmente vou escolher essa equipe de programadores imaginários. E você pode ver que temos uma opção chamada membros e menos convidar alguns de nossos companheiros de equipe. E a partir daqui você também pode compartilhar um link com eles do gmane ou compartilhá-lo no grupo WhatsApp. E você pode definir algumas configurações para eles. Como, digamos que se você quiser compartilhar esse projeto com o cliente e você pode definir a configuração como ele pode apenas ver assim e você pode compartilhar o link. E você quer compartilhar esse link com a demanda de DVR do que você pode escolher, pode editar. E se você quiser adicionar uma melodia, você também pode adicioná-la aqui. Vamos adicionar um ID de imagem único do meu colega de equipe. Você pode pressionar Enter ou pressionar vírgula. Vírgula e você pode ver que você pode adicionar outro ID de e-mail aqui. E você também pode definir algumas configurações para eles, como você pode fazê-las significar, por padrão, pode editar. E se você quiser compartilhar essa tendência de varejo que você pode escolher, pode ser menos desistir da admissão do aviador e enviar o para dentro. Você pode ver que o ruído é enviado. Agora, feche este em seu laptop ou PC, ele receberá uma notificação para o convite. Então, a partir daí, ele pode aceitar nosso convite. Então você pode ver no ocupado dele ele pegou nossa equipe. Ele pode ver todos os projetos. E digamos que queremos editar esse projeto juntos. Então você pode ver que ele sobe na tela. E você também pode ver que é nosso guerreiro total. Se eu clicar neste exterior e você puder ver o que ele está fazendo e qual é o atualizado em qual painel ele está trabalhando atualmente? Digamos que você tenha 20 ou 30 quadros e você não sabe com onde ele está interagindo clicando em seu outlier. Saberemos em qual sala ele está trabalhando. Então, precisamos corrigir esse projeto como o botão disjoint now. E também quero adicionar uma imagem. Então, vou adicionar a semelhança. Então, corrigimos esse projeto. É assim que você pode colaborar com seus colegas de equipe. Então é assim que você pode colaborar seus colegas de equipe é um dos melhores recursos da Figma. Ele pode acessar seu projeto. Você pode ver você quando ele perder o outro lado do globo. Ele pode fazer dez dias para trabalhar em projetos ao mesmo tempo. Então essa é a visão do conhecimento prévio, e verei vocês na próxima. 28. Wireframe para Lattofatto: Bem-vindo de volta. Neste vídeo, vamos fazer wireframe para o nosso projeto que é o mesmo no aplicativo on-line de pedidos completos. Então você pode ver que o aplicativo é parecido com isso. É o projeto final? Então, vamos criar um wireframe para ele. Isso cria uma nova página. Clique no ícone de mais. Crie um arquivo. Então, vamos renomeá-lo. Então, antes de tudo, vamos precisar de quadro. Você pode pressionar F ou entrar nesta seção e escolher quadro. E vamos selecionar o quadro do iPhone 11 Pro Max. Então, no primeiro quadro, queremos mostrar apenas o nome da marca que é liderado sobre dois. Então, vamos criar alguns componentes para isso. Primeiro, vamos fazer mais alguns quadros. Ok, nossos cinco quadros são criados agora. Então, o primeiro quadro será nossa página de nome de marca. E o segundo é a LAN da página de login, terceira é a página de inscrição. E em quadro completo, queremos adicionar como tolos, podemos encomendar através deste aplicativo como pizza de hambúrguer e frango frito e tudo isso. Então eu acho que não precisamos do quinto aro, então vamos fazer isso. Vire o quadro M. No teclado. O quadro é digital agora. Então, temos quatro quadros agora, vamos fazer alguns componentes. Selecione o retângulo, desenhe o retângulo assim, adicione nosso texto. Então, será o nome da nossa marca. A fonte é muito pequena. Fonte. Vá para este painel final e aumente a fonte até 36. Ok, vamos apenas a fonte e o centro. Portanto, esse é o nosso primeiro componente. Portanto, selecione o retângulo e o texto para selecionar várias coisas. Você sabe que temos que segurar Shift e pressionar o texto e o retângulo selecionados agora e você tem que pressionar Control G para fazer um grupo. Então, se eu me mover assim, as duas coisas se movem juntas. Digamos que você não faça um grupo em primeiro lugar, eu preciso desagrupar isso. Certo? Então, se eu mover isso, você pode ver que o nome da marca não vem com esse retângulo. Vamos cinco V, agrupe-os. Até agora, agrupando, selecione a forma do retângulo, mantenha pressionada Shift, selecione o texto e pressione Control G. E agora este é um grupo. Então, se eu me mover assim na tela, você pode ver que as duas coisas estão se movendo para que elas façam menos curvas. Então eu já lhe disse como fazer componentes. Selecione seu elemento e vá para o menu da barra superior e selecione este botão de diamante. E agora esse é o seu componente, então você pode usá-los várias vezes em seu projeto. E você também pode acessar por meio desse painel de ativos. Você pode ver o nome da marca. Vamos fazer um segundo governador. Essa será a nossa imagem. Vamos escolher o retângulo. O atalho é r. E vamos fazer um quadrado perfeito. Segure o shift assim. E vamos adicionar alguns. Você está no limite? Você pode ver o polígono de cor e o quadrado é uma árvore, então temos que mudar a cor do polígono. Então, para fazer isso, selecione o polígono, entre no painel de design, clique no preenchimento e vamos mover essas ferramentas de cursor de forma branca como esta. O menor como este. Ok, vamos duplicar este. Certo. Vamos fazer alguns, tem as montanhas e vamos fazer uma pequena soma como esta. Temos que, à medida que mudamos a cor desse sol para branco, assim. Certo? Então, esta é a nossa imagem. E selecione todas as coisas e pressione Control G. Então essa coisa é grupo agora. E vamos transformar esse elemento em componente. Portanto, esse é o nosso segundo componente. Então, vamos criar um componente de imagem de perfil. Vamos usar círculos. Então você pode pressionar o ou podemos escolher este botão de elipse. Vamos adicionar essa imagem a ela. Primeiro de tudo, precisamos torná-lo pequeno. Agora vamos adicionar essa imagem ao círculo. Mas você pode ver que a imagem não está visível porque está na imagem selecionada. Clique com o botão direito sobre ele. E você pode ver a opção chamada Trazer para a frente. E você pode ver as imagens agora na frente assim. E selecione todas as coisas e pressione Control G para agrupá-las. Agora está agrupado e vamos criar um componente. Ok, este aqui é um componente agora. Portanto, esse elemento é para o perfil, que são, Vamos fazer login e inscrever-se barra, barra de navegação. Para isso, vamos precisar de um retângulo. Vamos nos certificar apenas com o nosso quadro, então ele combina perfeitamente com a nossa tela. Acho que tivemos que diminuir um pouco. Agora vamos adicionar uma imagem de texto. Primeiro, é login. E o segundo é se inscrever. Então, vamos alinhá-los juntos. Defina todas as coisas. Em primeiro lugar, o login, então o retângulo agora selecione o botão Inscrever-se. Agora vá para o painel de design e menor falha Alan them bottom. Agora vamos alinhá-los verticalmente. Ok, está online agora. Então, a próxima coisa que temos que fazer é o botão de login e o botão de inscrição. Então, necessariamente discretizado, duplique-o pressionando Alt. E o fóton será nosso login. Esqueci de transformar essa barra de navegação em componente. Selecione todas as coisas, Control G e selecione neste botão LeBron. Então, essa coisa agora é componente. Vamos tornar esta página também componente. Duplique esse fardo. E vamos renomeá-lo para se inscrever. Então este é o nosso último componente, e vamos precisar alguns botões de menu como hambúrguer, alguns ícones como Facebook, Google e Twitter. No vídeo da biblioteca Tim eu realmente mostrei a você. Começamos alguns pacotes de ícones para que possamos usar isso, usá-los neste projeto. Então, para acessar essas coisas, acesse ativo e clique neste ícone de livro. Você pode ver o ícone mais extra, clique neste botão de alternância. Você pode ver que podemos usar esses ícones. Então, precisamos desse humilde ícone amino. Então, vamos mover este. E você também pode pesquisar como primeiro, segundo, terceiro 1 é o Google, mas não está disponível. Então podemos usar outros ícones como ok, este globo, Ok, agora temos esses quatro ícones. Vamos fazer nosso wireframe. Então criamos todos os componentes, então vamos usá-los em nosso biofilme. Então, na primeira página UP, como adicionar um nome de marca. Então, vou escrever isso assim. E vamos abordá-lo verticalmente. Ok, é, estou agora, vamos renomeá-lo para como uma marca. E o segundo reenquadramento vai assinar. E a terceira é a nossa página de inscrição. E o último é mínimo. Ok, então temos quatro páginas agora, a primeira está pronta. Então, no segundo Prim, o que eu quero fazer é que eu quero adicionar uma imagem na parte superior. Então, vamos esticá-lo assim. E também quero colocar um nome de marca, essa imagem. Então, vamos arrastar isso e vamos adicionar um nome aleatório. Portanto, nosso desenvolvedor de interface do usuário saberá. Então isso é imaginado e esse é o nome da marca. Acho que a cor é a mesma, então temos que mudar a cor do nome da marca. Então, vamos selecionar o componente mestre. Vamos torná-lo mais escuro assim. E vamos fazer a página de login. Então, vamos exigir esse botão de navegação. Então, em seguida, queremos gostar de nome de usuário. Então, vamos desenhar uma linha. Então, precisamos de duas linhas. O primeiro é para nome de usuário e o segundo é para senha. E temos que adicionar um botão de login. Segure em direção ao segundo quadro, assim. E vamos adicionar nosso login com botões. Esses são Facebook, Google e Twitter. Então, vamos alinhá-los para se levantar primeiro. Então, vamos torná-los maiores. O quarto é um sobre o Facebook. O segundo será o Google. Então, vamos alinhá-los juntos. Selecione Facebook, segure Shift, selecione e selecione Twitter. Primeiro, temos que abordar a parte inferior e menos abordá-los verticalmente. Certo? E vamos adicionar algum espaçamento horizontal. Certo? Então essas coisas são Alana. Então, neste caso, temos problema. Então nosso u eu não sei que esta é a página de login de inscrição porque todas as coisas são iguais. Então, o que podemos fazer é que podemos fazer o pequeno parafuso de assinatura. Portanto, a conectividade é regular. Vamos torná-lo ousado. Ok, agora nossos dados por pertencimento, esta é a página de login. Então, na próxima página, temos que fazer algumas coisas. São como esse nome de marca. Também temos que usar essas imagens. Então, vou copiar isso, as duas coisas. Estamos quase acabando. A única coisa é restante. Então, os usuários fazem login agora. Portanto, é o ícone Perfil. Adicionar um hambúrguer é um assim. Então, vamos selecionar o botão de adição e vamos ligar. Isso faz algumas categorias. Então, vamos adicionar imagem para você. Vamos torná-lo menor. E vamos alinhá-los juntos. Mantenha pressionada Shift selecione o segundo e o terceiro. Vamos adicionar é a parte inferior e, em seguida, vertical. E vamos adicionar algum espaçamento horizontal. Certo? Então, vamos bordas assim, ok? E vamos adicionar alguma textura nele. Selecione categorias, mantenha pressionada Alt. E digamos que uma imagem seja falsa. Vamos diminuir o tamanho da fonte. Mantenha pressionado Alt, arraste para a segunda categoria. E vamos renomeá-lo em pizza e terminal. Então, vamos alinhar a fonte juntos. Agora ele está alinhado. Suavize-os para cima, então tudo bem, isso é perfeito. E então atualmente estamos em como digamos, atualmente estamos no bugger Minow. Então, vamos tornar essa imagem um pouco azul. Então, atualmente em Bogle, atualmente estamos em massa uma seção. E digamos que temos apenas duas opções para o falso na primeira página. Basta fazer outro assim. E vamos aumentar essa imagem. Como o usuário com um conhecido, atualmente selecionamos esse touro. E também podemos fazer desse texto uma tigela. Portanto, nosso desenvolvedor saberá que atualmente o cliente está na seção falsa. E podemos adicionar alguns prêmios por isso. Tipo, digamos que este Burger seja por US $15. Ouça, dê aos sites de fontes. Por US$15,1. Vamos compensar até 244 segundos. Vamos compensar para gostar, eu sei que são muito caros. Isso, vamos torná-lo normal. Porque ele foi ou foi selecionado o primeiro hambúrguer. E isso insere o texto para cima assim. Ok, então vamos adicionar algum círculo de seção. Portanto, nosso usuário saberá que temos mais opções. E selecione o primeiro círculo. Vamos mudar a cor para isso. Portanto, nossos dados podemos saber que nosso cliente pertencerá atualmente ele ou ela está na primeira página. Então, se ele deslizar, então estará na segunda página como esta seção. Portanto, este é o wireframe do nosso primeiro projeto. Esse é um projeto fotográfico mais leve. Você pode ver nosso projeto final. Este é o nome da nossa marca. Você pode ver o nome da marca mais imagem, login, inscrição, nome de usuário, login com senha e login com botões como se livrar do Facebook e do Google. O mesmo para aqui. Você pode ver que também fizemos esse login em cor rosa porque nosso usuário saberá atualmente que ele está na página de login. E nesta página, você aprenderá que ele está na página de inscrição. E podemos ver as categorias destacar Bogle the Chicken. E você pode ver que fizemos este hambúrguer em destaque. Então o usuário com long atualmente está na categoria bolha e ele selecionou esse logotipo. O primeiro é audível pré-impresso. E você pode ver que eu também adicionei o cartão para que ele possa conferir a foto do perfil e o amino de Hamburgo. E também podemos adicionar a barra de pesquisa. Portanto, este é o wireframe do nosso primeiro projeto. Então, no próximo vídeo, vamos fazer esse wireframe nesse projeto. Sei que este é o final muito baixo do vídeo, mas só temos que arrastar e soltar coisas. E eu fiz a posição somatória do elemento assim. Então, depois de criar seu wireframe, você pode tornar seu projeto mais rápido. Então, vou dividir todos os vídeos na parte separada, como no primeiro vídeo, adicionarei esta página de login mais 2 e n na primeira linha. E no segundo vídeo, adicionarei um vídeo de página de inscrição. E, por sua vez, vou adicionar esta legibilidade da página Meno se tornar mais curta. E também será fácil entender para que você tenha que literalmente, e eu verei vocês no próximo. 29. Página de marcas para Lattofatto: Bem-vindo de volta. No anterior teríamos feito esse wireframe. Agora vamos fazer uma interface do usuário para o nosso aplicativo. Então vá para Home, crie uma nova equipe. Vamos nomear isso. Você pode nomear o que quiser. Então, atualmente eu estou nomeando isso levou a ela ao projeto de aplicativo um, criar uma equipe. Então, estou trabalhando atualmente, então vou pular agora. Então, atualmente estou usando uma versão gratuita. É por isso que vou escolher, escolher dados. Se você tem proibição de plantas você pode escolhê-las. Então, vamos clicar para iniciar. Então você pode ver o nome da nossa equipe e a cor da nossa equipe. Vamos para wireframe. E vamos mover esse wireframe para nossa equipe. Você pode ver na cor da nossa equipe e do projeto de equipe. Ok, nosso arquivo é clicar em projetos de equipe. Você pode ver nosso wireframe. Acho que vimos o excluir este e clicar em Projeto de equipe e clicar no botão Plus e criar um arquivo de design. Então você não vai pensar que o wireframe é diferente porque eu acidentalmente excluí esse biofilme anterior. É por isso que eu criei esse wireframe novamente. Então é por isso que parece diferente. Então, vamos renomeá-lo. Vamos escolher um quadro. Pressione F, escolha iPhone 11 Pro Max. Então, na armação de arame, você pode ver que a primeira página é para o nome da nossa marca. Então isso é levar a gordos. Então, vamos criar esse primeiro quadro e vamos renomeá-lo. Ok, você pode nomear o que quisermos. Então, vamos escolher um texto. Ok, vamos aumentar o tamanho da fonte desse texto para quatro. Certo? E vamos escolher a fonte para sensibilizar explicitamente no meio. Ok, vamos alinhar essa fonte para a vertical e depois horizontalmente. Ok, está alinhado agora no centro. Selecione o quadro e vamos mudar a cor dele. Então, atualmente, a cor é branca. Então, vou escolher o vermelho, então atualmente o sólido. Então, vamos fazer gradiente. Então escolha a segunda cor linear em poeple. Ou podemos escolher qualquer cor que você quiser. Vamos aumentar a opacidade do segundo pilar. Ok, agora parece legal. Então, se você quiser, você pode adicionar apenas seu gradiente assim. Certo, isso parece legal. Certo, acho que seleciono uma fonte diferente. Então salve a fonte. E este é o que precisávamos para este projeto. Certo? Então eu preciso dar-lhes vertical e horizontalmente no centro. Certo? Agora, vamos torná-lo branco. Então, não ficará melhor assim. Ok, nosso primeiro quadro é criado agora, ou seja, página de nome da marca. Então você pode ver no wireframe, esse é o nome da marca e esta é a página. No próximo vídeo, vamos criar esta página de login. E verei vocês no próximo. 30. Página de entrada para LattoFatto: Bem-vindo de volta Em anterior teria feito esta página aleatória. Então, neste vídeo, vamos fazer a página de login. Então, vamos escolher um quadro. Iphone 11 Pro Max. Assim. Vamos renomeá-lo para assinar como assinar. Assim, como você pode ver no Wireframe, colocamos a imagem para que vamos substituir a imagem, mas em formato diferente. Então, vamos fazer um círculo e o atalho é 0. E o centróide no quadro assim, vamos fazer até 450. Acho que tenho que torná-lo maior. Vamos compensar como 70, certo? Ok, vamos adicionar isso, as bordas para que você possa ver que há uma lacuna. Mova-se para a direita, assim. Ok, selecione o círculo. Vamos mudar a cor. Vamos torná-lo gradiente para o linear. E a primeira cor será nossa cor vermelha. E a segunda cor será assim. Vamos fechar essa guia. Ok, agora temos o chamado, então vamos duplicar o círculo, selecionar o círculo e segurar e arrastá-lo. Assim. Selecione o círculo à mão, vá para nossa ferramenta de forma e escolha a imagem. E vamos escolher essa imagem aberta e vamos colocá-la na elipse. Então, depois de abençoar a imagem, selecione o círculo, este. E vamos avançar no quadro. Como esse solenóide juntos. Certo? E o centro do círculo. Então, vamos diminuir a opacidade para 70 a 80%. Menos carrapatos, 70%. Certo, isso parece bom. E você pode ver no Wireframe, abençoamos o nome da marca. Portanto, essa é uma tarifa mais leve para selecionar o nome da marca. Segure Alt no segundo quadro, assim. Certo? Ok, vamos diminuir o tamanho da fonte em até 15. Centro de tutoria. Assim. Isso parece legal. Ok, agora vamos fazer essa barra de navegação de login. Então, vou usar o método diferente para isso. Vamos adicionar um retângulo como este. Acho que tenho que apresentar um pouco. Certo, e menos alanina e decentro. Está no centro. Agora, vamos tentar um quadro. Então, vamos virar as bordas para cerca de 35. E agora vamos mudar a cor para branco. Então, tem algum efeito, como sombra de queda. Vamos adicionar algumas configurações a isso. Vamos fazer borrão de dois. Espírito de dois para estar bem. Ok, agora isso parece legal. Então, vamos fazer um botão de login e inscrever-se. Vamos escolher um retângulo. Eu li alguma dimensão, você pode ver a largura é 264 e a altura é 45. E a posição x e y que você pode ver aqui. Então, vamos torná-lo afiado, canto em volta. Vamos fazer isso até 13. Vamos duplicar essa forma. Faça isso para pular. E vamos mudar a cor dela. Vamos fazer com que vamos escolher esse osso e menos em cima disso. Certo. Assim. Certo. Vamos mudar a cor disso. Vamos torná-lo branco, acinzentado, assim. Ok, vamos adicionar algum efeito. Clique no efeito. Assim, você pode ver que a sombra está adicionando. Acho que está tudo bem, então vou sair como está. Então, vamos fazer um texto. O primeiro será o login. Ok, atualmente a fonte é sensível, então vamos mudá-la para como quatro pinos. E vamos ficar firmes, vamos adicionar apenas uma fonte de acordo com este quadril está no centro agora. Então, vamos duplicar esse texto. Faça com que ele se inscreva. Então, vamos ser totalmente brancos. É por isso que não é visível. Selecione a fonte. Vamos torná-lo preto. Ou, se você quiser, você pode escolher essa cor. Também ficaremos legais e vamos alinhá-lo. Vamos resolvê-lo manualmente. No centro. Assim, citando, está tudo bem. Agora isso parece legal. zoom, você pode ver a interface da página de login. Parece assim. Então, vamos fazer a senha do nome de usuário. Então vou para Shapes, escolho a linha, a menos que chegue aqui. E vamos adicionar apenas, vamos transformar o ângulo em 0. Então, vamos adicionar isso no meio. Certo, está no meio. E vamos duplicar essa mesma linha. Segure Alt, arraste-o para baixo. Vamos adicionar algum texto, como e-mail. Ok, vamos diminuir o tamanho da fonte em até 10. E quanto menos bordas o texto. Vamos mudar a cor deste texto e também o daltônico. Apenas faça isso como este. E vamos mudar a cor dessa linha também. Vá para o derrame. E vamos escolher a ferramenta Selecionar. Vamos fazer isso como este. Selecione e-mail e pasta de usuário, arraste-a para baixo e vamos enviá-lo para a senha e também alterar a cor dessa linha. Agora vamos encaminhar a senha, este alerta de texto de senha. Coloque-o aqui. Ok, vamos adicionar assim. Vamos fazer o botão de login. Vamos copiar essa forma. Acho que isso vai ficar bem. Ok, vamos transformar o objeto de cor. Atualmente, é meio cinza. Vamos fazer isso como essa cor roxa. E eu seleciono essa fonte, que você a alinha. Saquê, mas as coisas se mantêm usando shift, horizontal, ok, está no centro agora. Então, vamos verificar o tipo de fonte. A taxa atual é regular, então vamos torná-la semi-ousada. Então ficará mais legal, ok, assim. Certo, o que mais está acontecendo? Assim, você pode vê-lo em uma taxa de wireframe feito tudo. Então, a única coisa sedimentando assim, faça login com botões, ok, Menos adicioná-los dos arquivos locais. Ok, vamos importar esses arquivos SVG, ok, necessariamente o tutor para esse grupo eles juntos. Então, por que estamos agrupando-os? Porque esses são os arquivos SVG. Digamos que eu queria me mudar para algum lugar. Então você pode ver que, se eu selecionar neste ícone, você pode ver o vetor que selecionamos. Então, haverá uma incompatibilidade com o nosso projeto. É por isso que estamos agrupando com ele. Se eu dissesse se tudo isso e agrupá-los usando o Controle G para agrupar agora. E se eu clicar nisso, você pode ver que posso movê-lo para onde quiser. Então, vamos fazer este. Um endereço menor a altura de todos os logotipos no Twitter e no Facebook. Desejo 15 de altura e peso. Também para o Facebook e também para o Google. Então, estamos ajustando a largura e a altura, então são bordas. Agora, uma das minhas, A única coisa resta é que temos que adicionar ou enviar texto, ou seja, R. Vamos escolher este texto e segurar Alt e movê-lo para o centro. E vamos torná-lo menos endereçado ao centro. O Figma é muito inteligente. Ele automaticamente lhe dirá onde está o centro e também o espaçamento entre lá. Pense em que vamos aumentar o tamanho da fonte até 12. Ok, nossa página de login está pronta agora. Então, no próximo vídeo, vamos criar uma página de inscrição. Então esse é o seu portfólio e verei vocês no próximo. 31. Página de inscrição para Lattofatto: Em vídeos anteriores, fizemos a página de login. Então, neste vídeo, vamos fazer uma página de login. Então, vamos selecionar esta página de login do quadro e começar a falar assim. E vamos renomeá-lo para signatário. Então, na página de inscrição, temos que mudar algumas coisas. Você pode ver no wireframe, coisas como precisamos alterar o botão de inscrição. Vamos adicionar algumas linhas extras como confirmar senha, e também precisamos alterar a inscrição. Então, vamos fazer essas mudanças. Certo, vamos primeiro, vamos mudar a cor dessa fonte. Atualmente, é uma espécie de nebulosa de limão. Então, vamos torná-lo branco. E vamos mover esse retângulo para o lado direito. Certo? Agora, vamos transformar a cor do login. Então, atualmente, é branco. O estudioso. Certo? Ok, agora o que temos que fazer é que temos que adicionar mais uma linha. Essa será nossa senha de confirmação. Então, vamos avançar essa senha que seria para baixo assim. E vamos copiar essa linha. Vamos copiar essa senha e essa linha. Segure Alt, arraste-o para baixo. Certo, vou confirmar que a senha é maior agora. Ok, vamos alinhá-los juntos. Selecione-o e segure Shift. Selecione todas as coisas que a senha, senha e a linha cortada, vá para a configuração Align e clique em Mais opções e escolha. Você deve ser espaçamento vertical. Ok, está alinhado agora. Você pode ver aqui. Então, vamos mover essa senha para frente cima, assim. Então, atualmente, estamos em uma página de login. Vamos mudar para inscrição. Vamos alinhá-lo horizontalmente. Podemos ver que ele está alinhado no centro agora. Então, uma coisa é que alguns ícones, como você pode ver alguns aplicativos em que você tem a área de símbolos dos olhos. Ok, vamos adicioná-los. Eisenberg. Vá para S8, clique nesta biblioteca de equipe e alterne esses ícones de penas e procure por I. Ok, você pode ver o símbolo do olho. Então, vamos usar este. Então, vamos diminuir o tamanho dele para assim Q. Então, vamos mudar a cor dele. Atualmente é preto. Então, vamos escolher essa cor para cima. O mesmo cuidado com essa senha. E selecione segurar Alt, arraste-o na página de inscrição. Somente, confirme a senha. Então, a única coisa resta, essa é a página principal. Você pode ver o wireframe dele. Então, no próximo vídeo, vamos fazer essa página de menu. Então essa é a sua foto. E verei vocês no próximo. 32. Página de menu para Lattofatto: Bem-vindo de volta. No ano anterior, fizemos a página de inscrição. Então, neste vídeo, vamos criar esta página principal para que você possa ver o wireframe para ela. Vamos escolher um quadro. Iphone 11 Pro Max. Certo, vamos fazer esta página. Porque vamos adicionar alguns elementos, como barra de pesquisa e mais antigos. Então, a barra lateral ficará branca, então não ficará visível no fundo assim. Portanto, nossa página Meno ficará mais visível. Portanto, para esse salário mínimo, você pode ver no wireframe que exigimos este ícone do menu de hambúrguer, o ícone do perfil e o texto e algumas imagens. Então, vamos fazer essas coisas. Então, na minha pasta, tenho todos os recursos. Então, vamos movê-los para um turbilhão figma. Ok, as imagens são como ser mantidas para respondê-las. Então, temos todos os recursos como este ícone do menu de hambúrguer , o humilde real, a imagem do perfil e alguns elementos como este viáveis. Então, vamos usar um por um. Então, vamos conversar. Então, a menos que pergunta. E a segunda coisa é fornecer devoluções. Então, vamos fazer esse perfil. Para isso, vamos precisar de elipse e segurar mudança e ir para a ferramenta Forma e esta, você também pode escolher sua própria imagem. E vou colá-lo neste círculo. Você pode ver que ele está colocado. Mas você pode ver que a foto está do lado direito e ir para o painel de design. E você pode ver na opção de campo, temos essa imagem, clique nela. E vamos escolher a colheita. A imagem assim. Certo? Então, vamos adicionar algum traçado nele. Clique no traçado. Vamos fazer até dois. E vamos mudar a cor do traço para branco. E vamos redimensioná-lo. Como Ok, então vamos adicionar algum texto que é C e Control V. Então você pode ver que usei a fonte Poppins. Para isso. Eu uso o final regular de N Para este amarelo frio, usei o semi negrito. Então, vamos abordá-lo acordo com esse ícone de hambúrguer, assim. Então, qual é a próxima coisa que temos que fazer? Então, podemos adicionar categorias como essa. Você pode fazer esse trabalho. Vamos adicionar uma barra de pesquisa para que o usuário possa encontrar seus itens. Então selecione o retângulo. Podemos simplesmente copiar essa forma. A forma, segure Alt e arraste-o na primavera. Ok, então vamos mudar a cor dela. E você pode ver que já temos alguma sombra. Para que possamos vê-lo. Vou sair como está. Então, vamos adicionar um texto. Então, vamos selecionar esse texto e imagens para pesquisar. Um ícone de pesquisa. A corrente é preta. Então, vou escolher. Então, envie um texto assim e diminua o tamanho do qual está alinhado agora. E vamos tornar a barra de pesquisa um pouco maior. Vamos torná-lo no centro. E o cientista está pesquisando e o ícone. Ok, a próxima coisa é adicionar categorias. Então, vamos adicionar algumas categorias. Ok, vamos adicionar algumas categorias. Então escolha um retângulo e desenhe-o assim. Vamos fazer isso para gostar com até 110, 1, 1, 0 e altura de 70. Algumas arestas. Vamos compensar como codificar este novamente. Então, vamos alinhá-los juntos. Então, vamos torná-lo branco. Se você quiser. Você também pode adicionar sombra nele. Vamos transformar a cor desse plano de fundo. Atualmente, o branco é visível, LACMA, este Ícones. Ok, estes são o arquivo SVG, então vamos Control G. O segundo gira fora de controle. E controle G. Então, quando estamos trabalhando com a incompatibilidade, ok, o primeiro será Bogle, adicione o hambúrguer. E a primeira seção é a dimensão de gênero dela. Até o 45 e o centro. Certo. Tudo bem. Qual é o restante dele? Então, temos que nomeá-lo como design de logotipo. Então, vamos entregá-los. Então, vamos nomear o primeiro. Então, vou copiar esse texto. Então clique no hambúrguer. E pizza. Permita alinhá-los verticalmente assim. Portanto, temos que mudar a cor dessa bolha porque atualmente somos seção de depurador. Assim, podemos mudar a cor um pouco. Então, ou sabemos que está na seção. Então, vamos mover essas categorias. Esta seção, que será, é claro, atualmente estamos na seção Boulder, então vamos adicionar bolus. Então, vamos escolher um retângulo e desenhar um retângulo como este. Vamos dar a dimensão da perna e a altura de 2, 1, 0. Vamos adicionar algumas arestas arredondadas. Vamos adicionar até 35. Certo? Então este será nosso primeiro logotipo. Este aqui. Então, vou aumentar a altura dele porque atualmente o usuário selecionado é o Bogle. Então, vamos torná-lo um 199. Assim, e vamos mudar a cor. Vamos fazer isso para a segunda cor. E você pode colocá-lo onde quisermos de acordo com sua exigência. Então eu estou colocando tudo que você gosta disso. Ok, agora vamos adicionar a imagem desse livro. Então, atualmente, este é o primeiro logotipo e o nomeie. Então, o primeiro, eu não sei qual é o nome do êmbolo para que possamos nomear o que quiser ou você pode pesquisar no Google é você pode pesquisar no Google que eu posso lidar com eles aqui. Então, vamos mudar a cor dessa fonte. É preto, vamos torná-lo branco. Então, ficará mais melhor. Sites. Vamos torná-lo um símbolo. E vamos acabar com o preço de um cifrão. Vamos compensar como 20. Então, se você quiser, você também pode adicioná-lo. Então, a menos que essa classificação eu pense ter introduzido. Deixe-me verificar. Certo. Eu tenho esse projeto. Ok, você pode ver a cor dela. Assim. cliente anterior tinha uma boa experiência com este logotipo, vendendo-os juntos. Então, vamos nomear esse logotipo atualmente em todo o distrito, então não há luta visível, então vamos torná-lo preto. Ou diminua o tamanho da fonte. Vamos copiar este. E vamos mudar o valor de cada um. Então, o que resta? Tudo está feito. Então eu acho que sedimentos distintos. Então, vamos adicionar essas coisas. Escolha círculos de elipse. Vamos fazer isso como Salvar o primeiro ponto. E vamos fazer isso. Ou podemos escolher essa cor. Vamos torná-lo um pouco maior. Então, o usuário carimbará assim. Acho que temos que alinhá-lo juntos. E acho que uma coisa é adicionar um cartão. Então, vamos selecionar a Elipse e correr rapidamente em ácido por amor que temos isso. Você pode ver. Então, vamos adicionar esta sacola de compras e o centro. Então, vamos torná-lo branco central, ok, então tudo está feito. Então nossa sessão Meno está pronta agora. Então, a única coisa que resta neste projeto é fazer prototipagem. Então, no próximo vídeo, vamos fazer prototipagem. E verei vocês no próximo. 33. Prototyping para ratto: Bem-vindo de volta Em privilégio ou um filme fez este menu animal de estimação. Então, uma coisa é que o restante para este projeto é feito para fazer prototipagem. Então, eu já mostrei como fazer prototipagem. Assim, você pode pausar o vídeo e fazer sozinho ou se não souber como fazê-lo, para poder continuar o vídeo. Então eu suponho que você fez essa parte. Então, vamos fazer o predominante para este projeto. Vamos para o painel de protótipos. E você pode ver esse ponto branco. E quando eu pairo sobre ele, ele se torna um ícone de mais. Clique nele e arraste-o na página de login. Então você pode ver que este menu aparecerá. Portanto, este é o painel de detalhes da interação. Então você pode ver que temos opções como o tipo R. Portanto, atualmente, menos configure-o no toque e navegue até a página de login. Então, estamos navegando da fanpage para a página de login. Então, está tudo bem. Então, se você quiser, você pode adicionar nossa animação nela. Então, atualmente, vamos com o deserto instantâneo e escondido. Agora, clique na página de login. Então você pode ver que temos opções como login e inscrição. Digamos que o usuário esteja instalado este aplicativo chamado pela primeira vez. Então ele queria ir para a página de inscrição para que você possa clicar no botão Entrar. Então, vamos fazer isso interação. Assim, podemos ver nos detalhes da integração na guia navegar até a página de inscrição. E a animação está concluída. E digamos que o usuário seja como um toque forte acidentalmente no botão Inscrever-se. Então ele queria voltar à página de login ou na página de login. Então ele pode voltar usando este botão de login. Então, vamos dar uma introdução e navegar até a página de login. Todas as coisas serão as mesmas para isso, então não precisamos mudar nada ou aqui. Então, digamos que o usuário tenha colocado seu ID de e-mail e a senha e ele queria ir para a página do menu principal. Então, vamos dar a introdução a esse botão. Ok, de Logan BIG vai para a página principal. E também o mesmo, o botão de inscrição da inscrição e irá para a página do menu apropriando-se de todos os legítimos, como um nome de usuário, senha e senha de confirmação. Acho que acabamos aqui. Quando eu clico neste espaço em branco e obteremos essas opções. Então, a partir daqui, se você quiser alterar o contingente do dispositivo daqui. Então, atualmente, estou escolhendo este iPhone 11 Pro Max. Então, selecione este. E se você quiser treinar o modelo, ou você pode fazê-lo a partir do seu objetivo atual. Você pode escolher espaço prateado, cinza, verde da meia-noite, assim. E ele mostrará a pré-visualização. E se você quiser alterar a propriedade de cor de fundo, podemos fazê-lo a partir daqui. Então, atualmente este preto, podemos dar a ele qualquer cor que você quiser assim. Então, vamos com branco. Então, isso não importa. Você pode escolher qualquer cor. Então você pode ver aqui que temos orientação horizontal ou vertical se você quiser mudá-la para horizontalmente contingente como este, nosso retrato. Então, vamos com um retrato e vamos clicar neste botão Presente. Você pode ver nosso aplicativo está apresentando e o ícone presente aqui na barra superior. Ok, você pode ver a primeira página de nome da marca. Se eu clicar nisso, entraremos na página de login. Depois disso. Se eu clicar neste espaço em branco, você pode ver que chegamos às teclas de atalho. São como página de inscrição e página de login. Digamos que eu seja um novo usuário e queira me inscrever. Então, vou digitar o botão de inscrição e posso colocar meus detalhes como nome de usuário, senha e confirmar senha. E depois disso eu posso me inscrever. Então, também posso voltar à página de login se quiser assim. E vamos clicar em Login. Então, estamos na página meno. Então eu posso pedir esses bugs daqui, se você quiser. Você pode adicionar animação a essas páginas. Se clicarmos no cadastro, você deseja dar animação como entrar, sair ou empurrar. Para que possamos fazer isso a partir daqui. Vamos escolher o filme. E você verá o pouco indireto aqui. E você também pode disforia de gênero. Atualmente, estes 300 milissegundos e a animação está em formato exato. Ok, vamos apresentar este. Você pode pressionar R para o início, este aplicativo desde o início. Então, vou pressionar R no teclado. Então você pode ver nossa página de nome de marca. Ok, então vamos clicar em se inscrever. Você pode ver esse áudio de efeito em movimento. Deixe-me mostrar uma coisa legal. Então, vamos para a página da marca, página aleatória. Clique nesta seta, seta de protótipo. E atualmente estamos na guia. Então, vamos dar animação inteligente aqui. E vamos viver como milissegundos de gênero. E podemos mudá-lo como argumentar e adduzir como em Taiwan e arrastar enquanto segura e tudo mais. Vamos escolher como um tempo pairando o mouse enter. E vamos colocá-lo na imprensa R para reiniciar. E se eu passar o mouse sobre este aplicativo, você poderá ver essa animação. Deixe-me fazer isso de novo. Você pode ver essa animação. Então, vamos mudar um pouco como nossa profundidade. Vamos incluir o nome até 50 milissegundos. A menos que seja apresentado novamente. Para reiniciar. E na guia, você pode ver a animação ficar lenta no banco de dados. Assim. Então, por causa dessa arte inteligente e de medição, obtemos esse efeito legal. Então eu vou gostar de você para o nosso gosto enquanto paira. E vamos fazer até 100. Parece muito legal. E vamos apresentar. Quando eu gosto de NDA, meu mouse na lista baseada na marca, você pode ver a indireta. O nome da marca fica no topo. E se eu vivo este aplicativo, você pode ver isso novamente chegando à página do nome da marca. E eu posso fazer na direção aqui, como me inscrever. Você pode ver esse efeito de movimento e você pode ir para a página de inscrição deles. Se você quiser, você pode adicionar a animação a esta página principal e a criação de imagens no mini-lote. Então, clique na página de inscrição, selecione esta seta. E digamos que minha animação. Então, vamos tentar esse transtorno, o espírito e este. Vamos acessar nosso login. Certo. Sodium atingiu nossa página de inscrição e da página de inscrição v, dado esse efeito. Certo. Parece muito legal. Está sentindo medo. Eu acho que está em vigor, dá essa animação aos botões de login. Então, vamos chegar à nossa longa praia. Você pode ver isso dissolvido se você apenas for usar outras animações, como inteligente e emissão. Então, vamos escolher uma animação inteligente e vamos apresentar a tela. Acerte nosso registro. Você pode ver essa animação legal, áudio, animação inteligente. Vamos olhar para a Escola. Então você pode gostar de dizer, qualquer animação que você quiser. Portanto, depende de você e também depende do seu projeto. Então é aqui que concluímos nosso projeto um, digamos que se você está lutando com esse projeto, se você tiver que assistir a um vídeo repetidas vezes para fazer esse projeto. Então, se você fez esse projeto, podemos compartilhar esse projeto no Instagram ou Twitter, e você também pode marcar comigo ou lá. Então, no próximo projeto, vamos criar um site de filmes. Ou você pode dizer como aplicativo de serviço de streaming como Netflix, Amazon Prime. Então isso significa que eu sabia OFF. Obrigado por assistir e verei vocês no próximo. 34. Wireframe para plataforma de transmissão OTT: Da mesma forma, para poder voltar a outro vídeo nesta unidade, vamos criar um wireframe para a plataforma OTT como Netflix e Amazon Prime. Então, vamos criar uma nova equipe e vamos nomeá-la. Equipe maior, pule por enquanto para começar. Ok, nossa equipe é maior. Você pode ver os otimistas de cores L0 e o arquivo de design discreto . Certo, vamos renomeá-lo. Então eu já mostro um acompanhamento de nós temos que limpar alguns componentes. Então, vamos criar componentes, ou você pode simplesmente copiar componentes de colar de seus projetos anteriores que são levados a um aplicativo fértil. Você pode copiar esses compostos como esta imagem, este login e sinal e veteranos e o número da marca, transformar o hambúrguer Meno e tudo mais. Até agora, esse wireframe, vou exigir essa imagem, então vou, então vou selecionar isso. Então clique com o botão direito do mouse sobre ele e você pode ver aqui, então somos cópia opcional. Então você também pode usar o atalho Control C. Então eu vou copiar este e vamos fazer para ajudá-lo MCU. Ok, agora pressione Control V para colar essa imagem em nosso wireframe. Então, estamos fazendo Audrey se apresentar. Então, vamos criar outro. E a imagem da tela. Você pode nomear o que quiser. E 31 é um dos programas de TV. Certo, vamos adicionar um nome de marca. E vamos adicionar algum texto. Vamos aumentar o tamanho do texto. Grupo, controle G para agrupá-los. Então, no quadro do filme, precisamos dessa imagem aqui. E vamos torná-lo maior. Então, nesta parte, estamos em uma tela, a imagem do filme. E vamos criar alguns botões como pinup. Listado diminui o texto até gostar, digamos 24. E vamos resolvê-lo ou você se inscrever. E vamos criar algum texto para filme. Martin. E o último é para filmagens de TV. Então, atualmente estamos em movimento, então vamos fazer com que esses filmes levem dois para Bolt. Então, o usuário vai saber, ou nosso desenvolvedor de UI sem, ele está atualmente nessa ação de filmes. E se você quiser, você pode adicionar sublinhado a este texto. Então, vamos adicionar um filme nim. Então, antes de tudo, estamos em um retângulo necessário. Então, mais r. Então selecione Texto e vamos adicionar texto aqui. É torná-lo maior. Digamos até o tutorial Lycos 48. E depois disso, temos que criar uma descrição para o nosso filme. Então, vamos criar um retângulo novamente. Agora, aqui será nossa descrição para nossa lua. Então, vamos adicionar texto aqui. Certo, e depois disso, vamos criar um botão de reprodução. E diante disso vamos acrescentar, acho que fiz isso mais descrição. Vou para a indústria. Vamos mover essa toupeira, coisas como filme Reproduzir agora botão antilog. Ok, vamos criar uma barra onde todo o filme será alterado, a cor se opõe. Então, vamos adicionar mais retângulo nele. Então, a cor desses retangulares será a mesma. Então, temos que mudar a cor desse retângulo. Então, vamos escolher o retângulo. Aquele jantar para nossas larguras para aumentar este, vamos segurar Alt e arrastá-lo. Arraste. Acho que quatro serão suficientes. Então, agora vamos alinhá-los juntos. Mantenha pressionado Shift, selecione todos eles. E a argamassa se move verticalmente. Então, onde é algum espaçamento aqui. Digamos que o usuário esteja atualmente no segundo filme, então, ele saberá atualmente que está em um segundo filme, então temos que fazer algumas alterações. Então, vamos tornar essa região retangular um pouco maior, assim. E vamos adicionar um traço. Faça isso efeito de ondulação. Apenas essas duas coisas restam é o anúncio que tivemos que criar. Então, temos que adicionar um botão de pesquisa e um botão de ícone de sino. Então vá para a biblioteca do Teams e dobre este botão de ícone de pena. E vamos procurar por cirurgia. E vamos arrastá-lo para esta página. E o mesmo para o ícone de sino. Vamos fazer isso. Então, vamos arrastá-lo assim. Certo? Então, vamos alinhá-los juntos. Selecione todas as coisas alinhadas e inferiores e alinhe-as verticalmente. Ok, eles estão alinhados agora. E aleatório será usado em excesso. Então, vamos adicionar um nome de marca, selecione retângulo. Portanto, pode ser branding ou pode ser logotipos. Assim. Para centralizar, não ir assim. Portanto, este é o wireframe da seção de filmes da hora. E isso vai ser exatamente o mesmo para nossa seção de programas de TV. Então, temos que fazer mudanças como temos que fazer isso regular e transformar o programa de TV em Bolt. E vamos renomear esse quadro em programa de TV. E todas as coisas vão ser as mesmas. Como esse nome do filme e tudo o que podemos entrar como programa de TV. Então, vamos copiar isso e vamos renomeá-lo programa de TV. E aqui também faça descrição visual. Então este é o wireframe, então vamos fazer referência a partir dele e vamos criar nosso projeto final. Então, nosso projeto final será assim. Você pode ver a página de nome da marca, seção de filmes e seção de TV. Então, o nome da descrição do filme para ele, o botão avião Agora, o botão do trailer. E também adicionei essas classificações aqui. Então você pode ver essa ficção cinematográfica. Então, a partir daqui, o usuário escolherá o que assistir. mesmo para a seção de programas de TV. E verei vocês no próximo. 35. Plataforma de transmissão OTT: Bem-vindo de volta. Antes, quando criamos este wireframe para o nosso MCU ou para o projeto. Então, neste vídeo, vamos criar o projeto real. Então, vamos para a equipe que é o MCO 2D e criar um novo arquivo, o arquivo de design. Então, esta é uma imagem. Você pode renomeá-lo o que quiser. Então, por enquanto, vou renomeá-lo. Ok, então vamos criar um quadro. Desktop um. Você já sabe que a área de trabalho será nossa página aleatória. Agora selecione o quadro e vamos mudar a cor do pombo para ler assim. E isso adicionou texto no centro. Isso vai ser muito pequeno. Então, vamos torná-lo maior, como até 60. Vamos adicionar decisão ao centro. E vamos mudar a fonte. Tipo. Uma pesquisa na fonte do Google tipo 48 é como efeito Pro alguma coisa, mas não consigo baixá-la. Então, vou usar a fonte chamada impacto. Portanto, é semelhante a essa fonte. O tamanho da fonte é muito pequeno, então vamos fazer com que seja necessário até 96, ou vamos compensar como 120. Certo? Assim. Vamos adicionar isso ao centro. Outro texto que será nosso universo cinematográfico. Até agora, eu uso essa nova fonte de Baba. E isso é regular e o tamanho da fonte é 45. Isso e apenas bateu para baixo assim. Então, se você quiser, você pode adicionar um retângulo na parte externa deste texto. Mas, por enquanto, vou deixá-lo como é porque parece legal. Portanto, nossa segunda página será movida página. Então, vamos fazer com que essa página de filme transmita a imagem em filmes. Então, vamos dar uma olhada no nosso wireframe. Para pH. Então, a seção MouseX e Judaica, o nome da marca, o ícone de pesquisa, ícone de sino, n botão de inscrição. Então, temos que criar essas coisas. Então, vamos criar um retângulo primeiro. Porque quando vamos adicionar essa imagem , o teste não ficará visível. Então, vamos colocar nosso texto neste retângulo. E vamos mudar o tipo de gênero desse retângulo, colorir a corrente, ele é sólido, então vou torná-lo até linear, assim. Então, nossa equipe para este projeto, é meio louco. Então, vou fazer com que pareça um vermelho. E uma cor secundária será como esta. E essa borda é o comprimento do retângulo. Assim. Acho que a segunda cor é como ficar muito escura. Então, vamos fazer isso assim. Ok, agora vamos adicionar alguma textura aqui. Então, em primeiro lugar, serão filmes. Então, atualmente, o melhor novo. Então, vou transformá-lo em como nós que crescemos este. Então, acho que essa fonte não está disponível na quinta maioria dos operadores. Então você pode baixar essa fonte do lado de fora, do Google semelhante. Você pode baixar essas fontes e instalá-las em seu PC. Então, o problema com essa fonte é que não podemos torná-la em negrito. Então eu tenho um truque para isso. Então, o que você pode fazer é que você pode adicionar um traço e ele se tornará um parafuso como este. Então, vamos diminuir o tamanho da fonte. Atualmente é 45. Vamos fazer isso até 30. Certo, assim. E o segundo será nosso programa de TV. E então isso vai ser normal. Então, vamos remover esse choque como este e apenas adicionamos o nome da marca. Então, vou copiar este e arrastá-lo para esta página. Então, vamos diminuir o tamanho da fonte para gostar, digamos que 80 graus o tamanho da fonte até 30. Então, se você quiser conter a cor dela, como, vamos torná-lo vermelho. Assim, ou mesmo assim, você pode escolher qualquer cor que quiser. Então, vou fazer isso no vermelho. Em seguida, temos que adicionar é que o ícone de pesquisa e o ícone de notificação de sino. Então vá para S8. Tão bom hoje em fevereiro. E alterne esse ícone adicional. E vamos procurar o ícone de pesquisa e arrastá-lo para aqui. E também precisamos de um ícone de sino. E o último será nosso cadastro. Então, vamos alinhá-los primeiro e depois de baixo e verticalmente. Então eles estão alinhados agora. Então, podemos adicionar mais uma coisa. Podemos adicionar sublinhado a este filme. Assim, podemos adicionar sublinhado a este texto do filme. Então, o usuário terá uma seção longa agora. Então, vamos escolher um retângulo. Vamos criar uma barra simples como essa. Assim, e vamos mudar a cor dos poços. Você pode gostar de torná-lo branco ou vermelho. Então eu acho que o branco vai ficar mais melhor. Então, vou escolher um branco como este. Então, vamos arrastá-lo um pouco para cima. Então, digamos que se você quiser mover algo um pouco para cima para poder alterá-lo daqui, ou você pode pressionar o botão para cima no seu teclado assim. Certo? Então, tudo bem, nossa fabricação é criada, então vamos adicionar uma imagem a esta página ou a esse quadro. Eu tenho essa imagem do Vingadores Endgame. Então, vamos arrastá-lo para Figma e colá-lo aqui. Então, vamos resolvê-lo assim. E clique com o botão direito do mouse nesta imagem e envie esta imagem para preto. E um pouco melhor, o problema com imagens que você pode ver, isso encabeça algum texto. Então, podemos gostar do Zoom assim. E vamos abordar isso assim. Agora, apenas pareça perfeito. Ok, agora vamos adicionar alguns textos como nome do filme, descrição do filme, trabalho feito e tudo o que você pode ver no wireframe. Então, temos que adicionar nome ou descrição do filme, jogar agora botão e este filme. Então eu acho que para ser, eu quero criar essa barra de filmes. Então, vamos criar um filme Partes. Escolha retângulo. Então, vamos tornar esse retângulo transparente. Então escolha linear. Então você pode vê-lo se tornar transparente assim. Portanto, nossa nova barra de seção é maior. Então, vamos adicionar filmes. Vamos escolher um retângulo e apenas criar um retângulo como este. Então, vamos alinhá-los juntos. Vou mudar a seleção de todos os quadros, e também o retângulo L e M inferior e eu os empresto politicamente. Ok, vamos adicionar isso, o espaçamento entre eles. Então, digamos que o usuário esteja neste filme atualmente. Então, vamos torná-lo maior. Então, vamos adicionar uma seta. Então, vamos criar a seta usando quadrado assim. Então selecione esse retângulo e vamos girar aproximadamente como menos 45. Assim. Clique duas vezes nele e você pode ver os pontos aqui. Então clique nisso e pressione Enter no teclado. Então, temos apenas duas partes desse quadrado. Então, vamos adicionar um traço. Ele soma até oito. Assim, podemos torná-lo um pouco maior para que pareça mais natural. Então, vamos adicionar 10. O 10, a cor para branco. Agora clique em Concluído. Então, vamos movê-lo para esse quadro. E, a menos que n distribua a curva nessas arestas, tem que adicionar mais acariciando-a. Atualmente é 10. Vamos somar como virar. Certo, e vamos torná-lo menor ou coletar 50. Certo, vamos adicionar esse agente ao centro. Nosso primeiro por acabou de criar. Então, vamos duplicar esta página para programa de TV. E vamos renomear imagens para programas de TV. E suavize essas ferramentas subjacentes, programa de TV. E vamos remover o golpe dele. E vamos adicionar o golpe ao tecido. E também temos que mudar a imagem dela. Então, salve esse quadro e clique duas vezes em necessidade. Então, temos que mudar a imagem. Então você receberá este menu de imagem e clique neste botão. E cheio de ar. Em seguida, vá para a ferramenta Forma e coloque a imagem. E vamos adicionar essa imagem. Digamos que dois aqui, assim. E vamos adicionar essa imagem. Certo, e agora vamos adicionar a imagem nesses blocos. Segure Shift, selecione todas as seções. Vá para a imagem Shape Tool plus. Então, esses são os filmes também. Vou colocar essa imagem nesses azulejos. Então, a primeira imagem será o Endgame. E o segundo será, digamos, obrigado. E Viúva Negra e Homem-Aranha. De jeito nenhum para casa. Selecione abrir. Então, vou colocar a imagem do final do jogo neste bloco. O segundo será, eu acho, guerreiro e inspirá-los e vai estar no quarto estilo. E a viúva negra vai estar no estilo de vida. Então, vamos adicionar um traçado a esta imagem para que ela fique mais legal. Então, vamos levar que um pouco digital pode ser branco. Ou você pode gostar que um agente de mudança leia. Isso, faça um golpe até cinco. Ou você pode torná-lo um pouco maior como uma proteína. Então, depende totalmente do golpe de vírgula que você quer. Então, vamos adicionar imagem a esta seção de TV. Selecione o estilo, segure Shift, selecione todos eles. Vá para Shape Tool. Vamos fazer a imagem. Então, primeiro vou colocar essa imagem a partir do motivo. E o segundo vai ser esperança que eu. Terceiro vai ter sorte. E o último é de uma divisão. Então, para escrever, o fóton é loopy, então vou adicionar loci ou aqui na primeira na terceira divisão. Então, vamos adicionar o nome do filme e a descrição para ele. Então, vamos duplicar este. E vamos girar 90 graus. E basta ajustá-lo para aqui. E vamos torná-lo maior assim. E vá para Efeitos. Adicione o grupo deles. E vamos fazer essa camada desfocar até 80. Portanto, depende totalmente da quantidade de desfoque você deseja adicionar. Então, neste caso, o, será perfeito para mim, então vou acrescentar isso. Então, vamos adicionar o nome do filme. Então selecione o texto. Então o nome do filme, Ele organiza o Endgame. E você pode ver que a fonte é Oswald, e é regular. E o tamanho da fonte é 11 Pi. Então, vamos antecipar aqui. Assim. Vamos adicionar outra textura. E vai ser qualquer jogo. E vamos adicionar uma descrição do filme. Então, descrição da fórmula, você pode ir para MDB e copiar colar a descrição do MO e o texto. Vamos criar um retângulo. E é no controle de texto em fala V, assim. Então, para isso, escolho uma fonte chamada Sofia pro, e o tamanho da fonte é 22. Então, vamos limpar esse botão Reproduzir. Vá para o retângulo. Crie um retângulo como este. E vamos adicionar. Então, vamos fazer esse retângulo em redondo como este, ou aqui. Então, vamos transformar a cor um pouco azul para vermelho. E vamos adicionar o texto. Objeto vai ser jogado agora. Atualmente, a fonte é Sofia pro. Portanto, a cor da fonte será branca. E vamos adicionar um traçado e uma cor de gênero do traçado em branco. Assim. Vamos aumentar o tamanho da fonte em até 40. Como este NTC sem fim aqui. E temos que criar esse botão Play. Vá para a ferramenta Forma, escolha este polígono. Truong um triângulo perfeito usando Shift. E vamos girar isso para menos 92. Certo, e vamos adicionar alguns cantos arredondados. Então eu acho que podemos fazer isso um pouco maior, inventar como 15. Então, acho que a exibição menos suave funcionou para eles. Ok, e vamos adicionar essa tela agora. Certo, isso parece legal. Vamos mudar a cor da peça agora para branco. Então, vamos agrupar para que possamos usá-lo na página do programa de TV. Todas as coisas que usam Shift e pressione Control G para agrupá-las. Agora, selecione o avião, nosso botão, mantenha pressionado Alt e arraste-o para o programa de TV. Certo, vamos criar esse botão de trailer. Então, vamos duplicar este. Portanto, selecione Exibir. Agora, segure este trailer. E vamos adicionar sublinhado, sublinhado tweet, como aquele botão de filme. Ok, vamos virar a cor do sublinhado em vermelho aqui. Então, esses botões são criados. Então, vamos adicionar a leitura aqui. Então, primeiro temos que gostar disso para baixo, assim. Então vá para a ferramenta Forma e segure Shift para criar uma estrela perfeita. Vamos duplicar essa tarefa para tempos phi. Vamos alinhá-los. Vamos segurar Shift selecioná-los todos. Primeiro Allen, inferior, depois vertical. E espaçamento de distribuição horizontal. Certo, vou mudar o seletor de cores. Digamos que pareça assim. Selecione a última estrela e remova o preenchimento dela e adicione um traçado como este. Se você quiser, você pode mudar a cor dele. Você pode torná-lo branco assim. E uma coisa resta é que a curva AD nele. Vamos adicionar raio de canto até 200. Então, vamos agrupá-los para que possamos usar cada um em outro quadro, selecioná-los todos e controlar G para agrupá-los. Assim, você pode ver os filmes, programas de TV, inscrição, pesquisa e ícone de sino, a cor é preta e não perde isso. Ótimo. Então, vamos torná-lo branco. Também altere a cor do traçado para branco, assim. O mesmo ícone de pesquisa visual 40. E o último é se inscrever. Então, acabamos com nossos projetos. Então, uma coisa resta é adicionar prototipagem. Então, inicialmente, vamos fazer isso. Então é isso para o vídeo de hoje, e verei vocês no próximo. 36. Prototyping para a plataforma de streaming OTT: Bem-vindo, bem-vindo, bem-vindo. Então, neste vídeo, vamos adicionar o tipo de função a este projeto. Então selecione a primeira página, vá para o protótipo. Você pode ver por que esses pontos brancos. Clique nele e arraste-o para a página do filme. E atualmente é navegar para filmes. Portanto, é um instrumento onclick e, em seguida, de imagem. Então, no projeto anterior, escolhemos esta escola menor de animação inteligente com dinâmica inteligente e divulgamos esta. Então, segundo, será nosso programa de TV. Então, quando o usuário clicar no programa de TV, ele vai redirecionar para esta página do programa de TV. Então você pode ver todas as coisas como onclick. E dissemos a animação em animação inteligente. E a partir da página do programa de TV, usuário quer ir para a página do filme que possamos ir para a página do Moodle assim. Então, as coisas serão iguais a onclick, navegue para filmes e animações inteligentes. Ok, agora vamos apresentá-lo. Clique neste botão para apresentar. Ok, então você pode ver nossas bases se parecem com isso, mas então atualmente isso se encaixa de acordo com minha exibição. Então eu tenho que fazer isso, você pode ver nisso, apesar do tamanho real. Então, vou escolher dimensionado para caber. Para que possamos ver todas as coisas. Pressione R para reiniciar. E eu quero clicar neste. Você pode ver essa animação legal, animação inteligente. Então, se eu clicar nesta página de filme, você pode ver que as teclas de atalho é programa de TV. Então, vamos clicar nele. E você pode ver o efeito de animação aqui. Então você pode ver esse efeito de animação inteligente neste filme. Então, se eu clicar no programa de TV novamente, você poderá ver o efeito de mudança assim. E também o mesmo defeito inteligente neste programa de TV. Então é assim que você pode protótipo de seu projeto. E este é o nosso projeto final. Então, sou um grande fã de energia. Então, e é por isso que eu valorizo esta página do nosso, digamos que se você é um fã de DC de tau of n, um fã de Star Trek, você pode criar esse tipo de projeto para eles assim. Então, depois de criar este projeto, você pode fazer o upload desse projeto no Instagram. E você pode me marcar para que você possa ver meu ID de instrumento aqui. Então eu saberei ou você é fã de maconha ou DC ou Star Trek ou Star Wars. Então esse é o Federal Reserve. E verei vocês no próximo. 37. Crie seu aplicativo de música: Bem-vindo de volta com outro vídeo. Então, até agora, criamos projetos como esse, ou você executou por malware? E a primeira é a nossa palavra, o aplicativo de entrega de alimentos. Então, para este projeto, ouvi uma tarefa para você ou você pode dizer ou provar. Então, nesse teste, o que você tem que fazer é isso, então eu tenho esse wireframe. Portanto, este é o wireframe para um reprodutor de música. Assim, eles podem transformá-lo e criar seu próprio player de música usando esses wireframes, você pode nomeá-lo o que quiser. Você pode colocar suas terceiras músicas sobre a colina e inspirar-se como o Spotify ou a música YT. E você pode usar qualquer cor que quiser, ou se quiser fazer um clone do Spotify, também pode fazer isso. Então, depende totalmente de você. Se supor que não conseguimos fazer isso, também vou criar esse projeto depois deste vídeo. Então fique atento para isso. Então, se você está confiante, então vá em frente e faça este projeto. Então, isso é o que eu e a religião faremos como na próxima. 38. UI de Musify: Então, no vídeo anterior, dei esse wireframe para você. Sei que alguns offshore podem fazer esse projeto. Então, se você fez esse projeto, você pode compartilhar esse projeto em sua história no Instagram e você pode me marcar, oh querido, você pode ver meu ID do Instagram também. E você também pode compartilhar seus projetos em nosso servidor de discórdia. Em seguida, a aldosterona pode se inspirar no seu projeto. Esses projetos não serão liderados, então vamos fazer um projeto para eles. Então, vamos criar um novo arquivo. Então eu vou ler é que parece tão Spotify. Sei que soa como o Spotify porque eu pago por inspiração para 45. Eu já disse que pode se inspirar no Spotify, na música de identificação automática ou em qualquer óleo ou qualquer, seu leitor de música favorito. Então, vamos escolher um quadro. Atualmente temos o iPhone 13 max, então vamos escolher este. Vejamos nosso wireframe. Então, temos coisas como perfil, foto, logotipo, o mínimo de hambúrguer e alguma insônia de Picchu. Então, isso criará essas coisas? Ok, agora vamos criar um logotipo para o nosso player de música. Agora, o que temos que fazer é arrastar para criar esta seção para nossa imagem e também para o nome da nossa música. Então, vamos escolher um retângulo. Então, a seguir, temos que usar isso para adicionar esses ícones como um ícone de coração, ícone não gosto, botão trabalhado e pausar e botão para frente e para trás. Então, vamos criar esses botões. Agora, o que é o modo escuro é realmente famoso e muitas pessoas estão usando-os. Eu também sou um deles. Então, vamos criar esse modo escuro antes de criarmos o nó superior. Então, vamos mudar a cor desses botões. Como se eu aplicasse o modo escuro no prim, então tudo ficará preto. Então nosso livro gosta do botão quente Les Paul Bourdon e a dislipidemia não será visível. Então, as listas fazem algumas alterações aqui. Se você quiser, você pode selecionar essas três coisas, como jogar, pausa e botão Avançar e Voltar. E você pode mudar a cor do do coração e este botão Não gostar. Você pode torná-los brancos e essas três coisas serão azuis. Então, depende totalmente de você ver a cor do hambúrguer e também a cor destes. Low me diz. Agora podemos ver nosso logotipo no do hambúrguer ícone e os espanhóis acabaram. E isso. Então, vamos fazer essas coisas. Então V Isso é música. Música. Então, vamos criar as músicas. Este aqui. Então, o próximo. Então, isso parece parece com o próximo. 39. Aplicativo de Prototyping: Bem-vindo de volta. Neste vídeo, faremos pelo nosso aplicativo de música. Então, vamos começar a prototipagem. Como você pode ver, tenho quatro quadros na minha tela. Vamos começar do primeiro fluxo. Então selecione o quadro indo para o painel de protótipos. Então, vou me juntar ao segundo quadro do primeiro princípio. E vamos adicionar áudio de animação inteligente. Navegue até nossa guia, navegue até o iPhone 12 Pro Max 1. E uma emissão é um instrumento. Então, vamos escolher o Smart Dimension. Ok, agora para o segundo quadro, digamos que o usuário queira mudar a música. Então, se você clicar neste botão para sobrecarregar a música vai mudar e a empresa será essa terceira borda. Então, vamos escolher Normal. E a partir do terceiro quadro, usuário pode ir para o segundo quadro assim. E todas as configurações serão as mesmas para isso. E a partir daqui, a lista de reprodução será aberta. Vamos escolher a missão Martin aqui. Acho que acabamos com o nosso mix de produtos, então vamos respirar nele. Então, vamos usar este aplicativo. Então, na admissão inteligente de tecnologia, você pode ver, você pode ver que o logotipo está no topo agora. E eu não finjo a música. Então, vou clicar sobre isso proibido. Esta é a segunda música. E daqui posso voltar à minha primeira música. A partir deste botão de lista de reprodução. Posso acessar a lista de reprodução assim. Você pode ver essa animação legal, mas não posso voltar porque não disse prototipagem para esta playlist. Então, vamos fazer isso primeiro. Então, a partir disso, ele tem que ir para o segundo quadro e menos inteligente e emissão. Agora, vamos reproduzi-lo de novo. Se eu clicar neste botão e você puder ver a lista de reprodução descer e abri-la novamente, feche. E você também pode ver o efeito de animação, Oreo. Isso parece muito legal. Portanto, essa é a proteína do nosso aplicativo player de música. Então essa é sua derivada. E te verei no próximo vídeo ou na próxima semana. 40. Wireframe para página web nas redes sociais: Bem-vindo. Então, em britânicos, argumentaria tarefa de criar um aplicativo de mídia social. Então, conheço alguns dos meus concorrentes com essa tarefa. Então, neste vídeo, vou criar minha palavra para isso. Vamos criar um novo arquivo de design. Certo, vamos renomeá-lo. Então, em Bruce, realmente alude a antes, você pode usar como moldura do iPhone. Ou se você quiser criar um aplicativo da Web, você pode fazer isso. Então, para este projeto, vou movê-lo. Então, vamos primeiro criar um wireframe para ele. Então, nesta seção, teremos um grupo assim . Digamos que o usuário esteja atualmente na seção de gráficos. Assim, o usuário saberá dessa garrafa o usuário saberá que ele está no comando. Certo? Então, esses serão nossos grupos. Então, vamos adicionar alguma textura. Ok, então nesta seção vamos adicionar um grupo. Então, vamos editar o texto aqui. E nesta seção teremos uma mensagem de personnels. E aqui teremos como uma mensagem de um grupo ou de pessoal. Adicione um botão Chamada aqui. Vamos também adicionar um botão de chamada de vídeo. E vamos criar essa caixa de bate-papo. Aqui vamos adicionar um microfone. E nesta seção vamos ter algumas conversas. Ok, então eliminando um leve ferro em Berkeley. Então, em grupos, vamos para o inferno, como alguns grupos, grupos, grupos escolares de amigos. E também na mensagem pessoal da pessoa de seus amigos ou professor ou de seus colegas assim. Então esse será nosso wireframe para este projeto. Então é assim que minha versão vai se parecer. Então eu sei que você pode ser feito de uma maneira diferente. Então eu me inspirou na pior discórdia aparente. Então, no próximo vídeo, vou criar uma interface do usuário para nosso aplicativo de mídia social. Então sou eu assinando. Obrigado por assistir e verei vocês no próximo. 41. Design de interface de rede social: Bem-vindo de volta. Então, em Bruce, fizemos esse wireframe para nosso aplicativo de mídia social. Então, neste vídeo, vamos criar a interface do usuário real para isso. Acho que tenho que me lembrar neste wireframe. Wireframe, vamos escolher um retângulo de quadro. E só para centralizar. E isso é divertido. Certo? Então você pode ver que os colonos são afiados, então vamos fazê-los segurar o turno e selecioná-los todos. Vamos fazer até 20. Use acidentalmente esse relacional para que eu tenha que usar o raio do canto que a cor de fundo seja cinza. Vamos fazer uma cor branca como essa e vamos adicionar uma sombra. Então, realmente depende de você qual cor você deseja usar. Então, digamos que por trabalhar em um aplicativo e você não sabe qual cor usar, então você pode usar este site chamado Color Hunt. E neste site você localizará muitas paletas de cores como esta. Então, para este projeto, vou usar essa paleta de cores. Então eu já baixei, então vou arrastá-lo no meu projeto Figma. Este, ou este. Para esta seção, vou escolher vamos dizer essa cor. Você gosta, limpeza Discord. E vamos adicionar um logotipo aqui. Ok, Agora é hora de adicionar nossos ícones, como em nosso ícone adicional, temos como dois deles, como este quadrado D normal aleatório para este projeto, este. Então, depende totalmente da configuração dele. Então, por enquanto, sou importante esses ícones, então vamos adicioná-los um por um. Então, antes de tudo, vamos torná-los um pouco maiores. Então eu uso como 35. Então, vamos fazer 40. Então, parecerá mais metal ou legal. Acho que vou torná-lo branco. Faça-os por quê? Isso não é selecionado. Ok, vamos inseri-los um por um. A nuvem estará aqui. Vai estar configurando. Certo, vamos inseri-los. Mantenha pressionado Shift, selecione todos eles. E o centro alinha o espaçamento horizontal. Então eu li o espaçamento também. Certo, vamos adicionar um perfil agora. Clique nele. Vá para Shape Tool. Então, vamos colocá-lo neste logotipo. Você pode ver neste lugar agora. E também parece perfeito. AVC. Portanto, depende totalmente se você quiser adicionar traçado, você pode adicionar. Você pode sair como é assim. Então, estamos atualmente na seção de cadeira, então retângulo. Vou usar isso. Olhe para este. Este aqui. Vamos trazer isso para a frente. Ou clique nele e leve para a frente ou até mesmo use esse suporte quadrado direito para empurrar para cima. Bom. Você pode ver como ele se parece. Ok, então atualmente é assim. Certo, então vamos fazer um grupo. Eu quero fazer. Então, vamos alterar a fonte, a cor da fonte. Vamos torná-lo mais assim. Grupos de borda. Certo, vamos adicionar um grupo de seus colegas. Vamos torná-lo uma linha regular. Assim. 1909, vou gostar de tudo bem, como este. Então, digamos que alguém tenha deixado cair uma mensagem ou algo assim, o tamanho firme, assim. Certo, a menos que um tempo. Portanto, o usuário saberá quando essa mensagem for entregue. Citação King de alguém, digamos 38, 130, grava uma mensagem desse grupo. Ok, vamos torná-lo um 10. Acho que fiz as pazes como dez. Certo, vamos fazer disso um grupo. Porque vamos usar essa coisa várias vezes. Pressione Control G para torná-los um grupo. E vamos copiar uma frase como esta. Selecione todos eles para cima, assim. E você pode transformar esse tempo OB. E também o nome desse grupo é igual a 21. Então, vamos copiar exatamente a mesma coisa em nossa seção de primeira classe, assim. Certo, então antes de tudo, menos do que o nome do grupo. Digamos que você tenha k-mers neste grupo. Então, vamos adicionar imagem nesta seção de grupo. Ok, então o primeiro é, a primeira imagem é o nosso console. Então, vou adicionar este segundo é os alunos. Digamos que os alunos imaginários sejam programadores. Então, vou adicionar uma palavra aqui. Não faz sentido para essa imagem, então vou escolher uma imagem diferente. Digamos que nossos rumores fora do arquivo. Então, vou adicionar essa imagem como loci. Então, vamos adicionar o córion leucêmico. Certo, assim. Digamos que você edite a imagem, mas a imagem é muito bem, então você pode clicar duas vezes nela, ir para Preencher, selecionar a imagem. E você pode escolher um corte, essa imagem. Ou você pode gostar da Moody's e isso, cancelar este. Então agora vou adicionar algumas imagens. Eu acho que no Windows, o atalho é para Windows plus r dot key. Então, ele abrirá o público do painel de emojis. Então você pode adicionar imagens como esta. Ok, esta soma está dizendo, obrigado. Por aqui, assim. Portanto, depende totalmente de quem você pode adicionar o que quiser. Então acabamos com o nosso grupo. Então, digamos que o nome dessa garota seja ritual. Como se eu fosse um grande fã de amigos semelhantes. Então nemo está escrito. Então você pode adicionar o que quiser. Mesmo a aridade executa o nome do GF, áudio leva o nome, FAÇA a libertação em você. E o último será Chandler. Obrigado. Vamos adicionar alguma dicção aleatória. Ok, então ouvi algum texto aleatório aqui. Eu mantive esse tempo. Também a mensagem de Rachel, ator 46. Então, vamos adicionar uma imagem ou imagens mais agora. Então, nesta seção, vamos copiar este. Ok, na seção de teste. Então você pode ver o problema aqui. Então eu copiei esse grupo, mas o grupo não está visível, então eu tenho que adicionar um texto. Mais uma vez. Vamos adicionar um retângulo simples. Por aqui, vai ser 20. Então, vamos torná-lo um pouco maior. Então, vamos adicionar, se eu arrastá-lo aqui, ele será adicionado de volta. Então, temos que trazer isso adiantado ou clicar nele e escolher Trazer para a frente. E agora vamos colocá-lo aqui assim, então temos que fazer algumas alterações ou adicionar um traçado. Vamos torná-lo branco. Vai ser branco e também aumentar o tamanho da fonte. E atualmente ela está online. E temos que remover este. Então, temos um público de ícones que será a camada inferior, arraste-a para cá. E a cor desse fundo é branca e também a cor desse Taiwan é branca. Portanto, não é visível. Então, vamos trazê-lo para a frente. Traga para a frente ou 40. E explícito aqui. Então, faixa, ícone de vídeo. Certo, Traga para a frente. Vamos alinhar essa chamada e essa chamada. Então, é lambda. Você pode parecer que o ícone de três.me, não temos esse Minnesota, temos que criá-lo manualmente usando três elipse. Uma elipse como essa. Acho que temos que torná-lo um pouco menor. Então, talvez como tudo bem, então está feito. Agora, vamos mover isso para cá. Seja mais fácil de se mover de um lugar para outro. Então chats. Então, vamos copiar este. Na paleta de cores. Não há cor na paleta de cores. Vamos torná-lo menor. Então, vamos criar assim. Vamos importar esse meu próton aqui. A câmera. Certo? Primeiro de tudo, vamos torná-lo maior. Como vamos dizer, vamos fazer isso assim. Nesta seção de capítulo, isso estará aqui. Eu acho, é por isso que esse filme aqui. Certo. Vamos alinhar essas coisas. Essas coisas estão alinhadas agora. Como digitar sua mensagem. Acho que são 14, vai ficar bem. Assim. Então, as coisas estão acontecendo é que só o bate-papo ou algo assim? Então, vou adicionar alguma chance aleatória para você. Digamos que eu recomendei um jogo para Rachel. Vamos dar ao canto 20 polígono. Certo? Então, vamos ficar assim. Então, vamos criar um grupo deles para que possamos usá-lo várias vezes ou Shift para selecionar essa seta aqui, este texto de edição. Então, vamos fazer isso. E você pode usar sua fonte favorita assim. Então, vamos torná-lo menor. Sites, um pouco menores, assim. E vamos terminar a tempo. Então, vou copiar este, arrastá-lo para cá. Então, vamos criar outra seção. Posso copiar este, mas, mas quero este polígono para o lado esquerdo. Então eu tenho que criar o novo. É por isso que eu tenho que criar um novo. Ou você pode usar o mesmo. Então, vou descrever esse polígono. Então é aqui que termino meu projeto de aplicativo de mídia social. Então eu sei que você pode usar de maneira diferente ou se inspirou em diferentes aplicativos como Facebook ou Instagram. Então, depende totalmente de você. Pode parecer diferente ou melhor do que eu. Portanto, este é o aplicativo de página única, então não vamos usar o protótipo. Então, se tivéssemos várias páginas, como aplicativo de música, então, nessas páginas de fotos. É por isso que conectamos esses projetos. Portanto, esta é a única página. Então é assim que meu aplicativo de mídia social se parece. Então, e verei vocês no próximo projeto. 42. Projeto 5(teste suas habilidades UIUX): Bem-vindo, bem-vindo, bem-vindo. Neste, vou falar sobre o arquivo do projeto. Para este projeto, não vou fazer qualquer wireframe ou nenhuma ideia. Você tem que fazer isso sozinho. É meio que seu teste. Você pode estar pensando no que temos que construir ou projetar. O início é qualquer coisa que você possa projetar, aplicativo ou página da web. Depende totalmente de você. Digamos que você tenha que construir nosso campo para algumas marcas como Nike, Puma. Então você pode se inspirar na Nike ou na puma. Ou você pode apenas pesquisar no Google, ou você também pode pesquisar no Dribbble e tentar fazer este projeto. E lembre-se de uma coisa, ela deve ser única. E você tem que ser criativo. E um pouco de sua própria criatividade. Existem alguns passos que você precisa seguir. Como o primeiro passo é inspirado. O segundo é fazer um wireframe. terceiro passo é o aplicativo de design ou página da Web. O passo em frente é limpo neste aplicativo de três páginas em uma página da Web e protótipo de multas rígidas. E o último passo é compartilhar seu projeto comigo e também com seus amigos. Então, essas são as etapas que você precisa seguir para fazer este projeto. Sei que você pode fazer isso. Então sou eu assinando. Obrigado por assistir e verei vocês no próximo. 43. Sistemas de grade na web e UI: Bem-vindo de volta. Nesta unidade, vamos aprender sobre o que é grade. grade é o esqueleto do alinhamento declarado de design que ajuda você a criar, ordenar e organizar o conteúdo superior que você está projetando. Se você está criando um layout para impressão como revista ou combinando imagens e textos para projetar uma landing page, você usará a grade para ajudá-lo a tomar decisões de design e criar uma boa experiência para o usuário. Usando elementos de grade, tomada de decisão aleatória. Em vez de colocar elementos em locais aleatórios. Ao usar corretamente corretamente, você saberá exatamente onde colocar elementos como logotipo, itens de menu, títulos, cópia do corpo, imagem e modo. Isso ajudará a acelerar seu processo de design. Por que as garras são importantes no design digital? grelhas ajudam a moldar e herdar você a fazer design digital. Sem eles, você não terá idéia de onde colocar elementos. Precisamos deles para criar uma boa experiência do usuário. Então, o usuário sabe como navegar por um site e encontrar o que precisaria. As grades também ajudam o que se trata de design responsivo. Embora a experiência da área de trabalho da página de destino possa usar várias colunas para passar texto e imagem. O design precisa ser flexível o suficiente para condensar até duas a três colunas na mesa e uma coluna no dispositivo móvel. Observe como o Greer móvel se torna uma pilha como uma coluna ou pequena grade no exemplo. Existem cinco tipos principais de grades. Alguns são melhores do que outros para web design. Mas você provavelmente usou todos os phi em 1 em sua carreira de design? A primeira é a grade de linha de base, A segunda é a grade manuscrita. Coluna, a terceira é a grade de colunas. fóton é uma grade modular, e para o último é herético. Criar esses cinco grupos são realmente importantes, mas acho que a grade de colunas é realmente importante para nós. A Columbia ajuda a dividir o texto para postagens e ilustrações. Para sites, você pode ter em qualquer lugar da Goodwill ou até 16 colunas. Vamos gastar a vértebra, a página de empréstimos. Você pode enviar texto e imagem em apenas uma coluna, ou eles podem se estender por várias colunas. O espaço entre a coluna é chamado de vigas. Eles devem ter o mesmo tamanho em todos, nem todas as colunas grelham o cabelo para ser simétrico. Por exemplo, você pode utilizar uma grade de coluna de assimilador onde algumas são mais finas, enquanto outras são mais largas, o que pode ser útil dependendo da herança do seu design. Uma grade de coluna de cemitério é comumente usada em blogs, sites onde você tem o conteúdo principal ampliado fazem o terceiro contêiner do layout. Embora o termo menor possa ser a barra lateral que interessa informações sobre o blog e o escritor. Depois de ter feito sua pesquisa, talvez você queira explorar algum wireframe de baixa fidelidade no papel. Criar um Greer para sua landing page é um dos passos mais simples. Depois de criá-lo, você não precisará pensar novamente todas as landing pages subsequentes. Antes de começarmos, qualquer coisa cobriu a grade primeiro, em vez de deixá-la até o final e tente fazer seu design se encaixar em uma grade. novo designer pode se sentir confinado pela ideia de usar o grupo, mas você não deveria. Depois de criar uma grade, não há problema em quebrá-la. Mas pelo menos você está fazendo isso intencionalmente e eles são escritos para decisão de design. Quanto mais você usa a grade, mais você percebe como é o guia e ele realmente ajudará você a projetar melhor e mais rápido. Então essas são todas as coisas que nossos grupos. Então isso significa assinar. Obrigado por assistir, e verei vocês no próximo. 44. 15 coisas que fazem seu design de UI a lis!!: E os júris serão conduzidos por frutificação mais densa ou tela de aplicativos. Alguns deles são simples, alguns deles são apenas, mas alguns deles estão acesos. Pode conceder liderança. Quero dizer que a interface do usuário que parece atraente como o usuário deseja e a interface do usuário que escuta seu usuário. Depois disso, impressão que faz você viver. Se você aprender todas essas coisas, aprenderá com sucesso a criar uma interface de usuário que a escuta. usuário parece atraente e delicioso para o usuário. Então, vamos aprender sobre essas coisas um a um, começando com tipografia. Cada interface do usuário com WTP de buffer está acesa porque mais de 60% do aplicativo é texto ou depende completamente de textos. Por exemplo, um aplicativo de artigo como o médio, tem mais de 60% do aplicativo para ele com detecção. E, por outro lado, no aplicativo que tem a caixa de seleção do botão, Dropbox não pode ser efetivo sem texto, pois o usuário pode não entender qual botão para a inscrição para login ocorre como papel importante no design da interface do usuário do aplicativo. Portanto, é crucial usá-lo corretamente e usar o texto corretamente. Tem que ser estilizado com precisão. Cores. As cores são a parte mais importante e muito deliciosa do design. Assim como o artista, nada sem cores, a interface do usuário não é nada sem cores. Portanto, é importante colocar cores dentro do design da interface do usuário. As cores no design da interface do usuário proporcionam atração e usam uma lapela. Ao usar cores, o designer pode colocar vida em seu design como fato, mas também funcionar como um gatilho psicológico para humanos. Portanto, para uma melhor experiência e design de interface de aplicativo, você deve usar cores dentro do seu design. Mas, às vezes, se tivéssemos cometido algum erro ao usar cores para que nossos ícones, ícones desse um dos elementos mais usados. Agora, o que um designer baixa usando o porque o usuário entende rapidamente, em vez de ler o texto. À medida que os humanos entendem o visual facilmente, ou a melhor maneira de usá-los para seu benefício ao projetar um design de interface do usuário, posso começar as coisas novas como nossos antepassados para usá-las para definir seu reino e suas áreas. O reino onde você encontra linha mantida de bandeira com símbolo de linha. Ilustração. As ilustrações são uma das melhores maneiras de adicionar um visual atraente que você também pode personalizar de acordo. Normalmente, a ilustração é muito melhor do que usar o simples para que a ilustração seja baixa em tamanho e nunca pareceu embaçada em nenhum tamanho de tela do aplicativo. Se você usar a ilustração SVG, ilustração para tornar o conteúdo mais compreensível para o usuário. A imagem é um dos visuais mais populares e antigos dentro do design branco. As imagens são todas, mas são chamadas como de costume, inquilinos de obras, mas, em seguida, o texto sem formatação. Como os humanos são criaturas visuais, a carga para ver imagens. As imagens mostram emoção com sentimentos atacados do usuário. E isso realmente ajudou a atacar e tornar o usuário cliente. E se não for usado corretamente, pode causar grandes problemas para você. E emissão, emissão é a coisa mais usada dentro do branco, projetada para impulsionar a interação do usuário, pois onde usuário olha para algumas das animações legais, eles se sentem bem e gostam interagir com o software de aplicativo ou site. E a emissão também é usada para fornecer feedback quando os usuários clicam em algo ou para alcançar algo. Por exemplo, como uma mensagem de tratamento bem-sucedido quando você transfere seu dinheiro para outra conta. direção do migrante indica alguma animação simples usando o aplicativo que faz com que a função normal pareça ser atacada por Anna destacada, por exemplo, toque duas vezes na imagem para gostar da Proteção contra Migrantes em Instagram. Esta animação simples, como usar listas perfeitas como ordenar animação, faz com que o usuário se sinta entediado com sua animação. Personalização. Personalização significa recomendar o conteúdo relacionado à escolha do usuário que eles fizeram anteriormente usando o aplicativo. Ao armazenar os dados e sua equipe se encaixa na permissão do usuário, você pode facilmente tornar seu aplicativo personalizado. usuário adora ver algo mais personalizado, pois se sente importante e tornar o aplicativo mais interativo. Por exemplo, se o usuário carregar no carrinho limpando vídeos, ele adoraria ver seu outro CAD. Por que usaremos nesta recomendação do YouTube em vez de exibições, deslizando vídeo, navegação, nutrição. E um dos recursos importantes do aplicativo sem o qual o usuário não pode usar o aplicativo. Portanto, é melhor tornar o fogão de navegação e mais inteligente. Flex 45, YouTube, Amazon usa barras de navegação, menus e outros botões para fazer com que o usuário navegue facilmente pela tela inicial do aplicativo. Este é o Eunice, fazendo com que a interface do usuário seja uma das tarefas mais importantes e os designers de interface devem fazer em 2021. E para a capacidade de resposta basicamente faz com que o design da interface do usuário seja capaz de corrigir o maior número possível de telas. Porque agora estamos na era dos medidores em que 70% das pessoas têm mais de um rapaz ainda possuído ou usado. Qual pergunta por que projetar? Minimalismo? O design principal da interface do usuário focado no minimalismo. Usar o minimalismo é basicamente subtrair elementos menos usados da interface do usuário e colocar o elemento mais importante na tela. Minimizar não significa remover botões úteis apenas para tornar a tela do aplicativo limpa. É tudo sobre estilo e espaçamento. Paridade. Você por que é formado com a herança do elemento, o que significa que as coisas mais importantes devem estar no topo do design da interface do usuário e o resto das coisas são organizadas de acordo. heterotrofia é realmente importante no design da interface do usuário porque se concentrou na ala importante e menos importante, e os designers de ajuda a organizá-los de uma maneira específica que o ajude a navegar facilmente no aplicativo. Consistência, manter consistência é a mais importante. Isso significa usar o mesmo estilo do elemento em todo o aplicativo. Se você usa diferentes estilos de elemento ou dilema, torna seu trabalho Lord High e a qualidade do aplicativo baixa. Usando um bit constituinte básico, mas crucial. Alguns elementos do aplicativo podem ser os mesmos na função, mas diferentes nas cores, esquema e teste os identificaram e os alteraram pelo seu APTT ele como exposição a. significa projetar o design para pessoas diferentes do normal. Eles podem incluir pessoas da esquerda, pessoas com deficiência são pessoas com deficiência. Mais atrás. A coisa mais crítica que diferencia o vazamento é muito ruim. A designer que sabe como usar as costas é a designer que conhece nosso design. Uma interface do usuário real. Para defeitos são as coisas mais críticas como algum usuário para você de volta com boas críticas e outros com o banco, apenas tentou entender seus problemas e depois resolvê-los. E recursos. Quanto melhores ferramentas e recursos você tiver, melhor será sua aplicação. Como se você tivesse melhores recursos de ícones, essa interface de usuário MCU parece mais atraente, além projetar ferramentas também é importante até certo ponto. A ferramenta para projetar u1 deve ter alto desempenho. Suporte a Plugin também suporta exigência das empresas e como todas as coisas básicas necessárias para você Eu projetar resistores são a coleção das coisas que os designers usam para uma melhor criação de UI, como, como sucesso de ícones, recursos de ilustração, recursos de imagem e humor. Então, aqui chegamos ao fim da minha lista, filtrando coisas que fazem a interface vivida. Mas porque você ficou junto comigo, algum bônus para você. Os bônus seguem a tendência. Vocês fios fazem parte disso. Se transferir valor para o usuário ou apenas melhorar a qualidade do design da interface do usuário. Os principais designers sabem onde estão, como usar o tempo e não estamos. E você poderia aprender sobre isso lendo e entendendo as tendências. Às vezes, como o morfismo de macarrão único e não pode ser usado, mas às vezes como uma rocha pode ser usada em qualquer parte do caminho com funcionalidade básica. Então, essas são tudo o que você precisa saber como desenvolvedor de UI UX. Então é isso por hoje. E verei vocês no próximo. 45. 5 SITES VOCÊ DEVER VER! Inspiração de web design: Bem-vindo de volta. Neste vídeo, vou dizer os cinco principais sites para se inspirar. O primeiro é, e também meu favorito que o Drupal de gribble, você pode se inspirar muito. Você pode ver muitas pessoas enviarem seu trabalho no tipo de inspiração, temos todas as opções como animação de página da web, branding, ilustração, celular, impressão, página da web, topografia, design de produto e tudo mais. Então, vamos escolher o web design para que você possa ver todas as páginas da Web. Digamos que seu cliente queira criar um site para criptomoeda, então você pode dar uma olhada nesses sites. Você pode ver todas as coisas como cor de trigo que ele usou neste site. Você também pode segui-los daqui. Você também pode comentar sobre essas páginas. Eu também posso gostar deles. E você também pode ver as páginas da Web semelhantes para criptomoedas. E se você quiser filtrar alguma página ou aplicativo específico, você pode clicar neste botão de filtro. E você também pode adicionar tags. Digamos que você queira criar um aplicativo de mensagens de texto de saúde semelhante. Você pode digitar aqui um rastreamento de cabeça. Você também pode selecionar uma cor. E ele recomendará que todos os sites que tenham essa cor são cor rosa. E você pode ver a opção, temos opções como figma ou uma base di escapou em carne e nossa perna. E a partir do download, você pode baixar para nossos diferentes softwares como Figma ou uma cidade grande para uma loja que conheço perna. E você também pode fazer upload de seu próprio design daqui. Temos que primeiro nos inscrever para isso. Certo, então o próximo site é Behance. Portanto, é meio semelhante. A partir daqui, do campo criativo, você terá todas as opções. Ou se você quiser limpar para você qual idioma você está lendo, encomendando, design de pôster, então este site, ele o ajudará muito. Você pode ver, Somos boas opções como diretor de arte, branding, ilustração e alerta? E também. Portanto, estamos interessados em ondas de interface do usuário já projetadas. Então, conseguindo essas coisas. Você também pode clicar nesta página da Web para ver mais detalhes. Como se estivesse construindo obesidade. Você pode seguir o Criador. Você pode ver como a descrição para isso. Se você quiser filtrar algo, você também pode fazer isso. Digamos que se você quiser procurar apenas por Figma, você também pode escolhê-lo de mim ou você pode substituir aqui. Então, ele mostrará apenas os arquivos Figma. Como este é um arquivo Figma. Você pode clicar nele e ver toda a descrição desse aplicativo. Como Dribble, você também pode escolher uma cor. E isso mostrará todo o site que tem essa cor. Você também pode filtrar por sua localização como legal e tudo mais. E você pode ver na barra lateral que temos opções como um grupo, imagens de projeto, protótipos, pessoas e moodboards. Digamos que você queira fotografar, digamos que você queira ver alguns produtos, você pode clicar nele. E isso mostrará todos os protótipos. E vou permitir que você também possa fazer upload sua própria página ou aplicativo neste site, mas você precisa se inscrever para isso. O terceiro é a Groenlândia. A partir deste site você terá tudo como você pode ver as categorias como e-commerce realizadas e eu vou deixar que você também possa clicar em Mostrar Mais para ver auditoria, como fitness, notação musical e tudo mais. Portanto, não é para o aplicativo. Você pode ver São nós temos opções como landing pages e fluxos de usuários. Se nós, se eu clicar nisso, redirecionarei para a seção da página da Web. Então você pode ver que recebemos todas essas páginas da Web daqui. Você também pode filtrar daqui. Como que tipo de site você quer? Digamos que você queira construir um site para e-commerce, você pode selecionar essa opção chamada e-commerce também é um site muito bom para se inspirar. O quarto é o lado c. Este também é o mesmo site como Dribble Behance. Então, se você quiser pesquisar algo, você pode pesquisá-lo a partir daqui. E você também pode filtrar o nó daqui. Tipo, que tipo de cor você quer? Tipo, digamos que você queira um site no currículo. E podemos escolher cinza. E isso mostrará o quão desequilibrado tem uma unidade curricular. E você também pode filtrar alguns como se quiser criar um blog, também pode escolher um blog, e-commerce e alerta. Então, há algumas menções honrosas, como escorregões, chama-se horas por semana. Três W's. Então, neste capítulo, temos todo o nosso complexo vencedor assim. Três são eu acho que nossos modelos vencedores guerreiro. Você também pode enviar seu próprio áudio de web design. E neste menu de hambúrguer, você pode ver as janelas, os indicados e a coleção. Isso também é ótimo para observar, para se inspirar. Então, o próximo site honroso é inspirado na visão. Este absurdo, especialmente a vontade de inspiração. A partir daqui, você também pode filtrar como Behance jubilante, como tipos de título, como que tipo de tipos você quer. Digamos que você queira criar um site para agência e consultoria, você pode escolher essa opção. Você também pode ver todas as opções daqui. Também recebemos a opção chamada assunto. A partir daqui, podemos escolher assuntos diferentes. Também a plataforma e também o corpo de surto. Na barra de pesquisa, você pode pesquisar um site específico, como e-commerce. E a última menção honrosa precisa de uma página. Digamos que você seja um cliente. Certamente. Temos que criar algo como aplicativo de uma página. E você pode dar uma olhada neste site chamado de baixa de uma página. Então, neste site, só temos uma única página, página da web como esta. Você pode ver, isso parece muito legal. Guerreiro. Saiba que você é o aplicativo de página única. Eu também conheci de um dos meus amigos. Ele também é designer de UX. Então ele me contou sobre o YouTube é um aplicativo de página única. Então, esses são todos os sites para se inspirar. Digamos que você queria construir algo, mas você não está tendo ideia de como construí-lo. Você pode dar uma olhada em todo esse site para se inspirar. Então isso é um retrato. E eu farei isso no próximo. 46. mais de 50+ de recursos para criar interfaces de usuários incríveis: Bem-vindo de volta. Neste vídeo, vou lhe dizer recursos gratuitos para usar em seus projetos. Este artigo está disponível no No.2. Este site é realmente útil se você for um programador ou desenvolvedor web. Mas ele faria coisas como nossas coisas alfabetizadas em tecnologia, então este site, ajudará muito. Então, neste site, comprei o artigo. Neste artigo, obtemos mais de 50 ferramentas ou recursos gratuitos para usar em nossos projetos, como fotos e vídeos, paleta de eletricistas, topografia e efeito de emissão, iconografia em formas de padrão e mutilação. Então você pode ver, eu uso o site DOE chamado pixels para meus projetos. Portanto, é um site muito útil usar vídeos e fotos stock. Também uso muito este site para fazer meus vídeos. E você pode ver outras opções como carvão e para o teatro e tudo mais. Você pode dar uma olhada em outros sites daqui também. E se você quiser, mas se você tiver uma página como uma ou uma imagem de pessoa e quiser remover o plano de fundo dela. Você pode usar este site chamado na tela e também este cartão absurdo, grande rodada remota. Às vezes, os clientes fornecem imagens mas só precisamos da imagem dessa pessoa. Eu uso esse absurdo Remove BG. Então, isso me ajuda muito. Então esse absurdo também é muito legal. Este é o site baseado em EHR. Então, o site que ele faz é que ele criará rostos de pessoas aleatórias. Então, se você quiser usar, digamos que você esteja criando um aplicativo de mídia social. E esse aplicativo, você tem uma seção de história. E você quer colocar imagens de pessoas, então você pode usar esse absurdo chamado género. Então deixe-me dizer uma coisa. Essas não são as pessoas reais. Essas imagens são criadas pela IA. Portanto, é muito útil usar essas imagens. O próximo recurso gratuito, é ilustração. Então, eu não uso o lote de ilustração. Eu só usei ilustração no meu, penso, deixe-me mostrar meu projeto. Então, eu só uso a ilustração neste site. Você pode ver a ilustração aqui na segunda página e então nesta terceira página. Então, para isso, você pode olhar para este cartão absurdo, papel aberto, ilustração esmagada da ilustração são livres para usá-lo. Obteremos opções como SVG, SVG e PNG. Você pode baixar nesse formato. E também a nutrição de controle. Eu usei essas imagens deste site, dessa ilustração de controle. Também temos outros sites como ouch e o gerado automaticamente. Então, o próximo livre versus diz é pellets, esses. Então, se você quiser criar um site e seu cliente não produzir nenhuma paleta de cores. Então você pode acessar este site para escolher uma cor. Você pode criar sua própria cor. E eu gosto de um site chamado Color Hunt, então eu contei nosso site, que você também possa ir para ele. Eu uso exatamente a mesma paleta de cores em nosso projeto de aplicativo de mídia social. Você pode ver todos os sites, como espaço de cores, aplicativo válido, colorível e saída, e no dia seguinte. Então essa tomografia, digamos que seu cliente diga, quero apenas a fonte específica. Então você pode ir para este lado e procurar por essa fonte. E você pode baixá-lo e usá-lo em seus projetos. E podemos obter outras opções como Fonda, Arianna, be fonts, fonts girl, desfrutando, escala de tempo e como LED. Então, em seguida, recursos para usos, iconografia. Então, a partir desses sites, você pode baixar um ícone específico para seu projeto. Digamos que você esteja criando um aplicativo de mídia social. Então você pode acessar este site e baixar todos os ícones daqui. E todos esses ícones são gratuitos para usar, então você pode usá-los em seu projeto. Então, temos opções como estola de ícones, CSS, ícone, ícone, gerador de tradução, ícone cansado. Você pode ver aqui adoções. Portanto, os próximos recursos são patentes em navios. Então, você está se aplicando a 12 como algum botão específico em sua página da Web ou aplicativo, você pode acessar esses sites como CSS baton, gateway de interrupção. Ou você pode criar um personalizável. Você pode ver que eu usei ondas como esta página da Web e BS1. Mas eu criei isso usando Figma. Mas se você quiser criar um cliente, então você pode acessar este site chamado guetos. E se você quiser criar um ele personalizado, então você também pode usar este site chamado vol Mecca. Ok, este é um site muito legal chamado linhas vermelhas. Você pode limpar as patentes muito legais deste site. Portanto, esses são todos recursos gratuitos para usar. Então eu lhe darei o link deste site nos recursos, você pode conferir a partir daí. Portanto, esses são todos os recursos gratuitos para usar para seus projetos. Então é isso para o vídeo de hoje, e verei vocês no próximo.