Figma para interface de usuário e experiência do usuário UIUX

1. Introdução à Figma: Olá a todos e bem-vindos à nossa aula de Figma for Learning UI UX Se você planeja aprender a interface e a experiência do usuário desde o início , está no lugar certo. Porque abordaremos nesta aula do nível básico ao avançado do uso desse aplicativo específico. Esta é uma aula de nível iniciante. Se você não tem experiência anterior, basta participar desta aula e aprenderemos juntos. Primeiro, vamos dar uma olhada em tudo o que você aprenderá nesta aula. Primeiro, vou contar a vocês a introdução, como o que esse aplicativo Figma faz e como ele é melhor do que qualquer outro aplicativo que faz design de UI UX Depois disso, vou falar para vocês sobre o espaço de trabalho e também sobre a interface, ok? Em qualquer aplicativo ou software, se você estiver familiarizado com o espaço de trabalho na interface, será muito fácil trabalharmos nesse mesmo espaço seguir, falarei sobre todas as ferramentas básicas do Figma, tudo o que você pode usar Ok, vou contar a vocês como você pode mover seu objeto ou como criar uma moldura, selecionar uma moldura específica e aumentá-la de acordo com você. E também mostra como você pode importar imagens, vídeos e diferentes tipos de formas. Ok, depois disso, eu vou dizer a vocês como vocês podem usar páginas. Às vezes, precisamos criar mais de duas páginas, nesse caso, como você gerenciará as páginas e todas as funcionalidades relacionadas às páginas Depois disso, contarei que você aprenderá a criar protótipos no Figma, que o ajudará a criar seu próprio aplicativo de design móvel ou sua aplicativo de design móvel ou sua Ok, então você pode criar sua própria página da web ou seu aplicativo móvel para conectar tudo isso e obter um bom resultado. Depois disso, falarei sobre algumas das opções de flexibilização que você pode usar E algumas das animações do protótipo forma como você pode fazer animação na prototipagem Depois disso, vou te repreender, vou te dizer como você pode importar imagens e usá-las em seu design de UI UX, ok? Você pode cortar esses e muitos outros. Ok, então a próxima aula é sobre isso. Só sobre mascarar, sobre como você pode recortar imagens de todas as pontas e maneiras diferentes de fazer isso, ok? Também falarei sobre diferentes plug-ins de imagem, todos eles podem ser usados. Ok. Depois disso, há uma opção chamada componente e efeitos. Vou contar para vocês como usar o componente e também como você pode colocar diferentes tipos de efeitos no seu arquivo Figma Ok, por fim, vou dizer a vocês como exportar suas imagens, que você importou em seu arquivo Então, vou contar para vocês como você pode exportar suas imagens do aplicativo Figma Ok, depois de concluir esta aula, você poderá criar seu próprio aplicativo móvel e página da web. E você também terá sua própria cor, baleta e gradientes Você poderá adquirir um bom conhecimento de coloração em web design e também fazer uma boa prototipagem, pois alcançará um nível avançado de uso deste aplicativo Depois disso, você também poderá selecionar imagens para criar botões e também criar a fonte da página da web. Basicamente, você poderá criar uma página da web em resumo, pois esse projeto é como uma classe baseada em projetos. Durante o aprendizado, você terá projetos de classe. Então, o que você aprende, você poderá participar da aula. Você pode praticar enquanto está aprendendo. Você terá recursos de apoio nesta aula. Será mais fácil para você aprender durante o aprendizado. Se você enfrentar algum problema ou tiver alguma dúvida, sinta-se à vontade para me perguntar. Estou sempre à sua disposição para ajudá-lo. Vamos começar a aprender Figma para IU juntos. 2. O que é o Figma: Olá a todos e bem-vindos ao tutorial sobre Figma Aqui aprenderemos o que é Figma. E o primeiro capítulo será Introdução ao Figma, onde vou contar a vocês sobre o que é basicamente esse aplicativo, como podemos basicamente usar esse software e muitas outras coisas aqui Ok, então aqui, se você é iniciante e tentando aprender design de UI UX pela primeira vez, este é o melhor curso para você aprender isso Depois disso, vou contar a vocês como esse Figma realmente funciona Então, a Fima revolucionou o processo de design. Oferecendo uma plataforma colaborativa baseada em nuvem com recursos poderosos que atendem tanto a iniciantes quanto a Se você é um aspirante a designer de UI UX, gerente de produto ou entusiasta criativo, este tutorial o capacitará com as habilidades para navegar pelo mundo Figma Não vamos perder tempo e vamos começar com esta aula e com o primeiro capítulo sobre Figma aqui Como você pode ver, eu pesquisei Figma no micro, este aplicativo aqui Esse é o primeiro, e esse é o arquivo em que vamos trabalhar. Esse arquivo realmente funciona em ambos. Se você estiver usando um produto Apple ou até mesmo o Windows, você também pode usar esse arquivo lá. Em nosso smartphone também, podemos usar esse aplicativo específico para mim. Primeiro, vou até este. Ok, uma vez que vocês vêm aqui, vocês podem ver a interface aqui. Ok, aqui temos dois tipos de coisas, uma figma e outra com geléia de figma Aqui, tudo o que você pode fazer aqui, você pode fazer on-line em um quadro, obter as táticas de planejamento estratégico. Você também pode criar diferentes tipos de diagramas. Aqui. Você também pode fazer protótipos de design de trabalhos de desenvolvimento. Ok, aqui, se eu quiser baixar esse aplicativo específico, posso baixá-lo aqui. Mas primeiro, vamos ver o que podemos conseguir aqui. partir daqui, posso ver as visões gerais, avaliações dos clientes e também diferentes tipos de recursos relacionados a essa ferramenta específica de design de UI UX Ok, isso é semelhante ao XD. Já faz algum tempo que uso esse aplicativo de feedback . O que posso diferenciar é essa ferramenta é bastante fácil Com esse aplicativo ou com essa ferramenta, geralmente podemos trabalhar um pouco melhor à medida que ele recebe novas atualizações. Eles têm atualizações muito boas a partir daqui. Ok, aqui eu posso ver diferentes tipos de modelos, plug-ins e toda a biblioteca de recursos de práticas. Se eu quiser ajuda com alguma coisa, posso ir ao centro de saúde e pedir ajuda. Como eu quiser, posso identificar meu problema. E aqui estão os recursos da comunidade. Ok, aqui também tenho muitos criadores de comunidades de onde posso consultar seus trabalhos e aprender diferentes tipos de coisas. Como neste design de UU, precisamos basicamente entender como queremos projetar nosso Se indicarmos essas pessoas e vermos seus trabalhos, basicamente teremos uma ideia melhor sobre o design de UU E aqui temos diferentes grupos de usuários e também alguns programas educacionais sobre como se acostumar com esse aplicativo específico. Também posso ver diferentes tipos de eventos e transmissões ao vivo conduzidos pela Figma Como eu já entrei, existe uma opção chamada Logout Se eu quiser sair, posso sair daqui. Ok, se eu for até aqui, eles terão um resumo de como é isso. Muitas pessoas podem trabalhar neste aplicativo ou em uma pasta juntas. Sempre podemos trabalhar na versão mais recente. E também podemos salvar nosso trabalho nas bibliotecas da equipe do Cloud, o que explicarei para vocês mais tarde e também em detalhes. Ok, aqui eu tenho tudo isso. Você pode ver quais marcas são suas parceiras. Ok, aqui está a página inteira. E deixe-me baixar o Figma aqui. Ok, então vou clicar em baixar. E uma vez que eu clico em baixar, esse Figma tem basicamente duas versões, ok Ele tem uma versão gratuita e uma versão paga. Se você está começando com design gráfico ou está começando com a interface do usuário pela primeira vez, sugiro que comece com a versão gratuita e basicamente, depois, lentamente, vocês possam ir para a versão paga. Porque é uma versão paga. Eles têm alguns recursos premium que são bastante úteis quando você trabalha regularmente neste aplicativo. Mas se você estiver usando um tempo ou para um projeto específico, um ou dois projetos, e depois disso, você não vai usar isso para praticar. E todas as versões gratuitas também são boas porque elas também têm muitos recursos diferentes. Como você pode ver aqui, se eu quiser baixá-lo em um desktop, tenho a opção para um sistema operacional e também para Windows. Se eu quiser baixá-lo no meu iPhone ou iPad, posso clicar aqui, e aqui está a opção de iPad aqui. Eu tenho para Android Se eu quiser usar diferentes tipos de telefones, basicamente o instalador de telefone é como se ele me desse diferentes tipos de telefones que eu posso usar no Figma Então, podemos baixar este também para sistema operacional e para Windows é esse. O que vou fazer é que tenho um laptop Windows, que estou usando agora. Vou clicar aqui, Dest for Windows. Depois de clicar aqui, você pode ver que ele está sendo baixado no topo aqui. Pode levar algum tempo, que é cerca de 100 B, e levarei cerca de um minuto para fazer o download. Então, aqui você pode ver mais sobre isso, como se eu quisesse ver todos esses recursos, se eu quiser comparar com outros aplicativos. Ok, então esses são alguns aplicativos competitivos que são o Sketch, como eu já disse, o design Obex D e Framer Estúdio Miro Invasion. Então, esses são alguns dos aplicativos que fazem a mesma coisa, que são apenas UI, aplicativo de designer de UX. Então, eu posso usá-los daqui ou compará-los e ver qual é a diferença entre esses aplicativos e essa figma se você quiser comparar Ok, se eu quiser explorar isso, o que eu posso fazer, eu posso ver daqui. E se eu quiser usar a versão paga, vamos ver qual é o preço. Ok, aqui. Se eu vier aqui, vocês podem ver se estou usando a versão gratuita, receberei três arquivos Figma e três Fija, quais posso colaborar com outras pessoas E terei arquivos pessoais ilimitados, colaboradores ilimitados, plug-ins, modelos e também posso baixar o aplicativo móvel Começa a partir de $12 por mês se eu estiver usando o profissional Ok, aqui você obterá arquivos Figma ilimitados, histórico de versões ilimitado, biblioteca de equipes, prototipagem avançada e modo Ve, que está Posso baixá-lo aqui neste caso esteja escolhendo o profissional. Também posso obter algum desconto se puder comprovar que sou estudante ou educador. Talvez, se você for estudante , possa simplesmente enviar sua carteira de identidade ou qualquer documento de sua faculdade, universidade ou escola depois disso Se eu vier aqui, $45 por mês são da organização Figma Está bem? Então, aqui você tem essas bibliotecas, gerenciamento centralizado de arquivos, login único e tudo isso, ok? E esse é o premium, que é de $75 por editor Por mês, você receberá um texto dedicado, sistemas avançados de design, acesso de convidados, restrições de acesso à rede e links públicos expirados Você vai ter tudo isso aqui, isso é sobre, Figma é o começo aqui Você poderá obter a mesma coisa. reprodutor de música, se eu estiver usando o gratuito do Figma Professional, custa $3 Fija Organization, custa cinco, e a empresa custa $5 por editor, por mês, de acordo com Vocês podem ver qual deles será bom para vocês, é benéfico para vocês. Eu baixei este, agora vou para o meu arquivo, vou tentar instalar este aplicativo específico no meu PC. Depois de instalar esse aplicativo específico, ele me redirecionou diretamente para esse aplicativo Ok, então aqui eu vou para a casa, e como você pode ver aqui, eu tenho todo esse trabalho, ok? Vou mostrar a vocês tudo isso, o que fiz aqui. Vocês podem ver que eu fiz tudo isso. Eu vou mostrar a vocês como fazer aqui. A partir daqui. Como você pode ver, essa é a campainha de notificação. Posso clicar aqui e ver se tenho alguma notificação aqui. Esse é o arquivo recente. Em que você trabalhou. Ele será salvo aqui aqui. A equipe é muito importante nesta Figma. Está bem? Então, basicamente, suponha que eu esteja fazendo uma aula específica ou um projeto específico, ok? Nesse sentido, posso pegar pessoas diferentes ou incluir muitas delas, e podemos trabalhar em um único arquivo, tantos de nós juntos, ok? Então, essa é uma das melhores coisas, o que é muito útil se eu conseguir algo como se levasse cerca 20 a 30 horas e eu quisesse terminar esse trabalho em três dias, quatro dias. Talvez eu possa levar duas ou três pessoas comigo e juntos possamos trabalhar lá, compartilhar nossas ideias, nos acostumar com esse aplicativo específico e terminar nosso trabalho. Então aqui você pode ver se eu tenho alguma equipe ou não. E aqui está o rascunho em que todo o meu trabalho está sendo salvo. Ok. E aqui está o aplicativo recente. Aqui você pode obter, você foi verificado para a educação da Fema E aqui você pode ver o que está pronto para atualizar uma equipe gratuitamente. Ok. Então, quando me inscrevi para o Fema Education One Então, agora eu posso aqui, pois já criei essas equipes, como você pode ver, eu tenho equipes diferentes aqui. Depois de abrir isso, você pode ver que eu já fiz alguns projetos de equipe. Então, deixe-me deletar isso daqui. Deixe-me deletar, vou escrever BC. É assim que você pode excluir uma equipe. Está bem? E da mesma forma, vou deletar este também. Eu chamei este de Robert. Vou deletar a equipe aqui novamente. Este também vou deletar apenas para mostrar a vocês como podemos realmente criar uma equipe. Esse é o processo de como podemos realmente excluir uma equipe. Deixe-me deletar. Sim, essa equipe também está sendo excluída. Agora, a partir daqui, eu posso realmente criar uma equipe gratuita. A partir daqui. Quando eu quiser criar uma equipe primeiro, preciso vir aqui, clicar em Criar uma equipe e vou dar um nome a ela. Suponha que eu o chame de Mark. Ok, e eu vou clicar em Criar equipe. Aqui você pode ver outra página que apareceu aqui. Aqui você pode adicionar seus colaboradores e o que eu posso colocar no e-mail deles aqui nessas caixas Como eu já disse, nesta versão só posso adicionar três deles na minha equipe, se eu estiver usando a outra versão, que é a paga , posso adicionar mais. Não vou colocar nenhum e-mail aqui para isso. Vou guardar essa parte por enquanto. Aqui vocês podem ver que eu tenho essa opção concluída e vou clicar nela. Concordo com o Figs Term Oil Service e clicarei na opção de atualização completa Aqui vocês podem ver que a equipe está sendo criada. Este é o projeto Team que eu tenho aqui. Na verdade, posso vê-lo assim em um formato mínimo ou também em formato de grade. Vou cancelar esse. Agora, aqui você pode ver na minha página inicial que eu tenho uma equipe específica. Aqui está outra opção. Se eu quiser criar um novo projeto, posso adicionar um novo projeto ou também posso consolá-lo. Ok, eu posso simplesmente consolá-lo assim. Ok, então, se eu vier aqui e agora, mostrarei a vocês como será o espaço de trabalho se eu clicar neste aqui Você pode ver que este é o espaço principal onde vocês trabalharão na Figma daqui em cima de vocês Se eu clicar duas vezes neste aqui, você pode realmente alterar ou renomear esse arquivo de projeto específico Ok, deixe-me nomear este como projeto um. E eu vou clicar em Enter no meu teclado aqui, você pode ver que este foi salvo ou renomeado como Projeto Um Aqui vocês podem ver que eu tenho o menu principal. partir daqui, tenho a opção de arquivo e muitas coisas que explicarei vocês nas fases posteriores da aula. Essa é a ferramenta de seleção, essa é a moldura, essa é a ferramenta de forma, essa é a ferramenta de criação que inclui pecado e a ferramenta lápis. Aqui, eu tenho a ferramenta de texto e aqui os recursos, a ferramenta manual. Se eu quiser adicionar algum comentário, posso adicionar um comentário usando esta caixa. Tudo isso eu vou contar a vocês nas fases posteriores da aula. Tudo aqui, cada ferramenta e seus usos. Vou dizer a vocês que este é o painel de controle de onde posso escolher o design e também exportar minha mídia. Depois de trabalhar, tenho alguns dos protótipos que mostrarei a vocês como isso é feito vou dizer a vocês como fazer Depois disso, vou dizer a vocês como fazer prototipagem Além disso, você pode ver que tenho estilos locais, pois já contei como podemos exportar. Temos formatos diferentes, PG, JPG, SVG e PDF Eu também posso ver isso. Aqui eu tenho a opção de pré-visualização. Essa é a principal coisa, o que veremos, que é a camada. Ok, então, enquanto trabalhamos no Figma, devemos usar camadas e a colocação é a principal coisa Então, vou falar para vocês sobre a colocação, como podemos adicionar páginas diferentes a partir daqui. Pegue duas ou três páginas e descubra como criar uma moldura. Então, tudo isso vamos aprender no próximo tutorial. Então, espero que vocês tenham entendido como podemos realmente baixar e instalar o aplicativo Figma E se você também não quiser fazer o download, também pode trabalhar no navegador. Aqui, como mostrei como podemos adicionar, essa é a opção Ativos. Então, vou mostrar a vocês o uso disso também. Espero ver todos vocês no próximo tutorial sobre Figma. Cuide-se. E adeus a todos 3. Espaço de trabalho e interface: Olá a todos, e me dêem as boas-vindas a mais um tutorial sobre Figma Na última aula, aprendemos sobre o que é Figma. E eu também mostrei a vocês o espaço de trabalho de onde vocês podem trabalhar Na última aula, dei a vocês um resumo de como é, mas nesta aula vou mostrar a área de trabalho na interface em detalhes que vocês podem entender depois de fazer o trabalho, como ele realmente ficará ou como isso realmente funciona Depois de entender o espaço de trabalho na interface, será fácil para vocês trabalharem nesse aplicativo específico Não vamos perder tempo aqui e vamos começar com essa aula em particular aqui. Como vocês podem ver na página inicial do meu aplicativo Figma, expliquei tudo isso para vocês O que vou fazer é fazer um projeto Figma completo para mostrar a vocês como realmente parece e o que tudo pode ser feito lá Para isso, vou apenas até a comunidade, a comunidade Figma, pois já disse tudo o que você pode fazer Deixe-me mostrar a vocês como isso realmente funciona aqui na comunidade Figma Você terá muitas coisas aqui, como equipe de aspiração canta sistemas de design. Se você quiser ver qualquer desenvolvimento de página da web ou desenvolvimento de página móvel, você pode vê-lo aqui. Eles também mostraram que estamos enquadrando. A partir daqui, você pode baixar ícones diferentes que são gratuitos a partir daqui. Ok, para usá-lo em seu trabalho. Há muitas coisas para aprender com essa comunidade do Figma. Como todos os alunos avançados ou pessoas avançadas, aqueles que trabalham usando o Figma, às vezes carregam seus trabalhos aqui para mostrar como esse aplicativo é útil Deixe-me descer e ver se eu tenho arquivos diferentes aqui, vou até este e vamos ver o que eu faço, tenho aqui. A partir daqui, o que vou fazer, vou descer até aqui, tentar ver quais são todos os componentes que eu tenho. Ok, deixe-me usar um aplicativo simples para mostrar a vocês aqui. OK. Vou abrir este no meu aplicativo. Como você pode ver, isso é carregado aqui. Este é basicamente um aplicativo móvel para agendamento de consultas médicas. OK. Vamos ver quais são todas as opções que eu tenho aqui. Ok, vou abrir este no Figma. Vou usar uma das minhas contas aqui. Se eu quiser editar o arquivo, eu posso editar, mas eu não estaria editando apenas para mostrar a vocês a interface de como ele realmente fica quando este é realmente muito grande. Ok, com minha ferramenta manual, vou mover esta. Deixe-me ir aqui no início e vou ampliar aqui. Ok, então espero que vocês possam ver agora como ele realmente conseguiu fazer isso passo a passo. Como aqui, você pode ver que esta é a primeira tela e, ao clicar aqui, você será redirecionado para esta página aqui Essa opção pode ter outra coisa aqui. Você tem as etapas, se clicar em vamos começar e muito mais. Ok, como eu falei para vocês sobre o básico de tudo isso, quando você terminar o trabalho ou quando estiver fazendo o trabalho, é assim que ele realmente ficará Como vocês já podem ver aqui. É assim que vai ficar, ok, daqui em diante. Se eu quiser pegar alguma coisa, suponha que eu queira pegar essa página específica aqui e me mudar. Você pode ver aqui, este será selecionado automaticamente porque está sob esse quadro específico como. E se eu tiver selecionado outro quadro, se eu diminuir o zoom, poderei ver qual deles eu selecionei. É assim que realmente funciona. Seria melhor se eu mostrasse a vocês um projeto no qual eu possa encaixar todas essas coisas em uma na minha tela. Porque esse projeto é muito vasto, como você pode ver. Mas é um projeto muito bom que é feito aqui e um projeto total. O que eu vou fazer é simplesmente movê-lo daqui, ok? Para mostrar a vocês. Caso contrário, posso deixar isso aqui embaixo. Como você pode ver, você pode alterar o posicionamento e ele também mostrará os alinhamentos, ok? É assim que você pode se mover. Tudo depende de você, ok? Por exemplo, é adequado para você. Na verdade, você pode alinhá-lo lado a lado ou na vertical ou também na horizontal Depende totalmente do Reino Unido. Essas são as camadas. Como vocês podem ver, eles são chamados de quadros, que eu posso criar usando este botão aqui e as teclas de atalho Vou contar a vocês sobre tudo isso, como podemos criar uma moldura e como podemos colocar seu trabalho nisso, como podemos realmente configurá-la. Vou contar para vocês agora. Deixe-me ir para outro arquivo da comunidade Figma, onde poderei mostrar a vocês, uma vez que vocês fizeram um projeto em uma camada, como isso basicamente parece aqui Encontrei um arquivo de design, que vou escolher para mostrar a vocês em resumo do que tudo pode ser feito aqui. Vou abrir este no Pigma, como o último, vou continuar com meu e-mail aqui Vocês podem ver que esta é a página, é assim que vocês podem começar a criar sua página da web, basicamente a partir daqui. Como vocês já sabem, podem começar a criar sua página. Como você pode ver, por padrão, ela virá na página número cinco, logo após a primeira página. O que vou fazer é não criar nenhuma página, mas para mostrar a vocês como podemos realmente criar uma página, clicarei aqui. Esta página. Como você pode ver, eu já disse que essas são apenas camadas diferentes. Agora estou na minha segunda página. Esta é a terceira página, e esta é minha quarta página aqui. Aquele que criou este quadro, ele nomeou esse quadro específico para que não confunda ou páginas específicas de acordo. Essas são camadas diferentes em cada camada. Eles têm opções diferentes aqui. Suponha que eu queira selecionar essa coisa específica dentro. Deixe-me ampliar usando meu controle e meu mouse. Estou apenas arrastando para dentro com minha ferramenta manual. Eu só vou vir aqui. Ok, para dar a vocês uma visão melhor da tela, suponha que eu tenha selecionado esse quadro em particular. Agora eu quero mover esse quadro para a direita aqui. Você pode ver que eu tenho a opção aqui, O X, Y com abraço Está bem? O ângulo de rotação, as curvas, tudo o que posso mudar a partir daqui, e também as restrições de layout automático Eu tenho a opção de grade de camadas, de onde posso escolher diferentes estilos de grade e também posso navegar nas bibliotecas de navegação. Depois de me conectar ao meu Wi-Fi ou à minha conexão com a Internet, também posso acessá-los, que estão disponíveis gratuitamente. Caso contrário, o que eu posso fazer é também criar meu próprio estilo de grade a partir daqui. Como você pode ver, se eu quiser excluir, basta clicar neste. Eu também tenho a camada, que tipo de camada eu quero aqui? Eu tenho uma camada diferente. Como você pode ver, isso está apenas me dando uma prévia. Tudo o que tenho, suponha que eu tenha duas ou três camadas aqui. Depois de colocar uma camada acima da outra, como eu quero que fique, mostrarei tudo isso a vocês. Bem, eu também posso selecionar se o preenchimento significa a cor. Está bem? Suponha que eu tenha selecionado uma cor vermelha, ela me dará esse tipo de cor a partir daqui. Ok, vou considerar isso apenas como branco. Eu não quero estragar isso a partir daqui. Eu posso mudar a opacidade. Se eu pegar 50 e clicar em, ok, eu posso mudar a opacidade E eu também posso diminuí-lo se eu quiser diminuí-lo ainda mais. Se eu quiser ver isso e ver a diferença aqui, vocês podem ver a diferença aqui. Suponha que eu coloque por texto aqui ou uma caixa específica, ou uma cor específica nela. Se eu quiser alterar o traçado desse texto em particular, tudo o que posso fazer mudar a cor do traçado a partir daqui. Também posso aumentar o traçado, exemplo, se eu quiser aumentar o traçado de dentro, de fora ou do centro, também posso fazer isso daqui. Eu também tenho a opção de efeitos. A partir daqui, eu tenho efeitos diferentes. Sombra projetada, sombra interna, de camada, desfoque de fundo Aqui você pode ver um lado da camada desfocada, parece aquela sombra interna e essa é a sombra projetada Depois de trabalhar, também posso exportar, como já falei para vocês na última aula, aqui está a opção de alinhamentos. Eu posso fazer isso. Deixe-me mostrar a vocês sobre esse X e Y. Suponha que eu aumente , está apenas indo para a direita Da mesma forma, se eu quiser movê-lo de cabeça para baixo, também posso fazer isso daqui Além disso, como você pode ver, posso mudar os cantos a partir daqui. Além disso, se eu quiser girar isso, posso girá-lo da maneira que eu Eu posso fazer tudo isso. Vou apenas colocá-lo como zero. Sim. Depois de fazermos esse trabalho, muitas outras caixas de texto farão com que o bebê coloque mais texto ou que as molduras criem. Poderemos fazer isso aqui, vocês também poderão obter uma prévia aqui. Como você pode ver, depois de cada opção, eu também tenho a tecla de atalho para que eu obtenha a prévia se eu clicar no botão para cima da página e também no espaço Ao mesmo tempo, vou ver a prévia. Somente para o meu teclado, não preciso usar arco, mas acho que usar arco é bastante confortável. Eu uso isso. Também posso compartilhar meu trabalho específico. Na verdade, posso convidá-los usando qualquer e-mail para quem eu quiser enviar Eu também posso selecionar isso. Eles podem editar meu trabalho específico ou só podem ver? Ok, depois disso, se eu copiar o link e puder compartilhá-lo em qualquer mídia usando o e-mail ou também usando qualquer outra plataforma de mídia social como no Whatsapp Messenger, posso simplesmente fornecer o link copiando e colando na página deles aqui Essa é a camada. Como você pode ver, depois de criar uma moldura, eu tenho toda essa opção dentro da qual posso colocar diferentes componentes nela. Como tenho fotos com moldura, também tenho essa moldura. Você pode ver, espero que vocês tenham entendido o básico para o que uma camada está sendo usada. Além disso, analisaremos aqui a opção de ativos aqui. Se eu vier, posso realmente procurar diferentes tipos de ativos, ou posso simplesmente abrir a biblioteca da equipe, ou posso ver os componentes locais. O que todos estão sendo usados aqui neste arquivo específico ou neste projeto. Eu posso simplesmente vê-los daqui. Como você pode ver, este trabalho em particular projeto muito bem feito e bem feito Eu posso ver isso. Se eu quiser modificar alguma coisa daqui, posso modificá-las da maneira que eu quiser, ok? Como estou selecionando aqui, vocês também podem ver na minha tela que um ícone específico está sendo selecionado. Ok, se eu clicar aqui, vocês podem ver que tudo isso está sendo selecionado. É assim que, na verdade, podemos tentar criar ou apenas manter uma camada e um controle de todos os ícones que usei neste projeto. E aqui eu novamente tenho os componentes. Ok, esta é a terceira página. Esta é a última página aqui. Está bem? Aqui, se eu quiser mudar alguma coisa, posso selecionar essa. Eu posso selecioná-lo, basta me redirecionar para essa página. Eu não quero isso. Vou deletar isso. Vou fechar este aqui. Se eu quiser selecionar qualquer coisa, posso selecionar curtir no meu botão. Se eu quiser excluir isso, posso excluir isso e desfazer isso novamente. disso, também tenho essas opções aqui , como vocês podem ver. Se eu quiser editar qualquer objeto, se eu quiser criar um componente e também se eu quiser usar essa camada específica como uma máscara aqui. Se eu quiser criar um link, posso clicar nessa opção e tentar criar um link como este. Ok, como eu já disse, no caso de qualquer texto, posso realmente alterar o tamanho do texto a partir daqui. Então, vou fechar este. Posso selecionar o texto realmente publicado ou posso modificar ou editar o texto de acordo com minha necessidade. Também cor de preenchimento, exportação de traçado de preenchimento. Essa é a opção de prototipagem. A partir dessa opção de prototipagem, posso ir até aqui e vou mostrar a vocês um resumo de como vocês podem Espero que vocês tenham entendido essa classe de espaço de trabalho e a interface Agora eu acredito que vocês estão familiarizados com esse aplicativo. Na próxima aula, aprenderemos sobre todas essas ferramentas básicas que tenho na minha barra de ferramentas Estaremos aprendendo sobre isso, todos os usos do que podemos fazer com essas ferramentas específicas. Este último vai ser interessante, eu acredito. E vocês também aprenderão sobre design de UI UX e, particularmente, sobre esse aplicativo, de um conhecimento muito básico esse aplicativo, de um conhecimento muito básico a um conhecimento avançado Depois de concluir este tutorial, vocês terão uma boa ideia sobre o design de UI UX. E também poderemos criar seu próprio design web e design de aplicativo móvel. Espero ver todos vocês no próximo tutorial. Cuide de todos e adeus. 4. Ferramentas básicas no Figma: Olá a todos e bem-vindos a outro tutorial no Figma Neste capítulo, estamos no capítulo número três e aprendemos sobre as ferramentas básicas do Figma Estaremos aprendendo sobre a ferramenta move la scale. Também sobre a ferramenta de formas, que mostra como você pode criar diferentes formas de erro de digitação , incluindo um retângulo Como podemos brincar com todas essas formas e modificá-las de acordo com o texto. Como podemos modificar um texto, criar um texto e colocá-lo dentro do seu quadro. Também mostrei a vocês como colocar camadas ou renomear seus quadros e colocar seu trabalho lá sobre fatiar e adicionar um comando e também sobre os recursos, plug-ins e plug-ins Então, não vamos perder tempo e vamos começar com essa aula específica sobre Figma Como vocês podem ver aqui, eu tenho um espaço de trabalho vazio com esse espaço de trabalho vazio O que vou fazer agora é explicar a vocês sobre todas essas ferramentas. Primeiro, vou usar essa ferramenta de moldura com minha moldura dois, vou apenas criar uma moldura. Ok, suponha que eu não queira criar nenhuma moldura do meu tamanho. Eu tenho algum tamanho específico para fazer minha edição. Aqui você pode ver que eu tenho predefinições diferentes. OK. Aqui eu tenho uma predefinição para o meu desktop, que é o bankbook air Aqui também você pode ver o tamanho. Há outro site onde você pode encontrar diferentes tipos de tamanhos adequados para você ou seu dispositivo. Lá, você pode simplesmente colocar o nome do seu dispositivo e eles mostrarão o tamanho da tela específica. Na opção de telefone, eu tenho um Android grande e pequeno. Todas essas opções de iPhone, se eu tiver um tablet, eu tenho tudo isso. O iPad D 8.3, o Surface Pro Eight. Se estou criando algum aplicativo para relógio, também tenho esse tamanho de tela. Agora que eu já selecionei essa, vou criar uma moldura aqui. Depois de criar o quadro aqui, você pode ver no painel de controle, eu tenho todas as opções para modificar este. OK. Talvez eu escolha essa cor, como você pode ver. Vou selecionar este. Eu tenho essa opção de fazer tudo isso. Não, se eu quiser escurecê-lo, quero criar o normal Eu posso fazer as camadas a partir daqui e também posso alterá-las a partir daqui Se eu clicar aqui, você pode ver que é iluminado em 50%. Se eu não quiser ver isso, posso simplesmente clicar aqui neste botão de olho a partir daqui E eu também tenho esse botão de olho aqui. Ao lado disso, eu tenho o botão de registro. Agora, também não conseguirei mover isso usando minha ferramenta de seleção. Ou faça alguma alteração , se tudo estiver dentro dessa caixa específica. Mas depois de desbloquear isso, posso realmente mover esse quadro específico e posicioná-lo adequadamente. E a partir daqui eu também mostrarei a vocês que se eu quiser mover isso no eixo x ou no eixo y, eu posso fazer isso. Também posso selecionar isso se quiser tirá-la no modo retrato ou no modo paisagem. É assim que você cria uma moldura. Eu também tenho essa opção de traços. Se eu quiser alterar o traçado aqui, você pode ver que consigo alterar o traçado, alterar a cor do traçado. Se eu não quiser ver este, posso simplesmente clicar nele novamente. Essa. Se eu não quiser ver o traço. Isso de novo. Essa. Se eu quiser ver daqui, posso alterar a opacidade É assim que vai ficar. Se eu quiser que meu traço fique por dentro, como por fora, posso clicar aqui. Se eu quiser no centro, posso clicar aqui. Nessa opção, eu também tenho a opção de efeitos. Se eu quiser dar algum efeito de desfoque, sombra projetada, sombra interna, eu tenho tudo isso aqui. Está bem? Essa é a ferramenta de escalonamento e a tecla de atalho para isso é K. Se eu clicar nesta a partir daqui, posso simplesmente aumentar ou reduzir esse quadro específico Isso é bem simples e vou dizer a vocês, suponha que eu queira fazer outra moldura, ok? Vou fazer outra moldura a partir daqui. Como você pode ver, eu posso fazer a moldura do jeito que eu quiser, ok? Mas se eu estiver selecionando essa opção de moldura a partir daqui, e se eu clicar em Control Shift e depois tentar criar uma moldura, minha moldura será proporcional, ok? Então, eu posso criar um quadro proporcionalmente a partir daqui, se eu estiver tentando não criar proporcionalmente, então vocês podem ver que está acontecendo de outra Mas isso me dará um enquadramento proporcional aqui. É assim que você pode criar um quadro proporcional. Do meu controle de clique, além deslocar e segurar ou arrastar o mouse Vou deletar esse. Esse também. Pegue essa moldura aqui. Posso renomear o quadro a partir daqui clicando duas vezes aqui Caso contrário, no topo desse quadro específico, também posso clicar aqui. Espero que vocês tenham entendido o uso disso e eu mostrarei mais opções aqui. O enquadramento, vocês já entenderam. Eu acredito nesse, ok? Eu tenho a tecla de atalho para isso é a ferramenta de movimentação e a ferramenta de dimensionamento também foi entendida por vocês E agora vamos para a seção, ok, aqui, usando isso, eu posso criar uma seção específica. Suponha que eu crie essa seção aqui, e eu possa simplesmente mover essa seção específica aqui dentro do meu quadro, ok? Então, eu tenho essa seção agora dentro da minha moldura. Está bem? Se eu selecionar este, ou se eu selecionar este, suponha que eu continue aqui, coloque uma cor. Suponha que eu tenha escolhido essa cor, não parece boa. Sim, nada mal. Ok, agora se eu vier aqui, clique aqui, novamente, feche a opção de conteúdo do clipe. É assim que ele realmente me dará uma prévia. Mas se eu voltar aqui sobre o conteúdo do clipe, há uma mudança que vocês podem ver apenas nesta seção com o conteúdo do clipe. E isso é sem, é assim que realmente vai ficar, como vocês já podem ver aqui agora. Ok, isso está logo acima deste. Agora vamos passar para a ferramenta de fatiar. E a tecla de atalho para isso é, basicamente, apenas corta quadro ou uma área específica que você deseja importar ou exportar Ok, se eu escolher essa seção específica aqui, eu também selecionei a fatia Como você pode ver, este é o lugar que acabou de ser ocupado depois de selecionar isso. Se eu chegar a essa opção de exportação, como você pode ver aqui, está escrito, se eu quiser exportar essa fatia um aqui, ok, se eu exportar a fatia um aqui, eu vou te mostrar, revise isso, o que será salvo na minha tela, apenas uma fatia de onde eu tenho slide Ele apenas selecionará essa parte da mesma forma que, se eu selecionar a fatia dois, ele me dará uma prévia disso, pois não há nada lá Vou cortar um também. Ok, entendi. Essa parte também está aqui. Eu tenho todas as formas aqui. Se eu quiser criar uma linha, um retângulo, ok, eu crio um retângulo, acho que estou criando este a partir daqui Eu posso criar ícones diferentes. Se eu selecionar isso, preencha com uma cor diferente aqui. Ok, aqui você pode ver que eu tenho isso com Alt. Eu posso simplesmente duplicar isso também. Como você pode ver, eu dupliquei o mesmo tamanho do ícone aqui Depois disso, também posso fazer botões com essas formas. Nesta linha aqui, eu posso criar uma linha do jeito que eu quero aqui. Há uma coisa boa sobre o Figma ele mostra os alinhamentos Como você pode ver, há uma linha laranja avermelhada aqui, que me mostra o alinhamento Da linha que eu posso realmente colocar, se eu quiser colocar qualquer tipo de flecha, eu posso fazer isso ou toda a prévia, eu vou obtê-la aqui. E também esse. Essa. E também posso alterar a largura ou o tamanho do traçado a partir daqui. Ok, eu também posso fazer isso tudo. Eu também tenho a flecha aqui. Eu posso simplesmente clicar ou criar uma seta a partir daqui. Se eu selecionar isso aqui, você verá que também posso alterar a opacidade Eu também posso fazer assim, triângulo invertido no círculo, seta, seta de diamante, redondo, quadrado. Eu tenho essas opções aqui. Se eu quiser fazer um círculo, posso fazer um círculo da mesma forma com esse circuito em particular. Eu posso brincar, como vocês podem ver. Mas se eu clicar na mudança de controle como selecionei esta, sem mudança de controle, ela será criada em uma proporção. Está bem? Eles criarão um círculo para mim em proporção. Depois disso, vamos para o polígono. Da mesma forma que posso criar um polígono como esse. Se eu quiser movê-lo para dentro de qualquer quadro, também posso movê-lo. Está bem? Aqui você pode ver que uma vez que eu fiz isso, essas coisas estão emolduradas, ok? Todas essas coisas estão sob o primeiro quadro. Como este está dentro, posso alterar a configuração a partir daqui. Se eu quiser alterar alguma configuração desse enquadramento específico, posso fazer isso aqui Suponha que eu queira mudar a rotação a partir daqui, e tudo será incluído nisso. Como isso está no primeiro quadro aqui, eu entendi isso. Vamos para a estrela. A partir daqui, eu posso criar uma estrela se eu quiser. Aqui você pode ver que eu tenho essas opções onde posso ampliar isso ou posso brincar com tudo isso Se eu quiser aumentar a contagem aqui, você pode ver que também posso aumentar a contagem. Aqui eu também posso jogar com este. E se eu quiser colocar alguma imagem ou vídeo, basta clicar nessa opção específica. Ou no meu teclado, posso clicar em Control Shift depois disso. Vamos ver aqui nas Ferramentas de Criação. Em Ferramentas de criação, eu tenho a ferramenta caneta e a ferramenta lápis. Se eu pegar a ferramenta de caneta, vocês poderão ver, eu posso fazer formas diferentes a partir daqui. Como você pode ver adequadamente. Do jeito que eu quero aqui, eu criei, eu também posso dobrá-lo. Se eu quiser, como você pode ver aqui, eu posso fazer coisas diferentes a partir daqui. Ok, se eu terminar com isso, eu clico em. Ou se eu quiser dobrar alguma coisa, essa é a ferramenta Bend. Eu também posso usar isso. OK. Se eu terminar com isso, posso clicar aqui. Deixe-me mostrar a vocês a ferramenta de lápis. Ferramenta de lápis, é apenas uma escrita humana. Se eu apenas escrever Igm, me desculpe, minha caligrafia é muito ruim. Vou deletar tudo isso daqui. Clique no botão excluir aqui e ele será excluído. Esse também. Se vocês entenderam o uso da caneta e da ferramenta de caneta, a tecla de atalho serve apenas para deslocar o lápis mais P. Você só precisa incluir um deslocamento com o P para selecionar sua ferramenta de lápis Deixe-me abordar essa ferramenta de texto depois disso. Aqui, depois de selecionar a ferramenta de texto, preciso criar uma caixa específica aqui. A partir daqui, posso simplesmente digitar qualquer coisa, como vou digitar tutorial básico da ferramenta Ma conforme escrevi este. Se eu selecionar essa coisa específica daqui, posso realmente selecionar a fonte. Ok, eu posso selecionar a fonte e também posso selecionar um tamanho específico. Está bem? Que tamanho eu quero aqui? Eu tenho esse. Também posso mudar o alinhamento, e muitas outras coisas estão lá, que aprenderemos aqui Eu tenho duas linhas. Também posso aumentar ou diminuir o tamanho da linha a partir daqui. Como você pode ver, ok, eu também posso alterar a largura a partir daqui. Eu posso selecionar a fonte aqui. Como você pode ver, posso fazer tudo isso aqui, exemplo, depois de selecionar meu texto, eu uso essa opção de texto específica. E também posso preencher cores, dar efeitos de traçado, que aprenderemos mais tarde. Com isso, vou colocá-lo aqui. OK. Também aprendi como você pode usar a ferramenta de texto. Para a ferramenta de texto, a tecla de atalho é do seu teclado Depois disso, abordaremos os recursos. Se eu clicar nos recursos, posso obter um tipo diferente de plug-in, um tipo diferente de widgets A partir daqui, os plug-ins são bastante úteis. Vou mostrar a vocês alguns dos plug-ins que são bastante úteis e fáceis de usar. Ok, então aqui usando a ferramenta manual, eu já mostrei a vocês como podemos nos mover por aqui, como nesta página, pois com essa ferramenta de seleção, você pode simplesmente se mover. OK. Mas aqui, usando a ferramenta manual, suponha que você tenha uma página inteira de trabalho e esteja tudo bem, tantos quadros que você criou e tantas coisas que você fez aqui. Agora você só precisa se movimentar com sua ferramenta manual Esta é uma ferramenta bastante útil. A última ferramenta na barra de ferramentas é uma seção de comentários. Se eu selecionar este, e aqui você pode ver uma caixa de comentários. Suponha que eu queira colocar um comentário aqui. Ok, então aqui eu posso clicar e escreverei Alterar, alterar o tamanho e a cor da fonte . Se eu quiser mencionar alguém, depois de adicionar o nome deles, aqueles que estão no meu grupo com quem vou trabalhar, eu posso realmente mencioná-los. Se eu quiser mencionar todos depois da tarifa, também posso colocar todos bem aqui. Eu também tenho emojis diferentes. Como você pode ver aqui, eu tenho diferentes Mogi que posso usar adequadamente Tantas imagens diferentes, não apenas emojis de rosto, mas também animais, salgadinhos de frutas e muito mais Aqui eu também tenho algumas palavras. OK. Que eu posso usar. Eu posso até pesquisar, então eu posso fazer tudo isso a partir daqui. Essa também é uma ferramenta bastante útil se eu clicar em Enter ou clicar aqui, vocês podem ver que eu enviei um comentário aqui Se eu mencionei alguém, eles receberão uma notificação de que eu os mencionei em meu projeto de que eles precisam fazer alguma coisa ou que eu dei alguns conselhos ou algo parecido. Ele aparecerá nesta caixa e também na caixa deles, que possa estar visível para eles onde quer que eu esteja fazendo isso. Ok, a partir daqui eu posso simplesmente editar isso também. Bem, eu também posso até mesmo deletar este. Vou simplesmente deletar este. Espero que agora vocês estejam bem familiarizados com todas as ferramentas da barra de ferramentas. Agora você pode realmente criar um arquivo básico usando este aplicativo Figma Espero que todos tenham entendido. Nos vemos na próxima aula ou no próximo tutorial. No capítulo, aprenderemos muitas outras coisas interessantes sobre esse aplicativo específico de design de UI UX. Até lá, cuide-se. Adeus 5. Como você pode usar páginas no Figma: Olá a todos e bem-vindos a mais um tutorial no Figma Agora estamos em nosso capítulo número quatro, e vou mostrar a vocês como você pode usar páginas no Figma Na última aula, eu contei a vocês ou dei a vocês uma ideia básica sobre todas as ferramentas, então quais são seus usos neste aplicativo em particular? Aqui nesta aula, vou falar sobre páginas. Você pode adicionar uma página. Como você pode copiar um conteúdo específico de um projeto para outro usando o método copiar e colar. E como você pode realmente colocar tantos quadros ou tantos componentes, tantos vetores dentro de uma página específica E como você pode realmente trabalhar mostrando vocês alguns exemplos da comunidade do Figma Não vamos perder tempo aqui. Vamos começar com essa aula. Agora, estou na página inicial do Figma. Como você pode ver aqui, eu tenho a comunidade explore. E eu aceitei dois dos projetos, como designs. Eu usei dois desses designs para mostrar a vocês como isso realmente funciona, por exemplo, qual é o uso das páginas ou como você pode realmente usar a página em seu trabalho. Como você pode ver, eu fiz esse primeiro design aqui. Você pode ver que ele tem quatro páginas aqui embaixo. OK. Aqui ele tem quatro páginas. Se você quiser adicionar mais páginas a partir daqui, basta vir aqui e clicar nesta página a partir daqui. Como você pode ver, depois de clicar em uma nova página, criei uma nova página Aqui estou eu, de acordo. OK. Suponha que eu vá apenas como aula de páginas, vou apenas dizer isso. Agora, o que eu quero fazer é criar uma moldura. A partir daqui, mostrei a vocês como podemos criar um quadro, pois vocês também têm predefinições aqui Vou usar para um desktop, vou levar 12, 18 a 832 Aqui eu tenho essa página específica. Como você pode ver, depois de criar esta página, minha moldura está lá, mas embaixo da minha moldura, eu não tenho nada porque não coloquei nenhuma caixa ou foto dentro dela. Agora, deixe-me criar uma caixa. Como você pode ver, onde criei essa caixa ou essa forma dentro da moldura da minha moldura. A caixa retangular está logo abaixo por moldura. Está bem? Por retângulo, a caixa fica logo abaixo E agora eu posso basicamente nomear isso do jeito que eu quiser. Está bem? Vou apenas escrever decks. Pare. Vou guardar esse aqui. Você pode ver que eu posso realmente dar um pouco de cor do jeito que eu quero. Dê a este também uma cor diferente. Ok, deixe-me pegar essa cor. Como você pode ver, eu tenho essa página. Está bem? É assim que você pode realmente usar uma página. E também podemos criar páginas diferentes ou molduras diferentes na mesma página. Está bem? Se eu apenas diminuir o zoom usando o controle, um mouse aqui embaixo, você pode ver que eu tenho um quadro aqui. Se eu quiser replicar a mesma página do mesmo tamanho, o que vou fazer é clicar primeiro em Antigo Eu vou escolher essa moldura. Vou clicar em Antigo. Depois de clicar em Antigo, você pode ver no meu mouse, eu tenho dois mouses. É assim que posso replicar o mesmo quadro. Novamente, selecionarei isso e moverei este com minha ferramenta manual. Vou apenas mover a tela para que eu possa mostrar a vocês no meio. O que você entendeu aqui? Como aqui, entendemos que dentro de uma página podemos criar muitos quadros, tantos vetores Também podemos colocar muitas animações de texto, ícones. Ok, eu também mostrei a vocês como podemos criar uma página. Deixe-me mostrar a vocês se eu tenho o mesmo nome de como posso realmente mudar isso. Ok, a partir daqui. Vou clicar aqui para ver este como três. Que eu não me confunda aqui. Está bem? Suponha que eu tenha gostado de alguma dessas coisas. Está bem? Suponha que eu goste desse logotipo em particular. Ou deixe-me voltar a esta página e quero tirar essa imagem em particular na minha própria página. Para isso, o que vou fazer é clicar no controle C, que é copiar. Caso contrário, posso simplesmente vir aqui, clicar em Copiar daqui e voltar para esta página com minha ferramenta de seleção, selecionar essa caixa específica e colar aqui. Ok, então, como você pode ver, uma vez que eu colei, ele também apareceu na minha página Assim, também posso pegar ou indicar muitos dos outros projetos da opção comunitária. Se eu for aqui, suponha que eu primeiro me deixe ampliar minha cabeça minha cabeça para me deixar mover esta daqui e daqui. Você pode ver como ele é realmente usado. Aqui, ele primeiro selecionou quais cores ele deveria usar. Está bem? Essas são as cores que ele usará. Esse é o tipo de fonte que ele usará para o título. E esse será o tipo ou tamanho da fonte do corpo. E se você quiser usar uma letra minúscula, ele usará essa fonte. Esses são tipos diferentes de componentes que ele usará. Estas são as ferramentas de navegação que serão usadas, sistema de divisores e diferentes tipos de caixas de texto, se você quiser colocar qualquer área de texto especial e também os botões superiores Ele acabou de criar um bom plano para si mesmo antes de criar qualquer aplicativo móvel ou qualquer tipo de site Depois de fazer isso, como depois de fazer tudo isso, fica muito fácil trabalhar, pois não precisamos banir seu tamanho de outros lugares para que ele permaneça o mesmo. Veja aqui, ele listou perfeitamente todos os switches que ele usará. Aqui você pode ver que ele selecionou dois interruptores a partir daqui, os átomos do grupo de rádio-rádio, tudo o que é necessário Na verdade, ele os colocou na ordem certa para não se confundir. Aqui você pode ver gráficos e aqui ele colocará um gráfico de colunas. Mas aqui está escrito em breve que ele trabalhará nisso mais tarde. É assim que devemos realmente trabalhar. Antes de iniciar qualquer projeto, devemos basicamente estabelecer um plano para nós mesmos para que possamos nos referir essa coisa específica e trabalhar de acordo Aqui você pode ver este é o logotipo daqui, esta é outra página. Esta não é a primeira página, ok. Aqui está outra página que ele pegou e tentou fazer o trabalho de demonstração a partir daqui. Suponha que se eu estiver pegando esta página aqui, eu possa movê-la daqui abaixo desta. Além disso, tenho títulos diferentes. Suponha que eu queira mover ou copiar e colar qualquer coisa nessa página específica. O que posso fazer é clicar em Opções de Colagem aqui e a opção Copiar também está aqui. Depende do que eu quero fazer aqui. Deixe-me vir aqui para esse outro web design aqui. Se eu vier, se eu for para essa opção de ativos daqui, como você pode ver, ele usou todos esses ativos aqui. Se eu quiser usar esse recurso específico, o que vou fazer é simplesmente clicar aqui ou selecionar este C. Em vez disso, deixe-me pegar este daqui. Ok, porque isso vai parecer, eu vou pegar aqui. Volte para minha classe de páginas de camadas. Aqui, vou pressionar controle V aqui, você pode ver a escrita. Eu o tenho aqui. Eu posso aumentar o tamanho se eu quiser. Para isso, preciso ampliar e aumentar o tamanho de acordo com minha necessidade. Com minha ferramenta de movimentação, posso simplesmente subir até aqui. Eu também posso mudar a cor se eu quiser. Deixe-me pegar uma cor preta. Deixe-me colocar isso em cima. Ok, aqui. Agora eu tenho um pouco por texto. Eu posso colocá-lo em algum lugar aqui no meio. Sim, isso parece muito bom. Na verdade, também posso fazer isso com outras chamadas. Ok, aqui eles nomeiam esse quadro como espaço reservado. Eu posso basicamente deletar este. Eu posso colocar o que eu quiser. Ok, suponha esse roteiro completo. A partir daqui, posso clicar em controle, voltar e clicar em controle aqui. Você pode ver que eu tenho a página inteira aqui ou a imagem completa. Na verdade, posso verificar o tamanho aqui. Ok, eu posso diminuir o tamanho do jeito que eu quiser. Esse é o tamanho da página. Se eu quiser diminuir o raio, também posso diminuir o raio É assim que podemos trabalhar com página e, na verdade, criar nosso próprio design. E também podemos colocar o que quisermos. Espero que vocês tenham entendido o uso de páginas e como podemos copiar e colar, como podemos pegar páginas diferentes e colocar conteúdo em nossa página. Basicamente, dentro das páginas temos molduras e, abaixo das molduras, temos todos os outros componentes. Estaremos aprendendo sobre componentes, vetores de mascaramento. Eu já te disse como você pode usar as formas. Estaremos aprendendo sobre tudo isso. Tudo gira em torno de uma sequência e de como realmente trabalhamos nela. Veja tudo na próxima aula, onde aprenderemos sobre como criar protótipos neste aplicativo Figma. Nos vemos na próxima aula. Cuide-se. Adeus 6. Como você pode fazer Prototipagem no Figma: Olá a todos e bem-vindos a mais um tutorial no Figma Agora estamos no capítulo número cinco e aprenderemos como você pode começar a criar protótipos neste aplicativo prototipagem é como criar um aplicativo em que você simplesmente rola e vai para a próxima Eu farei isso e mostraremos como podemos pré-visualizar seu trabalho, como podemos apresentar seu trabalho e como você também pode editar seu trabalho enquanto faz a prototipagem Não vamos perder tempo, vamos começar com essa aula aqui. Como vocês podem ver, eu tenho três Frap aqui Esta é apenas uma página que mostrarei a vocês como criar protótipos entre essas páginas Primeiro, o que vou fazer é selecionar essa moldura específica. Depois de selecionar aqui, você pode ver a opção de design, logo ao lado da opção de design, eu tenho a opção de protótipo Aqui você pode ver que eu tenho a opção de protótipo. Se eu clicar aqui, você pode ver o fluxograma, as interações e tudo mais. Mas o que eu vou fazer clicar neste lado positivo e vou me juntar a este. Eu tenho esses lados positivos aqui, posso me juntar nesses quatro lados. Ok, o protótipo é basicamente muito vasto, mas vou começar com protótipo apenas para mostrar a vocês como isso realmente Por exemplo, você pode começar a criar seu próprio aplicativo ou qualquer página da web. Eles estão me perguntando como eu quero navegar. Eu quero querer seguir em frente. Vou clicar neste aplicativo de treino. Tudo bem, em vez disso, também está bem. Estas são algumas das animações que estão lá. Vou ter uma breve aula sobre isso. Aqui está no clique. Vou apenas vincular isso aqui, pois faço este lado com este lado, vou entrar nesta página aqui. Ok, eu tenho esse também. Agora, como vocês viram, eu tenho isso. Agora eu quero ver como vai passar de uma página para outra. Ok, para isso você pode ver que eu tenho um ícone aqui. Ok, aqui há basicamente dois ícones. O primeiro está presente e o outro é o Preview. Há uma grande diferença entre o presente e o preview. Se eu clicar em presente, terei uma caixa diferente aqui, como uma janela diferente, se eu clicar em presente, vamos ver como ficará. Depois disso, mostrarei a vocês aparência de uma prévia e como ela é diferente. Aqui você pode ver que eu tenho esse. Se eu clicar nisso, posso simplesmente mudar. OK. Como você também pode ver manualmente, posso clicar aqui e ver a aparência da minha página. Ok, aqui, suponha que eu tenha esses ícones aqui. Se eu estiver apenas tocando, vou para a outra página Espero que vocês tenham entendido como fazer isso manualmente. Além disso, podemos voltar, mas suponha que eu queira mudar essa escrita em particular a partir daqui. Nesse caso, toda vez eu não deveria voltar ou simplesmente cancelar essas páginas em particular. O que eu posso fazer, eu posso simplesmente vir aqui. Suponha que eu queira selecionar isso, ou eu queira selecionar essa caixa. E eu quero diminuir o tamanho dessa caixa. Está bem? Diminua o tamanho. Algo parecido. Então, eu quero apenas deletar essa caixa. Ok, só para mostrar a vocês um exemplo, vou clicar em excluir. Agora você pode ver que minha página começa aqui. Está bem? Nesse caso, o que vou fazer é que, se eu chegar aqui nesta página aqui, você pode ver que minha primeira página é bem parecida com esta. Não precisei excluir essa primeira página ou cancelar essa primeira página para ver as alterações. Nesse mesmo caso, se eu quiser alterar alguma cor ou algo parecido, posso simplesmente acessar a opção de design para essa opção de campo. A partir daqui, eu posso pegar qualquer cor que eu quiser aqui. Você pode ver que eu tenho essa cor específica aqui. Eu posso simplesmente selecionar isso porque eu tenho essa cor. Também posso usar essa cor em todas essas molduras. Ok, vou pegar uma cor igual a essa aqui. Você pode ver que eu tenho a cor e posso mudar o padrão a partir daqui. Aqui, se eu quiser usar uma cor diferente para o filme, também posso fazer isso a partir daqui. Ok, todas as caixas também, eu posso colocar diferentes tipos de cores a partir daqui. Ok, então espero que vocês tenham entendido como você pode fazer o protótipo e como você pode ver esta página, ok, aqui, como você pode ver, uma vez que eu fiz algumas alterações aqui, ela também mudou É assim que realmente funciona. É assim que você pode ganhar um presente ou ver nosso trabalho em uma nova guia. Mas se eu quiser ver uma prévia, vamos ver o que ela faz. Se eu clicar em Visualizar, terei uma janela ao lado do meu trabalho aqui. Não criará uma janela diferente, mas, em vez disso, apenas me dará uma prévia. Em qualquer corredor onde eu vou colocar aqui, você pode ver minha caixa de pré-visualização que está carregando agora, vocês poderão ver que ela está me dando uma atualização ao vivo da minha prévia A partir daqui, posso abrir este na visualização de apresentação, que não preciso fazer porque já abri este aqui. Também posso inserir isso na proporção do quadro. Eu posso aqui a partir daqui manualmente. Se eu tocar nele, ele passará da primeira página para a segunda. Do segundo ao terceiro. 7. Opções de facilitação e animação de protótipo: Olá a todos e bem-vindos a mais um tutorial no Figma Este é o capítulo número seis e aprenderemos sobre as opções fáceis e a animação do protótipo. Como na última aula, mostrei a vocês como começar com a prototipagem e conectar quadros com quadros Aqui nesta aula, aprenderemos como você pode realmente animar esses quadros quando eles aparecem na tela E um botão específico pode levar você para outra página. Vou mostrar a vocês como vocês podem fazer isso. Abaixo disso, vou mostrar a vocês muitas outras opções. O que pode ser usado nesse aplicativo específico para criar um aplicativo móvel ou um aplicativo da web? Não sejamos do tipo molhado e vamos começar com essa aula em particular. Aqui, novamente, estou de volta à minha página inicial do Figma e vou mostrar para vocês daqui Ok, aqui, como vocês podem ver, eu tenho esses quadros agora, farei a prototipagem a partir daqui, mas será bem diferente, pois eu disse que se eu clicar, posso direcionar para aquela página específica, que pode estar em que pode estar Ok, suponha que eu queira ir diretamente para esta página. Se eu clicar nesse botão em particular, deixe-me dar uma olhada nesse botão. Selecionei este. Eu tenho o erro de ortografia. Vou apenas adicionar aqui. Como eu tenho esse botão específico aqui, o que vou fazer é primeiro diminuir o zoom se clicar neste. Se eu for fazer minha prototipagem, como você pode ver, tenho o lado positivo aqui O que eu vou fazer é quando eu clicar neste botão específico aqui, eu vou cair nesta página. Isso é o que eu quero. Ok, aqui você pode ver que eu tenho muitas opções. Por exemplo, se eu quiser navegar duas vezes, se eu quiser voltar e que animação em qual página eu quero ir. Nesta página, quero deixar aqui que você possa ver as últimas três páginas. Além disso, eu o tenho aqui. Vou clicar aqui. Também vou escolher essa opção aqui. Ok, aqui vocês podem realmente ver prévia do que realmente ficará , como podem ver aqui. Eu também posso mudar se está fora. Deixe-me mostrar para vocês apenas obtendo uma prévia. Ok, vou clicar aqui. Faça a prévia. Como você pode ver, está carregando. Mas isso vai me dar essa coisa aqui agora. Se eu clicar nessa respiração aqui, você pode relaxar. Se eu voltar novamente e mudar essa coisa em particular para instantânea. Agora, se eu voltar novamente e clicar neste, haverá uma mudança instantânea aqui. Essas são as animações ou a forma como podemos realmente animá-la é com um clique Às vezes, só queremos fazer D, ok? Nesse caso, posso clicar neste, especialmente isso é usado no caso de pop-ups. Se eu quiser arrastar alguma coisa ou quiser ir para a próxima página , posso fazer assim. Ok, aqui eu tenho essas opções. Vamos ver um por um, ok? Se eu clicar em Dissolver aqui, você pode ver uma prévia de como ele se dissolverá lentamente. Ok, deixe-me voltar aqui nesta página. Se eu clicar na respiração aqui, você pode ver que isso está apenas se dissolvendo. Ok, vou explicar a vocês a opção de animação inteligente mais tarde, porque isso é um pouco complicado Vamos guardá-lo para a próxima fase da aula. Aqui está outra opção chamada mover. É assim que acontecerá se eu clicar na minha página aqui, deixe-me voltar. Clique aqui. Então, virá assim, como você pode ver daqui. Além disso, eu posso realmente mudar o tempo. Ok, tipo, quantos segundos ou milissegundos ele virá? Vou dar 450 milissegundos. Eu já disse isso. Agora vamos voltar novamente. Clique aqui. Como você pode ver, apareceu um pouco devagar. Tudo depende do seu aplicativo ou do tipo de aplicativo móvel que você está criando, que ele se baseia e tudo mais. Aqui, eu posso ver todas essas opções. Se eu escolher os limites, se eu voltar agora Ok, se eu clicar aqui, você pode ver que dá as lutas aqui na minha tela, eu posso escolher entre tudo isso Se eu quiser que venha devagar , virá assim. A partir daqui, virá devagar. E, de repente, ele simplesmente aparecerá na minha tela. Estou apenas mostrando a vocês todas as opções que temos aqui. Essa é outra maneira pela qual eu quero que apareça rápido. Se eu clicar neste, ele virá assim. E se eu quiser que venha gentilmente aqui assim, vai parecer bom. De que lado eu quero que ele apareça? Suponha que eu o tenha dado daqui. Agora vocês poderão ver que esta página aparece da direita, não da esquerda, ela apareceu da direita. E nesse caso, se eu o colocasse por cima, ele aparecerá por cima. Ou aparecerá de baixo e irá para o topo. Ok, deixe-me clicar em sim. E esse é totalmente o oposto daquele. É assim que podemos trabalhar aqui em todos esses aplicativos. Ok, espero que vocês tenham entendido. E se vocês quiserem mudar alguma coisa, suponha que essa coisa em particular que eu possa ver daqui eu possa cavar como eu quiser Se eu escolher este, se eu quiser ver a prévia, é assim que vai sair. Vocês também podem ver a prévia aqui nesta caixa. OK. Se eu quiser voltar , posso clicar aqui. OK. E agora vamos tentar criar um protótipo dessas quatro páginas inteiras que tenho aqui Ok, então com minha ferramenta manual, vou mover esta caixa um pouco. Ok, volte para a minha primeira página e, como eu já disse, vocês não precisam fechar a prévia ou o presente ao fazer alterações. Se eu vier aqui no protótipo e escolher minha ferramenta de seleção novamente, aqui você pode ver que este é o botão da página inteira Ok, vou mostrar vocês se vou conectar este a esta página novamente. E eu vou dar todas as conexões aqui aqui. Como tenho a opção de relaxamento, escolho esta e também posso escolher o texto , se quiser, mas vou selecionar a caixa pois meu texto está dentro da caixa. Vou pegar esse. Vou trazê-lo aqui. A partir daqui, eu posso animar como eu quiser, como eu quero que apareça Ok, nesta página eu quero que ele se dissolva. Vou definir o tempo em 400. Serão necessárias 400 notas para dissolver a respiração. Eu já o coloquei aqui para ioga, pois tenho essa opção aqui, ioga. Clique aqui e isso me levará à página de ioga. Como posso realmente excluir este é primeiro, deixe-me selecionar a caixa aqui nesta caixa. Agora eu posso selecionar esta página aqui. OK. Aqui você pode ver que eu tenho tudo isso aqui em todas essas caixas aqui. Você pode ver que eu também tenho o botão Início. Vou me certificar de que, depois de clicar nesse botão inicial ou guia inicial em particular, deixe-me dar uma olhada nisso. Aba Início aqui. Mova isso com isso aqui. Como você pode ver, eu quero isso para nós. Acesse esta página ou conecte-se a esta página. Como você pode ver, a opção positiva aqui, vou me conectar aqui nesta página, como você pode ver aqui. Além disso, eu posso mudar, vou apenas manter isso de fora e vou dizer que vou sair daqui. Além disso, vou pegar esse botão, vou pegar esse aqui. Até agora, não consigo selecionar isso. Como eu selecionei este, vou trazê-lo para aqui. Somente a partir daqui posso escolher como quero animar, pois direcionei tudo isso para minha página inicial Deixe-me dar uma prévia disso. Ok, é assim que vai diminuir. E aqui, você pode ver por meio de navegações tudo o que eu quero. Vamos ver a resenha ou vou cortar a prévia. Vou apenas apresentá-lo em um painel diferente aqui. Vocês podem ver que está carregando agora aqui, como vocês podem ver, eu tenho isso. Se eu clicar nesse relaxamento, você pode ver que fui até a página de relaxamento. Se eu descer, se eu clicar neste aqui, você pode ver que estou de volta à minha página inicial novamente. Se eu clicar nessa opção de respiração, simplesmente a coloco aqui na página de respiração. Ok, daqui novamente, se eu voltar e clicar neste botão inicial, vocês poderão ver, novamente, volta à página inicial. Se eu clicar neste botão de ioga, também volto a esta página aqui. Se eu quiser voltar à minha página inicial, clicarei aqui. Eu posso voltar novamente para esta página em particular. Existem muitas outras opções para isso. Precisamos criar mais molduras para mostrar a vocês um exemplo de como essa prototipagem realmente Eu tenho um show, espero que vocês tenham entendido para dar a vocês um conhecimento básico sobre prototipagem e sobre essa animação que mostrei Novamente, vamos ao arquivo principal aqui. Se eu quiser mudar alguma coisa daqui, eu posso mudar isso. Basta ir até a opção de design. Agora você não consegue ver os links entre todas essas quatro páginas aqui. Eu sempre sugiro que nomeie sua página corretamente para que você não se confunda. Porque quando você está criando um aplicativo pequeno ou um tipo maior de aplicativo, você sempre precisa se certificar de não se confundir entre seus personagens ou entre seus quadros. Que isso criará uma bagunça e vocês não conseguirão descobrir onde deveriam colocar Nesse caso como talvez no terceiro capítulo, mostrei você um cara que eu tirei da comunidade em Figma Eu fiz um projeto e mostrei vocês como ele realmente ordenou seu trabalho. Ele escolheu uma cor específica que usará, as fitas, os ícones, todos os desenhos estão em uma coluna Em cada quadro, ele acabou de dizer quais fontes ele vai usar, tamanhos, tudo. Devemos definir tudo isso antes de criar qualquer aplicativo. Agora, se eu quiser deletar este, como os links para isso, novamente, eu tenho que vir aqui no protótipo Neste protótipo aqui, vocês podem ver que eu tenho todos esses links aqui Ok, aqui vocês podem ver que eu tenho todos esses links. Se eu quiser excluir algum link daqui, basta clicar aqui e clicar nesse botão de menos aqui se não quiser fazer isso Nesse caso, posso simplesmente selecionar aquela linha específica em que conectei os quadros. Eu posso simplesmente clicar nessa linha e clicar em Excluir. Ok, é assim que eu posso deletar. Vou desfazer isso novamente. Aqui você pode ver que é assim que podemos ser um aplicativo móvel simples com a ajuda da prototipagem Espero que essa aula tenha sido clara e agora vocês possam criar seu próprio aplicativo móvel. Vou apenas dizer a vocês que comecem com algo simples. Apenas tente criar um aplicativo simples. Experimente esse depois disso. Quando estiver muito acostumado com esse aplicativo, opte por algo complexo se acostumar com esse aplicativo, que não haja nenhum problema ao fazer o produto final. Espero ver todos vocês no próximo tutorial, onde aprenderemos sobre atrasos e animação inteligente O que quero dizer com animação inteligente é supor que eu tenha esse ícone em particular, ou qualquer tipo de imagem dentro da minha página aqui naquela gaiola Se eu clicar nele, ele aparecerá de forma animada. Também mostrarei a vocês na próxima aula como podemos realmente fazer isso em nosso aplicativo específico. Cuide de todos. Adeus 8. Animação inteligente: Olá a todos e bem-vindos a mais um tutorial figma aqui Este é o capítulo número sete e vamos aprender sobre animação inteligente. Por exemplo, você pode basicamente mover qualquer ferramenta específica ou qualquer objeto específico dentro de sua moldura e animar para que ela caia corretamente E de uma forma agradável, aprenderemos tudo isso nesta aula em particular. Não vamos perder tempo e vamos começar com essa lição em particular aqui. Novamente, de volta à página inicial da Figma. Agora, na última aula, eu já falei para vocês sobre como podemos realmente ir de uma página para outra. Agora, se vocês se lembraram, eu mostrei a vocês nesta aula. Como você pode ver, eu também tenho a prototipagem até agora na última aula Se eu clicar aqui, isentei essa Essa aula é basicamente sobre essa animação inteligente. Também mostrarei a vocês como atrasar o que isso basicamente é Suponha que eu tenha essa imagem ou essa moldura dentro da minha página principal aqui. Ok, então o que eu vou fazer é entrar com uma animação para isso. Vamos ver como podemos fazer isso. Ok, para começar, o que faremos é duplicar outra camada desse quadro específico aqui Ok, para duplicar. Eu já disse que só precisamos clicar em Alt. Ao clicar aqui, você pode ver que eu tenho dois mouses Ok, deixe-me selecionar o quadro inteiro. Clique na opção Alt aqui, você pode ver uma. Ok, eu tenho a duplicata dessa camada. Deixe-me mover para este lado. Deixe-me também mover essa moldura específica este lado, para não me confundir. Ok, isso traz esse aqui. Como você pode ver, eu tenho esses dois separados. Este é nomeado como vocês também podem ver, ambos são relaxamento nesta moldura. Cópia do meu primeiro quadro aqui. Agora, o que eu vou fazer é selecionar o objeto que eu quero animar. Ok, agora eu vou vir aqui. Eu quero animar essa imagem ou esse quadro em particular. Nesse caso, o que eu vou fazer é antes disso, o que eu vou fazer é selecionar este. Vou conectar isso a esta guia de relaxamento aqui. Ok, agora você pode ver que eu tenho esse. Eu virei aqui e escolherei a opção chamada Smart Animate E aqui vou usar a opção Is is out. Como você pode ver, selecionei 400 aqui. Eu só vou fazer 450. E eu vou clicar em OK. A partir daqui. Como você pode ver, eu tenho esse. Agora, o que vou fazer é que, como quero que essa apareça lentamente, arrastarei essa camada específica para fora dela. Está bem? Agora, este não está dentro desta moldura. O que acontece aqui se eu arrastar tudo isso até aqui? Você pode ver que eu tenho que relaxar. Então eu vou chamá-lo de relaxamento um e este como relaxamento dois, ok? Então eu vou guardar essa e como você pode ver agora eu tenho duas páginas de relaxamento e também a de relaxamento, ok? Um deve estar no topo e dois devem estar aqui. E eu vou manter essa moldura em cima desta, ok? Vou mostrar a vocês um exemplo se eu arrastar esse quadro específico daqui, ok, suponha que eu queira arrastar isso. Agora, vou apenas desenhar. Pegue esta moldura em particular como eu tenho, movendo-a nesta, ok? Só vai entrar nesse, ok? Como você pode ver agora, este está dentro daquele. Mas quando eu começo a tirar isso, você pode ver que está saindo da aba de relaxamento, mas eu quero que entre. Como eu já mostrei para vocês aqui, eu tenho as coisas do protótipo Veja, eu também conectei este. Agora vamos tentar ver uma prévia de como isso realmente ficará. Se eu clicar em Apresentar, terei uma visão melhor daqui. Vou clicar no relaxamento a partir daqui. Se eu clicar aqui novamente , aparece assim. Sim, vocês entenderam como podemos basicamente fazer isso. Mas o que eu quero é que eu não precise clicar aqui, pois cliquei, como vocês podem ver Deixe-me mostrar a vocês novamente. Depois de clicar aqui, esta página apareceu novamente. Quando cliquei aqui, só essa imagem em particular apareceu Mas o que eu quero é que, sempre que eu abrir essa página em particular ou a guia de relaxamento, eu queira que ela apareça lentamente. Nesse caso, o que vou fazer é adiar um pouco e fazer a modificação da configuração aqui. Ok, deixe-me voltar ao arquivo original aqui. Outra maneira de fazer isso é selecionar esse quadro em particular e supor que eu queira trazer isso aqui, ok? Vou trazer isso aqui. Mas nesse caso, o que eu vou fazer é mudar a opacidade, ok Então, deixe-me mudar a opacidade desta, ok? Deixe-me ir aqui, conserte essa moldura em particular aqui, zero, ok? Eu não vejo nada disso. Nesse caso, vou fazer apenas dez. Se eu fizer dez também, não consigo ver muita coisa. Está bem? Talvez eu consiga ver que algo como 25 está aqui. Você pode ver, eu tenho um lugar embaçado aqui. Agora, se eu tentar obter uma prévia deste agora, vamos voltar aqui. Se eu clicar aqui, você pode ver que isso aparece. Mas agora, como você pode ver, novamente, preciso tocar nisso apenas para ter uma visão. Ok, aqui eu já mudei a opacidade. Eu quero fazer mais. Deixe-me fazer 50% Ok, agora vamos ver a prévia. A partir daqui, vou clicar aqui, é assim que vai aparecer. Ou se eu quiser apenas mudar a opacidade e trazê-la para este lugar, eu também posso fazer isso Venha aqui, selecione o quadro inteiro. Depois de selecionar, basta colocar todo esse quadro aqui e ver a prévia agora. Ok, deixe-me voltar. Clique em Relaxamento, depois clique aqui e você verá a página. Mas, como eu disse, não quero clicar duas vezes aqui. Eu quero que apareça sozinho. Ok, para isso, eu virei aqui. Como você pode ver, selecionei esse botão aqui. Vá para a opção de protótipo. Vou apenas selecionar esta aqui. Você pode ver que eu tenho a opção de dissolver, mas em vez de dissolver, vou escolher a opção instantânea depois disso. Como você pode ver, isso me levará ao relaxamento de uma página e este é o relaxamento de duas páginas. Quero que apareça aqui, pois já selecionei a opção após o atraso aqui. Se eu for até o protótipo, conectarei isso aqui e clicarei em Sim Agora eu também tenho essa opção aqui. Ok, eu posso simplesmente deletar um daqui. Eu tenho essa opção aqui. Como você pode ver, eu tenho uma iluminação aqui agora. Eu vou simplesmente ir aqui. Vá até a página principal e clique nela. Aqui você pode ver que virá como um slide. Espero que vocês também tenham entendido esse tutorial. Ok, como você pode animar de forma inteligente. Eu mostrei a vocês a opção como você pode realmente animar suas coisas de forma inteligente Como você pode duplicar seu quadro. E tudo isso aqui neste tutorial. Na próxima aula, aprenderemos sobre como podemos compartilhar e também como você pode entrar. Você pode compartilhá-lo com seu cliente ou com os membros da sua equipe e também trabalhar ao mesmo tempo em uma interface ao vivo. Espero ver todos vocês no próximo tutorial. Cuide de cada desejo. Adeus. 9. Utilidade do compartilhamento e adição de comentário: Olá a todos e bem-vindos a mais um tutorial no Figma Então, aqui estamos agora em nosso capítulo número oito. E o nome do nosso capítulo é a utilidade de compartilhar e adicionar comentários Então, aqui nesta aula, aprenderemos como basicamente compartilhar. Eu sei que vocês já sabem o básico de como compartilhar, mas aqui esta aula abordará detalhadamente o compartilhamento e como isso é muito útil para adicionar um comentário para outros membros da equipe enquanto você trabalha em um projeto de vida. Assim como vocês podem trabalhar juntos ao mesmo tempo, vocês podem ver o que o outro membro da equipe está fazendo. Vocês podem adicionar um comentário. Convide-os. Vou mostrar a todos vocês aqui nesta aula em particular em detalhes sobre como compartilhar e adicionar comentários. Então, não vamos perder tempo e vamos começar com essa aula em particular. Então, novamente, estamos na página inicial da Figma, como você pode ver E agora, aqui, como eu já disse, o que vamos aprender. Eu voltarei aqui neste projeto em particular. Ok, e suponha que agora eu queira compartilhá-lo com meu cliente ou com meus colegas de equipe Ok, nesse caso, eu dei a vocês o básico do que pode ser feito. Então, aqui vou clicar em Compartilhar. Então, suponha que eu queira colocar o endereço de e-mail aqui. Vou apenas colocar um endereço de e-mail. Vou clicar nesse. Aqui você pode ver como eu selecionei um endereço de e-mail O que eles podem fazer com isso, eles podem ver este ou também podem editá-lo aqui? Ok, quem todos terão acesso a essa coisa em particular aqui? Ok. Aqui eu posso dizer apenas às pessoas convidadas para este arquivo, o que eu preciso fazer a partir daqui. Caso contrário, posso simplesmente clicar aqui. Qualquer pessoa com o link. Basicamente, se esse arquivo é secreto em branco , nesse caso eu só posso selecionar este, como apenas pessoas convidadas para esse arquivo Mas neste arquivo, eu quero selecionar este link específico e eu quero copiar este e enviá-lo para Word deles, Sap ou Messenger. Eu posso fazer isso daqui, ok. E se eles podem editar ou só podem ver, suponha que eu queira enviar ao meu cliente o link onde ele só pode ver. Ok, nesse caso, posso clicar nessa opção para meus colegas de equipe que vou convidar Eu vou, eles também podem editar. Então eu posso ter essas duas coisas aqui. Também posso adicionar uma mensagem curta para eles, aqueles que todos eu estou convidando Então, vou escrever que você precisa me ajudar a terminar este projeto no final deste. Então eu acabei de lhes dar uma mensagem. Com quem tudo o que estou compartilhando. Assim, eu posso simplesmente lhes dar uma mensagem e enviar um convite para eles. Ok, aqui, se eu tiver três ou quatro membros da equipe aqui, nesse caso, posso escolher quem só pode ver, quem é o proprietário e quem pode editar. Ok, nesse caso, posso selecionar aqui, posso simplesmente copiar o link. Como você pode ver, isso é copiado na minha área de transferência , pois tenho esta página aqui e já selecionei um e-mail Então, vou enviar-lhes um convite. Ok, daqui eu posso convidá-los. Você pode ver que acabei de convidá-los aqui. Se eu quiser publicar meu trabalho específico que fiz, posso clicar aqui em Publicar e posso apenas nomear este , dar uma descrição. Se eu quiser usar diferentes tipos de tags, posso usar diferentes tipos de tags. Se eu quiser fazer disso um protótipo, posso fazer disso um protótipo Ou se eu quiser transformá-lo em um arquivo, também posso transformá-lo em um arquivo. Que prévia eles receberão. Ok, se eu escolher o protótipo, posso preencher a tela, o tamanho real ou 100%. Também posso fazer o upload de uma miniatura para minha classe de protótipo, e aqui estão Quem é o criador, a licença e o endereço de e-mail também? Ok, eu não vou ser um, então vou cancelar isso. Venham aqui e deixe-me mostrar vocês como vocês podem realmente trabalhar. Muitos de vocês podem trabalhar na mesma aba. Você pode editar ou criar ao vivo em conjunto. Ok, então eu vou voltar aqui. Vou simplesmente acessar esse e-mail. Eu vou para. E-mail daqui, vou pegar outro e-mail aqui. Você pode ver que eu tenho um convite. Depois de clicar neste, serei redirecionado. Está bem? Como você pode ver, esse arquivo em particular está funcionando no Figma Vou encerrar isso porque já estou aqui. Como você vê, eu também tenho esse. Ok, estou aqui para mostrar a vocês de uma maneira melhor. Aqui você pode ver neste arquivo, se eu vier, minimize isso, então aqui você pode ver, uma vez que eu estou me movendo nesta tela, o mouse aqui, você pode ver o que o editor está fazendo. E suponha que eu queira mudar a cor de tudo isso aqui. O que eu posso fazer é vir aqui, eu vou vir e editar. E eu vou escolher uma cor. E agora eu quero colar essa cor aqui, ok. Ou eu quero mudar a cor da página inteira para preto. Como você pode ver, uma vez que fiz essa coisa em particular aqui nesta página, na minha outra página também, ela mudou, pois eu também dei a ele a permissão para editar. Ele pode fazer isso ao mesmo tempo. Isso é bem interessante. Com isso, também posso alterar todas as configurações. Suponha que eu queira em 50. Vou clicar em Enter aqui, você pode ver que as duas páginas têm a mesma aparência. Está bem? Como eu sou capaz de fazer qualquer coisa a partir daqui. Ok, a partir desse design, seleciono uma caixa específica aqui. Suponha que eu esteja selecionando essa caixa específica. Agora eu quero mudar o traço. Ok, eu quero selecionar o traçado e vou mudar o traçado desta caixa aqui, você pode ver que há a alteração na minha caixa. E eu posso novamente, vir aqui e mudar a cor do traço para algo assim. Ok, algo dessa cor. Guarde esse aqui. E clique em ok. Aqui, você pode ver essas duas mudanças aqui. Se eu apenas aumentasse o zoom em tela cheia, movesse essa com y, vá para aqui. Vocês podem ver que eu também estou trabalhando aqui. E também posso ver no que meu parceiro está trabalhando. Ok, suponha que eu queira adicionar algum comentário. Ok, se eu estiver adicionando um comentário aqui, suponha que parte aqui. Então o que eu vou fazer pegar essa moldura e colocá-la ao lado desta. Com minha ferramenta manual, posso me mover e ver o que é. Ok. Como estou aqui no mesmo laptop, os dois, é muito difícil fazer isso. Mas espero que vocês estejam entendendo o que estou tentando fazer com que vocês entendam, por exemplo, como vocês podem colaborar, como vocês também podem trabalhar Suponha que eu queira adicionar um comentário e dizer como mudar a forma da caixa para retângulo sem qualquer alteração no raio do canto A partir daqui, posso realmente mencionar que posso mencioná-los se eu os corrigir ou posso mencioná-los adequadamente. Ok, se eu quiser mencionar, eu posso mencioná-los como eu quero mencioná-lo, eu também vou desistir de um emoji Agora, se eu enviar este aqui, eles serão notificados de que eu enviei uma mensagem. Ok, vamos ver aqui. Como você pode ver aqui, eu já tenho minha mensagem. Que mensagem é essa aqui? A mensagem ou a caixa de comentários Além disso, serei notificado de que tenho uma mensagem para mim. Ok. Aqui. Depois de abrir este e ver a mensagem de que ele está me dizendo para mudar o formato da caixa e sem nenhuma alteração no raio do canto, farei isso a partir daqui E podemos colaborar assim. Se eu já resolvi aquela coisa específica ou aquele problema específico que estava sendo dito para mim, posso clicar em Resolver. Mas aqui eu não quero mudar nada. Só para mostrar a vocês o uso da opção de compartilhamento e também da opção de comentários, como o quão importante isso é quando estamos trabalhando em grupo. Suponha que aqui eu tenha tantas páginas para um determinado quadro ou página específica, que eu também possa dividir o trabalho para elas. Suponha que eu apenas clique nesse quadro específico aqui nesta caixa. Agora, quero compartilhar isso e dizer a ele que você trabalha nesse arquivo específico apenas para isso, basta clicar nele. Como você pode ver, agora isso está vinculado à seleção, e vou apenas marcar neste. A partir daqui, posso convidá-los novamente e eles podem começar a trabalhar nisso. Esse é outro recurso oferecido pela Figma para uma melhor opção de fácil utilização Agora, espero que vocês tenham entendido como você pode realmente compartilhar seu arquivo e adicionar um comentário, e como isso é muito útil para nós. Espero ver todos vocês no próximo tutorial, onde aprenderemos como você pode usar colunas e notas em seu arquivo Figma Espero ver todos vocês no próximo tutorial. O próximo tutorial é útil. Espero que vocês consigam criar sua própria aplicação no final deste tutorial. Cuide de todos e até a próxima aula. 10. Colunas e grades: Olá a todos e bem-vindos a mais um tutorial no Figma aqui Este é o capítulo número nove e vamos aprender sobre as colunas e grades. Nesta aula, aprenderemos como você pode usar as colunas e a grade. Como você pode mudar a cor, a intensidade, a medianiz da coluna. Eu também vou dizer a vocês o que é isso. Além disso, como você pode usar isso para obter um tamanho ou ter uma ideia de como criar sua página da web. Não vamos perder tempo, vamos começar com este tutorial. Agora, estou aqui no meu espaço de trabalho, ou no lugar para onde vou, basicamente, agora. Primeiro, vou criar uma moldura. Aqui vocês podem ver que, para criar uma moldura, vou criar camadas ou basicamente duas páginas, uma será para desktop. Para isso, eu tenho um tamanho de desktop padrão, mas vocês também podem pesquisar e ver qual é o tamanho de desktop mais usado. Desktop para o qual você está basicamente usando esse arquivo. Vou escolher um tamanho específico, que é 1.440 em 2024. Vou pegar isso. E aqui você pode ver que eu tenho essa moldura, que acabei de selecionar na Delegacia OK. Eu tenho o texto de um aqui. Agora, vou criar, da mesma forma, outro quadro, mas em uma página diferente. OK. Vou apenas adicionar outra página. Vou nomear isso, ****, esta página principal. Vou chamar isso de página móvel. Eu tenho esse aqui. Também vou tentar criar uma moldura. E vou seguir meu preceito. Qual lado devo escolher? Vou levá-lo para o telefone 14 pro max. Vou clicar nesse aqui. Vocês podem ver que eu tenho minha moldura aqui. OK. O que eu quero fazer aqui é colocar algumas colunas. Ok, aqui logo abaixo do layout automático, você pode ver uma opção chamada Grade de layout O que vou fazer é clicar neste lado positivo aqui. Como você pode ver aqui, você pode ver que eu tenho uma grade, mas para mim eu não quero fazer uma grade, quero obter algumas colunas aqui. Eu tenho as configurações da grade de camadas logo no lado esquerdo e clicarei aqui. Em vez da grade, vou escolher as colunas daqui. Depois de escolher a coluna aqui, você pode ver que a contagem é 12. Mas para mim, a contagem é cinco. Mas eu quero 12 12 porque esse é o tamanho padrão ou o tamanho da coluna, a contagem de colunas para a maioria dos designs gráficos. Eu só quero escolher o padrão. Se eu quiser mudar algumas cores, também posso mudar essas cores a partir daqui. Ok, eu posso realmente aumentar ou diminuir tudo isso a partir daqui se eu quiser alterar a largura e a altura. E aqui você pode ver a sarjeta. Calha, basicamente o espaçamento entre as duas colunas. Ok, aqui, essa parte do mapa, que está em branco, é chamada de sarjeta Se eu aumentar o tamanho, suponha que se eu colocar 40 aqui, você pode ver que mudou a partir daqui. Da mesma forma, se eu diminuir para dez, você pode ver que mudou. Diminuiu a partir daqui. Também posso escolher como quero que minha coluna seja. Eu o quero na esquerda, no centro direito, ou quero que ele se estenda por toda a minha página Esse é o melhor formato. Da mesma forma que vou chegar aqui na página móvel, chegarei à minha nota de camada. Ao clicar nessa opção de adição, selecione as colunas aqui. Aqui também, vou pegar 12. Essa dezena. Este eu vou apenas mantê-lo atualizado. OK. A partir daqui, também posso alterar a intensidade da cor, se eu pegar. 50 aqui, você pode ver o quão profunda minha cor se torna. Eu só quero que a cor fique desbotada. E ficará bem se eu também colocar algum tipo de animação ou algo assim. Agora, o que vou fazer é criar mais molduras. Suponha que, por exemplo, eu crie um quadro aqui. Eu tenho uma moldura aqui. OK. Eu também vou pegar outro daqui. Está bem? Vou apenas preencher isso com uma cor profunda. Deixe-me pegar algo escuro. Ok, a partir daqui. Essa será a coluna aqui. Vou criar outro quadro. A partir daqui, vou pegar o corpo principal. A partir daqui, vou me mover até aqui. OK. Eu também tenho minha moldura aqui. Vou pegar outra moldura pequena aqui. Ok, selecione isso. Vou selecionar este. Vou duplicar essa camada aqui. Vou levar isso aqui também. Também aqui. Agora eu tenho essas quatro colunas. Eu também posso colocar algumas cores se eu quiser. Suponha que aqui eu queira colocar uma cor diferente. Suponha que eu queira preto escuro. Eu também quero colocar este em uma cor diferente aqui. Nesse caso, talvez eu queira Algo em verde. Eu estarei aqui também. Algumas cores diferentes. Vou escolher minha cor de acordo. Vermelho aqui, em azul. Aqui, alguma coisa aí, sim, está tudo bem. Esse layout será feito da mesma forma. Eu vou para a próxima página. A partir daqui, vou tirar uma moldura. A partir daqui, vou escolher cisne. Depois disso, vou criar uma página principal aqui. Esse será o corpo. Suponha que eu queira criar um folheto ou um folheto. Eu posso começar assim a partir daqui. OK. Agora vou criar mais quatro caixas daqui de volta. Crie uma caixa daqui até lá com a minha antiga. Vou apenas copiar isso. Que cópia antiga está aqui? Eu tenho quatro caixas aqui. Todas as quatro caixas. Se eu tentar selecionar de uma vez, suponha que eu queira selecionar somente esses quadros específicos. A partir daqui, eu posso clicar sobre isso, isso e isso. Agora, o que vou fazer é mudar a cor deles da maneira que eu quiser. Ok, suponha que eu dê a eles essa cor, mas vou mudar a opacidade da cor Vocês podem ver, eu também posso alinhá-lo do jeito que eu quiser Agora, os quatro quadros estão aliados. Vou colocar uma cor aqui também, essa camada aqui. Vou colocar outra cor para essa camada específica aqui. Você pode ver que eu criei isso usando o verde. Você terá um conhecimento sobre a ideia, esteja ela no centro ou não. Eu criei essa camada aqui para esta página móvel. Além disso, tenho um tamanho específico ao qual me refiro ou prefiro. Eu posso fazer o trabalho daqui também, daqui. Mais uma vez, deixe-me mostrar a vocês, se eu vier aqui, selecione esta moldura aqui. Eu tenho 12 colunas. Ok, agora o que eu quero fazer é adicionar margens. Está bem? Ao lado. Também quero adicionar margens E por que adicionamos margens é basicamente quando criamos uma página da web ou uma página de aplicativo para celular, às vezes não queremos que as coisas principais ou o tópico principal fiquem de lado Ok, então, basicamente, para colocá-los no meio, temos uma boa ideia ao usar esta coluna onde colocar aquela coisa em particular. Basicamente, para isso, usamos tudo isso e vamos aumentar a margem a partir daqui. Ok, deixe-me pegar dez. E se eu clicar em OK, não há muita diferença para mostrar para vocês. Vou levar cerca de 19 aqui. Você pode ver que essas são as margens aqui nas laterais, as brancas ****** Essa é a margem e esse é o principal espaço de trabalho do telefone. Suponha que eu esteja apenas trabalhando aqui nesta parte específica e editarei, ou farei o design aqui nesta parte específica. Depois disso, se eu achar que, ok, eu só preciso cortar esses lados, eu posso cortá-los também. Essa também é uma medida de precaução que é bastante útil e pode ser bastante útil ao trabalhar nisso Deixe-me voltar novamente, volta aos nossos 12. Leve isso aqui novamente. Espero que vocês tenham entendido isso. Já falei para vocês sobre o alongamento e vocês já conhecem a coloração. OK. Se eu for para esta página de texto, agora eu tenho aqui 12 colunas, da mesma forma. Vou apenas selecionar tudo isso a partir daqui. Essa. Agora, o que eu posso fazer é clicar aqui, mudar esse para dez. Clique em Enter. Se você me perguntar qual é o tamanho perfeito para uma sarjeta? não há tamanho Basicamente, não há tamanho que você queira colocar ou qualquer número, mas para isso, você pode colocar algo como 50 a 20. Isso é bastante normal, que pode ser usado aqui. Se eu mostrar a vocês a margem, ok, se eu colocar 60 aqui, vocês podem ver nas laterais, eu também tenho as margens, ok? Então, eu posso excluir meu trabalho deste lado e trabalhar sozinho nessa coisa. Deixe-me voltar e fazer isso, pois tenho 12 aqui. Se eu quiser reduzir para seis aqui, eu tenho seis. OK. Eu também posso trabalhar aqui. Só preciso ter certeza de que estou alinhando todas as minhas coisas corretamente OK. Se eu colocar isso deste lado aqui, este deveria estar em algum lugar aqui. Esse branco aqui no site. Eu posso colocar isso. Sim. Isso basicamente parece bom. Essa é uma das maneiras pelas quais podemos realmente alinhar uma página da web tão bem É assim que podemos. Deixe-me criar outra página onde mostrarei a vocês o I'll just it as grid. Vou criar uma moldura ou vou apenas pegar a predefinição a partir daqui. Deixe-me pegar uma predefinição de desktop ou, sim, de desktop. Se eu clicar nesta opção de classificação do layout aqui, aqui você pode ver que eu tenho a nota do layout. A partir daqui, posso realmente mudar o padrão de oito para dez, basicamente. Nos desenvolvedores de telefones Android e Apple, desenvolvedores de aplicativos, eles geralmente fazem esse tamanho, ok? Mas se você trabalha para uma empresa, está trabalhando para criar seu próprio aplicativo. É basicamente baseado na sua necessidade, ok? Do jeito que você quiser, você pode realmente consultar muitos designers de UI UX. Não é que você precise ser um programador para se tornar um designer de UX Você pode começar do Básico, aprender e depois aplicar seu trabalho a um nível avançado. Ou você pode trabalhar em um nível superior, onde entregará seu trabalho ao seu cliente. Depois de fazer um bom trabalho de design, você pode ganhar um bom dinheiro aqui Como você pode ver, eu também posso mudar a cor. Aqui, o mesmo acontece com a rosa, do jeito que eu te mostrei. Colunas. As fileiras também virão assim. Da mesma forma que as colunas. Não vou explicar isso a vocês em detalhes, mas aqui você pode simplesmente trabalhar assim e colocar formas diferentes de acordo. Está bem? Veja, como você pode ver, se eu estiver indo para os lados, posso ver uma luz vermelha que mostra isso se eu estiver indo para fora. Ok, eu deveria ter isso também em mente. Aqui você pode ver isso. Além disso, posso criar tamanhos diferentes. Se eu diminuir o zoom, posso mostrar a vocês meu trabalho aqui. Espero que vocês tenham entendido essa classe sobre coluna verde e também rosa, pois é bastante semelhante ao uso da coluna. Espero que vocês conheçam a utilidade das colunas e do verde e, dessa forma, elas ajudam você a criar design Espero ver todos vocês. No próximo tutorial aprenderemos como você pode basicamente criar ou usar cores em sua página da web ou em seu design. Por exemplo, quais são as diferentes maneiras de usar sua cor? Quanto mais cor ou equilíbrio obtivermos, melhor. Nossa página da web estará lá. Aprenderemos sobre a inspiração, o conta-gotas e como você também pode criar basicamente uma paleta de cores Depois disso, também aprenderemos como você pode criar gradientes. Por fim, vou contar a vocês como criar e usar estilos de cores Em particular, o aplicativo em que sua página da web terá uma aparência muito atraente e muito atraente e espero ver todos vocês na próxima aula. Cuide de todos. Adeus 11. Inspiração de cores, paleta de cores e ferramenta conta-gotas: Olá a todos e me dêem as boas-vindas a mais um tutorial no Figma Nesta aula, aprenderemos de onde todos podem se inspirar em cores. Por exemplo, vou mostrar a vocês os sites de onde você pode obter cores correspondentes. O que deve ser usado em sua página da web ou no desenvolvimento de aplicativos. Ok, depois disso, vou mostrar vocês como vocês podem criar sua própria paleta de cores E também sobre a ferramenta Eyedropper. Suponha que você tenha uma imagem ou qualquer outra imagem e, a partir daí , queira retirar as cores que estão sendo usadas na sua página da web ou no design da interface do usuário. Vou mostrar a vocês como você pode tirar essas cores específicas a partir daí e também sobre alguns sites. Não vamos perder tempo e vamos começar com esta aula. Aqui vocês podem ver que estou de novo na minha página inicial. Na última aula, mostrei a vocês como você pode usar a grade e a coluna aqui, vou usar a mesma coisa, apenas essas cores. Vou dizer a vocês se vocês querem combinar cores em seu trabalho ou em seu projeto de onde tirarão essa inspiração. Também vou dizer a vocês como você pode realmente usar. Vou simplificar a forma como podemos extrair cor de uma tela específica ou um objeto e soltá-la onde você quiser. Vamos aprender sobre tudo isso nesta aula. Também vou mostrar a vocês como podemos criar modelos, como eu já disse. Vamos começar aqui. Eu tenho o último slide da aula. Vou me mudar um pouco para trás. Agora, o que vou fazer é mostrar a vocês alguns sites de onde você pode obter suas cores. Este é o primeiro, que é o Autobl. O outro é Color.com, ok? Aqui você pode ver muitas combinações de cores daqui. Seja qual for a cor que você quiser, você pode simplesmente pegá-las E você também pode ver aqui que sabemos como colocar um código. Se eu vier daqui, posso simplesmente digitar esse código específico. Suponha que eu goste dessa cor daqui. Ok, esse. Ok, para isso, acabei clicar aqui e foi copiado Vou entrar na minha página do Fima e selecionar. Vou apenas colar Enter. Vocês podem ver que eu tenho essa cor nesta página. Da mesma forma, se eu escolher este aqui, quero mudar a cor. Eu posso fazer isso da mesma maneira, mas por enquanto não quero usar a cor de fundo. Parece muito feio. Vou voltar, aqui estou eu de volta com meu fundo branco aqui. Estes são alguns dos sites onde eu posso escolher essas cores de cores, e também a coisa toda a partir daqui. Suponha que eu queira colar tudo isso. Eu também posso pegar esses para ter uma boa ideia. Nós podemos usar isso. Ok, aqui você pode ver algumas das cores populares que estão sendo usadas. Aqui podemos selecionar cores para o nosso projeto. Aqui você pode ver a cor popular do mês do ano e também as mais populares de todos os tempos. Ok, aqui eu tenho uma coleção de cores aleatória. Está bem? Não há paletas na coleção, pois eu adicionei nenhuma, mas posso adicioná-la Ok, se eu quiser apenas uma cor aqui, posso baixar essa imagem em particular. E aqui você pode ver que ele foi baixado. OK. Agora eu posso pegar essa cor específica daqui, e eu posso simplesmente usá-la no meu trabalho. OK. O próximo site, que é o Color.com aqui, é uma inspiração de cores mais avançada para Ok, daqui podemos ver a roda de cores. Aqui eu tenho todas essas cores. Eu posso reajustá-lo de acordo com minha necessidade. Se eu gosto de algo sobre isso, eles estão me mostrando os gradientes disso, em qual deles ficará bem com qual cor Aqui eu posso colocar essas coisas específicas aqui, você pode ver. E também posso selecionar quais cores eu quero. Se eu quiser explorar as cores primárias, posso explorar as cores primárias. Suponha que eu queira pegar ou adicionar isso à minha biblioteca. Eu posso simplesmente clicar aqui. Este foi adicionado à minha biblioteca. Se eu quiser baixar um Jpeg, também posso baixar o Jpeg aqui Só para ver essas cores. Essas são algumas das coisas. Por que essa cor continua? Bem, aqui você pode ver uma imagem aqui em cima, ok, lá eles mostraram a combinação de cores de como ela ficará no seu trabalho. O mesmo acontece aqui, pois você pode ver a imagem e como ela combina. Depois disso, se eu for para a opção Tendências aqui também, vocês poderão ver quais são as tendências de todas as cores no momento Para design gráfico, essas cores são bastante úteis para a moda. Essas cores são ilustrações úteis para o design de UI UX. Quais cores eles usam basicamente para coisas arquitetônicas, para design de jogos, sabores selvagens, podemos escolher aqui Não é que, se essas cores forem usadas apenas para design de interface de usuário, não significa que eu tenha que escolher essa cor também. Suponha que eu goste de algo dessas cores. Também posso baixar todas essas cores. OK. Se eu estiver salvando alguma coisa na minha biblioteca, posso visualizá-la aqui. Este é um tema de cores muito bom na minha biblioteca. Eu tenho esses dois temas de cores. Ok, agora se eu voltar aqui, se eu tentar tirar este, vocês podem ver que vou ter a cor, deixe-me ver, em um lugar motocromático Aqui você pode ver a paleta de cores. Se eu salvar essa cor, ela será adicionada com sucesso à minha biblioteca aqui. Você pode ver, ok, se eu quiser ver isso, experimente, como vai ficar. Complementar, dividido. Complementar. A divisão dupla. Eu não gosto dessa vantagem de opções, mas vocês também podem usá-la. São diferentes tons de cor. Vamos ver como podemos usar essa cor aqui. Suponha que eu venha até aqui, quero colocar uma imagem daqui. Como você já pode ver, eu também tenho uma roda de cores aqui. Deixe-me colocar essa roda de cores aqui em cima e trazê-la para dentro. Então aqui eu tenho a roda de cores. E suponha que eu tenha meu trabalho específico aqui. Ok, eu vou escolher este, mantê-lo em um canto. Vou manter essa roda de cores aqui e meus diferentes temas. Logo ao lado disso, vou ver os downloads e selecionarei esses três. E eu vou abrir aqui. Você pode ver que eu tenho um aqui e outro aqui. OK. E vou diminuir o tamanho um por um aqui. Eu tenho um conjunto de cores que posso usar. Vou diminuir um pouco o zoom, pois está aqui. Eu também tenho essas cores. Eu também tenho isso. Suponha que eu queira mudar a cor das minhas caixas aqui, ok? E sempre certifique-se de ter suas cores em um lado, não se confundir ao trabalhar no projeto final. Ok, eu tenho tudo isso aqui, ok? Eu quero animar essas coisas a partir daqui. O que vou fazer é que, se eu selecionar essa opção, chegarei a essa opção de cor aqui embaixo. Vou apenas clicar aqui. Esta é a ferramenta Eye Dropper. Ok, suponha que eu queira mudar a cor a partir daqui e tenha selecionado a ferramenta Eyedropper Aqui você pode ver uma cor específica. Eu tenho essa caixa em particular. Depois de escolher qualquer cor daqui, essa cor específica da caixa será alterada. Deixe-me pegar essa cor e selecionar essa caixa aqui. Agora eu quero selecionar essa cor da caixa também. Para isso, clicarei duas vezes ou simplesmente clicarei aqui com minha cor ou com a ferramenta conta-gotas Vou selecionar essa cor específica para as caixas. Eu vou escolher uma cor daqui. Para isso, novamente, isso, antes disso, selecionarei essa caixa. Eu retiro sua seleção de ferramentas. Algo no escuro. Mais uma vez, eu também caio. É assim que você pode realmente colocar a cor desejada. É assim que podemos fazer alguns trabalhos aqui nesta página. Essa é uma maneira fácil de como você pode completar seu site e você não ficará confuso, pois terá uma boa ideia sobre quais cores você e o que tudo pode ser usado aqui em seu projeto específico, ok? Antes disso, precisamos apenas garantir que a página da web tenha a aparência do meu aplicativo . Assim, vocês podem colocar essas cores. Suponha que você tenha um conjunto de cores, mas queira apenas modificá-las. Nesse caso, aqui, você pode ver aqui, você pode escolher a opacidade Além disso, eu tenho essa opção logo acima aqui. A partir daqui, você pode realmente conferir essas cores da maneira que quiser. Eu só vou voltar. Também vou mostrar a vocês como podemos realmente criar uma paleta de cores Ok, suponha que eu tenha os conjuntos de cores aqui. Ok, o que vou fazer é pegar algumas caixas retangulares Primeiro, vou pegar essa pequena caixa retangular, copiar essa, copiar essa outra, copiar isso também Eu tenho quatro caixas aqui com meu conta-gotas. Eu vou vir aqui, pegar essa cor em particular aqui. Eu quero, eu tenho essa cor aqui na minha caixa agora. Eu quero criar tons diferentes dessa cor específica. Sim, acho que vou deletar esse também, e esse também. Agora, vou copiar essa caixa em particular daqui. Como você pode ver, depois de duplicar, também tenho essa cor aqui Daqui eu vejo a sombra que eu quero. Da mesma forma, posso criar outra caixa. Agora, essa cor é copiada aqui na minha caixa de filme. Além disso, eu tenho a mesma cor. Agora eu posso escolher um tom diferente daqui. Novamente, continuarei o processo de quantos tons dessa cor específica você deseja. Agora vou para uma versão mais leve aqui. Eu tenho uma paleta de cores específica, como você pode ver. OK. Da mesma forma, se eu quiser criar uma paleta específica para esse marrom Ok, é marrom. Sim, é, mas algo marrom claro e não muito escuro. Está em algum lugar no meio. Da mesma forma que vou fazer é pegar minha caixa retangular. Vou criar uma caixa retangular aqui. Coloque qualquer cor usando esta. Ou suponha que eu pegue algo em azul. Ok, vamos pegar verde. Ok, eu tenho esse verde aqui. Agora, venha aqui e copie a caixa novamente. A partir daqui, posso escolher um tom diferente desse verde. Copie este e também mude a tonalidade a partir daqui. Ok, agora eu tenho um pouco mais claro, e novamente clico em Shift em A. Ok, eu vou vir aqui e agora pegar outra versão mais clara dessa cor. Aqui eu mostrei a vocês como você pode criar uma paleta de cores Se você quiser salvar essa cor específica, vocês podem salvá-la. Suponha que eu queira salvar isso ou copiar isso para outra página. Vou acessar esta página aqui, vou colar isso aqui. A partir daqui, posso realmente diminuir o tamanho deste. Mas aqui, novamente, você pode ver que eu também tenho as cores. Espero que vocês tenham entendido como vocês podem realmente se inspirar em cores em todos os sites. E como você pode criar uma paleta de cores. E também o uso do colírio Eye, dois tipos de colírios semelhantes a diferentes cores desde um objeto secundário até sua coisa final ou seu projeto final. Como eu já disse a vocês, vamos aqui para o color doo.com. Este é nível bastante avançado de roda de cores, ou de onde podemos escolher Suponha que você tenha uma imagem específica com você, ok, nessa imagem você gosta do contraste de cores dessa imagem em particular. O que você pode simplesmente fazer é trazer arquivo específico ou esse arquivo específico ou aquela imagem específica e carregá-lo daqui. O que ele fará é extrair a cor dessa imagem específica e salvar como uma paleta de cores para você Ok, se você quiser usar essa cor específica, deixe-me selecionar um arquivo aqui. Ok, aqui você pode ver que eu tenho esse logotipo da Fib. Ok, vou clicar nesse figal. Vou abrir isso. E aqui você pode ver que eu tenho essa paleta de cores aqui. Eu posso realmente salvar essa cor. Ok, aqui você vê. Se eu quiser criar uma nova biblioteca e salvá-la, posso fazer isso. Mas se eu quiser salvá-lo daqui, eu posso salvar isso também. Ok, esse é o colorido . Vou guardar isso. Se eu quiser pegar o brilhante aqui, dá para ver como fica, o mudo. Existem maneiras diferentes de como podemos realmente selecionar isso. Se quiser substituir a imagem, você também pode substituí-la . Deixe-me voltar a este a partir desta imagem. Além disso, se você quiser extrair gradiente, que é nossa próxima aula, mostrarei a vocês como podemos criar gradientes e opções diferentes abaixo Está bem? A partir daqui também você pode ver os diferentes gradientes deste, ok? Suponha que eu venha aqui e, a partir daqui, selecione o nível de gradiente a partir daqui Está bem? Se eu quiser copiar este, posso copiá-lo daqui. Como vocês podem ver, eu também tenho essa opção. Se eu quiser salvar esse gradiente, também posso salvar esse gradiente partir daqui, vocês podem ver a taxa de contraste entre essa cor, a cor do texto e a cor de fundo que está mostrando . Essa cor específica continuará com esse fundo específico se você quiser usar tudo isso e também pode experimentar cores diferentes a partir daqui. Essa é uma ferramenta bastante útil que podemos realmente usar para melhorar nosso trabalho e ter uma ideia melhor sobre contraste de cores e cores. Ok, então aqui vocês podem ver. E também me deu a entender que, sim, essa combinação de cores pode ser usada entre um texto e um plano de fundo. É assim que podemos realmente usar isso. Se eu quiser importar cores, já mostrei a vocês o que fazer. Eu quero salvar esse. Eu posso salvar isso daqui. Ok, de onde eu possa ver, vou para minhas bibliotecas. Da minha biblioteca, terei as cores daqui. Agora que selecionei essa cor específica, essa, posso simplesmente baixar esta versão Jpeg, acessar meu aplicativo Fib e, a partir daqui, colocar aquela imagem específica. Está bem? Se eu clicar aqui, abrirei esse arquivo específico. Se eu quiser colocar isso aqui em cima, posso colocar isso daqui. Como você pode ver, eu tenho essa combinação de cores. OK. Se eu quiser mudar o tamanho, também posso mudar esse tamanho. OK. Como você pode ver, eu tenho isso. Ok, a partir daqui. Essa é uma forma de somar cores. Suponha que eu leve este aqui. Troque de controle, mova minha cor. Ok, aqui vou pegar as cores. Além disso, vocês podem usar esses temas específicos a partir daqui. Se eu for para a opção Explorar, novamente, crie a opção a partir daqui. Também posso pegar esse código de cores daqui. Eu posso simplesmente copiá-los e colá-los no meu aplicativo de feedback. Espero que vocês tenham entendido como usar cores em seu trabalho específico. Espero ver todos vocês na próxima aula. Aqui nesta lição, nós realmente aprendemos sobre três coisas. A primeira é de onde você pode obter sua inspiração de cores. Eu mostrei o site para vocês. E a próxima coisa que aprendemos sobre a ferramenta conta-gotas é como podemos reduzir sua cor Ok, e também aprendemos sobre como criar sua própria paleta de cores Na próxima aula, aprenderemos como você pode basicamente trabalhar com seu gradiente. como você pode criar seu próprio gradiente e quais são as diferentes maneiras de fazer isso Ok, então até lá, tomem cuidado e espero ver todos vocês no próximo tutorial. 12. Projeto de curso 1: Olá a todos. Agora é a hora de criar sua própria paleta de cores E este é o projeto de classe número um em que vou conferir sua paleta de cores Gostaria de entender como está seu senso de coloração, faremos isso. Vamos para a aula. Vou mostrar a vocês todas as etapas que você precisa seguir. E se você está ficando confuso, meu tutorial já está lá. Você pode consultar esses tutoriais. Vamos ver tudo o que você precisa fazer. A primeira coisa é que você precisa criar uma forma de retângulo usando a ferramenta de forma Depois disso, depois de criar essa forma retangular específica, você pode escolher qualquer cor de sua preferência na caixa de cores que mostrei para vocês Na opção de preenchimento, você pode obter sua caixa de cores e preenchê-la com qualquer cor. Depois disso, você duplicará a caixa de cores preenchida e continuará alterando a intensidade da cor para criar uma paleta Caso contrário, você também pode escolher cores diferentes que combinem bem umas com as outras. Continue esse processo específico. E no mínimo, você precisa escolher quatro cores, ok? Ou quatro caixas retangulares. Isso é o mínimo se vocês puderem fazer mais, muito mais felizes Se vocês puderem mostrar isso. Depois disso, selecione todas essas camadas e transforme-as em grupo. A última etapa será exportar esse grupo específico em seu sistema e enviá-lo em nossa seção de projetos que eu possa ver seu projeto e tentar entender seu nível de conhecimento em colorir. Ok, eu vou mostrar vocês como vocês podem fazer isso também. Aqui eu tenho minha figma. Vou pegar essa caixa retangular e vou fazer uma caixa aqui. Está bem? Como você pode ver neste canto, depois de criar uma caixa, eu tenho minha caixa de cores. Essa é a etapa número dois. Deixe-me vir aqui. Ok, eu vou escolher este, e deixe-me pegar algo sombrio. Ok, agora o que vou fazer é clicar em Alt, vou duplicar essa camada novamente. O que eu vou fazer é vir aqui, pegar algo mais leve novamente. Com tudo, vou apenas duplicar essa caixa de cores novamente. Agora eu vou vir aqui. Vou continuar esse mesmo processo de novo e de novo. Ok, eu vou criar cinco próximos aqui, este. E escolha essa cor, ou eu vou pegar aqui. Ok. Então, aqui eu criei meu próprio painel de cores. Aqui vocês podem ver que eu tenho quatro caixas retangulares e essas coisas são individuais A partir daqui, o que vou fazer é agrupar essas coisas e vir até aqui nesta opção de exportação, clicar nela. A partir daqui, vocês podem ver, primeiro eu vou vir aqui e vou selecionar um grupo. Ok, eu posso nomear esse grupo como paleta de cores. Salve isso, agora vá para exportar. Agora, quando você vier exportar aqui, poderá ver a prévia. Ok, eu quero pegar este no formato Jpa. Vou aumentar esse. Agora vou exportar essa paleta de cores e salvá-la aqui nos meus downloads Ok, agora eu já salvei a paleta. Deixe-me ir aqui e ver, onde está minha paleta de cores Agora vocês podem ver que eu tenho a paleta de cores aqui no formato J Pac Isso é tudo que vocês precisam fazer aqui nesta aula. Neste projeto de aula, espero que vocês enviem seus trabalhos. Estou realmente interessado em ver uma ideia ou ver seu conhecimento sobre colorir e criar suas próprias paletas de cores Espero ver o trabalho. Então, cuidem de todos. 13. Gradientes: Olá a todos, e bem-vindos a mais um tutorial no Figma Então, agora estamos no capítulo número 11 e aprenderemos sobre os gradientes. Isso, como podemos brincar com todas as suas cores, como você pode criar seus próprios gradientes. Além disso, mostrarei a vocês um site de onde você pode obter os gradientes Did. A partir daí, você pode copiar esses códigos de cores e colá-los em seu aplicativo Não vamos perder tempo aqui. Como todos podem ver, agora estou em um dos espaços de trabalho aqui Vou mostrar a vocês como vocês podem começar a fazer gradientes. Eu vou ficar por cima. Vou apenas criar uma moldura. Vou pegar um telefone à prova de tamanho 14, manter isso deste lado e duplicar essa camada Sim, agora eu tenho quatro molduras aqui, como todos vocês podem ver aqui, já que criei quatro páginas agora. Agora vou pegar essa ferramenta de retângulo a partir daqui e criar uma caixa retangular que vou usar para criar OK. Antes disso, quero mostrar a vocês um site de onde você pode obter qualquer tipo de gradiente que possa usar em seu trabalho Ok, este é o site, o gradient.com A partir daqui, basicamente você obtém diferentes tipos de gradientes e como você pode Você pode simplesmente vir aqui, clicar nessa cor específica, copiar e colar esse código específico em seu aplicativo. Ou se você quiser adicionar isso à sua biblioteca, basta clicar aqui. Ok, eu tenho esse, mas vou mostrar a vocês como vocês podem fazer o seu próprio. Vou novamente para a minha aplicação facial. Agora que eu tenho este e este está selecionado, virei aqui na opção de preenchimento e, abaixo de Phil, vocês podem ver que uma opção de gradiente está E uma vez que eu clico nessa opção de gradiente aqui, você pode ver que eu tenho uma linear, radial, ok E angulo, uma vez que eu coloque a cor, vocês serão capazes de ver qual é a diferença E este é em forma de diamante, ok? Suponha que eu use principalmente o linear no radial. Está bem? Deixe-me pegar essa primeira cor a partir daqui. Deixe-me tirar o azul. Ok, de agora em diante, deixe-me tentar pegar qualquer coisa em rosa, como você pode ver aqui. E como eu posso ajustar o posicionamento é se eu partir daqui, basta mover este aqui. Você pode ver que eu posso realmente manter, ou posso realmente colocar onde a cor ficará. Essa é uma forma de criarmos nosso próprio gradiente aqui. Na verdade, podemos colocar mais de duas cores a partir daqui. Ok, se eu clicar aqui, agora também tenho razão aqui. Ok, suponha que eu queira adicionar um aqui. Agora vou escolher talvez uma cor diferente. Eu posso escolher assim. Essa, vou me aprofundar um pouco aqui. Você pode ver que eu tenho meu gradiente. Você pode adicionar isso o quanto quiserem. Ok, você pode adicionar mais aqui. Suponha que agora eu tenha esse. Vou mudar a cor disso. Vou colocar este no topo. Vou manter esse no meio. Agora eu posso mudar a cor a partir daqui. Como você pode ver, há um, uma vez que eu venha aqui, talvez eu pegue algo semelhante daqui. Se eu quiser escurecê-lo, eu posso escurecê-lo. Se eu quiser apenas iluminá-lo, eu posso iluminá-lo. Tudo depende de mim. Deixe-me falar um pouco sobre o lado mais leve. Este eu vou levar para este lado. Sim, meu gradiente está pronto agora. Como você pode ver aqui, eu tenho gradiente. Se eu clicar em Enter, vocês podem ver que eu tenho meu gradiente pronto Se eu quiser copiar este, vou apenas copiar. Primeiro, leve-o para uma página diferente, cole este aqui. Você pode ver que eu tenho o tamanho do gradiente aqui. Assim, podemos criar nosso próprio gradiente. Deixe-me também mostrar a vocês todas as outras três opções aqui. Vou voltar novamente para a mesma página. E eu virei aqui, criarei outra caixa retangular a partir daqui Ou deixe-me tomar outra forma. Ok, deixe-me anotar o círculo. Ok, vou criar um círculo a partir daqui. Como você pode ver, eu tenho meu círculo aqui. Sim, vou manter essa no meio. Agora, o que vou fazer é entrar nessa opção de campo, ir até minha biblioteca aqui, ir para o radial E agora vou selecionar uma cor diferente. Ok, deixe-me pegar vermelho aqui. Eu quero colocar um pouco de desbotamento amarelado aqui. Ok, a partir daqui eu selecionei este. Agora vá para o amarelo. E aqui você pode ver do lado de fora do vermelho, eu tenho minha descoloração amarelada Vou trazê-lo para algum lugar aqui no meio. Sim, vou trazê-lo aqui. E também posso adicionar cores diferentes. se eu clicar aqui e talvez eu queira um verde, o que eu farei é selecionar o verde aqui. Ok, eu posso selecionar verde em algum lugar aqui. Sim, eu posso. Agora, se eu quiser expandir, também posso expandir. OK. Eu posso tirar essa cor verde daqui. Vou fazer com que fique escuro. Eu também vou aumentar esse. Ok, aqui, eu vou manter isso aqui. Sim, você pode fazer radial da maneira que quiser aqui. Você pode ver se eu também aumento o tamanho a partir daqui. É assim que você pode brincar com todas as cores daqui. Ok, essa é uma maneira de você brincar. Da mesma forma, também posso adicionar cores diferentes. Também aumente o tamanho. Talvez eu queira aumentar o tamanho a partir daqui também. Ok, se eu quiser fazer um arco, eu também posso fazer um arco como este se eu quiser aqui. Acabei de fazer um gradiente radial. Como vocês podem ver, espero que estejam entendendo o que estou tentando mostrar a vocês aqui. Agora, deixe-me pegar um polígono aqui, deixe-me criar um polígono em cima Deixe-me trazê-lo para o centro. Depois disso, o que vou fazer é selecionar isso. Agora vou mostrar a vocês sobre o angular, ok? Primeiro, vou escolher a cor daqui. Agora vou selecionar essa, talvez essa cor, na verdade. Onde eu quero que essa cor esteja? Como você pode ver, eu selecionei essa cor aqui. Talvez eu adicione outra caixa neste canto. Vou aumentar esse. Eu posso escolher qualquer cor que eu quiser. Ou suponha que eu já tenha uma cor específica, que eu quero colocar aqui. Usando essa cor, eu posso vir aqui, eu posso escolher essa cor. Minha ferramenta de conta-gotas aqui, você pode ver que há uma mudança Está bem? Da mesma forma, posso adicionar uma cor diferente aqui. Ok, deixe-me adicionar essa cor agora. Deixe-me esclarecer isso também. Talvez a combinação de cores não seja muito boa, mas para mostrar isso a vocês, qual é a diferença entre isso daqui? Eu também tenho algumas opções, como X e também RGBs, se eu criar outra caixa aqui ou se eu criar outra forma Ok, deixe-me pegar apenas uma caixa retangular, vou criar a partir daqui Escolha este. Deixe-me mexer um pouco com minha ferramenta manual para que vocês possam ver isso corretamente. Está bem? Eu tenho isso agora. Vou deixar esse aqui embaixo. Está bem? Vou pegar o angular aqui. Você pode ver como podemos basicamente trabalhar com isso. Está bem? A partir daqui. Ou mude a cor aqui, vocês podem ver. Eu posso adicionar uma cor diferente aqui. Suponha que eu queira pegar um verde aqui, você pode ver uma coloração esverdeada Ok, deixe-me ampliar essa caixa em particular aqui. Aqui, você pode ver que, se eu adicionar uma cor diferente aqui, posso selecionar uma cor diferente conforme eu quiser. Ok, deixe-me pegar isso neste final, cor verde. Essa é uma forma de como podemos realmente trabalhar nesse aplicativo. Ok, da mesma forma, vocês podem possuir gradiente. Depois de fazer isso, basta clicar em Enter quando estiver pronto com o gradiente. Eu também mostrei a vocês como você pode basicamente levar isso para outra camada. Se eu quiser copiar, vou para essa camada. Vou colar esse aqui. Como você pode ver, eu quero que seja do mesmo tamanho que este. Para isso, vou clicar aqui, Escala. Eu quero escalar um. Agora, novamente com a ferramenta de movimentação, selecionarei isso, aumentarei o tamanho. Assim. Sim, agora eu quase tenho o mesmo tamanho, mas também posso ver a largura e a altura daqui, 270-93-2022 Sim. Agora, ambos têm o mesmo tamanho. Como você pode ver, estou me juntando a ambos. Esses são os dois gradientes que eu criei aqui. Novamente, vá para essa página específica. Deixe-me mostrar a vocês a última opção daqui, que é a forma de diamante. Ok, aqui está como ficará a forma do diamante. Mas o angular estava bem. Deixe-me tomar outra forma a partir daqui. Deixe-me pegar uma estrela. Deixe-me criar uma estrela aqui. Mantenha isso no meio. Agora, coloque uma estrela selecionada, escolha o campo. Deixe-me pegar um pouco de cor marrom aqui. Neste ponto, deixe-me pegar uma cor amarela. OK. Sim, cor amarela daqui. E da mesma forma, também posso adicionar cores diferentes daqui, se eu quiser. Está bem? Bem no meio, se eu quiser adicionar um pouco de vermelho ou se estiver apenas assumindo toda a cor, é assim que podemos basicamente ajustar a coloração. Você pode ver que está desaparecendo , pois terá a forma de um diamante OK. Aqui, se eu apenas estender o tamanho desta, o tamanho da estrela, se eu quiser escalá-la, posso escalá-la da maneira que eu quiser. Deixe-me reduzir isso. Sim, agora esse está no meio. Selecione isso novamente aqui. Ferramenta de seleção ou movimentação, diamante linear. E clique aqui, vocês podem ver como realmente fica. Ok, aqui você pode ver um pequeno ponto. Usando isso, posso simplesmente estender a linha. Ou eu também posso colocar este aqui. Aqui neste slide, eu quero adicionar uma cor. Ok, deixe-me pegar este, e aqui vocês podem ver a coloração da minha estrela. Clique em Enter e aqui você tem seu gradiente de estrelas. Ok, eu também quero selecionar isso ou copiar isso para minha página de desktop aqui, Colar. Sim, eu também tenho esse gradiente. Diminua o tamanho. Sim, eu também tenho esse gradiente. Espero que vocês tenham entendido como criar seu próprio gradiente e diferentes tipos de gradiente E eu também mostrei a vocês como você pode brincar com seu estilo de gradiente Essas são as quatro opções que vocês podem usar , mas para mim, eu uso a linear e a radial, principalmente a partir daqui Eu também posso ver o quanto eu quero, quão profundas e suaves eu quero essas cores. OK. Eu também posso escolher a partir daqui. OK. Então espero que essa aula tenha sido clara. Na próxima aula, vou contar vocês como vocês podem basicamente criar seus próprios estilos de cores ou criá-los e usá-los em seu arquivo. Ok, vou mostrar isso para vocês, então fiquem atentos a essa aula e espero ver todos vocês no próximo tutorial Então, agora vamos para nossa última lição de colorir. Cuide de todos e até todos vocês. 14. Estilos de cores: Olá a todos, e bem-vindos a mais um tutorial no Figma Agora estamos no capítulo número 12 e aprenderemos sobre estilos de cores, como criar estilos de cores diferentes salvar aqueles que podem ser usados em seu projeto. Ok, então veremos como todos vocês podem fazer isso e nomear esses estilos específicos que não confundam. Mostrarei como salvar sua cor, como aplicar e, uma vez você também possa editar essas cores salvas, mostrarei como editá-las e depois de alterar essa cor específica no painel de edição, como ela mudará todos os lugares onde você aplicou essas cores. Veremos todas essas coisas aqui nesta aula em particular. Não vamos desperdiçar o tipo L. Vamos começar com essa aula em particular agora. Novamente, no projeto anterior ou na página aqui, ok, vou mostrar a vocês aqui que, como criar uma cor e como salvar esse estilo específico, será fácil para vocês usarem a mesma cor no próximo projeto também. Vamos criar outro quadro aqui. Ok, vou vir aqui na opção de moldura, vou pegar a mesma que já tenho aqui. Está bem? Vou guardá-lo em algum lugar aqui com minha ferramenta manual. Vou mover este que vocês podem ver corretamente aqui. OK. Agora, o que vou fazer é acessar a ferramenta de forma, criar uma caixa retangular aqui Outro aqui. Vou copiar este, colocá-lo aqui, manter o espaçamento e o espaçamento. Sim, agora este está no centro. Agora, o que vou fazer é ter esse tipo de cores aqui, como você pode ver. Deixe-me levar esse arquivo também para algum lugar ao lado daqui. Esses são meus estilos de cores, que eu tenho, como basicamente posso salvar essas cores e aplicá-las em qualquer lugar que eu quiser. Vou mostrar a vocês que, uma vez que eu mude qualquer cor a partir daqui, se eu quiser editar depois salvá-la e aplicar esses estilos, essa cor específica será alterada em todas as minhas páginas, onde tudo o que eu apliquei. Deixe-me mostrar a vocês um exemplo de como tudo bem, eu tenho essa cor específica aqui. Como você pode ver na caixa de campo, eu já tenho essa cor, ok, ou esse gradiente. O que vou fazer é clicar nesses quatro pontos na opção de campo Venha aqui, clique nessa nova variável, e você pode ver que eu tenho um estilo aqui, ele está me dizendo para nomear essa cor em particular, ok? Vou salvar este como gradiente um, ok? E se eu quiser adicionar algum tipo de descrição, também posso adicionar. Isso é feito como se muitos de nós estivéssemos trabalhando na mesma aba, eu quero que eles saibam ou que, para qual coisa ou parte do design, eu quero usar essa cor. Suponha que eu queira usar essa cor para botões. Tabs, eu posso simplesmente clicar aqui, eu posso clicar aqui E aqui você pode ver que eu tenho a cor do gradiente aqui. OK. Agora eu tenho esse gradiente de cor aqui, e agora isso está selecionado O que eu quero fazer é aplicar essa cor em todas essas caixas também. Ok, vou clicar aqui, vir aqui, vir para essa opção Feel, preciso vir aqui. E aqui você pode ver essa cor específica está sendo salva aqui. Está bem? Agora, se eu clicar aqui, você pode ver por que essa cor está colada aqui Da mesma forma, também posso fazer isso com toda essa cor. Na biblioteca, eu só tenho uma cor e posso selecionar essa cor como a cor primária e criar um estilo. Então pegue essa cor. Vou salvar essa como cor secundária. Vou aqui novamente, nomeie isso como a segunda cor. Agora, se eu chegar a essa caixa em particular, escolha essa ou essa. Agora vou colocar minha cor primária aqui. Vou colocar a cor secundária aqui. Agora eu tenho isso. Venha aqui e coloque a cor primária aqui. Vou colocar a cor secundária. Eu também vou fazer aqui, deixe-me manter este como gradiente. Clique em Enter. Venha comer essa torta aqui, novamente, eu estou cometendo o mesmo erro de novo e de novo. Aqui, vou colocar a cor secundária, ok? Agora, como eu selecionei essas cores específicas daqui, como você pode ver, ela é preenchida com essas três cores daqui. Agora, se eu quiser mudar essa cor, suponha que eu tenha essa. Na verdade, posso renomeá-lo. E aqui está a opção de edição de cores. Está bem? A partir daqui, posso editar a cor. Agora, se eu vier aqui e mudar essa cor ali, você pode ver onde quer que eu tenha aplicado aquela cor em particular, ela está sendo alterada. E agora eu posso clicar aqui. Como você pode ver , está sendo alterado. O mesmo acontece com este aqui. Na opção de cor secundária, quero alterar todas as cores. Eu quero mudar o sombreamento aqui, você pode ver que eu posso mudá-lo daqui Aqui você pode ver onde apliquei essas cores que podem mudar para a cor primária. Eu quero mudar essa cor também. Vou pegar algo rosa ou adicionar um gradiente ou escolher essa cor Sim, espero que vocês tenham entendido como podemos realmente usar essas cores e salvar seus estilos de cores, como podemos basicamente trabalhar com tudo isso. Uma vez que eu mudei essa coisa aqui, você vê aqui naquela caixa em particular também, você pode ver que a cor mudou porque essa também é uma caixa retangular e eu realmente tirei essa cor daqui Agora você pode ver que a cor primária é essa, secundária é essa e o gradiente é essa Está bem? Da mesma forma, podemos adicionar diferentes tipos de cores. Nomeie-os e coloque a descrição do sistema. Você também pode usá-lo em outras páginas. Suponha que agora eu esteja nesta página, mas ainda tenho meus estilos de cores específicos aqui. Como você pode ver, eu também tenho os estilos de cores aqui. Agora, também manualmente, vocês podem vir aqui criar estilo. Ok, deixe-me criar um estilo de cor, ou eu tenho essa opção. Vou falar diretamente sobre como criar um novo estilo de cor. Eu posso selecionar a cor aqui. Suponha que eu queira salvar isso. Quero nomear isso como Cor de fundo do plano de fundo. Também posso salvar esse estilo específico a partir daqui. Também posso mudar a cor de fundo a partir daqui. Se eu for, posso simplesmente selecionar este. Clique em Enter. Suponha que eu esteja aqui, selecione essa cor. Com isso, também posso alterar minha cor de fundo, mas não quero usar nenhuma cor de fundo por enquanto, pois ela não ficará bem nesta página. Espero que vocês tenham entendido essa aula de como salvar seu estilo e também como criar sua própria cor. Mude-a em um só lugar e ela será alterada espero que esta aula tenha sido clara. Agora, vocês podem aplicar isso em seu arquivo específico ou na página da web do seu aplicativo onde quiserem. Espero ver todos vocês na próxima aula, onde aprenderemos sobre imagens, como máscaras e como podemos realmente recortar nossas imagens Além disso, podemos basicamente colocar uma imagem aqui em nosso espaço de trabalho Então, espero ver todos vocês no próximo tutorial. Até lá, cuide-se e adeus. 15. Como usar imagens no Figma: Olá a todos, e bem-vindos a mais um tutorial sobre Figma Então, este é o capítulo número 30, e eu vou mostrar a vocês como você pode usar imagens neste aplicativo específico, como você pode importar, quais são as opções e quais são as maneiras que podemos fazer. Também vou mostrar a vocês como você pode realmente fazer algumas edições básicas em sua imagem. Vou mostrar isso a vocês. E também aprenderemos se eu tenho uma forma específica ou um lugar específico na minha página já pronta. Então, em vez de cor, como posso preencher esse lugar com uma imagem. Então, vou mostrar a vocês tudo isso aqui nesta aula em particular. Então, vamos começar. Agora, como você pode ver, estou de volta à página onde tenho uma moldura aqui. Agora, o que vou fazer é clicar em Control plus Shift plus. OK. E depois de clicar aqui, aqui você pode ver que esta é a tecla de atalho de como você pode fazer que sua imagem apareça na tela para carregar ou importar imagens em seu trabalho específico Então, o que vou fazer é clicar neste e abrir a partir daqui. E como você pode ver, eu tenho minha imagem no meu mouse. Então, aqui eu posso escolher o tamanho da imagem. A partir daqui, posso escolher esse tamanho específico, como quero colocar minha página. Então, aqui, como você pode ver, eu coloquei por página aqui. E há outra maneira de controlar a mudança K. E a partir daqui, o que eu posso fazer é simplesmente arrastar essa coisa em particular e soltar Mas aqui, se eu fizer isso, o tamanho da imagem, não consigo manter a partir daqui. Mas se eu quiser manter o tamanho da imagem , vou voltar. É assim que podemos colocar a imagem. Também podemos clicar aqui na opção de forma para e, da forma para opção, colocaremos imagem e vídeo. E quando eu chegar aqui, se eu quiser selecionar qualquer imagem, eu posso fazer isso. E suponha que eu queira importar mais de uma imagem ao mesmo tempo, então vou selecionar assim. Aqui você pode ver, eu vou ficar até aqui. E agora eu posso abrir isso, e aqui você pode ver, agora eu tenho 11 imagens no meu mouse. Então, o que eu vou fazer é criar o tamanho, do jeito que eu quiser. Então, aqui vou colocar outro outro. Assim, eu posso realmente mudar ou colocar tantas imagens diferentes ao mesmo tempo. E se eu clicar em Control Shift, aqui vocês poderão ver que ele crescerá proporcionalmente Está bem? Mas eu não preciso disso. Vou pegar isso, isso e isso aqui. Ok, está feito. Então, vou mostrar a página inteira para vocês. E aqui você pode ver que eu tenho minhas imagens aqui. E como são tantos arquivos, vou colocá-los dentro do quadro, selecionar e escolher a seleção de quadros. Agora aqui você pode ver que isso está embaixo de uma moldura, ok? Então esse é outro quadro. Vou manter isso de um lado. Portanto, esse é o método de atalho ou a melhor maneira colocar sua imagem Ou, se você tiver um vídeo, também poderá importá-lo. Então, deixe-me voltar aqui novamente. Então, vou entrar nesta página em particular aqui, sair um pouco. Clique neste. E traga-o aqui na cama. OK. Então agora eu tenho isso. E aqui, o que basicamente podemos fazer é selecionar essa camada em particular, suponha que eu queira selecionar essa camada inteira, essas duas camadas aqui. Este é um quadro. Deixe-me ver o que todos os outros fizeram isso. OK. Eu tenho essa moldura. Então, sim, agora, que vou fazer é tirar essa imagem em particular daqui e colocar uma imagem minha. Então, para isso, o que vou fazer é, depois de selecionar essa imagem, chegar a essa opção de preenchimento clicar nesta. E aqui você pode ver que eu tenho a opção de imagem. Então aqui você pode ver que eu selecionei essa imagem de opção. E agora, se eu simplesmente voltar ou clicar em Enter. Agora eu tenho esse. Agora, se eu for para esta opção de preenchimento. Aqui você pode ver que eu posso escolher uma imagem. Suponha que eu queira colocar essa imagem lá. Vou clicar em abrir. Aqui você pode ver que eu tenho a imagem logo abaixo disso Eu tenho minha imagem aqui. Como você pode ver, eu tenho. E aqui, novamente, vou tentar criar uma forma. Suponha que eu pegue um círculo, faça um círculo aqui, clique nessa opção de preenchimento, imagem, quem é uma imagem daqui. E talvez eu pegue isso, eu abra este. Aqui você pode ver que eu também tenho minha imagem aqui no centro. Então, é assim que você pode basicamente colocar sua imagem dentro de um ícone específico. Então, vou deletar este. Então é assim que você pode fazer isso. E agora, novamente, chego a essa opção de preenchimento aqui. Então, como eu tenho uma imagem aqui, vou escolher Então, como eu tenho esta, eu também posso alterar a exposição desta, também o contraste. Do jeito que eu quero, eu posso realmente fazer. Isso não é photoshop, mas podemos fazer algumas das edições básicas da sua imagem aqui Se eu quiser aumentar a temperatura, posso fazer isso e vou usar esse período um pouco OK. Você pode ver ou. Destaques e sombras. Isso é bom. Estou feliz com isso. E aqui eu também posso girar a imagem em 90 graus a partir daqui, como você pode ver, eu posso girar isso, então vou mantê-la assim Agora, espero que vocês tenham entendido essa aula de como você pode realmente colocar a imagem da maneira que quiser. Então, aqui você também pode animar o texto ou, se quiser colocar qualquer caixa de texto em algum lugar aqui, como se quiser colocar e escrever como apresentado pela Figma E eu vou clicar lá fora. Leve isso em cima. Sim. Eu posso fazer isso assim. E aqui você pode ver que eu só consigo selecionar essa caixa. E eu também posso alterar o tamanho da caixa. Agora você sabe como brincar com esse aplicativo específico na opção de imagens. Está bem? Então, na próxima aula, aprenderemos sobre como você pode mascarar uma imagem e como você também pode criá-la em particular. Então, espero ver todos vocês no próximo tutorial e se cuidar e me despedir 16. Plugins de máscara, recorte e imagem: Olá a todos e bem-vindos a mais um tutorial no Figma Agora estamos no capítulo número 14 e aprenderemos como você pode usar mascaramento, recorte e alguns plug-ins de imagem Vou mostrar a vocês de onde você pode obter imagens gratuitas para uso comercial ou apenas para trabalhar nelas, para praticar onde você pode obter imagens gratuitas de alta qualidade. Vou mostrar isso a vocês. Mostrarei como você pode basicamente cortar uma imagem de maneiras diferentes e como podemos fazer o mascaramento básico nesse aplicativo específico Vamos começar com essa aula agora que estou aqui na minha página. A primeira coisa que vou fazer é exportar a imagem daqui da mesma forma que fiz na última aula Também posso fazer aqui. Você pode ver nessa opção de retângulo, eu posso entrar e clicar aqui e vou escolher uma imagem, ok? Basicamente, para cortar a imagem, o que fazemos é fazer isso partir daqui, se você quiser que esta cresça proporcionalmente Nesse caso, posso simplesmente clicar na mudança de controle e é assim que podemos, e também posso voltar aqui novamente. Pegue essa mesma imagem e suponha que agora eu esteja aumentando o tamanho da imagem. Essa é uma maneira de cortar, basicamente. Agora, isso é suficiente se você quiser cortar proporcionalmente Nesse caso, o que vou fazer é clicar em Control ou clicar em Shift aqui. Você pode ver que eu posso realmente mover a imagem proporcionalmente, ok? Vou selecionar este aqui. Agora eu também posso recortá-lo daqui. Aqui você pode ver que a sensação é boa o suficiente e a alimentação também é boa. Mas se eu cortar aqui, você pode ver a opção de recortar, como eu posso cortar esta imagem se eu escolher imagem aberta a partir daqui Como você pode ver, eu sou capaz de reduzir isso. Deixe-me colocar essa imagem em cima delas. Caso contrário, vamos mover este. Talvez aqui, seno ou eu apenas tenha pego aquela sombra Agora, novamente, eu virei aqui e ajustei o espaço de trabalho. Agora venha para esta imagem. Agora, aqui você pode ver nesta opção de corte, eu posso basicamente cortar de uma extremidade como esta ou posso fazer isso das pontas também, se eu quiser proporcionalmente Nesse caso, eu posso fazer assim. Aqui você pode ver que ele será cortado proporcionalmente a partir de todos os ícones de pontos azuis Eu posso basicamente recortar essa imagem. Também posso alterar a exposição do contraste e essa é o contraste, a saturação da temperatura da imagem, não quero colocar nenhum destaque de tonalidade, isso fica melhor e a sombra será demais OK. Agora você sabe como fazer isso. Se eu clicar em Entrar aqui, você pode ver que eu faço minha imagem aqui, que acabei de recortar. Você também pode fazer máscaras a partir daqui. Para isso, deixe-me tirar outra imagem. Vou tirar essa imagem em particular daqui. Como você pode ver, eu o tenho no meu. Vou manter essa imagem até aqui. Agora, o que posso fazer é supor que eu faça um retângulo. Está bem? Acabei de fazer esse retângulo em particular e quero colocá-lo em cima Ok, além disso , vou apenas mascará-lo, ou vou manter este aqui. Agora selecione essas duas camadas. Agora, o que vou fazer é selecionar os dois novamente, vou apenas mascarar isso. O que vou fazer é mudar a opacidade para zero. Entre aqui, eu aceito. Tem a imagem ou qual é o problema aqui? A partir daqui, posso alterar a opacidade. Eu vou voltar. Não quero mascarar, mudar a opacidade a partir daqui. Zero. Agora eu vou poder ver, esta é a página de imagens que eu tenho aqui. Como você pode ver, essa é a imagem, é assim que eu posso mascarar. E eu vou mostrar a vocês a outra maneira de como podemos fazer isso. Vou deletar a foto daqui. Eu tenho um aqui. Vou deletar isso também. Vou tirar outra foto. Agora, o que vou fazer é voltar aqui novamente para a opção ou simplesmente clicar na mudança de controle. A partir daqui, vou tirar outra imagem. Vou abrir esse. Agora eu tenho essa imagem. Vou colocar assim. Esse gin é o quê? Eu vou fazer essa imagem daqui, vou tomar forma aqui. Eu tenho minha caixa retangular aqui. Eu tenho essas coisas aqui. Ou primeiro vou deletar essa imagem. Pegue esse daqui. Deixe-me definir o tamanho aqui. Agora eu vou vir aqui a partir daqui. Quero colocar uma imagem aqui. Você pode ver, escolher uma imagem. Vou abrir esse aqui, na verdade. Agora vou poder aumentar o tamanho. Suponha que eu use a elipse em vez disso. Está bem? E eu vou mantê-lo aqui. Coloque essa imagem daqui. A partir daqui, abra. Eu coloquei essa imagem daqui e virei aqui e usarei a opção de recortar a partir daqui. Basicamente, posso escolher todas essas coisas de como podemos realmente trabalhar aqui. Então, eu posso realmente ajustar isso um pouco mais se eu for a opção de recorte já vim um pouco aqui. Essa é boa. Posso simplesmente clicar aqui e , como você pode ver no ícone interno, eu também tenho a imagem. Ok, essa foi outra maneira de fazer isso, recortar sua imagem e a original ou a maneira de usar essa opção é primeiro o que eu preciso fazer é selecionar uma forma Deixe-me pegar um triângulo a partir daqui. Agora vou trazer isso aqui. O que eu quero fazer é colocar isso embaixo da imagem Ok, aqui. Vou tirar este abaixo da imagem. Ok, eu tenho esse polígono. Sim, aqui você pode ver a imagem no topo. E eu tenho a forma do lado de fora. Vou trazê-lo para o centro. Eu também vou adicionar apenas a altura, ok. Sim, isso é luta. Agora o que eu vou fazer é depois de selecionar essas duas camadas aqui, como você pode ver, eu posso clicar nessa opção, ok? Mas se eu clicar somente nesse aqui, ok, terei uma coisa diferente aqui. OK. Vou clicar em ambos. Vou usar isso como uma máscara aqui. Você pode ver que esta é uma máscara. Agora, eu também posso mudar a configuração daqui, venha aqui, assim. Basicamente, posso cortar a imagem da maneira que eu quiser. Ok, essa é uma maneira de fazer isso. Se eu clicar em Enter, vocês podem ver se é a imagem ou esta é a forma dentro da qual eu tenho a imagem onde usei essa opção como máscara aqui na minha camada Além disso, vocês podem ver que eu tenho um grupo de máscaras. Também posso renomeá-lo da maneira que eu quiser. Vou escrever Masking one. Vou clicar em Entrar aqui. Você pode ver que uma vez que eu seleciono este, tudo isso está sendo selecionado. Mas se eu clicar particularmente neste aqui, eu também posso ajustar, como vocês podem ver, eu posso ajustá-lo assim se eu quiser ajustar o polígono Eu posso ajustá-lo assim. Está bem? Portanto, também podemos ajustá-lo a partir daqui, de acordo com a maneira que quisermos. Quais são todas as formas que assumimos? Ok, depende de tudo isso. A mesma coisa que também podemos fazer em muitos quadros predefinidos. Está bem? Mas para colocar todos esses ícones na minha página da web, basicamente fazemos formas em vez de uma moldura inteira. Ok, agora eu mostrei a vocês como você pode mascarar, como você pode cortar de maneiras diferentes Suponha que agora, se eu pegar um texto daqui, ok, eu quero escrever dentro desse texto primeiro. Eu virei aqui. Ou com minha mão também. Vamos ver quais são todas as outras imagens que temos aqui. Ok, vou selecionar essa imagem. Traga-o para algum lugar aqui. Agora, vou apenas aumentar o tamanho. Vou aumentar o tamanho até o máximo que vocês podem ver aqui. Tive que mover o lado. Agora com o meu tipo também, o que eu posso fazer é digitar, ok, deixe-me pegar a cor branca a partir daqui. Digite a ferramenta, selecione, certo? Ok, então talvez eu escreva como, esta é a página de efeitos do Adobe After After. Então, vou escrever Adobe After Effect. Ok, agora o que vou fazer é selecionar todo esse texto a partir daqui. Vou apenas selecionar o todo. Agora, o que eu vou fazer é primeiro vir e mudar a cor. Vou torná-lo branco. O que vou fazer é aumentar o tamanho desse texto em particular. Ok, para isso também preciso selecionar as duas mudanças de controle. Então esse botão aqui, que é o botão Full Stop. Ok, vou clicar aqui, depois no botão Full Stop aqui, você pode ver que esse é um dos atalhos de como você pode realmente trabalhar aqui. Está bem? Ou apenas aumente o tamanho da fonte. Isso parece bom, não ruim. Agora o que eu posso fazer é vir até aqui, eu posso apenas ver este texto. Está bem? Se eu clicar nesta página azul aqui em cima, mude a cor ou altere a opacidade Amplie um pouco. Só quero dizer que a qualidade da imagem não é muito boa. Mas, para mostrar a vocês , um exemplo seria bom. Vou colocar esse texto embaixo dessa moldura. Agora, eu quero pegar esse. Onde está basicamente a imagem? Vamos ver essa imagem. Eu quero colocá-lo embaixo desta. Agora você não consegue ver. O que eu vou fazer agora é mudar essa mudança para zero. Agora, se eu selecionar os dois, use o mascaramento aqui. Agora esse texto, eu vou trazê-lo para o topo aqui, trazer para este canto. Vou ajustar um pouco o tamanho. Talvez 48 esteja bem. Sim, vou tentar ajustar isso para trazê-lo aqui. Sim, aqui está tudo bem. Agora, selecionarei as duas opções e clicarei nessa opção aqui no topo. OK. Sim, uma coisa que esqueci, preciso levar essa por cima Ok, a imagem em cima da minha escrita. Agora, se eu clicar nessa máscara aqui, vocês poderão ver isso Agora eu tenho essa opção de mascaramento aqui. Ok, então eu posso ver por baixo, ok, se eu estou usando a máscara É assim que ficará se eu possuir a máscara. Esse efeito isso vai me dar aqui. É assim que realmente funciona. Espero que vocês tenham entendido essa aula sobre mascarar e cortar Espero ver todos vocês no próximo tutorial, onde aprenderemos sobre restrições e efeitos antes de encerrar esta Deixe-me também mostrar a vocês como podemos realmente baixar imagens gratuitas e também como podemos realmente colocar essas imagens em seus plug-ins. Para isso, o que vou fazer é acessar meu Chrome a partir daqui. Vou pesquisar no Splash aqui. Eu tenho um site de onde posso obter imagens gratuitas, mas se você estiver trabalhando para uma empresa ou algo parecido, basta pedir que eles vejam o perfil e também o que pode ser usado e o que não pode ser usado. Está bem? Se você quiser se conectar com eles, você pode basicamente se conectar com eles. E se você quiser segui-los, você também pode segui-los daqui, você pode ver todas essas imagens aqui. Você é capaz de ver, ok, suponha que eu tire isso, deixe-me tirar uma foto. Depois de clicar na imagem aqui, você pode ver todas as informações básicas como quantas visualizações elas obtiveram e também quantos downloads. Se você quiser denunciar isso por acaso, pode fazê-lo aqui. Você também pode ver quando é publicado, em qual câmera e tudo é usado. Outro site que você pode usar são os pixels. Se eu for para pixels a partir daqui, daqui você pode ver, você pode pesquisar as imagens aqui. E você também pode ver a licença. Como o que todos podem usar. Para quais propósitos? Aqui, todas as fotos e vídeos, pixels, são de uso gratuito. A atribuição não é necessária. Como se você não precisasse mencionar o nome da pessoa ou das pessoas que criaram isso enquanto o mostra em seu trabalho, mas só precisamos dar crédito a um fotógrafo ou pixels não são necessários, mas sempre apreciados. Não é necessário que você tenha que fazer isso, mas se você quiser, esse é um bom gesto a partir daqui Você também pode modificar essas fotos, vídeos a partir de pixels, tentar ser criativo e editá-los como quiser. Se você estiver fazendo algo identificável, as pessoas podem não parecer mal iluminadas ou ofensivas, como se você pudesse simplesmente colocar a imagem delas e fazer uma edição ruim Suponha que você não possa simplesmente usá-lo para os propósitos errados que tudo isso diz. Agora, se eu voltar para o meu Fagin, vou deletar tudo isso Exclua este também. Agora eu vim aqui na minha comunidade Figma. Vou voltar e vou pesquisar três imagens. Vou pegar os plugues daqui. Vocês podem ver que eu tenho todas essas coisas aqui e aqui. Eu também tenho a opção de unsplash. Está bem? Se eu quiser apenas experimentar este em particular, posso experimentar este em particular. Como você pode usar se eu executar este. Vamos ver o que vai aparecer aqui. Venha para esses plug-ins, e agora eu também tenho meu toque aqui Como todos podem ver, agora eles estão abrindo o arquivo. É assim que vai ficar aqui também. A partir daqui, basicamente, você pode ver diferentes predefinições. Você pode pesquisar alguns dos arquivos editoriais. Se eu clicar nesta aqui, você pode ver que esta imagem está sendo baixada automaticamente. Ok, eu inseri uma imagem, como você pode ver. Agora eu posso simplesmente deixar isso de lado. Volte e eu vou caber. Vou ficar com este. Volte e eu posso alimentar o tamanho de acordo com minha necessidade. Ok, mude e eu posso diminuir o tamanho dessa imagem. Então, novamente, volte para dentro. É assim que minha foto ficará. Se eu colocar isso no plugue. Essa é uma das maneiras mais fáceis de como podemos fazer isso. Da mesma forma, se eu voltar para a comunidade aqui, você pode ver que também tenho outros aplicativos de onde posso simplesmente baixar imagens. OK. Então aqui eu tenho o gerador ebay da Free Pick Você também pode usar isso. Ok, a partir daqui eu posso adicionar esse plug-in. Espero que vocês tenham entendido essa aula sobre como mascarar e soltar. Além disso, você pode adicionar algumas das melhores imagens e imagens usadas livremente. Eu mostrei o site para vocês e agora vocês também podem baixá-lo em seu plug-in, espero ver todos vocês na próxima aula. 17. Componente e efeitos: Olá a todos e bem-vindos a mais uma aula sobre Figma Aqui nesta aula, vou ensinar a vocês como criar uma composição e como usar diferentes tipos de efeitos neste software específico. Então, aqui vou ensinar a vocês como criar um botão e depois como você pode usá-lo no mesmo projeto, em uma página diferente. Também vou mostrar a vocês como você pode salvar um efeito e usar diferentes tipos de efeitos para diferentes tipos de visualização. Ok, então vamos começar com essa aula. Agora, aqui novamente, estou no espaço de trabalho. E a partir daqui vou mostrar vocês o componente para isso. Primeiro eu venho aqui, pego um círculo e, como você pode ver, eu tenho esse círculo. Com esse componente, eu posso realmente criar botões. Ok. Vou digitar, vou aumentar esse 226. Selecione este. Vou deletar isso. Leve de volta novamente. A partir daqui, vou aumentar o tamanho 40, 45. Agora vou digitar, talvez eu precise de um pouco maior. Vou escrever um apelo. Eu posso selecionar o que eu quero. Puxei a alavanca de controle e esta chave. Basta clicar nele até atingir o tamanho específico. E isso é bom. Ousado. Selecione isso novamente. Vou colocar esse entre o círculo. Agora, também posso adicionar qualquer cor a esse círculo. Suponha que eu queira adicionar uma cor vermelha ou talvez verde. Eu posso fazer isso daqui. Ok, agora o que eu posso fazer é, como eu tenho dois componentes aqui, eu posso selecionar os dois a partir daqui. Como você pode ver, eu tenho a opção de criar um componente e a tecla de atalho para isso é Control plus A plus K. Eu posso clicar nele ou clicar nessa opção aqui Como você pode ver, uma vez que eu tenho esse componente, ele está sendo salvo. Agora, deixe-me criar outra página. Ok, vou criar um novo arquivo de design depois de criar um novo arquivo de design aqui. Se eu for para a opção esperada aqui, se eu vier e aqui, se eu tentar ver, tudo bem, se eu explorar a biblioteca, sim, eu cometi um erro aqui. Não funcionará em um novo arquivo, ok. Ele não funcionará em um novo arquivo, mas esse componente aparecerá no mesmo projeto. Mas se eu tentar criar um novo projeto, suponha que a partir daqui, se eu tentar criar um novo arquivo de design, eu teria esse componente. Mas no mesmo projeto, em páginas diferentes, você poderá ver isso. Deixe-me mostrar a vocês aqui. Eu tenho este e criei a página número dois. Na página número dois, se eu chegar aos ativos aqui, tenho o componente local com shift. Na verdade, posso diminuir isso. Mudança de controle, eu posso basicamente diminuir o tamanho desta. Novamente, aumente isso desse jeito. Ok. Mudança de controle. Sim, isso é bom. É assim que eu posso fazer isso. Se eu quiser diminuir o tamanho, também posso diminuir o tamanho da maneira que eu quiser aqui. Eu tenho isso, suponha que eu queira diminuí-lo. A partir daqui, eu posso diminuí-lo. Ok. Espero que você tenha entendido essa aula aqui. Agora vamos aprender sobre os efeitos. Ok, tipo como podemos criar efeitos diferentes para isso. Novamente, vou tomar outra forma a partir daqui. Deixe-me pegar um polígono. Agora eu tirei um polígono daqui. Eu selecionei isso. Agora, o que vou fazer é vir aqui na opção de efeitos. Aqui você pode ver a opção de sombra projetada. A partir daqui, eu posso basicamente mudar a sombra. O eixo X foi alterado, agora o eixo Y. Aqui você pode ver. Como você pode fazer isso. Coloque cores diferentes. Está bem? Você também pode colocar cores diferentes aqui. Além disso, você também pode escolher a profundidade da cor. Está bem? Aqui, se eu pegar isso ou X, também posso fazer com tudo isso. Está bem? Essa é uma maneira de fazer isso na mesma. Deixe-me mostrar a vocês sobre a sombra interior. Essa é a sombra interna. Da mesma forma que você pode ver, você pode realmente alterar os eixos x e y. Ambos são bem parecidos. Aqui você pode ver o desfoque. Bem, se você quiser mudar a cor, você pode mudar a cor. A partir daqui. Haverá uma sombra interna antes de ser ofuscada, mas na sombra está dentro do meu objeto Ok. Agora vamos ver essa terceira opção como o desfoque da camada. Está bem? Se eu quiser desfocar essa camada em particular, quanto eu quero desfocá-la, eu realmente faço assim, ok Lá, você pode ver o efeito de desfoque aqui. Você pode ver o efeito de desfoque novamente Se eu selecionar essa e ir para a última opção aqui, que é o desfoque de fundo, ok, eu também posso escolher Está bem? Eu também posso fazer isso a partir daqui. Está bem? Mas deixe-me tirar uma foto só para mostrar a vocês daqui. Talvez eu tire essa mesma imagem aqui. Agora, vou manter essa imagem em algum lugar aqui, pois tenho essa imagem. Em vez disso, deixe-me pegar um retângulo. O que vai acontecer é que agora, se eu fizer um retângulo em cima disso, venha aqui, vá até a opção de venha aqui, vá até a efeitos que eu posso fazer é desfocar o fundo Bem, não isso, basicamente. Vá para Drop Shadow. Vá até esse preenchimento, basta alterar a opacidade para dez. Ok, aqui vocês podem ver que eu tenho minha imagem aqui, deixe-me mover esse componente para algum lugar aqui. Agora, o que você pode fazer é que ele tem uma moldura própria. Agora, quando chego aqui, posso basicamente mudar o enquadramento A cor da imagem também mudará, mas isso só está acontecendo por baixo a partir daqui Selecione isso, vou colocar um pequeno efeito aqui. Eu também posso escolher cores diferentes. Está bem? Talvez eu aumente isso um pouco. Agora, espero que vocês possam ver a moldura apenas na minha foto Às vezes, pode parecer bom, mas depende de você qual projeto você está basicamente fazendo. Essa é uma forma de como podemos jogar com efeitos aqui. Espero que vocês tenham entendido. E se eu tiver dois ou três efeitos aqui e não quiser ver o efeito, posso simplesmente clicar neste. E não quero que meu efeito mostre esse em particular. Se eu quiser adicionar algum efeito, basta clicar nele. Depois de clicar nisso, essa configuração específica será salva lá. Ok, espero que vocês tenham entendido sobre essa aula em particular. próxima aula será a última deste tutorial, onde ensinarei a vocês como exportar sua imagem a partir desse aplicativo de feedback. Cuide de todos. Espero ver todos vocês na próxima. 18. Exportando imagens: Olá a todos e bem-vindos ao tutorial sobre Figma Então, essa será a última aula do tutorial do Figma E se vocês fizeram isso até agora, espero que tenham gostado da aula e obrigado por assistirem a esta aula. E o último capítulo será como você pode exportar essas imagens do aplicativo específico e diferentes formas e formatos de exportá-las Se você quiser exportar o quadro inteiro, você pode fazer isso se quiser exportar algum item específico. Basicamente, vou mostrar imagens para vocês aqui, vou mostrar tudo isso para vocês. Vamos começar com essa última aula de Figma aqui. Eu tenho meu espaço de trabalho. Eu quero selecionar esta imagem específica daqui, somente esta eu quero exportar. Nesse caso, o que vou fazer é vir aqui na opção de exportação. Clique aqui embaixo, vocês podem ver em qual formato eu vou usar, este aqui. Eu tenho o formato PNG, JPG, SVG e o formato PDF Se eu quiser ter uma prévia que estou exportando, posso ver aqui: Ok, estou apenas diminuindo o tamanho deste Isso é o que estou exportando para o meu sistema. Vou apenas exportar essa coisa em particular daqui. Venha para a opção de exportação. Agora o que vou fazer é selecionar os dois X, OK, esta é apenas a resolução. Se eu estiver visualizando em um computador ou PC com alta RAM , rápido ou rápido, posso selecionar este, que me dará uma alta resolução dessa imagem. Em vez de PNG, vou pegar um JPG e exportar esse quadro específico. Eu posso selecionar o nome que eu quero dar. Vou escrever isso como arquivo Figma. Agora eu posso selecionar onde eu quero colocar isso, salvar isso aqui. Agora, se eu acessar este aqui, meu Explorador de Arquivos, vou acessar meus downloads a partir daqui. Você pode ver que eu tenho esse arquivo. Deixe-me ver como realmente parece. Este é o que eu tenho apenas a partir da opção de imagem. A mesma coisa. Deixe-me fazer isso a partir daqui. Ok. Suponha que eu queira pegar um x, ok? Ou 0,75 x. Exporte o quadro, salve este, venha e veja isso também Como eu baixei isso aqui, você pode ver que o tamanho é menor aqui, mas lá era dois x, agora é 0,75 aqui Se eu ampliar também a minha imagem, a qualidade da imagem é bem melhor. Mas aqui, da mesma forma, se eu chegar a esse arquivo, se eu ampliar, dá para ver que a qualidade não é tão boa em dá para ver que a qualidade não é tão comparação com aquele outro, ok? Essa é uma maneira de fazer isso. Para o meu PC, eu basicamente pego dois x um, ok? Você também pode fazer três ovos, quatro ovos. Se você quiser alterar a largura aqui, você também pode alterar a largura, diferentes métodos de uso disso. Se você quiser salvar essa configuração de exportação, basta clicar aqui e adicionar qualquer sufixo daqui, como se você quiser usar 512 Ok, vou exportar esse arquivo 512 e exportar os dois quadros aqui Acesse os downloads e salve isso. Deixe-me voltar novamente a este arquivo aqui, vemos os downloads serem substituídos. Sim, eu vou ter esses por aqui. Ok. Como eu tenho isso, vou clicar aqui. Você pode ver essa imagem, ou talvez seja essa. Ok, aqui você pode ver que mudou a largura dessa imagem. Neste aqui, eles mudaram a altura da imagem. Espero que vocês tenham entendido como podemos basicamente usar ou exportar sua imagem desse aplicativo específico, então você também pode usá-la em outros lugares. Esse foi o último. Espero que tenham gostado e aprendido todas as coisas que expliquei e agora estejam familiarizados com essa opção específica ou com esse aplicativo específico. Continue praticando com seu design para que quanto mais você usa, quanto mais trabalha nisso, mais aprende sobre tudo Eu também dei a vocês alguns dos projetos de classe de projeto que vocês enviarão no painel do projeto Estou realmente ansioso para ver o que vocês farão. Por favor, envie seu trabalho e deixe-me ver quanto vocês aprenderam com este tutorial. Cuide-se e adeus a todos. 19. Projeto de curso 2: Olá pessoal. Esta é a hora do projeto de classe e estamos em nosso projeto de classe número dois, onde vocês criarão seu próprio design. Seja um design de aplicativo móvel ou um design de página da web , depende totalmente de você. Depois disso, vocês precisam fazer a prototipagem. Eu já mostrei a vocês no tutorial como vocês podem fazer essas poucas etapas que eu mostrarei para vocês e também farei uma demonstração. Vamos entrar nessa. A primeira coisa é que você precisa criar seu próprio design específico. E, como eu já disse, pode ser um web design ou até mesmo um design de aplicativo móvel. Certifique-se de que vocês usem no mínimo quatro quadros. Mas se você está fazendo algo maior ou algo que consiste em dez quadros ou mais do que isso, vocês são sempre bem-vindos. Eu realmente adoraria conferir seus trabalhos. Ok, depois disso, vocês precisam ir para a opção de prototipagem, que fica ao lado da opção de design E conecte as molduras com o ícone de ícones com as molduras. Depois disso, ative o modo atual, como eu sei, existem dois modos, o presente e o modo de visualização. Apenas apresente o modo porque ele abrirá em uma nova janela. Depois disso, basta compartilhar o link do seu projeto em nossa janela de projetos e eu os verificarei. Veja quanto progresso vocês fizeram e, em seguida, tudo o que vocês aprenderam no tutorial. Deixe-me mostrar a vocês uma demonstração aqui. Aqui eu já fiz o design. Ok, esse design eu mostrei para vocês no tutorial também. Vou mostrar vocês a prototipagem pois eu já fiz o design Mas vocês fazem seu próprio design, tentem fazer essas coisas. Você também pode obter ajuda da comunidade Figma. Pegue suas fontes, ícones e estilo pago. Vocês podem pegar esses e fazer os seus. Ok, agora o que vou fazer é ir para a opção de protótipo Depois de acessar a opção de protótipo aqui, vocês podem ver que eu posso selecionar a partir daqui, como vocês podem ver E vou vincular esse cisne a esta página. E eu também posso mudar isso. Deve ser instantâneo ou dissolvido. Deixe-me dissolver isso. Vou selecionar esse botão aqui. Pegue esse cisne e conecte-se com ele. Está bem? Entra, depois esta, a última, ok? E entre. E quero voltar à minha página inicial sempre que clicar nesse botão inicial específico. Então, o que vou fazer é conectar todos os botões da página inicial à primeira página. Entrar. Ok, esse. Entrar. Selecione essa opção novamente. Vou me conectar com isso e, em seguida, pressionarei Enter. Eu fiz minha prototipagem. Se eu quiser ver a prototipagem aqui, vocês podem ver que eu conectei ícones com molduras, molduras com Agora, o que vocês farão é virem até aqui nesta opção e selecionarem esta opção atual. Ok, não é a prévia do presente. Aqui vocês poderão ver que ele está carregando em uma nova página ou em uma nova janela. Ok, agora o que eu posso fazer é clicar neste link de relaxamento aqui, você pode ver que eu posso voltar lá. Clique nesta página, aqui estou eu. De volta a este. Novamente, da mesma forma que eu posso fazer. Se eu também puder voltar aqui manualmente, posso clicar neste, ele retornará diretamente para esta página. Tudo o que vocês podem fazer é compartilhar seu trabalho comigo. Venha aqui na opção de protótipo compartilhado, basta clicar aqui Ok, qualquer um com o link. E coloque-o como posso ver, porque não vou editar o seu. Ok, basta selecionar este e você pode simplesmente copiar o link daqui. E basta colocar esse link específico em nossa caixa de projeto. Simples assim. Espero ver todo o seu trabalho e como você cria sua página. verei a capacidade Depois de ingressar nesta aula, de você criar sua própria página da web e também criar um protótipo adequado. Cuidado, pessoal, espero ver seu trabalho, então. 20. Projeto do curso 3: Olá pessoal, e agora é hora do projeto da aula. Agora vocês farão o projeto de classe número três no último projeto de aula, onde criarão seu próprio gradiente. Está bem? Para criar um gradiente, eu já mostrei no tutorial Se houver algum problema que vocês enfrentem, podem sempre consultar o tutorial. Ok, vou mostrar a vocês as etapas do que tudo precisa ser feito. Vamos falar sobre isso. Primeiro, você precisa criar qualquer tipo de forma usando a forma de uma estrela, uma caixa retangular, um quadrado ou um polígono Está bem? E então você pode ir para a opção de preenchimento. E na opção de preenchimento, você pode ir para o gradiente. Depois disso, escolha qualquer estilo de gradiente, pois existem basicamente quatro estilos de gradiente, modo de rádio linear e ângulo Ok, vocês podem escolher qualquer um de lá. Depois disso, você precisa adicionar mais cores ao seu gradiente. Continue fazendo isso. E no mínimo cinco cores que você precisa escolher. Depois disso. A última etapa será exportar essa caixa de gradiente específica ou uma forma de gradiente em seu sistema e vocês poderão carregá-la em nossa seção de projetos Ok, vamos ver como vocês vão fazer isso por mim. O que vou fazer é pegar uma caixa retangular somente depois de chegar a essa caixa retangular aqui Você pode ver que eu tenho a opção de preenchimento aqui. Está bem? Abaixo da pílula, chegarei a essa opção de gradiente, que fica logo ao lado da opção sólida daqui Agora eu tenho essa opção, linear, radial, angular e diamante abaixo do gradiente Mas o que vou fazer é selecionar o linear. E como eu já disse para vocês no tutorial eu gosto de usar o linear e o radial, quero mais Eu vou escolher qualquer cor em particular a partir daqui. Suponha que eu opte por algo sombrio. Ok, vou pegar essa cor e vou adicionar mais cores aqui. Então, qual cor eu vou escolher? Deixe-me pegar essa e depois adicionar outra caixa aqui. Agora deixe-me pegar algo mais leve. Está bem? Como vocês podem ver, eu posso fazer isso de acordo com a minha necessidade e eu sou capaz de fazer do jeito que eu quero. Agora eu tenho três e volto para o vermelho novamente, ou simplesmente volto, pego outro aqui, e eu vou escolher a cor vermelha. Vou pegar um vermelho. O último, que vou pegar aqui, é dessa cor, e eu vou pegar um amarelo. OK. E em toda essa cor, eu posso basicamente escolher sólido se eu quiser, se eu quiser esmaecer isso, eu posso fazer isso Sempre consigo manter esse forro aqui, essas cinco cores aqui, como você pode ver aqui. Eu posso mudar a escuridão aqui. Aqui, eu tenho o gradiente de cores que selecionei. E vocês também podem alterar a opacidade a partir daqui. Se você quiser escurecer, você pode ir para este lado. Eu expliquei tudo isso no tutorial. Agora, a próxima coisa que vou fazer é exportar este. Selecione isso e clique em Exportar. Aqui você pode ver, eu posso ver uma prévia de como ficará se este for um PNG. E aqui eu tenho a prévia de um JP. Vocês podem baixar o que quiserem. Retângulo de exportação de três X. Sim, vou dizer isso agora. Vamos ver esse aqui. Vocês podem ver que eu faço meu gradiente aqui, no qual usei cinco cores diferentes ou cinco tons diferentes Estarei esperando para ver como vocês criam seu próprio gradiente e quero ver como vocês podem criar cores e também entender o design de suas cores Estou muito interessado em ver tudo isso. Cuide de todos. Só espero ver um bom trabalho de vocês de todos.