Crie magia com o Figma: um curso para iniciantes

1. Introdução ao curso: Você está interessado em aprender uma ferramenta de design poderosa que pode levar suas habilidades de design de interface de usuário para o próximo nível Então este curso Figma para iniciantes é perfeito para você começar Este curso foi desenvolvido para qualquer pessoa com pouca ou nenhuma experiência em Figma Se você é um iniciante que quer aprender o básico ou alguém que deseja aprimorar seus conhecimentos sobre Figma, este curso fornecerá uma base sólida para usar o Figma para design de interface Não há requisitos de software para este curso. No entanto, conhecimentos básicos de informática e familiaridade com os princípios de design serão muito úteis Ao longo desse treinamento abrangente do Figma, abordaremos uma ampla variedade de tópicos, incluindo o que é o Figma e seus principais benefícios para o design da interface Como configurar sua conta Figma e navegar pela interface Aprenderemos como instalar o aplicativo de desktop Figma para obter funcionalidades adicionais No mesmo curso, aprenderemos igualmente como criar arquivos, como usar o painel de propriedades e a disposição em camadas dos elementos Também aprenderemos como projetar e trabalhar com molduras, grades e guias, como adicionar e personalizar várias formas, usar ferramentas de caneta e pacote, usar ferramentas de caneta e pacote dominaremos como usar operações booleanas para manipular e Aprendemos a criar botões interativos e componentes de design reutilizáveis No mesmo curso, exploraremos a vasta biblioteca de plug-ins Figma para ampliar seus recursos de design E no final de tudo, aprenderemos como exportar e compartilhar seus designs para vários usos. Ao final deste curso, você estará equipado com as habilidades e o conhecimento para usar o Figma com confiança para usar o Figma com confiança para criar designs de interface de usuário com aparência profissional Sou o doutor Rashi, palestrante, palestrante e YouTuber apaixonado, e vou ser o instrutor deste Então você está pronto para mergulhar no mundo da Figma? Vamos começar. 2. O que é o Figma?: Então, o que é Figma? O FGMA é uma ferramenta de design baseada em nuvem para criar interfaces e experiências de usuário, o que chamamos de UI UX, certo Em web design e desenvolvimento de aplicativos. Portanto, é semelhante a programas como o sketch, mas com foco e colaboração, promove a colaboração entre equipes entre seus parceiros ou colegas Você pode trabalhar facilmente em um projeto específico em tempo real. E então permite criar gráficos vetoriais, criar layouts e adicionar animações Um dos benefícios de usar o Figma é que ele é fácil de aprender Ele tem uma interface amigável para iniciantes, o que o torna ótimo para aqueles que são novos no design de software E depois falamos sobre a colaboração em tempo real. É muito, muito importante e é um dos focos principais da Figma, pode trabalhar com outras pessoas no design simultaneamente, independentemente de sua localização Então, onde quer que você esteja no mundo, você pode trabalhar de forma colaborativa em um projeto ou em um arquivo específico Em tempo real, você pode fazer alterações diretamente. Então, analisamos como colaborar nesse curso específico E depois falamos sobre prototipagem. Você pode criar protótipos interativos para testar e refinar suas ideias de design É muito fácil com o Figma. E depois falamos sobre a natureza baseada na nuvem. No Figma, você tem acesso aos arquivos de qualquer dispositivo com conexão à internet Portanto, é fácil sincronizar as coisas e você pode acessá-las em qualquer lugar. O fato de ser baseado na nuvem, você não precisa salvar nada. Ele salva automaticamente e salva seu trabalho enquanto você trabalha diretamente na nuvem. Mesmo que você tenha a versão para desktop, ela também é facilmente sincronizada a versão online. Por isso, funciona facilmente. Depois de ter conexão com a Internet, você pode continuar trabalhando diretamente no Figma E, por fim, falamos sobre os recursos da alça. Você pode transmitir perfeitamente seus projetos do conceito ao desenvolvimento com o Figma É muito, muito fácil. Essa é uma ferramenta completa que você pode usar para desenvolver aplicativos, criar sites, criar diferentes tipos de elementos interativos, e você pode criar protótipos e aproveitar sua experiência Espero que você goste desse vídeo. Obrigado por assistir, e estou ansioso para ver você na próxima aula. 3. Como criar uma conta e fazer login: Para começar, você pode ir a qualquer lugar dentro do seu navegador. Você pode abrir qualquer um dos seus navegadores. Você vem até a barra de pesquisa aqui e apenas pesquisa no Google, e você pode pesquisar Figma com muita facilidade Você pode simplesmente pesquisar Figma e vê-la aqui. A ferramenta de design de interface colaborativa e você pode vê-la com a primeira opção Ou, alternativamente, você pode simplesmente acessar figma.com e ele o levará à mesma plataforma Tudo bem, então isso o levará até esta mesma plataforma. Então, este é o site da FGMA. Você pode acessar diretamente o figma.com, como eu disse, ou seguir o procedimento do Google E quando você está aqui, a forma como você projeta, alinha e constrói realmente importa Então, faça isso junto com o FDMA. Então, você pode ver que isso é apenas uma amostra colaborativa do que é a plataforma e para que você pode usá-la Então, alguns dos recursos que você pode estudar e entender como a plataforma pode ser usada para desenvolver diferentes tipos de aplicativos, diferentes tipos de coisas relacionadas à web e protótipos Então, aqui embaixo, você pode continuar entendendo novamente alguns dos benefícios e quais são alguns dos recursos que ele oferece e que você pode realmente usar apenas para entender um pouco sobre a plataforma. Agora, depois de terminar, você pode começar criando uma conta aqui, e você pode fazer isso apenas começando aqui ou pode usar o recurso de criação de convidados gratuitamente aqui. Como alternativa, você pode conferir o link na descrição deste vídeo e encontrar um link para participar. Então, vamos clicar em começar gratuitamente, e então você tem essas opções de partida. Você pode fazer login diretamente com sua conta do Google. Você pode se inscrever diretamente com sua conta do Google ou usar qualquer e-mail que tenha ou senha e pode usá-lo para criar uma conta diretamente. Neste tutorial, usaremos uma das minhas contas de e-mail do G apenas para fazer login, que possamos clicar na conta do Gmail Ok. Então, depois de fazer login, você será levado para essa mesma plataforma. Agora, aqui, você terá que responder algumas perguntas para ter acesso à plataforma principal. Temos a opção de pular a qualquer momento, se você não quiser Mas acho que é aconselhável apenas responder às Basicamente, são apenas perguntas básicas, então você pode simplesmente dizer: qual é o seu nome? Você pode simplesmente escrever e depois seguir em frente. Que tipo de trabalho você faz? Isso é só para que eles possam preparar a plataforma para você, só para ter alguns dados sobre você. Então, por exemplo, podemos dizer estudante e educador, e então podemos ir para a próxima, e então podemos dizer: alguma dessas palavras descreve seu trabalho? Freelancer em um campo de treinamento, em uma empresa, em uma agência na escola. Digamos que na escola, por exemplo. E então podemos ver que tipo de instituição você frequenta ou trabalha? Digamos que ensino superior, por exemplo. E então você pode ver, com quem você costuma colaborar Então, digamos que colegas de equipe. Então você pode dizer que quer convidar alguns colaboradores. No momento, eu não quero convidar ninguém, então eu posso simplesmente pular isso E então, o que o traz à Figma hoje começar um novo trabalho e projeto Então, comece um novo projeto de trabalho. Então essa é minha meta para hoje. E você já usou produtos FGMA antes? Eu posso dizer, não, é minha primeira vez porque esta é a primeira vez e carro que eu vou te levar por isso. Então, temos apenas uma compreensão do que é e para que podemos usá-lo diretamente, então aprenderemos tudo no trabalho. Então, qual plano funcionará, é o plano de inicialização, que tem esse recurso de correspondência, ou o plano profissional, que também tem esse recurso de correspondência. Bem, para este tutorial, vamos apenas seguir o plano de inicialização. Então, podemos seguir em frente e selecionar o plano de inicialização e continuar com o próximo. Agora, o que você gostaria de fazer primeiro é usar o Figma ou continuar usando o quadro branco na geleia alimentada Mas, neste momento, focar no design com o Figma, para que eu possa selecionar a primeira opção, e então eu posso simplesmente ir em frente e dizer “Concluir Tudo bem, agora você está na plataforma principal. Está bem? Então, você tem a opção de seguir em frente e mostrar tudo para que você possa escrever uma camada de texto com suas barras de ferramentas, mover ferramentas para mover seus documentos para seus recursos em lugares diferentes e assim por diante. E aqui embaixo, você tem a formatação no painel de design Você tem os recursos de formatação, os recursos de design aqui E você pode simplesmente mostrar as propriedades em um piscar de Então, você pode simplesmente começar um novo arquivo a partir disso, e então você pode seguir em frente e ser bem-vindo à plataforma principal. Ok, então esta é a plataforma principal para a qual você será contratado sempre que se inscrever no Figma Agora, isso conclui esta aula sobre como criar uma conta e fazer login no Figma Na próxima aula, veremos algumas das coisas básicas que você deve entender antes de usar o Figma Toda essa visão geral da interface. Examinaremos aqui algumas coisas básicas que você precisa entender antes de começar a criar arquivos e começar a trabalhar seriamente. Ok, mas abordaremos algumas das coisas básicas que você precisa entender neste estágio. Então, até a próxima vez, obrigado por assistir e espero ver você na próxima aula. 4. Visão geral da interface básica: Na última aula, falamos sobre como se inscrever e criar uma conta na Figma E nesta aula, falaremos sobre o básico, a visão geral da interface, o que você precisa entender e quais são algumas das coisas você deve prestar atenção Então, a primeira coisa é que, quando você faz login na sua conta Figma, essa é a plataforma principal para a qual você será contratado No canto superior esquerdo aqui, você tem sua conta. Você tem a opção de mudar as coisas diretamente. Você pode editar qualquer coisa aqui. Você também pode adicionar sua foto COV Você pode adicionar qualquer coisa. E então você pode mudar o tema de todo o look da figma Este é um tema leve. Você pode fazer com que fique escuro. Algumas pessoas gostam desse jeito. Mas acho que prefiro isso no tema das luzes, então você sempre pode usar o tema e alterá-lo diretamente. Ou você também pode acompanhar o design do sistema , se estiver interessado. Agora, novamente, você tem a área de trabalho, as configurações. Aqui, você tem várias configurações com as quais pode brincar, por exemplo, alterar o nome e, em seguida, alterar o idioma ou o título do trabalho, o tema. Além disso, você pode mudar a partir daqui. E outros recursos. Então você pode simplesmente ir em frente e estudá-los, e então você pode entender as informações da conta a partir daqui. Você pode atualizar, excluir ou adicionar qualquer coisa. E então você pode excluir sua conta, mesmo permanentemente, se tiver concluído o que está fazendo e quiser excluir. E então esta é uma comunidade para os usuários do Figma. Você pode ter o seu próprio e se juntar à comunidade Figma para publicar arquivos e plug-ins, comentar e ver o que as pessoas estão fazendo Você pode seguir os membros e gostar do que eles usam, e também pode aprender com eles. E então você também pode gerenciar as notificações a partir daqui usando esse mesmo recurso. Então, isso é sobre os três pontos. Trata-se de configurações. Se quiser, você pode baixar a versão para desktop, que na verdade é o que vamos usar neste tutorial Vamos usar a versão desktop do Figma. Eu vou te mostrar como fazer o download e instalá-lo. É muito fácil, e então você pode abri-lo e começar a trabalhar. Ele sincroniza automaticamente entre a versão para desktop e a versão online, para que você não precise se preocupar com nada E esse é o perfil da comunidade. Você pode criar um perfil sozinho e simplesmente se juntar à comunidade, e então você pode compartilhar ideias. Se você tiver algum desafio, sempre poderá compartilhá-lo com eles e, em seguida, poderá se comunicar e adicionar seus próprios comentários ao desafio de algumas pessoas. E aqui, você pode escolher a conta na qual deseja trabalhar, o que significa que você pode trabalhar com mais de uma conta e depois sair se estiver interessado. Então essa é a primeira opção. Você pode pesquisar coisas diretamente daqui. Você pode pesquisar arquivos, pode pesquisar projetos, pode pesquisar qualquer coisa usando a barra de pesquisa. Certo? A seguir, você tem o recente. Isso descreve algumas das principais coisas recentes que você abordou na Figma Portanto, se você tocou em um projeto específico ou em um arquivo específico no qual está trabalhando, você sempre pode encontrá-lo na versão recente aqui. E então, aqui no topo, você tem os modelos de geléia de figo. Se quiser trabalhar em modelos, você pode facilmente conferir e trabalhar em modelos. Eles são confidenciais. Isso é tudo. Você pode verificar brainstorms, você pode verificar diagramas, você pode verificar o planejamento e as reuniões, dependendo do que você está tentando criar Mas então nosso alvo para isso são as visualizações recentes, ok. E então esses são arquivos compartilhados. Se você tiver arquivos compartilhados, se pessoas ou equipes tiverem arquivos compartilhados, você poderá encontrá-los aqui. Projeto compartilhado também. Você pode encontrar projetos que são compartilhados com você para que você possa trabalhar neles diretamente. Agora, o próximo passo são suas equipes. Você pode ter várias equipes quais trabalhar em conjunto e, em seguida, ter o rascunho. O Draft é, na verdade, um dos lugares mais importantes para se estar em Figma É aqui que você pode criar diferentes tipos de projetos, diferentes tipos de arquivos. Você pode criar e trabalhar diretamente daqui. Assim, você pode adicionar diferentes tipos de arquivos desse rascunho usando esse sinal de adição. Assim, você pode clicar no sinal de mais e ver que pode criar um novo arquivo de design, um novo arquivo figma fi jam Você pode criar a partir daqui e importar mídia diretamente daqui. Eu vou te mostrar em detalhes como usar isso. E aqui embaixo, você tem a opção visualizar seu plano e fazer o upgrade, se necessário. Então aqui, você tem equipes. Então, a primeira é a primeira coisa que você tem. Você pode ter vários projetos. Você pode adicionar novos projetos diretamente daqui, ou em qualquer projeto, você pode vir aqui, você pode clicar neste sinal de adição para iniciar um projeto. Essa também é outra forma, mas eu sempre gosto de começar do rascunho. Do rascunho é muito melhor e mais fácil. Então, esses são os básicos. Aqui, essa é a principal coisa que você pode ver seu rascunho e, em seguida, você pode vê-lo excluído. Se estiver trabalhando em projetos rascunhos ou excluídos, você poderá vê-los aqui. Agora, no canto superior direito, é aqui que você pode conferir. Você pode adicionar arquivos de design. Você pode criar e adicionar arquivos de design simplesmente clicando nesse arquivo de design, e ele criará um novo arquivo de design para você Da mesma forma, você também pode criar uma placa de compota adequada diretamente do canto superior direito. E então você tem a opção de importar mídia, seja uma imagem B e um vídeo, você pode importar diretamente do Pre. Você pode conferir todos os arquivos, arquivos de design, arquivos fi jump, a organização, você pode verificar a classificação É alfabético? Seja a data de criação ou a última modificação, o primeiro dia ou o mais recente primeiro, você pode organizar os arquivos de acordo e, em seguida, alterar a aparência. Essa é a visualização em grade. Você pode alterá-la para exibição em lista , que é mais ou menos assim. E acho que, especificamente, gosto que esteja na visualização em grade, que é a minha favorita. Então, aqui embaixo, nos casos em que você tiver algum desafio durante o trabalho, você sempre pode fazer isso. E clique aqui e você terá a opção assistir seus vídeos no YouTube Você pode verificar seus fóruns de suporte, as notas de lançamento e enviar feedback se tiver problemas que você possa compartilhar com a marca com a empresa e, em seguida, também pode entrar em contato diretamente com o suporte. Você pode perguntar na comunidade. Essa guia também levará você à mesma comunidade em que você pode interagir com as pessoas e compartilhar seus desafios e ideias. E então aqui, temos o atalho, atalho de teclado E aqui embaixo, você pode reiniciar o embarque. Tudo volta a ser reiniciado e você também pode alterar o layout do teclado e alterar o idioma a partir daqui. Portanto, é muito importante que você sempre possa clicar para entender ou se conectar com os outros recursos. E aqui também, você pode explorar a comunidade se estiver interessado. Então, isso conclui esta aula sobre como entender os fundamentos do Figma As coisas básicas que você precisa entender antes de começarmos a usar o Figma Na próxima aula, aprenderemos como criar um projeto ou arquivo no qual possamos trabalhar diretamente. Está bem? Então, criaríamos um projeto e um arquivo, e também entenderíamos a visão geral da interface, para que você possa ter uma compreensão clara do que é a plataforma e para que podemos usá-la diretamente. Então, até a próxima vez, obrigado por assistir e espero ver você na próxima aula, certo? 5. Como instalar o aplicativo Figma Desktop: Nesta aula, aprenderemos como baixar e instalar o aplicativo Figma para desktop, que é muito, muito importante se você o tiver instalado em seu sistema, portanto, é seu trabalho e é o processo E lembre-se, como eu disse antes, é muito fácil trabalhar na versão desktop e ela é automaticamente sincronizada com a versão Cloud Portanto, sempre que você fizer login em qualquer computador, ainda encontrará seu trabalho intacto É apenas para facilitar o acesso que a versão para desktop é feita. Então, para acessar a versão desktop, tudo que você precisa é apenas fazer o login, pois temos o login aqui, e você pode acessar o canto superior esquerdo aqui, esta ficha médica. Você pode clicar, como mostramos anteriormente. Você pode ver como obter o aplicativo para desktop. É aqui que você obtém o aplicativo para desktop baixa e instala. Assim, você pode clicar e ele detectará automaticamente o tipo de sistema operacional que você está usando, seja um sistema operacional Windows ou um sistema operacional Mark. Ele detectará automaticamente e fornecerá a versão desse sistema operacional específico. Então, no meu próprio caso, estou usando o sistema operacional Mark, então ele vai me dar a versão Mark automaticamente. Então, quando eu chegar aqui, ele salvará esse arquivo. É muito, muito pequeno. Você pode ver isso. Você pode simplesmente clicar e ver. Nosso modelo FIG DMG, depois de clicar, você poderá ver a localização e começar a trabalhar nela diretamente Assim, você pode clicar duas vezes e começar a abrir e começar a instalar diretamente. É muito fácil de instalar. É apenas um processo passo a passo. Da mesma forma que instalamos coisas no software do sistema operacional Mac. Então você só precisa arrastar isso e soltá-lo aqui. E isso só vai te dar a versão textop instalada Por isso, detectou que já instalei um. Então, ele substituirá essa parada porque eu sei que já instalei. Mas esse é o processo: basta arrastar e soltar e vamos instalá-lo. Então, depois de instalá-lo, basta ir em frente e abri-lo e, para abrir, basta acessar a parte de lançamento aqui. Você pode simplesmente clicar e ver Figma. Você não vê, pode pesquisar Figma e ver aqui Figma Então, depois de clicar, ele abrirá, para que você possa fechar esta versão textop e continuar trabalhando na versão online E você pode continuar trabalhando na versão desstop. Desde que você apenas faça login, você pode continuar com seu trabalho. Portanto, esta é a versão para desktop, acabei de fazer login e você pode ver que não há diferença entre a versão para desktop e a versão online. Portanto, é apenas para facilitar o acesso, que você possa trabalhar com tudo no desktop. Então, basicamente, isso é como baixar e instalar o aplicativo da versão desktop do Figma Você pode simplesmente seguir em frente , baixá-lo e instalá-lo em seu sistema para que possamos continuar com o projeto. Então, na próxima aula, veremos como criar um arquivo e um projeto e, em como criar um arquivo e um projeto e seguida, a visão geral da plataforma de arquivos principal, na plataforma principal, você possa entender quais são algumas das coisas importantes às quais você deve prestar atenção ao usar o FICMA ao criar um arquivo e gerenciá-lo no FIGMA Então, até a próxima vez, obrigado por assistir e até a próxima aula. 6. Como criar uma visão geral de arquivo e interface: Nesta aula, aprenderemos como criar um arquivo e a visão geral da interface em um arquivo específico. Então, para começar, como eu disse, você pode estar no draft, que é o mais fácil, e você pode estar na equipe. Assim, você pode chegar ao sinal de mais e, em seguida, começar o que quiser. Como alternativa, você pode acessar o arquivo de design aqui e ele iniciará um novo arquivo de design. Para este tutorial, começaremos com o rascunho, você pode acessar o rascunho e clicar neste sinal de adição. E, novamente, você tem a opção de iniciar o design a partir de um novo arquivo de design. Ou do novo arquivo fik jam. Para esta aula, iniciaremos novo arquivo de design apenas importando, basta clicar no novo arquivo de design E depois de clicar nele, você será levado para essa mesma plataforma. Então, a primeira coisa que você precisa ver na parte superior é que você tem esse rascunho e, em seguida, tem o projeto intitulado. Portanto, você precisa nomear o projeto no início. Esse é o primeiro passo. Então, podemos fazer isso clicando duas vezes aqui, e digamos que esta seja nossa primeira aula. Na Figma. Então você pode clicar em. E agora você tem essa classe, este arquivo, primeira classe no Figma em rascunho sob o rascunho do projeto E agora você pode clicar nesse pequeno menu suspenso e ter a opção de mostrar o histórico de versões para exportar este projeto e, em seguida, alterar o perfil de cores do arquivo e duplicar o arquivo Você pode renomeá-lo sempre que quiser, mover o projeto para algum lugar e, em seguida, separar esse arquivo ou excluí-lo conforme desejar esse arquivo ou excluí-lo conforme Então, essa é a principal coisa que você pode fazer aqui. Essa é a tela principal em que você faz toda a adição e criação de protótipos e assim por diante Você faz tudo por aqui. Agora, à esquerda, você tem as camadas onde você pode pesquisar aqui. Você pode pesquisar qualquer coisa também em suas camadas ou em outras plataformas. E então você tem as camadas listadas e você tem ativos, e você tem páginas. Além disso, você pode listar páginas e continuar trabalhando no projeto. Analisamos isso em detalhes à medida que avançamos com nosso projeto. Então, agora você pode estar em camadas. E você pode ver à direita que você tem essa guia de design. É aqui que você tem a maioria das principais coisas com as quais você pode brincar, como as propriedades, e então você tem essa seção de protótipo Você pode criar um protótipo, criar uma nova conexão. Você também pode executar seu protótipo aqui para ver como ele ficará no ponto final Portanto, esses são dois pontos muito importantes na tela que você deve entender como usá-los. Agora, no canto superior esquerdo, você tem esse menu suspenso. Depois de clicar nesse menu suspenso. Você pode conferir o acesso rápido à ação rápida. Se você quiser conferir a ação rápida, confira. E então você tem o arquivo. Você tem a oportunidade de criar um novo design, novo arquivo f jam a partir daqui ou pode colocar uma imagem ou salvar uma cópia local do projeto em que está trabalhando diretamente na sua máquina local ou no seu computador. E você pode salvar no histórico da visão, se quiser, ou pode mostrar o histórico da visão. E assim por diante, e você pode exportar molduras para PDF e exportar seu projeto para um arquivo local. Você tem essas opções básicas, como edição, pode copiar, testar e encontrar coisas para substituir as sobre. Você pode descobrir que pode fazer muita coisa a partir daqui. Você pode alterar as visualizações. Além disso, você pode inserir linhas de grade, réguas etc. apenas para ajudá-lo com seu trabalho e você pode ampliar e diminuir o zoom Você tem muitos recursos do Zoom diretamente aqui embaixo. OK. E então você pode mostrar e ocultar a interface do usuário diretamente. Você pode mostrar contornos, contornos de molduras e assim por diante. Aprendemos a usar a maioria dessas ferramentas básicas, coisas básicas à medida que navegamos. Você tem os recursos do objeto, você tem os recursos de texto, que temos muitos deles no painel de propriedades aqui, e então você tem o recurso organizado. Que fala sobre o arranjo em camadas, qual vem primeiro e qual vem por último O recurso vetorial, os plug-ins, os widgets e as preferências, você pode ativar ou desativar qualquer coisa aqui para alterar a preferência em relação ao que acontece ou ao que aparece na plataforma Assim, você pode conferir ou amarrar coisas antigas aqui. Você também pode alterar o tema do modo escuro para o claro, ou do claro para o escuro, ou pode seguir o tema do sistema. Usando esse método também. Perfil de cores, layout do teclado e você pode ter muitos controles aqui e bibliotecas. Você pode conferir as bibliotecas e criar uma conta, o que também mostramos aqui. Você pode sair, conferir o resumo legal, os tutoriais em vídeo e os atalhos do teclado Página de ajuda, você pode conferir tudo isso aqui. Então essa é a primeira opção. O próximo item é esse recurso de movimentação. Você pode clicar nesse pequeno menu suspenso e mover seu conteúdo ou seu projeto. Você pode escalar coisas, que veremos em detalhes sobre como usá-las. Depois disso, temos o quadro que você pode ativar usando a letra F, ou você tem a seção, você pode criar uma seção, você pode criar fatias. Vamos aprender como usar tudo isso também em detalhes, juntamente com seus atalhos A seguir, você tem as formas de diferentes tipos, retângulo, linha retangular, setas, elipses e polígonos e assim por diante Você pode colocar imagens e vídeos se estiver interessado em seus respectivos atalhos Você pode ir em frente e explorar tudo isso. E aqui, a próxima é que temos as ferramentas Pen. Você tem a caneta e o lápis dependendo do que deseja usar. Nós temos os dois. E o próximo é o recurso de texto. Você pode clicar para começar a escrever qualquer coisa. Então você pode simplesmente clicar e começar a escrever seu texto, e você pode vê-lo aqui, Ca. Você pode clicar duas vezes nele para ter a opção de mudar as coisas. Conforme você segue em frente. Ok, então vamos dar uma olhada em detalhes sobre tudo isso, que você possa ver, você pode ter os recursos de edição de texto de design. Falamos sobre todos esses recursos, como usar alguns deles, alterar o estilo do telefone, as camadas, o estilo regular e o estilo do campo, a cor, o traçado, os efeitos Vamos analisar tudo isso em detalhes neste tutorial. E então você tem essa página de recursos. Você pode conferir qualquer coisa. Você pode adicionar plug-ins, adicionar componentes e widgets à medida que avança Então, analisamos em detalhes como usar alguns deles, e então você tem a ferramenta manual, caso queira trocar coisas, dentro de uma cama específica. Você quer mover as coisas. Você deseja ampliar algum recurso ou algum ponto direto. Você também pode fazer isso. E então aqui, você pode adicionar comentários. Você pode adicionar comentários a qualquer momento, e alguém pode trabalhar nesse comentário específico. Você pode adicionar alguém. Você pode usar o sinal de adição para ligar para qualquer colaborador específico e trabalhar em colaboração com essa pessoa Você pode dar instruções ele e ele trabalhará diretamente. Então, veremos como colaborar com as pessoas da Figma adicionando comentários e palavras colaborativas ou ações colaborativas para que você possa trabalhar simultaneamente no mesmo projeto Então, digamos que pinte isso. Tudo bem. É apenas uma coisa normal, apenas uma característica normal, certo? Você pode ver que podemos ver isso aqui. Então, estou apenas dando uma instrução. Agora, essas são as coisas mais básicas. Aqui, você também tem, podemos verificar isso. Depois de clicar, você está verificando a seção de comentários. Agora, aqui, você tem seu nome Spotlight me mostrando que não sou ninguém se adaptando ao trabalho neste quadro em particular E então você pode compartilhar seus arquivos diretamente daqui, você pode compartilhar com as pessoas, você pode criar um link e compartilhar, e você pode dar os vários controles respectivos às pessoas com quem você está compartilhando o documento , como os proprietários desse link podem ver ou editar o projeto. Dependendo do tipo de controle que você dá a eles, eles podem acessar e editar o projeto diretamente. Tudo bem? Você tem a opção de publicar a comunidade para que as pessoas possam ver, você possa ver seu trabalho e elas também possam fazer comentários sobre você. Então esse é o controle. Você pode dizer que qualquer pessoa com esse link pode ver ou editar esse projeto específico. Está bem? Então, isso é sobre compartilhar. Você pode copiar o link e depois compartilhar com eles ou adicionar o endereço de e-mail da pessoa diretamente. Por exemplo, posso dizer que quero adicionar, e então você pode simplesmente ir em frente e convidar, e agora enviaremos esta mensagem para convidar essa pessoa a trabalhar neste rascunho. Selecione um projeto específico e diga, queremos convidar essa pessoa, e ela receberá o convite, foi convidada para editar a primeira aula no Figma, que é o projeto em que estamos trabalhando no momento Ok, então essa é a mensagem que você receberá assim que enviar o convite. Então esta é a mensagem, a turma que eu convidei você para editar a primeira aula do Figma, que é o projeto que somos Assim, você pode abrir o Figma e continuar trabalhando no projeto, porque agora está dando a permissão Para começar a trabalhar no projeto. Você pode ver que tem o modo de desenvolvimento. Você pode habilitar isso e sempre pode pré-reproduzir seu protótipo para ver os resultados diretamente Você pode clicar aqui e apresentar e visualizar seu protótipo diretamente para ver o resultado do que está criando Vamos analisar isso em detalhes também para entender o que isso significa ou para que você pode usá-lo. Agora, temos o recurso Zoom. Você pode ampliar isso em 100%. Você pode ampliar e reduzir o zoom e pixelizar, e é na visualização de pixels em réguas, grades de layout e assim por diante, além de várias outras coisas, que abordaremos e mostraremos como usá-las de forma muito detalhada enquanto navegamos E por último, temos esses três pontos. Muito, muito importante. Suas guias fechadas recentemente aparecerão aqui. Você pode conferir a partir dos três pontos. Então, por fim, você também tem esse p s em qualquer ponto. Se você quiser consultar a central de ajuda ou entrar em contato com o suporte ou conferir os vídeos ou algo mais Então, isso conclui esta aula sobre como criar um arquivo no Figma e, em seguida, a visão geral também da plataforma do Espero que você goste desse vídeo. Obrigado por assistir, e estou ansioso para ver você na minha próxima aula. 7. O painel de propriedades: Olá e bem-vindo de volta. Na última aula, falamos sobre como criar um arquivo e um pouco da visão geral da plataforma ao criar arquivos. Falamos sobre algumas das guias básicas aqui, como podemos usá-las para aprimorar nossa experiência Então, nesta classe, vamos ver o painel de propriedades, que é o que temos aqui. No momento, como não temos nada em nossa tela, portanto, no painel de propriedades, praticamente não podemos fazer nada a partir daqui. Só que você pode alterar o plano de fundo e alterar a cor do fundo, basta vir aqui e clicar aqui, e podemos alterá-lo para qualquer cor de nossa escolha. Então você pode mudar para qualquer cor de você. E se você tiver um berço, você também pode preenchê-lo. E aqui embaixo temos o recurso de exportação, que abordaremos também para continuar com este tutorial. Mas, por enquanto, deixe-me fazer isso para que tenhamos um plano de fundo claro. Uma coisa que você precisa entender é que esse painel de propriedades é uma das coisas mais importantes que usaremos em toda a nossa experiência com o Figma Tudo depende da propriedade, elemento com o qual você está lidando esse painel de propriedades mudará. Então, por exemplo, vamos pegar, por exemplo, se você vier aqui até os turnos, e pudermos clicar e digamos que selecionemos essa elipse Se você quiser desenhar um círculo, mantenha pressionada a tecla shift e, em seguida, poderá desenhar um círculo com muita facilidade. E simplesmente desenhando o círculo, você pode ver que o painel de propriedades foi alterado. Agora, muitas coisas foram introduzidas , pois você pode alterar as posições desse círculo do eixo x para o eixo y e, em seguida, a largura e a altura. Você pode variar todos eles. Mesmo clicando, você pode aumentar o número. OK. Ao clicar e arrastar, você pode aumentar ou diminuir o número adequadamente Mesmo que estejam conectados à largura e à altura estejam conectados a isso, você pode vinculá-los e variá-los individualmente, para que você possa ver se você os varia de forma diferente, a forma muda de acordo. Eu prefiro que eles estejam vinculados, e deixe-me fazer isso neste momento. Então essa é uma das coisas. Você pode alterar a posição, também pode alterar a posição da camada e pode alterar o campo, que é uma das coisas mais importantes. Você pode clicar aqui e adicionar diferentes tipos de coloração a essa mesma forma que você acabou de adicionar Digamos que podemos ir para algum lugar agradável e podemos selecionar e dar uma cor muito bonita. Ok, digamos algo assim , e podemos clicar. OK. Então, enquanto ainda selecionamos a forma, ainda temos outros recursos, como lá embaixo, você pode adicionar um traçado apenas clicando nesta posição. E você vê agora que temos um traço adicionado no interior. Ok, você pode mudar a posição do traço. Nós podemos colocá-lo no centro, você pode fazê-lo no exterior. Então, neste caso, vamos sair. Mas porque é um derrame muito pequeno. É por isso que você não vê isso visualmente. Você também pode aumentar o tamanho ao vir aqui, pode aumentar e ver agora que está aumentando o tamanho. Acho que algo assim está bem. E se quiser, você também pode alterar a cor do efeito do traçado. Mas basta clicar nisso. Você pode fazer com que seja algo como depender. Você pode fazer algo parecido com isso. Eu acho que isso é bom. Então, você pode simplesmente escapar disso e voltar ao mesmo grupo de propriedades. Você tem outros recursos com os quais pode lidar e lidar. Você pode ter os efeitos. Você pode clicar para adicionar efeitos. Você pode adicionar sombra projetada a essa mesma forma. Você pode adicionar sombra projetada e ver que pode ver na sombra a camada de sombra projetada abaixo ou no fundo abaixo. Em cada caso, você pode ver que a forma está mudando em termos de suas propriedades. Então, digamos que temos uma sombra projetada, e você pode ver visualmente que temos uma pequena sombra projetada aqui. Portanto, você pode remover qualquer um desses recursos clicando neste sinal negativo e introduzindo removê-lo. Você pode ativá-lo ou desativá-lo nesse recurso ocular. Assim, você pode ativar e desativar. Você pode ver a sombra projetada, é bem pequena, mas é visível. A mesma coisa aqui, você pode ativar ou desativar esse traço apenas com este sinal. E aqui embaixo, você tem mais recursos. Digamos que eu habilite isso. Aqui embaixo, você tem mais recursos. Você pode exportar se estiver interessado e exportar, você tem um formato diferente. Você pode usar esse PNG como padrão, mas pode exportar em P, SVG e PDF Isso é muito básico e você pode visualizar, conferir a prévia do que acabou de criar. Você pode exportar. Isso não tem plano de fundo e você pode usá-lo em outros documentos, na redação de relatórios ou em qualquer coisa com a qual esteja trabalhando. Então, isso é muito básico. E esse é um elemento dentre os muitos elementos que temos. Vamos tentar outro elemento. Por exemplo, vamos ver o texto aqui e clicar. Você pode habilitar o texto simplesmente clicando na guia T aqui, o texto, ou você pode usar a letra T no teclado para iniciar o comando de texto. Assim, você pode clicar em qualquer lugar e digamos que escrevemos algo como bem-vindo ao meu canal, por exemplo, e você pode ver agora mesmo, depois de selecionar, você seleciona tudo. Dependendo dos elementos do contador que você tem, o efeito aqui muda, as propriedades aqui mudam. Assim como neste texto, você pode ver que também pode lidar com a posição. Você pode brincar com a posição esquerda ou direita no eixo x. Você pode brincar com ele no eixo do caminho, e também pode brincar com a rotação, pode girá-lo em qualquer ângulo A coisa aqui é que você tem o recurso de rotação, mas você pode ver em qualquer ponto, você pode girar. Deixe-me fazer isso. E você pode conferir a camada, qual camada, brincar com a camada e organizá-la de acordo. Essa é a opacidade. aqui embaixo, você tem outros recursos básicos de edição de texto, como alterar o estilo do telefone. Você pode ver diferentes tipos de estilo de telefone. Ao passar o mouse, você verá que o texto muda no estilo do telefone e você pode definir os tamanhos do telefone Você pode ter tamanhos diferentes. Se quiser, você pode, sozinho, aumentar o tamanho diretamente. Então, é muito fácil. Então , aqui embaixo, você tem os outros recursos, como adicionar a altura da linha e este é o espaçamento entre linhas, altura da linha e espaçamento entre linhas em relação ao texto Se você tiver vários textos, você pode adicionar a altura da linha entre eles, e esta é a vertical, esse é o espaçamento entre as letras Você também pode adicionar. E então esse é o espaçamento entre parágrafos Talvez você possa fazer com que seja dois, a largura do parágrafo, você pode aumentar ou diminuir de acordo. E isso é altura automática. Esse é um tamanho fixo por toda parte. Você pode ajustar tudo isso. Você tem controles virtuais. Você pode alinhar à esquerda, à direita e ao centro. Você pode fazer todo tipo de alinhamento aqui. E você tem esse alinhamento de cima para baixo no meio. Você pode fazer tudo isso a partir daqui. E uma das principais coisas que você deve prestar atenção é a sensação de texto. Você pode alterar isso a partir daqui, clicar e adicionar a sensação aqui e alterar a cor para qualquer cor de nossa escolha. Marque algo como esse azul, e você também pode adicionar um traço a ele. Dependendo, você pode adicionar um traço e aumentar a largura e alterar a cor, assim como explicamos no outro, certo? Então, digamos que temos algo parecido com essa cor vermelha, e podemos tê-lo assim. E então você também tem os efeitos. Sombra projetada, você pode adicionar sombra projetada a ela. E eu posso ver que você pode ver a diferença sem e com. Deixe-me fazer isso. Isso é sem, isso é com sombra projetada, e você pode ver que o texto está meio bonito. Então você tem um monte de controles aqui. Outra coisa que você deve prestar atenção é que você tem outros controles aqui. Assim como você pode adicionar um link a isso, você pode criar um link a partir disso e você pode, sozinho, criar um componente a partir disso. Falaremos sobre tudo isso em detalhes enquanto navegamos por este tutorial. E uma coisa que você também deve observar é que, seja qual for o elemento com o qual você esteja lidando, você ainda pode encontrar as propriedades habilitadas aqui. Você pode ver bem-vindo ao meu canal. Este é o texto que temos, e você pode ver os lábios. Isso discutirá todo o arranjo onde eles estão aqui e como lidar com os problemas de posição. Isso conclui este tutorial sobre o painel de propriedades, o que é e como entender os recursos básicos No que diz respeito a adicionar alguns elementos e brincar com alguns de seus recursos. Espero que tenham gostado desse vídeo. Obrigado por assistir, e estou ansioso para ver você na próxima aula. 8. Camadas de elementos no Figma: Na última aula, falamos sobre o básico do painel de propriedades do Figma E nesta aula, falaremos sobre os fundamentos das camadas Então, sempre que você criar um projeto, ao longo de sua experiência no Figma, você usará bastante esses recursos de camadas , porque a maioria das coisas que você será a maioria dos elementos que você organizará, serão organizadas aqui Portanto, é muito importante entender o arranjo aqui . Então, a primeira coisa que você precisa entender é que podemos criar duplicatas disso segurando a tecla de opção ou a tecla antiga em suas janelas Você pode simplesmente selecionar a tecla de opção e clicar e arrastar e você pode ver agora que temos uma duplicata disso Então você pode ver agora que temos o LPS um e o LPS dois. Isso ocorre porque os dois são duas coisas diferentes. E outra coisa que você deve saber é que a posição realmente varia em termos de camadas Portanto, qualquer objeto ou elemento que você tenha no topo aqui se concentrará ou se comportará no topo deste LPS porque está no topo, mesmo na classificação aqui nas camadas E você pode ver que esse texto está acima de todos eles. Então, se eu trouxer essa lesta, por exemplo, eu seleciono isso e mudo a cor para algo como vermelho E se eu tentar trazer isso para isso, você pode ver agora que está no topo. Isso ocorre porque essa camada dois está acima dela. Assim, podemos clicar com o botão direito do mouse e renomeá-lo, se você quiser. Podemos renomear isso. Ok, então vamos chamá-lo de círculo laranja. E então vamos renomear este para o círculo verde, por exemplo Então, digamos esse círculo verde para facilitar a compreensão. OK. Então, podemos ver que esse é o círculo laranja, esse é o círculo verde. E quando você tenta trazer o texto também, você pode ver que o texto está acima de todos eles. Isso porque sua posição está realmente acima de tudo neste momento. Você pode tentar se ajustar. Você pode alterá-los simplesmente arrastando. Por exemplo, ao arrastar e soltar a laranja, você pode vê-la abaixo do texto, e você pode arrastar a verde também para o topo, e você pode vê-la se tornar a parte superior. Portanto, o arranjo é muito, muito fácil. Você sempre pode ajustar se estiver interessado. Assim, o texto sempre pode voltar porque queremos que ele apareça no topo. Você pode ver agora que o temos no topo. Você pode brincar com as coisas mais básicas a partir daqui, mas o que importa é o arranjo. Se você entender como as camadas são organizadas, isso tornará seu trabalho muito, muito fácil. Portanto, você tem várias coisas a observar. Então, tudo o que está acima está acima. Tudo o que está abaixo está realmente abaixo disso. Quando você analisa o processo de camadas, você tem outras coisas que veremos neste mesmo painel Você tem o painel de ativos e nós temos o painel de páginas, qual você pode criar várias páginas, como dissemos no qual você pode criar várias páginas, como dissemos. Examinaremos tudo isso em detalhes no outro tutorial. E você pode bloquear as posições dos elementos. Por exemplo, você pode bloquear a posição desse texto com apenas este clique. Portanto, isso permanecerá nessa posição, e você pode bloqueá-lo diretamente apenas clicando e pode usar esse recurso igualmente para ativá-lo ou desativá-lo do painel da tela. Então, ele se torna visível ou invisível. Então, dependendo do que você está trabalhando, você sempre pode ter alguns desses recursos e brincar com eles. Ok, então isso conclui esta aula sobre noções básicas de camadas, entendendo as camadas em termos da disposição dos elementos na Figma Espero que tenham gostado desse vídeo. Obrigado por assistir e até a próxima aula. 9. Como adicionar e personalizar quadros: Na última aula, falamos sobre as camadas de elementos no Figma e, nesta aula, falaremos sobre o básico dos quadros, como adicionar quadros . Agora, o que são molduras? Os quadros são, na verdade, os elementos adicionamos propriedades que podemos ter que nos ajudam a separar os elementos e as propriedades em diferentes tipos de páginas, ok? Se você criar um aplicativo de telefone, as diferentes páginas que você tem nesse aplicativo específico são representadas por quadros Então, o número de quadros que temos depende. Então, se você tem dez páginas em um aplicativo específico, isso significa que você tem dez quadros organizados nessa esperança. Vamos aprender como criá-los e como vinculá-los às suas propriedades à medida que avançamos. Por enquanto, para adicionar uma moldura básica, você pode vir até aqui e clicar nesse recurso de moldura, ou usar a letra F. Você pode pressionar a letra F no teclado para ativar a ferramenta de moldura Assim, você pode simplesmente selecionar em qualquer lugar , arrastar e ter seu quadro selecionado ou criado da mesma forma. Então esse é o tamanho 469 por 3408. Podemos simplesmente liberar, e você pode ver agora que temos isso como uma moldura. Agora, isso está se tornando uma moldura, você pode ver automaticamente se todos esses elementos estão agora alojados embaixo dela Você pode contrair isso e reduzi-lo novamente, e todos esses elementos agora estão especificamente sob isso. Portanto, quadros específicos também podem ser usados para categorizar nossos elementos , para que possamos saber exatamente qual parte desses elementos pertence a esse quadro e qual parte desses elementos também pertence a esses quadros Então, novamente, se você tiver certeza do tipo de tamanho que deseja, se não quiser, pode ajustar o tamanho diretamente da moldura , basta arrastar, arrastar e movê-la, ajustá-la para qualquer tamanho Ou se você conhece o tamanho, especificamente, pode vir aqui e alterar o tamanho de acordo Você pode ver que podemos aumentar o tamanho ou diminuir a altura em termos de altura, assim como na posição em x e y, você pode brincar com a posição. E em qualquer ponto, você pode clicar e movê-lo. Mas se você estiver configurando com o tipo de tamanho que deseja criar, você pode facilmente tê-lo; por exemplo, se estiver tentando criar com a tecla F e habilitar a criação do quadro, poderá ver os modelos que o Figma está fornecendo Portanto, temos vários tamanhos predefinidos para talvez telefone, se você estiver lidando com telefone, talvez se estiver tentando desenvolver um aplicativo de telefone Você pode ver os diferentes tamanhos iPhone 14 e 15 Pmax Você pode vê-los. Esse é o tamanho. Esse é o tamanho padrão para 15. Esse é o tamanho padrão do iPhone SE, e do telefone h, você pode ver que esse é o tamanho padrão. Para Android, pequeno, esse é o tamanho, Android grande, esse é o tamanho. Então você pode simplesmente ir em frente e selecionar qualquer pessoa. Se você também está lidando com tablets, esses são tamanhos predefinidos que você pode selecionar facilmente, dependendo do que você está tentando criar, se não souber o tamanho específico Se você estiver lidando com desktop, você pode ver que tamanhos diferentes estão usando MT book ou TV ou desktop ou algo parecido ou Map book pro 14 ou algo parecido. Assim, basta selecionar a recriação da apresentação ver os diferentes tamanhos. Você está usando 16 por nove quatro por três, Oh, você pode ver se você está usando relógios também, é um Apple Watch. E se você quiser criar tamanhos para papel, você pode ver a maioria deles A A cinco A seis e tamanho letra e diferentes mídias sociais. Você pode selecionar e selecionar o papel e anexar os tamanhos precisos. Então, para esse caso, vamos usar algo simples. Vamos selecionar o pon 14 plus, clicar nele e você pode ver, por padrão, que o Figma acabou nos fornecer esse tamanho como nosso tamanho pon 14 OK. Assim, você pode, sozinho, manter pressionada a tecla de comando e usar a roda de rolagem do mouse para se deslocar zoom. Assim, você pode ter mais detalhes aqui. Com o comando pressionando a tecla de comando e rolando para baixo, você poderá reduzir o tamanho, curtir ou aumentá-lo. Se você rolar para cima, rolar para baixo, você pode usar esta tecla de comando, deslocar-se você pode usar esta tecla de comando as letras H e in movem esses dois tamanhos ao lado. Outra coisa que você pode notar é que nos quadros, você sempre pode escapar para voltar à ferramenta de seleção. Então você seleciona qualquer quadro. Você pode duplicá-lo usando apenas o comando D para duplicar um quadro específico Ou, alternativamente, você pode manter pressionada a tecla de opção nas janelas mark ou t, selecionar e arrastar e criar a mesma cópia desse quadro específico. Portanto, é muito fácil fazer isso. Além disso, você pode copiar e colar esse mesmo quadro em algum lugar. Agora, vamos manter pressionada a tecla de comando e dividir isso um pouco para que possamos ver tudo dentro dela. Então, outra coisa que eu quero mostrar é que você pode copiar propriedades. Você pode alinhar isso adequadamente. Se você os tiver alinhados, você pode alinhá-los diretamente selecionando todos eles aqui, e você pode ver aqui embaixo, você tem esse ícone, que permite alinhá-los verticalmente Ao clicar, você os verá, eles estão igualmente alinhados de acordo Você tem o mesmo alinhamento vertical. E se você quiser, se você os tiver separados, por exemplo, está alinhado, e você quer que eles estejam alinhados Você pode selecionar todos eles. Ample, vamos manter pressionada a tecla Shift. E podemos comandar a tecla e rolar para baixo, podemos selecionar tudo, por exemplo, e então podemos alinhar isso Isso garantirá que eles estejam alinhados verticalmente E se você quiser alinhá-los horizontalmente, isso é alinhar horizontalmente isso é Se você quiser alinhá-los verticalmente para que tenham o mesmo tamanho e o mesmo nível, basta vir aqui e ver os centros verticais alinhados Assim, com apenas um clique, você pode ver que eles estão igualmente alinhados e alinhados no centro vertical Então, isso é basicamente como lidar com elementos com molduras e lidar com eles. Agora, outra coisa é que você precisa entender que os elementos que temos em um determinado quadro são fáceis, você pode copiá-los facilmente e colocá-los em quadros diferentes. OK. Então, por exemplo, se tivermos esse quadro, se você selecionar esse quadro e selecionarmos esse texto, basta clicar e podemos simplesmente colocar isso. Vamos escrever alguma coisa. Bem-vindo. E temos essas boas-vindas. Isso significa que se você selecionar esse texto e pressionar a tecla de comando e a tecla de opção, ele mostrará exatamente a distribuição. O tamanho é da esquerda, do topo, dos lados, o arranjo dos lados e do lado direito e da parte inferior. Esse é o acordo. Então, se você quiser copiar essa boas-vindas, copie-a com o Command ou Control C no teclado vá para o segundo quadro. Você pode executar o comando V para colá-lo e ver que, ao manter pressionada a tecla de opção, verá que ela foi colada na posição exata em que você a copiou da outra propriedade, diretamente do outro quadro E a mesma coisa aqui, você pode ultrapassá-la e ela manterá a mesma posição conforme você avança. Outra coisa que podemos aprender com relação à moldura é que, ao olhar para isso, você notará que cada uma das molduras do iPhone que temos, este é o iPhone 14 plus, Phone 14 plus um, dois, três, elas estão organizadas de acordo. Você pode renomeá-los como explicamos anteriormente. Você pode simplesmente clicar duas vezes e poderá renomeá-los para ver a tela um, por exemplo, e depois criá-la Não, essa é a tela três. Por exemplo, digamos que a tela três, e essa é a tela um, a tela dois, e essa é a tela um. C, basta clicar duas vezes e chamar essa tela de uma. Portanto, você pode ver que as boas-vindas agora são um subconjunto da tela três porque esse é um item abaixo desse quadro três Este é um item abaixo do quadro dois. Este é um item embaixo da moldura. De um, em um. E então você tem isso, deixe-me usar a letra H, e você pode ver nesta pequena moldura um, você pode ver que todas elas estão alojadas sob esta moldura E em cada caso, você pode reduzir as propriedades, os elementos, para poder ver com clareza e facilidade de acesso a outras propriedades. Agora, em cada quadro que você criou, você pode ver que tem essa opção Depois de selecionar esse quadro, você pode ver essas propriedades. Essas são as propriedades do quadro que você acabou de criar. E você também pode brincar com o tamanho em termos de posição, largura e altura. Você pode brincar com algumas dessas propriedades e invertê-las da horizontal e fazê-las da vertical e torná-las horizontais ou a bordo E você pode brincar com o raio do canto. Você pode usar. Eu uso muito isso. Então, porque quando você brinca, você pode ver que pode aumentar o raio do canto E tudo agora se torna o raio agora não é mais íngreme como você era Então você pode ter tantas propriedades. No ângulo de rotação, como explicamos anteriormente, você tem as propriedades para brincar com a irrotação e com a sensação Você pode alterar a cor da sensação apenas clicando nela e pode selecionar a cor e variá-la de acordo. OK. Então, abordamos todos esses elementos básicos, como adicionar elementos e lidar com eles em quadros em detalhes. Mas agora você tem a opção de campo. Você tem a opção de traçado como explicamos anteriormente. Você tem a opção de seita. Além disso, se você quiser adicionar sombra projetada ao redor, poderá ver bastante. Portanto, também temos esses outros recursos. Temos a marca pronta para desenvolvimento e os usuários mascaram e ótimos componentes a partir dela. Isso conclui esta aula sobre como adicionar molduras e personalizá-las adequadamente em nossa tela Espero que você goste desse vídeo. Obrigado por assistir, e estou ansioso para ver você na próxima aula. Por 10. Como adicionar grades e guias: Ok, então na última aula, falamos sobre como adicionar e personalizar molduras no Figma E nesta aula, falaremos sobre como adicionar grades e guias em nossos quadros Portanto, grades e guias são na verdade, muito importantes para nos manter organizados e garantir que trabalhemos com precisão durante todo o processo de adicionar elementos e removê-los de nossas molduras Assim, podemos saber exatamente os tamanhos em todos os sites, e assim por diante, à medida que avançamos com a criação de molduras. Então, a primeira coisa é que podemos adicionar grades apenas selecionando um quadro específico, e você pode ir até o painel de propriedades aqui e ver a grade de layout aqui Então, você pode simplesmente clicar neste sinal de gráfico para adicionar uma grade e, por padrão, essa é a grade que está sendo adicionada. Agora, eu tenho uma grade sobre isso, e você pode vê-la claramente visível no layout da grade. Você pode escondê-lo se quiser. Você pode ocultá-lo ou mostrá-lo diretamente, como explicamos esse corte em qualquer elemento. Se você quiser ter mais propriedades dessa grade em particular ou brincar mais com ela, você pode clicar nesses pontos, neste Seton Você pode simplesmente clicar. Você pode simplesmente clicar e ver que, com esse menu suspenso, você tem vários tipos de grade. Essa é uma grade normal. Se você quiser ter uma grade de colunas, você pode clicar e ter essa grade de colunas. Você pode fazer 20, se quiser o número. Dependendo, se você fizer 20, você pode ver que temos o número 20, e você pode brincar com a coloração mudar a cor para qualquer cor de sua escolha Agora, você pode ver que temos essa cor, e você pode bater e escapar. E você tem outras propriedades, como a opacidade. No momento são dez, você pode fazer com que sejam talvez dois. Então, prepare-se para que seus elementos fiquem visíveis. Você pode ver agora que são dois, mas seus elementos estão muito visíveis. Se você não quiser, pode aumentá-la para talvez quatro, aumente a visibilidade, para que você possa vê-la agora mesmo. Os elementos são visíveis, mas as grades também são visíveis Então você tem aqui embaixo o tipo de grade. Essa é a grade de colunas. Você pode clicar para que a outra metade tenha a grade esquerda, e você pode ter a grade direita ou a grade centralizada, dependendo se estiver interessado em obter mais espaçamento da direita ou da esquerda, dependendo de tudo depende de você e você pode vir aqui e dizer esticado, Então, tudo depende. Você pode jogar com eles. Então, agora, digamos que queremos a grade esquerda, e você pode jogar com a largura do outro lado da separação. Você pode fazer com que seja talvez cinco e agora fique menor. E menos grosso. E se você quiser, pode fazer talvez sete para aumentar a espessura. E o deslocamento também agora está definido em zero, você pode vir aqui e aumentar o deslocamento Se você fizer seis, veja que o deslocamento foi aumentado Está bem? Então, dependendo do que você quer na borda. Se você quiser um deslocamento maior na borda, você pode fazer com que isso provavelmente seja 15 Ok, então você pode ver agora que temos um problema maior nas bordas. Agora, aqui embaixo, você tem o número necessário. Você pode aumentá-lo. Talvez se fizermos cinco, você possa ver agora mesmo que pode aumentar ou diminuir o número. Digamos que ajustemos esse 30%, para que você possa ver o , pois agora você pode aumentá-lo lá Agora, você pode adicionar outro layout de grade. Se você estiver interessado, você sempre pode escapar dessa e adicionar outra grade acessando-a neste sinal de mais, e você pode mudar. Agora, você pode adicionar a gutta. Se você quiser, você pode torná-lo um e poderá ver que agora é muito maior. Quando você aumenta o zoom, agora você poderá ver o que você tem, a separação, o necessário, mas então você pode ter esses 20 Eu acho, e agora eu acho que isso é bom. Agora você pode adicionar outra grade simplesmente vindo aqui. Você pode escapar disso e adicionar outra grade entrando nela e batendo no lado positivo Então você pode adicionar outros, para que você possa vir aqui também e brincar com as propriedades. Dependendo, essa é a grade de colunas. Você pode criar uma grade de e também pode jogar com os recursos. Você pode alterar as diferentes partes. Isso é útil nos casos em que você está tentando , então vamos fazer com que seja provavelmente 15. Ah, 12. Portanto, às vezes, isso é útil quando você está lidando com o telefone e deseja organizar seus elementos de acordo Portanto, se você tem esse tamanho uniforme, fica muito fácil organizar seus elementos muito bem E então você pode ir em frente e descascar com eles. Os outros recursos, como explicamos, e você também pode ativar ou desativar qualquer grade diretamente com isso. E você pode remover qualquer grade com aqueles que atingem o sinal negativo Bem, se você estiver interessado, basta remover a grade. Agora, outro recurso importante que quero compartilhar com você e que pode ajudá-lo a a precisão e manter o espaçamento dentro da moldura são as guias As guias podem ser fixadas usando as réguas, tudo bem com as réguas Assim, você pode alternar para mostrar as réguas e mostrá-las em qualquer tipo de tela Sigma usando apenas o atalho Shift F shift r para ativar as réguas nas laterais e na parte superior aqui e deslocar r novamente Assim, você pode dobrar a régua com shift r e ligá-la ou desligá-la Portanto, o guia que você pode ter aqui para ajudá-lo na precisão é que você pode chegar às bordas e até que sua montanha-russa se transforme nesse sinal horizontal Ao clicar e arrastar, você pode ver que tem uma linha que pode ser movida dentro da tela para definir talvez o ponto de partida de um elemento. Se você quiser saber o tamanho de onde você está, no momento, você pode manter pressionada a tecla de opção no teclado, segurar a tecla t nas janelas e ver o número da peça à esquerda E a mesma coisa também, você pode descer. Clique novamente e você pode colocar outro à direita. Se estiver interessado, apenas para facilitar a clareza, você ainda pode manter pressionada a tecla de opção para definir o comprimento na outra borda. Você pode fazer a mesma coisa também na parte superior para ter uma guia horizontal clicando aqui, basta arrastar e pronto. Digamos que mantenhamos isso também para definir a posição exata. Você pode trazer quantas quiser, dependendo do que quiser criar. Você pode trazer elementos diferentes e definir um tamanho específico aos quais definir um tamanho específico deseja adicionar elementos durante o processo, o processo de adição. Portanto, para remover qualquer lata de guia em uma moldura, basta passar por cima dela, selecioná-la, clicar e segurá-la e, em seguida, puxá-la para trás e remover a guia. Para que você possa ver, basta remover isso clicando e arrastando-os de volta com muita facilidade Você pode ver como basta remover todos eles. Portanto, esse é o básico de como adicionar grades e guias para nos ajudar na aquisição em nosso Então, isso conclui esta aula sobre a adição grades e guias em nosso quadro dentro do Sigma Espero que você goste desse vídeo. Obrigado por assistir, e estou ansioso para ver você na próxima aula. Tchau. 11. Como adicionar e personalizar formas: Na última aula, falamos sobre como adicionar grades e guias à nossa tela E nesta aula, aprenderemos como adicionar ovelhas, diferentes tipos de ovelhas e personalizá-las de Agora, vamos começar esclarecendo isso. Então, vamos usar nossa ferramenta pan com a letra H para limpar nossa tela, e então podemos começar a trazer ovelhas diferentes. Agora, para inserir formas, você pode deixá-la na tampa para voltar à ferramenta de seleção. Para inserir formas, você pode ir até o topo aqui. Você pode ver que pode clicar nesse menu suspenso e ter uma série de formas diferentes Você pode começar do retângulo, que pode ser acionado com a letra r, e você tem uma linha com a letra L. Você tem seta com a letra shift L e assim por diante Ok, você tem lábios , polígono e estrela, e você pode colocar imagens e vídeos também na mesma tela se estiver interessado Então, vamos começar importando algo simples, como um retângulo E assim que clicarmos no dcgle, você pode desenhá-lo diretamente arrastando assim Então você pode notar que eu estou desenhando um retângulo, mas quando eu mantenho pressionada a tecla shift, ela vai fazer dele um quadrado Isso fará com que seja um quadrado com o comprimento, a largura e a altura iguais. Então, se você quiser criar um quadrado, é melhor manter pressionada a tecla shift durante a equação. Então você pode ver agora, eu tenho um quadrado. Mas se eu quiser desenhar um retângulo, posso levantar minha mão com a tecla Shift e você pode ver agora que posso usar qualquer tamanho de minha escolha Mas digamos que eu escolha um quadrado desse comprimento, já que agora você pode ver que acabei de desenhar meu quadrado. E vamos adicionar outro. Digamos que eu possa desenhar um polígono como este. Eu posso desenhar facilmente. Você também pode desenhar outra forma. Digamos que usemos a elipse. E se você desenhar também, você vai usar uma elipse como E se você quiser um círculo perfeito, mantenha pressionada a tecla do eixo Então, ele se torna um círculo perfeito com muita facilidade. Agora, é assim que você insere formas diferentes ou desenha qualquer forma na tela. Agora, sempre que você selecionar qualquer uma das formas dos elementos que você acabou de importar ou inserir, você pode ver as propriedades aparecerem aqui. Por exemplo, na posição x, você pode vir aqui e brincar com a posição no X. E na direção y, você pode variá-las diretamente desta forma E você pode alterar a largura e altura se quiser alterar a largura e a altura, mesmo que estejam interconectadas, para que aumentem ou diminuam da mesma forma Se você quiser que eles aumentem ou diminuam de maneiras diferentes , é necessário remover essa ligação Então, nesse caso, você pode aumentar a largura. Ok, você pode ver que agora ele pode aumentar ou diminuir a largura sozinho sem afetar a altura. Você pode ver isso agora mesmo ou aumentar a altura sem afetar a largura. Mas eu sempre prefiro que seja vinculado para que possamos ter um incremento ou diminuição uniforme Então, deixe-me fazer isso para ter um quadrado perfeito. Então, outra coisa, enquanto ainda seleciona a forma, você tem a opção de girá-la, você pode girá-la em qualquer ângulo de sua escolha, se estiver interessado Certo? Deixe-me fazer isso também, e então você pode jogar com o raio do canto No momento, está nítido. Se você quiser reduzir, aumentar ou trazer alguma natureza curva para o raio do canto Você pode ver agora mesmo que adicionou alguma natureza curva ao canto. Como alternativa, se você quiser adicionar a mesma curva de curso ao raio do canto, se selecionar o navio, poderá ver esses pontos Se você selecionar qualquer um deles, selecione, clique e arraste, e você também pode adicionar manualmente o raio do canto Assim, você pode aumentar ou diminuir. Essa é outra forma de adicionar o raio do canto. Ok, então isso é isso. Aqui embaixo, você tem a opção de campo. Você pode adicionar diferentes tipos de coloração de campo a isso. Você pode clicar e selecionar qualquer cor de sua escolha. Você está livre para navegar e escolher uma cor muito bonita para si mesmo. Essa é uma cor sólida. Se você quiser uma cor gradiente, sempre pode clicar nela e agora pode ver que tem uma coloração gradiente. Ao clicar aqui, você pode adicionar o gradiente desse lado Você pode usar esse recurso para controlar a localização do gradiente. Ok, então você pode aumentar ou diminuir a localização do gradiente, para que você possa ver E aqui, você também pode mudar a cor disso. Se você tiver outra cor, se quiser outra cor, você também pode escolher e ver que ela muda de acordo. Então, aqui embaixo, você pode adicionar um traçado, você pode clicar neste lado da trama. Para adicionar um traçado a isso, você pode ver se um traçado adicionado pode ficar dentro, fora ou no centro. Agora, vamos colocá-lo dentro da espessura do traço. Agora é um, menos irregular para algo como 30, e você pode ver metade dele em 30, e você pode clicar nele para alterar a coloração do traçado Por exemplo, vamos usar algo como branco, um tipo de cor branca. Então você pode ver, agora temos nosso traço branco. E em cada caso, em cada uma dessas propriedades, você pode ativá-las ou desativá-las aqui, na coloração e no traçado Você pode ativá-los ou desativá-los usando isso e removê-los também usando os pecados negativos, conforme explicamos anteriormente Então você tem outros efeitos. Você pode clicar para adicionar o efeito de sombra projetada. Você pode adicionar sombra projetada, você pode adicionar sombra interna, você pode adicionar camada de golpe ou golpe de bolsa. Você pode adicionar qualquer um deles. Mas, por enquanto, vamos usar sombra projetada. Tudo bem? E então você pode exportar ou, se estiver interessado, o que abordaremos em uma aula posterior. Agora, adicionamos muito a essa propriedade a essa forma. Se você quiser adicionar a mesma coisa ou propriedade semelhante a esta, há uma maneira mais fácil de fazer isso no Figma A primeira coisa é que você pode chegar ao topo. Ao selecionar essa forma, você pode ir até o topo e selecionar aqui. Você pode vir para editar e pode descer até o fim e copiar propriedades aqui, e você pode selecionar isso e voltar e depois editar e ir para propriedades de pragas Por aqui. Você pode fazer isso com o comando de opção C, pode colar as propriedades diretamente, você pode ver o comando de opção V ou comando de opção C para copiar um comando de opção V para colar. E agora você pode ver que você adicionou , copiou essas propriedades para essa propriedade sem precisar recolorir isso e, em seguida, adicionar alguns dos recursos que você adicionou Em cada caso, em cada formato, ao clicar duas vezes na seiva, você tem acesso. Isso significa que você tem acesso à forma. Você pode fazer muita coisa. Por exemplo, você pode alterar a forma disso acessando os sites. Você pode clicar aqui e estender isso diretamente desta forma. Você também pode vir aqui e clicar, estender e criar outra forma, se estiver interessado. Você pode ver, você pode simplesmente variar clicando, você está estendendo ou alterando a forma E se quiser, você pode optar por adicionar outro, basta selecionar e brincar com ele. Então, deixe-me fazer isso, mas só para mostrar que isso está lhe dando muito controle sobre o que está aqui. Se quiser alterar a cor do arquivo, você pode ver se deseja para poder alterar a cor do campo, selecionar e, em seguida alterá-lo para algo como vermelho. Então eu acho que está tudo bem. E você pode clicar em “Out”. E se você quiser alterar a cor do traçado, você também pode clicar e depois alterar a cor do traçado, talvez para algo como azul, esse azul. E você pode ver agora mesmo, uma vez que você ouve uma fuga, você pode ter essa cor. Então, dependendo do que você quer mudar. Mas então, se você clicar duas vezes em qualquer uma das folhas, poderá ter acesso a essa folha e jogar com ela com muita facilidade Então, acho que basicamente isso conclui esta aula sobre como adicionar camadas, brincar com suas propriedades e personalizá-las adequadamente. Então, espero que tenham gostado desse vídeo. Obrigado por assistir, e estou ansioso para ver você na próxima aula, certo? 12. As ferramentas de caneta e lápis: Nesta aula, aprenderemos como usar a ferramenta caneta e lápis no Figma Agora, para começar, você pode chegar ao topo aqui, aos ícones superiores aqui, e você pode ver caneta e lápis. Ao clicar nesse menu suspenso, você poderá ver caneta e lápis, que podem ser acionados com o comando com a letra P no teclado ou com a tecla Shift P para ativar a ferramenta lápis. Portanto, seja qual for a pessoa em que você vai trabalhar, você pode acioná-la facilmente com Agora, vamos começar com a caneta clicando na letra P, ou podemos simplesmente clicar em P, e você está na ferramenta de caneta aqui. Assim, você pode escrever e criar qualquer coisa de sua escolha. Você pode simplesmente ir em frente. E, como você percebe, se você estiver se movendo livremente, você está livre, você pode se mover para qualquer ângulo de sua escolha. Mas quando você pressiona a tecla shift, ela se ajusta a talvez 45, 90 graus, 45, 90 graus desse jeito Isso facilita a inserção nesses recursos. Digamos que vamos ter algo como 45 graus, eu clico aqui, e ainda temos o mesmo deslocamento, você pode ver que automaticamente me diz que estou em um ponto em que esses dois são iguais, então você também pode clicar, e então provavelmente podemos passar para cá, e até chegar a esse ponto, agora está mostrando que você está no mesmo ponto e localização. Você pode simplesmente clicar aqui e, finalmente, fechar, se quiser. Nós podemos nos mudar para cá. E faça outro clique e, finalmente, chegue a este ponto. Mas eu quero que cubra aqui e está a apenas 45 graus. Eu queria cobrir então. Talvez eu tenha que soltar o câmbio, então eu posso simplesmente clicar e cobrir isso. Então agora isso se torna perfeito, de acordo com o que eu quero. Eu sempre posso pressionar a tecla de comando para sair disso. E agora eu tenho essa forma desenhada com meu próprio alfinete. Ao selecionar uma forma específica que você desenhou, você também verá suas propriedades aqui. Por padrão, ele adiciona um traçado a isso. E você pode ver o traço. Quando você vem aqui, você clica e estende e você pode ver que o traço existe. Você pode ver que existe. E se você quiser mudar a cor, você também pode alterar a cor da mesma forma que fizemos na outra aula, você pode alterá-la da mesma forma. Agora, outra coisa que você pode fazer com a forma que acabou criar é sempre clicar duas vezes nela. Você sempre pode clicar duas vezes dentro para entrar na forma e fazer algumas edições Por exemplo, talvez você queira adicionar alguns pontos para a edição. Ou você pode querer mudar a forma disso. Você pode simplesmente clicar e alterar a forma. Só podemos clicar. Assim, você pode ver que pode fazer alterações na forma. Você pode estendê-lo e alterá-lo para o que quiser. Você pode simplesmente brincar com isso com muita facilidade. E se você quiser colorir algumas seções disso, por exemplo, você quer dar uma sensação a isso. Então, enquanto você ainda está no modo de edição, você pode vir aqui e clicar neste bolso de caneta. E depois de clicar nele, você pode colorir as seções adequadamente. Agora você pode colorir esta seção apenas clicando nela e, por padrão, ela remove a cor padrão interna E você pode vir aqui, basta clicar e você pode mudar agora a coloração. Talvez você possa trocá-lo por esse vermelho e escapar. E depois de terminar com isso, você pode dizer pronto, e agora você tem uma forma que criou com sua caneta e ela tem tantos detalhes. Agora, se você quiser usar a ferramenta de lápis, você ainda pode usar a tecla Shift P. Desloque uma letra P para acioná-la, e você pode vir aqui e escrever o que quiser. Está bem? Assim, você pode vir e ver que, por padrão, o figma ajudará a armazenar tudo o que você tiver Você pode ver agora mesmo e simplesmente digitar alguma coisa. Ok, então você pode ir em frente e digitar o que quiser digitar aqui. Assim, você pode ver o que escreveu nessa camada com detalhes sobre como organizar todas essas camadas, possa entender o que tudo isso significa. Mas, por enquanto, você pode usar isso e criar isso. Você pode escrever como quiser dentro desta nave ou em qualquer lugar. E quando terminar, você sempre pode escapar disso, e você pode ver que pode selecionar qualquer um desses recursos que você escreveu. E você também pode fazer edições se estiver interessado. Mas, no momento, eu não quero nenhum deles, então posso selecionar todos eles e excluir se eu quiser excluir. Mas esse é o básico sobre como usar a ferramenta caneta e a ferramenta lápis na tela para escrever ou desenhar qualquer coisa de sua escolha Espero que você goste desse vídeo. Obrigado por assistir, e estou ansioso para ver você na próxima aula. 13. Operações booleanas + Assignment: Então, bem-vindo de volta. Nesta aula, aprenderemos algumas noções básicas de operações booleanas Está bem? Então, nas operações booleanas, aprenderemos como combinar uma forma com outra e, provavelmente, às vezes aprenderemos como separar uma forma da outra Então, vamos começar do zero. Excluí tudo, então vou trazer duas formas com as quais podemos demonstrar isso. Digamos que chegamos à opção de formas, ao recurso de formas selecionadas aqui, e vamos selecionar algo parecido e desenhar algo como um retângulo E se quisermos ter a mesma borda circular ao redor da borda, ainda podemos vir aqui, deslizar e arrastar e temos uma forma circular como esta Decidiremos mudar a cor do campo para algo parecido com “isso é bom”. Vamos tentar adicionar outra forma. Vamos adicionar isso. Desenhamos o círculo como mostramos anteriormente, você pode manter pressionada a tecla do eixo E você pode desenhar um círculo perfeito desse jeito, certo? Então, vamos mudar o campo disso também para algo parecido com isso, basta clicar em. Agora, em operações booleanas, geralmente, você precisa combinar duas coisas Então, quando selecionamos o medicamento e selecionamos essas duas formas, você notará que esse ícone acabou de aparecer. É chamado de grupos booleanos. Neste caso, você aprenderá a agrupar esses itens em diferentes formas. Então, ao clicar nesse menu suspenso, você verá que pode ter seleção de união, seleção subtração, seleção interseção e seleção de exclusão . E então temos seleção plana Está bem? Então, vamos aprender sobre tudo isso no final desta aula. Agora, vamos começar com o começo. Vamos selecionar nosso círculo e arrastá-lo até este. OK. Então, vamos meio que inserir isso nisso. Agora, quando você seleciona todos eles selecionando todos eles desse jeito, e você pode chegar aos grupos de lingotes, você pode fazer a seleção sindical, que combina esse recurso e esse recurso , certo? Isso e isso agora estão combinados. Agora, em qualquer caso, se você quiser ter acesso a cada uma delas, clique duas vezes na forma e veja agora que tem duas formas, mas elas são combinadas usando os grupos booleanos E você é livre para movê-los, mudar e trocar de posição, se for isso que você quiser. Então, isso é combinado, um lingote. Então, basta combinar as duas formas . Agora, você pode fazer isso. Digamos que façamos isso até este ponto e , em seguida, vamos arrastá-los e movê-los com aço, e então podemos selecionar. E agora queremos fazer a seleção de subtração. Então, subtraímos a seleção. O que isso faz é simplesmente subtrair essa parte da seção combinada a, eu subtraí dessa parte desta Certo? Então, como confirmamos isso? Podemos clicar duas vezes aqui, e você pode ver que esse círculo ainda está lá, certo? Ainda está lá, mas foi subtraído, e você pode alterar a subtração, o arranjo ou o comportamento entre os dois apenas se movendo Mas, no momento, o padrão é que ele foi subtraído e você pode estender ou brincar com esse recurso, como quiser Mas agora é uma única coisa que foi subtraída. Essa forma foi subtraída dessa. Agora, outra coisa que podemos confirmar é que vamos fazer isso também. Já que vimos a subtração. Vamos voltar ainda enquanto selecionamos os dois, podemos voltar à operação de Boulan, podemos dizer seleção de interseção Agora selecionamos, o que isso nos dá é o ponto de interseção entre a seleção Então, esse é o ponto de interseção entre os dois Então, vamos fazer para que você possa entender o que estou tentando dizer. Ok, então esta é apenas a interseção que ele nos deu entre esses dois Apenas essa interseção é o que ela nos deu. Então você entende a mensagem. Essa é a seleção de interseção. Podemos selecionar novamente e podemos fazer a última, que é excluir a seleção. E o que isso vai fazer, o ponto de interseção entre essas duas formas é o que será excluído. Então, vamos tentar isso. E você pode ver que o ponto de interseção agora foi excluído Você também pode se movimentar. E ao clicar duas vezes, você também pode se mover para alterar a interseção Mas o que está lhe dizendo é que, em qualquer ponto, essas duas formas se cruzam na seção que será removida para Você pode brincar com isso, maneira que quiser, dependendo do que está tentando criar. Agora, o último recurso, que é a seleção de nivelamento, seja qual for a operação booleana que você selecionou aqui e tenha a resolução, se você fizer a seleção de nivelamento, agora ela a converterá em uma única Portanto, agora você tem apenas uma única forma que se comporta com a operação booleana que você acabou Basicamente, esse é o básico sobre como usar o player de operações booleanas com navios e adicionar coisas diferentes, certo Então você pode ir em frente e experimentá-los como quiser, dependendo do que você está tentando criar e dependendo do seu alvo, você pode simplesmente fazer adição de subtração ou interseção ou algo parecido E então, no final de tudo, você pode converter tudo em um único navio. Agora, antes de terminarmos esta aula, quero lhe dar uma tarefa simples que você pode experimentar sozinho, apenas para demonstrar o uso do Figma para criar as operações bulon Eu quero que você crie isso. Deixe-me colocar a letra H para dar uma olhada. Então, esse navio. Eu quero que você crie esta nave com a operação booleana Isso é apenas um triângulo e esses são círculos em cima dele, e usamos as operações booleanas para criá-lo Então, por favor, tente criar algo assim para que possamos ver se você não tem, se você não tiver a oportunidade de fazer isso, vamos resolver isso na próxima aula. Mas só para colocar as mãos no sistema e tentar fazer o que estamos fazendo e tentar aprender o básico, quero que você experimente isso, mas resolveremos isso na próxima aula de qualquer maneira Está bem? Então, espero que você goste desse vídeo. Obrigado por assistir, e estou ansioso para ver você na próxima aula. Tchau. 14. Solução para o Assignment: Então, na última aula, damos uma tarefa simples sobre como você tentar criar algo como essa forma simples com as operações booleanas Então, nesta classe, vamos apenas reproduzi-lo para ver como podemos fazer isso rapidamente usando as operações booleanas Então, para começar, basta acessar as formas aqui e clicar em qualquer forma. Neste momento, podemos ver que este é um retângulo. É um polígono, então podemos seguir em frente, clicar em um polígono, e você pode simplesmente clicar e arrastar e agora podemos ver que criamos Assim, podemos selecioná-lo enquanto selecionamos o polígono, ainda podemos voltar e alterar o campo para qualquer cor, podemos alterá-lo para qualquer cor apenas para diferenciar o que Então, vamos selecionar algo assim. E então esses são pequenos círculos que temos. Então, para criar esses círculos, podemos simplesmente vir até ps, clicar e manter pressionada a tecla shift para criar o círculo, certo? Você pode ver que acabamos de criar um círculo e você também pode alterar o campo para qualquer cor que corresponda a isso. Então, vamos usar algo como vermelho. Sim. Então, vermelho para diferenciar e clicar. Agora podemos selecionar isso e copiar e colar usando Control C e ControV control C e Control V, e então podemos ver que os criamos três vezes Nós fazemos três cópias uma, duas, três, certo? Então, em cada caso, podemos arrastar cada um deles e colocá-lo em uma posição. Muito facilmente, algo assim, muito facilmente, algo assim, e muito facilmente, algo assim, certo? Então eu acho que só precisamos de três para isso, certo? Então, podemos vender assim e deletar. Então, não precisamos disso. Então, uma vez que tenhamos essas três formas alinhadas ou combinadas, agora vamos aplicar as operações booleanas como você mostrou na classe anterior . Então, como fazer isso. Para fazer isso, podemos fazer seleções de todos os três recursos, de todas as três formas, e então podemos ir até o grupo Bullion aqui, e então podemos continuar e fazer a seleção de subfaixas Assim, basta clicar em subtrair a seleção e pronto para você ter sua solução pronta Tudo está sendo criado da mesma forma que temos. Portanto, esta é apenas a solução básica para nossa tarefa, pequena tarefa que acabamos de dar na aula anterior Por favor, vá em frente e tente ver como você pode brincar com a maioria desses recursos, ver como você pode mover as coisas e ver como você pode continuar planejando as coisas juntos. Espero que você goste desse vídeo. Obrigado por assistir, e estou ansioso para ver você na próxima aula. 15. Como usar as ferramentas de alinhamento: Ok, então nesta aula, aprenderemos os fundamentos do alinhamento na Está bem? Então, eu tenho essas formas nas quais trabalhamos. Acabei de adicionar alguns apenas para demonstrar alguns dos aplicativos. Está bem? Então, digamos que temos essas formas espalhadas e aprenderemos como alinhar o alinhamento das formas dentro de uma Então você pode ver que eu emoldurei todos eles, e este está saindo da moldura Este também está saindo da moldura. Então, como podemos garantir que eles estejam alinhados usando esse recurso de alinhamento Portanto, a primeira coisa que você precisa fazer sempre que quiser iniciar o alinhamento é selecionar todos os detalhes ou todos os elementos que deseja alinhar Então, neste caso, eu selecionei todas essas naves, e eu posso vir aqui, você tem diferentes tipos de opções de alinhamento. Por exemplo, você pode alinhar à esquerda e tudo ficará alinhado à esquerda, ou você pode alinhar ao centro ou Então, deixe-me fazer isso, e tudo será alinhado de acordo com esta caixa Veja bem, está de acordo com esta caixa. Então, no centro esquerdo, ele vai para ele acabou de se alinhar à esquerda. E para alinhar ao centro, basta clicar em alinhar ao centro, e tudo ficaria alinhado ao centro assim Então, deixe-me fazer isso também com o ControZ e você pode alinhar à direita e ele será alinhado exatamente assim Ok, então você pode ver que agora tudo está alinhado corretamente Agora, outra coisa que você pode fazer é fazer esse alinhamento vertical Você também pode fazer o alinhamento horizontal. Assim, você pode alinhar a parte superior e agora tudo será alinhado com a parte superior de acordo com esta caixa, e você também pode alinhar o centro Usando o recurso vertical. Você pode ver que tudo está alinhado agora e também pode alinhar a parte inferior, e também pode alinhar a parte inferior da mesma forma que a temos no sinal vertical Agora, outra coisa importante a ser observada é que, além desse alinhamento horizontal e vertical muito básico, você tem os pontos Você tem mais opções ao clicar aqui, você tem a maré, depois o espaçamento vertical distribuído e, em seguida, o espaçamento horizontal distribuído Você pode fazer isso com todas as teclas de atalho. Teclas de atalho, você pode usá-las. A arrumação garante que os recursos estejam ativados igualmente espaçados na direção vertical Então, você pode ver que, com este sinal rosa, a linha rosa foi espaçada na direção vertical Portanto, você também pode alterar isso se estiver interessado ao passar o mouse sobre a cor rosa e o cursor se transformar nesse sinal vertical, você pode clicar e arrastar e ver a cor rosa diretamente exibida, e você pode aumentar ou diminuir o sinal também como quiser O ritmo entre as formas na direção vertical, certo? E você pode fazer isso também a partir daqui. Você pode fazer isso de qualquer lugar, certo? Então, deixe-me fazer isso também. E então você pode fazer o contrário no espaçamento vertical distribuído Você pode ver que eles foram distribuídos igualmente no espaçamento vertical e também pode fazer o mesmo no espaçamento horizontal Eles foram distribuídos igualmente no espaçamento horizontal Então, isso conclui esta aula sobre os fundamentos do alinhamento, como alinhar à esquerda, à direita e ao centro e dentro dessas naves que acabamos Então, até a próxima vez, obrigado por assistir, e espero ver você na próxima aula. Tchau. 16. Como adicionar e personalizar buttons: Nesta aula, aprenderemos como criar botões e até mesmo torná-los responsivos Agora, para criar botões, vamos começar adicionando algo como uma moldura. Então, você pode ir até a seção de molduras aqui, que também pode ser acionada com a letra F. Basta clicar e selecionar qualquer pessoa Digamos que vamos com F 14, F 13 mini, este. Então, para adicionar um botão, você pode ir diretamente para as formas aqui. Você pode clicar e selecionar um retângulo. Você pode simplesmente descer aqui e clicar e arrastar. Então, agora esse é o nosso botão. Mas, como você sabe, a maioria dos botões tem vermelhos circulares nas laterais, então podemos adicionar vermelhos circulares Chegando a esse fim, podemos simplesmente vir aqui até que seu cursor se transforme nesse sinal horizontal. Você pode clicar e criar a natureza circular. Então você pode ver que temos as bordas circulares. Então você pode mudar a coloração disso. Você pode simplesmente vir aqui. Vamos mudar para algo como azul. E podemos selecionar essa cor e clicar, e agora criamos nosso botão. Então, o próximo passo é que podemos adicionar um texto no botão. Podemos fazer isso acessando a letra T aqui ou o recurso de texto, ou você pode pressionar a letra T no teclado para ativar ou acionar o recurso de texto. Agora podemos clicar aqui e escrever qualquer coisa. Ok, comece e podemos selecionar. Podemos brincar com o tamanho aqui. Vamos fazer algo como 40, certo? Assim, podemos escapar e, se quiser, você pode alinhar os dois Então você pode selecionar isso e selecionar isso mantendo pressionada a tecla shift ou você pode simplesmente selecionar os dois juntos. E você pode simplesmente ir em frente e vir aqui e ver o centro de alinhamento e o centro de alinhamento também Portanto, agora está perfeitamente alinhado ao seu botão. O texto agora está perfeitamente alinhado ao seu botão. Agora, a próxima coisa é que, se você perceber que isso não responde, o que queremos dizer com não responsivo é se selecionarmos isso e tentarmos alterar o menu Iniciar para algo como, vamos tentar criar uma duplicata disso Selecione e venha e D, você está marcado, para criar uma duplicata, basta clicar duas vezes e dizer comece No momento, você pode ver que ele não responde à medida que o comprimento do texto se estende, o botão ainda permanece onde está Então, para criar um botão estendido ou responsivo, tudo o que você precisa é selecionar os dois, o botão e o texto, clicar com o botão direito do mouse e dizer seleção de grupo, e então você ainda pode clicar com o botão direito Você pode usar a tecla shift A no teclado para torná-lo responsivo O que isso significa é que, se eu clicar duas vezes sobre isso e, em vez de começar tentar começar, dê uma olhada no que acontece. Você também pode ver que o botão se estende enquanto tento estender minha parte superior direita. Está bem? Então, o botão agora se torna responsivo com base no que eu escrevi no botão OK. Então, se eu decidir mudar isso também e simplesmente chamar esse menu, ele rapidamente se transformará em menu. Outra coisa que quero mostrar é que, ao mesmo tempo , selecionamos o botão que acabamos de selecionar. Uma coisa que você deve prestar atenção é esse layout automático. Agora, no momento, você vê que está selecionado o layout horizontal. Ele selecionou o layout horizontal. Isso porque tudo o que temos aqui está alinhado horizontalmente Tudo é horizontal. Se adicionarmos alguma coisa, será na horizontal. O incremento e a diminuição do tamanho, a natureza responsiva, é horizontal porque foi detectada automaticamente com base no conteúdo que possui detectada automaticamente com base no conteúdo que Vamos tentar ver como ele detectará automaticamente que isso seja vertical. Então, vamos criar outro botão simples, aproximadamente. Então, digamos que temos esse botão assim, e rapidamente viemos aqui e ajustamos os cantos laterais e mudamos o campo para algo como vermelho. E agora queremos adicionar alguns elementos, talvez digamos um pequeno círculo. Nós apenas desenhamos e mudamos a cor para algo como azul. Certo? Então, algo assim, e nós meio que aumentamos um pouco o tamanho, certo? Então, digamos que aumentemos o tamanho. Agora, o que podemos fazer é duplicar isso talvez mais algumas vezes. Talvez tenhamos três desses. Então, podemos simplesmente arrastar e soltar, arrastar e soltar, e então podemos arrastar e soltar. Assim, podemos selecionar tudo como fizemos antes e chegar ao alinhamento. Podemos alinhar tudo ao centro. Então, agora tudo está alinhado corretamente. Então, enquanto ainda selecionamos tudo, podemos fazer o Shift A para garantir que tudo agora seja responsivo Então, você pode ver que, ao fazer o shift A, o layout automático foi alterado para o layout vertical, B detectou o incremento disso Então, digamos que não podemos duplicar isso. Então, digamos que adicionamos alguns, queremos adicionar algo a isso. Você pode ir até o círculo e digamos que criaremos outro círculo , mas desta vez dessa cor. Então, se você quiser adicioná-lo a esse recurso, alinhar ele se ajustará e responderá à adição e estará na direção vertical Então, vamos até aqui e você pode ver com essa linha azul, ela está apenas significando a posição que colocará nosso círculo Então, quando saímos, soltamos, você pode ver que foi adicionado ao nosso círculo, certo? Então você pode selecionar isso e vamos movê-lo para cima para que possamos ver tudo. Agora, esse é o dever do anúncio de torná-lo responsivo à vertical Então você pode fazer isso como eu quiser. E você pode clicar duas vezes sobre isso e remover. E o mesmo botão responderá ao que você adicionou. Portanto, nesse caso, isso é muito útil nos casos em que você deseja adicionar alguns ícones a isso. Por exemplo, você pode simplesmente selecionar e mover isso, talvez provavelmente para aqui. E depois de soltar, você pode ver o botão acabou de ser ajustado adequadamente. Vamos mudar essa cor para que fique visível. Tudo bem, então vamos torná-lo branco. Tudo bem, então você pode ver, comece aqui e agora isso se torna responsivo à medida que o adicionamos, e este também se torna responsivo quando o removemos Então, isso conclui essa aula sobre adicionar botões e torná-los responsivos, tanto na horizontal quanto na vertical, usando o layout automático Espero que você goste desse vídeo. Obrigado por assistir, e estou ansioso para ver você na próxima aula, 17. Como adicionar e personalizar componentes: Nesta aula, aprenderemos sobre componentes, como adicionar componentes, como criar componentes e gerenciá-los dentro do Sigma Portanto, os componentes são comportamentos específicos que você pode atribuir a algum grupo de elementos nos quais você pode ter um comportamento específico. Então, supondo que eu tenha esse botão Iniciar e planeje criar mais dez ou 15 quadros, e quero ter esse botão Iniciar incluído em todos os quadros Agora, normalmente, se eu quiser incluir isso em quadros diferentes, por exemplo, digamos que selecionemos esse quadro e o duplicamos E digamos que temos esse quadro novo e queremos ter esse menu de guias incluído em tudo isso em todos os respectivos quadros que eu quero ter. O que costumava acontecer é que podemos fazer isso de maneiras diferentes. Podemos copiar isso e podemos chegar a esse quadro e colá-lo. E o que acontece agora é que, se mudarmos alguma das características disso, isso não afetará isso. Tudo bem Então, se você decidir mudar a coloração disso, isso não afetará esse em particular Portanto, nos casos em que estou lidando com mais de dez a 15 cinco quadros com esse menu inicial incluído, pode ser muito difícil fazer alterações. Se eu mudar uma em particular e quiser que ela tenha efeito em todas as outras, fica muito, muito difícil para mim fazer isso. Então, como faço para tornar isso mais fácil? Você pode facilitar criando componentes a partir da série de elementos que você tem, ou desse botão específico, por exemplo, Deixe-me fazer isso, ou deixe-me selecionar isso e excluir. E o que posso fazer para criar um componente é selecionar esse quadro específico, que você pode ver aqui, quadro um. E ao selecioná-lo, você pode chegar ao topo desses melhores homens. Você pode ver a criação de componentes a partir disso. E você pode fazer isso com a tecla de opção, a tecla comando e, em seguida, a tecla. Isso vai ajudar você a criar componentes. Agora, podemos clicar nisso e automaticamente isso agora se torna um componente. Você pode ver que as bordas acabaram de virar para essa cor rosa, e você também pode ver daqui que isso agora se torna a cor dessas mudanças, e tem esse sinal de diamante, que agora é um componente. Então, isso é um sinal de que agora é um componente, é uma combinação de tudo isso e tem a mesma propriedade única. Deixe-me mostrar o que você também pode fazer para gerenciar esse componente. Então, vamos chamar isso, vamos renomear isso para torná-lo o botão principal Então você pode chamar esse botão principal, certo? E aqui não entre. Então, vamos tentar duplicar isso para que eu possa te mostrar algo Até mesmo duplicá-lo sozinho não é suficiente. Você pode ver se duplicamos isso. Provavelmente vou querer ter essa cópia duplicada. Você pode ver que é um componente duplicado. Está aqui, aqui. Você pode ver que este tem dois sinais diferentes. Este é um componente de incenso e esse é um duplicado, esse é o componente principal, esse, esse é o incenso, assim como uma cópia do Agora, o que acontece é se eu tentar copiar esse componente de incenso e chegar a essa moldura e colar Então, se eu mudar alguma coisa aqui, isso ainda não afetará meu componente principal, apenas para mostrar que uma cópia do componente não pode servir à função que um componente principal pode servir. Então, vamos tentar fazer isso. Vamos mudar isso, e você não pode ver nada, nenhum efeito é mostrado no componente principal. Mesmo sendo um componente de incenso, que é uma cópia exatamente como uma cópia do componente principal Ok, então se eu fizer uma cópia disso. Então, se eu fizer isso, vamos excluir isso, e se eu fizer uma cópia disso, talvez, por exemplo, eu selecione, duplique isso e mova isso para isso Ok. E provavelmente eu tenho outra moldura. Eu dupliquei isso também, eu dupliquei este formulário, então eu tenho três quadros com Então, sempre que eu mudar isso, nada vai acontecer. Mas quando eu volto para o componente principal, este, e eu mudo alguma coisa, isso vai afetar o resto do componente. Dê uma olhada no que acontece. Então, se eu voltar para o componente principal e depois mudar essa cor para provavelmente algo como esse vermelho e você pode ver, tudo agora muda e assume o efeito que acabei de inserir no acabei de inserir componente mestre, que é o componente principal. E se eu decidir mudar o raio do círculo externo, se eu alterá-lo, isso afetará igualmente todo o componente, todo o corpo que eu tenho em todos os diferentes Então, digamos que eu reduza ou aumente o raio desse canto, mas isso ainda afetará o contrário Você pode ver que se eu selecionar e adicionar alguma coisa aqui, isso afetará os outros. Você pode ver com muita facilidade. Portanto, fica muito fácil navegar e se conectar entre os diferentes elementos conforme você os tem nos diferentes quadros, não importa quantas fraternidades você possa ter Então, com a criação de componentes, fica muito, muito fácil navegar entre eles. Agora, deixe-me mostrar como você também pode adicionar componentes com muita facilidade nos diferentes elementos, componentes com muita facilidade nos diferentes elementos, nos diferentes quadros. Você também pode sempre acessar ativos aqui, iPhones, e poderá ver aqui o componente principal que você acabou de criar Assim, você pode facilmente arrastá-lo e soltá-lo aqui. Você pode arrastá-lo e soltá-lo facilmente onde quiser arrastar e soltar. E sempre que você faz alterações nisso também, isso afeta a coisa toda. Veja, com muita facilidade. Eu afetei tudo. Mudanças no componente principal definitivamente afetarão os outros. Ok. Então, basicamente, isso é como criar componentes e gerenciá-los dentro do Figma Espero que você goste desse vídeo. Na próxima aula, veremos as variantes, o que são variantes e como as gerenciamos no Figma Então, até a próxima vez, obrigado por assistir e espero ver você na próxima aula. 18. Como criar e gerenciar variantes: Na última aula, falamos sobre como adicionar componentes personalizados. E nesta aula, aprenderemos como criar variantes. Portanto, nos casos de variação de componentes, você precisa manter a mesma propriedade em todas as outras plataformas em todos os outros botões que você criará Mas, por outro lado, agora você pode ter uma versão diferente disso e, quando quiser alterar qualquer uma delas, automaticamente, você pode selecionar qual variação deseja criar e pode simplesmente criá-la com muita facilidade Agora, deixe-me dar um exemplo do que estou falando em relação a isso. Para começar, vamos tentar ajustar algo para ajustar isso. Então, deixe-me excluir isso porque não precisamos disso e também não precisamos disso neste momento. Vamos começar ajustando isso. Ao selecioná-lo, podemos acessar o painel de propriedades aqui. A primeira coisa é, digamos, que eu queira criar uma variante disso. Você pode ver, selecionando, você tem as propriedades. Você pode ver as propriedades, então você pode clicar neste sinal de mais e ter as diferentes propriedades. Você pode ver como criar novas propriedades. Você tem variante, você tem ouro, você tem troca de instância e texto Para esse caso, vamos criar uma variante. Então, podemos simplesmente clicar na variante e ver o que temos aqui. O nome é properties e a propriedade é padrão. Eu defino como padrão. A propriedade é definida como padrão nesta opção. Então, o que podemos fazer é que essa é a variante principal, certo? É sua propriedade de nome e a propriedade que ela tem é padrão. Então, podemos decidir renomear isso, chamar a variante principal e a propriedade será padrão Podemos mantê-lo como padrão. Mas então podemos criar uma média de que podemos criar uma variante a partir disso apenas descendo até esse sinal do gráfico, e podemos clicar em adicionar variante e temos essa segunda variante. Agora, tudo será encerrado sob essa moldura tracejada, algo como uma moldura tracejada algo como uma Além disso. É extensível Você pode vir aqui e clicar e estendê-lo se quiser estendê-lo. É por isso que dizemos que é uma espécie de moldura de traço Agora, essa, essa segunda, vamos tentar ver se podemos mudar as propriedades da segunda. Tudo bem, então digamos que tentemos alterar essa composição, essa propriedade as propriedades desse botão em particular Por exemplo, podemos decidir remover essa coloração, podemos decidir remover a cor e, provavelmente, podemos torná-la tão clara E então podemos decidir jogar com essa fronteira. Então, podemos decidir jogar a borda do traço apenas adicionando o traço e provavelmente estendendo-o para talvez nossos cinco sejam falar, mas acho que está tudo bem Assim, podemos clicar duas vezes nesse texto e também alterar as propriedades do texto, especialmente a cor, especialmente a cor do texto, selecioná-lo e deixá-lo vermelho. E esse ícone também que temos, vamos selecioná-lo e mudar a cor para provavelmente essa cor rosada Tudo bem, então podemos ver. Agora temos esse começo com essa cor do, então podemos chamar isso. Podemos clicar duas vezes nele e acessar as propriedades. Agora vamos mudar a variante principal. Podemos chamar essa variante de dois, mas podemos chamá-la. Vamos chamar esse esboço, por exemplo, porque é diferente do principal porque esse é apenas o esboço Certo? Então, agora, quero mostrar como você pode afetar essas duas variantes nesses botões que você distribuiu nos dois quadros. Então, quando você seleciona o componente principal desse botão, você pode ver as mesmas propriedades aparecendo. Então, quando você seleciona esse botão específico, você pode ver no botão principal. Oh, esse é o nome que demos ao botão principal. Isso é o que parece porque isso é um componente disso. É apenas uma cópia do componente principal. Você pode ver que o nomeamos para estar no botão, e você pode ver que as propriedades são padrão. Então, ao clicar nesse menu suspenso, você pode ver o botão de contorno, que é para a variante Então, depois de clicar nisso, agora você pode ver que seu botão agora muda para essa variante. Portanto, torna-se muito, muito útil nos casos em que você não precisa recriar isso e tem vários quadros para usar apenas variações diferentes Então, quando você se deparar com isso também, se quiser alterá-lo para o outro, basta selecionar e ver o texto do esboço Ou se você quiser voltar para essa variante principal, basta selecionar. Há algumas mudanças. Você pode selecionar, descer e simplesmente dizer padrão, e ele volta para o principal. OK. Então, isso é basicamente como adicionar uma variante, criar uma variante e gerenciá-la de forma transversal. Agora, deixe-me mostrar outra instância que é muito, muito importante e que você pode gostar de usar. Então, digamos que com este. Digamos que com essa variante, essa primeira. Eu quero mudar alguma coisa. Por exemplo, eu dou este. Eu lhe dou outro nome. Eu chamo isso de ícone, e eu chamo isso de verdade aqui. E eu chamo isso de verdade. E eu seleciono este e venho aqui. Eu também dou a ele um nome de ícone. Mas desta vez, eu chamo isso de falso. OK. Então, o que estou tentando fazer. Ao selecionar este, vou excluir este ícone, este, que significa que este está sem um ícone, e este está com um ícone. Acabei de defini-los. Então, sempre que clico nisso, agora o nome mudou para um ícone, mas quatro. E então este também mudou o nome para um ícone, mas é verdade. Então, agora, quando tento mudar a faração, talvez eu selecione isso e chegue ao botão principal Você pode ver agora que o nome mudou para um ícone ou com este sinal ligado e desligado. Então, se eu fizer isso, isso trará de volta essa variação. E se eu desligá-lo, ele ficará sem o ícone, exatamente como mostramos. Ok, então é muito, muito interessante. Se eu selecionar isso também e quiser voltar para essa variante de botão, posso simplesmente desligar o ícone, então agora ele se torna isso. Então isso só é possível porque eu adicionei o comando verdadeiro e falso, ok? Então, se você voltar a isso e tentar clicar nele. Nesse caso, defino a propriedade como verdadeira e, neste caso, defini a propriedade como falsa. Essa é a única razão pela qual consigo ativar e desativar esses dois botões de variação Então, veja a diferença. Ou seja, se você usar qualquer texto, não obterá o mesmo efeito dessa opção de ativar e desativar o problema do ícone, você pode ver, essa Como você pode ver, também nas camadas aqui, esse primeiro ícone é igual a falso, e neste ícone igual a dois. Essa é a diferença. Então, isso conclui esta aula sobre como entender as variantes, como criá-las e como manipulá-las no Espero que você goste desse vídeo. Obrigado por assistir, e estou ansioso para ver você na próxima aula. 19. Como adicionar plugins: Então, nesta aula, aprenderemos como adicionar e executar plug-ins. plug-ins são elementos de terceiros que podemos usar aplicativos que podemos adicionar ao Figma para aprimorar nossas experiências Às vezes, talvez seja necessário empregar alguns aplicativos gratuitos de terceiros para adicionar à criação de nosso conteúdo no Figma Às vezes na criação de sites ou, às vezes, na criação de elementos. Talvez precisemos adicionar um ou dois componentes ou plug-ins para ter uma melhor experiência com ele. Portanto, existem maneiras diferentes de adicionar plug-ins. Mas a maneira mais fácil e rápida de adicionar plug-ins é acessar esse menu principal. Você pode clicar no menu principal e descer até aqui, ver os plug-ins. Você pode vir até aqui. Você tem tantas opções. Você pode criar um novo plug-in de porta de conexão a partir do manifesto ou pode ver a documentação da API sobre plug-ins Você pode mostrar ou ocultar o cônsul e assim por diante. Mas, para isso, vamos gerenciar plug-ins aqui, e você tem a opção pesquisar qualquer tipo de plugue que queira usar Você pode ver que temos componentes aqui. Temos plug-ins aqui, temos widgets aqui. Então, vamos usar plug-ins e podemos fazer nossa pesquisa diretamente aqui. Então, primeiro, digamos que eu queira adicionar esses moges animados Eu quero adicionar moges animados. Você pode simplesmente pesquisar qualquer Você pode ver essa animação conectando imagens animadas, e você pode simplesmente continuar Agora ele está carregando um plugue animado e você pode vê-lo aqui, certo? Então, tudo o que você precisa é selecionar onde deseja adicionar o plug-in e você pode simplesmente adicioná-lo diretamente. Então, digamos que eu queira adicionar isso. Eu posso simplesmente clicar nele, arrastá-lo e adicioná-lo dentro da minha moldura. E você pode ver que foi adicionado à minha moldura, e eu posso redimensioná-lo e colocá-lo em qualquer lugar que eu quiser dentro do meu Então, talvez eu queira colocá-lo em algum lugar. Sim. Eu posso simplesmente selecioná-lo, e você pode ver que eu inseri este MOG E sempre que você seleciona o G. Você ainda tem suas propriedades aqui embaixo. Se você quiser alterar alguma de suas propriedades. Você também pode clicar para editar propriedades diferentes e reproduzi-la para ter uma prévia também do que ela faz. E você tem esse recurso no que diz respeito à opacidade, pode alterá-lo diretamente a partir daqui Então esse é o primeiro plugin. Você pode ter quantos plugins quiser. Tudo que você precisa é ter certeza de voltar para se conectar aqui e voltar para os plugues. Esses são os dois que eu usei. Você pode adicionar muitos. Vamos até muitos. Você pode dizer: Há um que se chama content el. Também é muito bom e interessante. Então você pode simplesmente ir em frente e selecioná-lo e seguir em frente e correr. E agora você pode ver que acabamos de adicionar o teste de conteúdo. Então, como usamos o conteúdo? Ele possui diferentes recursos, desde anúncio até o nome completo, data da data, endereço completo, números de telefone, moeda dos EUA e assim por diante, tantas coisas para as quais você pode usá-lo E tem o efeito de adicionar o efeito no texto, adicionar efeito nas imagens e adicionar efeitos nos ícones. Então, vamos tentar dar um exemplo que estamos falando sobre como usar esse teste de conteúdo. Então, por exemplo, se tivermos vamos até navios e vamos tentar adicionar essa elipse, clicar e arrastá-la para algum lugar aqui, clicar e arrastá-la para algum lugar aqui, eu posso manter pressionada a tecla shift, para que possamos ter um círculo perfeito E digamos que aqui dentro. Quero adicionar uma foto e não a tenho, então posso adicionar algo como este Avatar. Posso clicar com apenas um clique enquanto seleciono este navio, vou adicionar a imagem de alguém. E se você continuar clicando, ele continuará mudando as imagens que tem dentro da mesma nave. Então, dependendo do que você deseja criar. Você também pode selecionar isso e criá-lo. Então é assim que se adiciona isso. Se você quiser adicionar imagens também, se quiser adicionar imagens diferentes, você também pode vir e usar diferentes tipos de imagem. Você pode usar diferentes tipos de imagem e ver várias imagens, dependendo do que você está criando. Você pode usar verificar e selecionar um e apenas aplicar. Então você pode selecionar uma imagem e simplesmente alterá-la a partir daqui, certo? A mesma coisa com ícones. Você pode ter vários ícones, ícones fluentes regulares. Eles são criados pela Microsoft. Você também tem ícones fluentes preenchidos pela Microsoft. Assim, você pode clicar em qualquer um deles e ver vários ícones. Obviamente, você pode ver vários ícones que você pode, pelo menos, usar toda a sua criação no Figma Assim, você pode simplesmente selecionar qualquer um deles, pode selecionar em qualquer um, arrastá-lo e soltá-lo e adicioná-lo facilmente às suas criações Assim, você pode selecionar e também arrastá-lo e soltá-lo aqui. Eu tenho esse recurso para você, você pode alterar qualquer um dos recursos enquanto ainda seleciona o ícone. Você pode alterar qualquer um de seus recursos. Enquanto ainda seleciona os ícones, você pode alterar muitas coisas do Iqu a partir daqui Isso é sobre plug-ins. Você pode manipular qualquer um deles de seu interesse e pode simplesmente explorar, tentar encontrar outros plug-ins e ajustá-los, ou começar a usá-los para começar a aprender como usá-los, começar a aprender como usá-los porque os plug-ins são excepcionais quando se trata de trazer profissionalismo e facilidade de acesso e trabalho no Então, espero que você goste desse vídeo. Obrigado por assistir e espero ver você na próxima aula, mas 20. Como criar designs a partir de modelos: Nesta aula, aprenderemos como criar alguns designs a partir de um modelo no Figma Então, vamos começar voltando para a guia inicial aqui. Tudo bem Então, quando estiver aqui, você pode vir aqui para explorar a comunidade. E você pode ver que há vários tipos diferentes de modelos que você pode acessar aqui. Você pode pesquisar tudo dentro da comunidade diretamente daqui, ou pode se inspirar no que outras pessoas criaram, sumários de equipe, sistema de design e recursos visuais Você pode conferir desenvolvimentos, ícones e acessibilidade, web, celular e weframe. Muitos deles foram criados pelos usuários do Figma, e você pode encontrar muita inspiração aqui Você pode até mesmo vir aqui e descobrir quais são as coisas comerciais que estão funcionando no FDMA Então, algumas das criações mais populares dos usuários do FDMA. Você pode ver o grande número deles. Então, sozinho, você pode simplesmente ir em frente e pesquisar diretamente. Por exemplo, você pode pesquisar qualquer coisa. Vamos tentar procurar algo simples como resolver problemas, certo? Então, vamos tentar pesquisar algo como Trouble Up. Ok, então, para esta aula, vamos usar algo simples. Ok, vamos selecionar esse problema até 2.0. Você pode simplesmente clicar. E isso fará com que você mostre isso e você pode simplesmente dizer, abra no Figma, basta clicar e ele abrirá isso como um novo projeto dentro do Figma Ok, então uma vez que você abrir, é com isso que você será recebido. A primeira é que você tem o menu principal onde você pode clicar e selecionar e chegar a este ponto. Essa é a imagem da lista e, em seguida, a página de detalhes. Portanto, esta é a página de detalhes contém algumas das coisas que você pode alterar. Agora, para alterar qualquer um desses recursos, basta clicar e alterá-lo. Por exemplo, você pode clicar aqui e ver que falamos sobre o uso de molduras e elementos, como adicionar diferentes tipos de coisas, camadas de tudo isso Depois de selecionar qualquer tipo de elemento, como, por exemplo, se você estiver interessado em alterar essa imagem, você pode clicar nela e selecionar a imagem. Você pode ver a imagem aqui, você pode clicar e você pode vir aqui e ver escolher a imagem. Assim, você pode navegar para onde quer que tenha imagens em seu sistema. Por exemplo, no meu próprio caso, eu tenho esse tutorial do Figma, eu o tenho neste recurso E eu posso selecionar qualquer uma das imagens, seja isso ou isso. Vamos fazer algo assim. E com apenas um clique, você pode ver que acabamos de mudar a imagem aqui. Está bem? Portanto, você está livre para usar qualquer uma das suas imagens. Você pode escapar disso e agora está de volta ao novo. Então você pode ver agora que mudamos isso. Você também pode alterar o texto, mas basta clicar duas vezes no texto. Como explicamos, essa pode ser a melhor aventura para você. Aproveite suas férias aqui, por exemplo. Você tem tantas opções. Você pode clicar duas vezes e alterar qualquer coisa a partir daqui. Por exemplo, você pode alterar o tamanho do texto, certo? Você pode ver que pode alterar o tamanho do texto e trocar o estilo do telefone Ok. Você pode torná-lo ousado. Você pode fazer com que seja utilizado. Você tem tantos recursos , assim como recursos de edição de texto. Você pode alterar o preenchimento dessa cor para talvez a cor vermelha. Portanto, é muito fácil alterar e alterar alguns desses elementos à medida que você avança. Então, outra coisa com a qual você pode brincar é esse botão. Você pode simplesmente clicar no botão e poderá mudar muitas coisas. Também a partir daqui, você pode alterar a coloração. Você pode fazer algo assim. Eu posso ver, e você vê que nós podemos ver que vamos mudar isso. Agora você pode controlar o raio do canto também a partir daqui. Falamos sobre o raio da esquina. Você pode controlá-lo. E aqui, basta clicar duas vezes no objeto. Você pode clicar duas vezes nele e não pode alterar o raio do canto, aumentá-lo ou diminuí-lo, quiser, certo? Você pode ver, digamos que temos algo assim. E você também pode alterar o texto interno para começar agora. Participe agora. Então você pode fazer muitas coisas. Você pode mudar bastante aqui no que diz respeito ao conteúdo disso. Você também pode alterar isso e clicar em Isso foi adicionado usando o plug-in que mostramos anteriormente. Você pode adicionar diferentes tipos de ícones com os plug-ins. Então, se, por exemplo, você quiser mudar isso, talvez queira usar os plug-ins, como explicamos anteriormente, você pode acessar os plug-ins e acessar o conteúdo público real. Podemos descobrir que se trata de conteúdo real. E você pode ver que pode acessar os ícones Se você tiver algum tipo de ícone de interesse, vamos selecionar isso. Ok, então você pode selecionar com base nesses ícones, aqueles nos quais você está interessado, você pode selecionar facilmente, por exemplo, vamos selecionar algo assim, e você pode ver que acabamos de adicioná-lo a esse específico, certo? Você pode segurar a tecla de comando. Você pode arrastar isso facilmente. Então, digamos que arrastamos isso e você simplesmente o insira aqui. Podemos ver se acabei de adicionar isso. Você pode adicioná-lo em qualquer lugar interessado. Então, isso é como trazer elementos diferentes e alterá-los de acordo. Eu posso encerrar isso , então deixe-me usar a letra H para dar uma olhada. Então, na verdade, isso é como personalizar coisas diferentes. Você pode mudar tudo isso. Se você estiver interessado, você pode alterar qualquer uma dessas opções, se estiver interessado. Então, isso conclui esta aula sobre como abrir um modelo e ajustar qualquer recurso desse modelo Na próxima aula, aprenderemos como criar um design de interface de usuário específico do zero. Talvez possamos replicar isso do zero. Vamos criar isso do zero e ver como podemos brincar com alguns dos recursos. Então, até a próxima vez, obrigado por assistir e espero ver você na próxima aula, certo? 21. Como criar um design de interface do usuário do zero: Nesta aula, aprenderemos como criar um design de interface do zero. Vamos escolher qualquer uma dessas páginas e criá-la usando métodos diferentes, métodos diferentes. Você pode começar criando uma moldura, para que possamos prosseguir e abordar as molduras aqui. Não podemos guiá-lo com a letra F, podemos apenas molduras. E, como dissemos anteriormente no início do tutorial, podemos selecionar qualquer um deles. Então, vamos em 14. Vamos ventilá-lo, e acho que temos sorte de ter o mesmo tamanho. Então, o que precisamos fazer é clicar duas vezes e mudar o nome desse quadro em particular, fazendo com que ele seja talvez avigante H. Então, podemos ir em frente e adicionar recursos diferentes, como vimos aqui Então, a primeira é que podemos adicionar essa imagem. Podemos adicionar imagens diretamente voltando para esta pasta e você pode usar diretamente por conta própria e arrastar e soltar qualquer imagem diretamente no quadro. Posso ver agora que inserimos essa imagem. Você pode redimensioná-lo para reforçar versículos inteiros, digamos que caracze E carregue um tamanho como esse também. Tudo bem Então, uma coisa que podemos notar é que este tem essa natureza de curva na parte inferior. Então, podemos fazer isso. Podemos replicar isso também abordando a natureza da curva. Podemos selecionar a imagem e alterar a característica da curva a partir daqui, o raio do canto Você pode alterar a seleção deste duplo clique aqui e talvez faça isso de 25 e você pode ver se adicionou algum raio de canto, mas não é como uma imagem, então podemos arrastar e torná-lo muito mais visível Ok. Essa é uma maneira de fazer isso. Como alternativa, podemos chegar aos cantos independentes. C, basta clicar. E se você notar aqui no topo, não há nenhum canto. Então, esse é o sinal principal. O canto inferior do botão superior. Então, vamos até aqui e vamos fazer esse zero e fazer esse um zero também. Ok. Assim que clicamos, você pode ver que agora temos isso com os cantos na parte superior, os cantos lentos. Portanto, também podemos selecionar uma alternativa, ainda podemos criar as curvas usando essa faixa de lata e você pode fazer isso com as curvas, assim como demonstramos no início deste tutorial. Então, acabamos de criar isso. A próxima é que podemos adicionar esse texto. Oh, podemos adicionar esses elementos, este, é apenas um retângulo com tantas características Então, podemos adicionar o retângulo nisso. Você pode acessar as formas aqui, clicar em selecionar um retângulo e podemos simplesmente selecionar e desenhar um retângulo Este também tem algumas extremidades circulares, então podemos chegar ao raio e apenas aumentar as bordas dos cantos Podemos ter algo assim. E podemos mudar a cor também para branco puro desta vez. Ok, então temos algo assim. Mas não é tudo. Temos que ter uma sombra projetada. Podemos ter entrado em vigor até termos essa sombra projetada. E agora podemos ver que temos nossos elementos da mesma forma que temos aqui. Agora, aqui embaixo, podemos adicionar esse diferente para que possamos adicionar esse texto. O texto é fácil. Você pode simplesmente copiar e colar. Então, vamos copiar e podemos simplesmente vir aqui. Digamos que o adicionamos com isso, podemos chegar à letra T e podemos simplesmente clicar e escrever algo. Viajar. Detalhes, por exemplo, e então podemos clicar e movê-lo para algum lugar aqui, e então podemos ter esse texto nobre, que ainda podemos acionar com isso. E então podemos selecionar. Ok, e podemos ter uma mensagem aqui. Eu simplesmente gosto que a tenhamos lá. Então você pode simplesmente clicar em uma caixa de texto e colar coisas diferentes que eu redimensiono usando as propriedades, propriedades diferentes Então, a próxima é a última: adicionar esse botão, e aprendemos como adicionar botões acessando as formas aqui. Você pode selecionar um emaranhado vermelho, e podemos desenhar e torná-lo tão grande Então, se quiser, você pode ampliar para ver os detalhes e também pode usar o papel timbrado para se deslocar Então você pode selecionar isso e nós podemos mudar. Você pode redimensioná-lo e também escapar. Você pode redimensionar isso e alterar o raio do canto a partir daqui, sem mais nem menos E você pode mudar a cor a partir daqui. Você pode ver mais cores. Você pode usar o seletor de cores e escolher a coloração exata que temos Então você pode escapar disso, a menos que acione o texto e possamos ver entrar agora, basta entrar agora. E podemos selecionar isso e colocar em negrito, chegamos e podemos selecionar tudo, selecionar o texto, bem como o botão, e então podemos centralizar o centro tanto na horizontal quanto na vertical E agora temos tudo. Então, a próxima coisa que podemos ter é essa localização, a estrela quanto as duas. Portanto, isso pode ser adicionado a partir do ícone. Portanto, isso exige que adicionemos um plug-in. Então, como podemos adicionar um plugging venha aqui e podemos pesquisar um plug-in chamado icon scout icon scout Assim, você pode simplesmente pesquisar o ícone. Por padrão, você vê vários plug-ins diferentes que podem fornecer ícones. Mas para este oral, vamos usar o explorador de ícones, este Assim, você pode ver com um clique, clicar em e explorar. Entendi. Portanto, é necessário que você faça login. Então você pode simplesmente ir em frente e procurar por qualquer ícone. Então, por exemplo, podemos dizer seta para trás. Digamos que pesquisemos a seta para trás e possamos ver diferentes tipos de setas para trás que podemos usar facilmente Então, por exemplo, para este, você pode ver essa seta para trás, essa, essa. Vamos tentar criá-lo, para que possamos ter diferentes tipos de setas para trás Nós temos isso para que possamos ir em frente e usar isso também. Então, vamos usar isso. Então, vamos usar isso. Podemos arrastá-lo e soltá-lo. Assim, podemos redimensionar. Vamos redimensioná-lo. Vamos escapar disso, vamos redimensionar isso. Então, vamos redimensioná-lo e colocá-lo em algum lugar aqui. Então, vamos colocá-lo em algum lugar aqui. E podemos mudar a coloração também a partir daqui. Vamos fazer com que seja algo como branco. Eu acho que é isso. Você pode ter algo assim, para que possamos voltar. Então, aqui também, você pode adicionar tudo isso. Você pode adicionar esse texto na localização e na etiqueta de preço. Portanto, você ainda pode voltar ao mesmo plugin. Assim, você pode simplesmente pesquisar a localização. Ok, então basta pesquisar o sinal de localização. E você pode vê-los de diferentes tipos. Você pode arrastar e soltar. E você pode redimensionar diretamente. Você pode pressionar a tecla shift para obter um redimensionamento perfeito Ok, menos, vamos redimensioná-lo. Então, podemos pesquisar os outros, etiqueta de preço. Você sempre pode voltar ao trabalho e continuar. Então, isso conclui esta aula sobre como criar um novo design do zero Ok, então espero que você goste desse vídeo. Obrigado por assistir, e estou ansioso para ver você na próxima aula. 22. Como criar um protótipo interractivo do aplicativo: Nesta aula, aprenderemos como criar um design interativo desse aplicativo de interface de usuário que estamos tentando criar no Figma Então, para começar, vamos tentar fazer disso algo em que possamos interagir e passar de um quadro para outro executando algumas ações do primeiro quadro que podem nos levar ao segundo quadro, e podemos definir o comportamento de cada ação com base no protótipo Portanto, o protótipo é como a demonstração de como o aplicativo que você está tentando criar será na vida real E vamos fazer a pré-visualização diretamente aqui com esse ícone. Diretamente. Então, para começar, vamos começar com o primeiro quadro aqui. Vamos adicionar um ícone simples ou um botão simples. Vamos voltar ao modo de seleção e optar por adicionar um botão simples e menos copiar e dar tapinhas nele Sim, vamos movê-lo para cá. E vamos renomear isso para começar. Vamos começar e podemos acrescentar algo aqui para demonstrar o impacto do que você está tentando criar. Digamos que adicionamos uma imagem a isso, arrastamos essa imagem e a colamos dentro dela. Tudo bem E você pode ver agora que cobriu tudo. Então, vamos tentar organizar isso e derrubar isso. Então, nós temos isso e podemos trazê-lo aqui também, para que possamos ter os outros recursos disponíveis. Mas então podemos sempre selecionar a imagem e trazê-la até aqui, e podemos reduzir a opacidade para que fique bem visível As outras características não podem se tornar visíveis, então coloque-a como uma opacidade Isso é muito pequeno. Vamos fazer com que seja talvez 40. Ok. Eu acho que está tudo bem. Então, podemos ver daqui, podemos começar e nos conectar a este lugar. Mas então vamos adicionar provavelmente meu logotipo a isso. podemos simplesmente arrastar e soltar o logotipo, e também podemos dimensioná-lo vindo até aqui curtindo e arrastando para que possamos torná-lo um pouco menor Mantendo pressionada a tecla Shift, para que possamos ter um arranjo perfeito, e então podemos simplesmente selecioná-la e colocá-la ao lado. Então, podemos adicionar algum texto, talvez para indicar que algo está acontecendo aqui, mas acho que está tudo bem Ao clicar, você pode chegar aqui. E a partir daqui, quando você clica, você pode ver esse detalhe. Então, como fazemos isso? Como vinculamos a ação, talvez em seu telefone, para que, ao clicar em começar, ela o leve a esse quadro. E então, quando você clica nessa imagem, ela o leva até esse detalhe da revista Então, a primeira coisa que você precisa fazer é começar clicando em começar, e você pode acessar o protótipo aqui E então você pode ir em frente e vir aqui. Você pode ver esse sinal positivo. Ok. Então, uma vez que você clica no sinal de mais, você pode clicar no sinal de mais, e você pode simplesmente entrar assim, certo? Assim, você pode ver que ele simplesmente navega para a próxima ação. Está ligado à próxima ponte. E como isso acontece? Está em um clique? Você pode ver que o padrão é clicar. Então, depois de clicar em começar, você será vinculado ao próximo quadro. Esse é o padrão, mas você tem outros recursos, como inserir ou deixar o mouse pressionado ou o mouse com o mouse pressionado ou o mouse. Ou depois de um atraso em Drac. Você pode selecionar qualquer uma dessas opções se estiver interessado. Então, para essa classe, vamos simplesmente clicar ou clicar, que é padrão, e vamos fazer com que ela navegue até esta página. Se você tiver outra opção, como selecionar Pré, ter sobreposições, sobreposições de swap ou outras características, você pode selecionar adequadamente se estiver adequadamente E essa é a primeira opção. Você o vinculou. Depois disso, ele será vinculado aqui. Então, o próximo passo é que podemos tentar executar um teste e ver como será a ação desse quadro para o próximo. Você conhece a transição entre esse quadro e o próximo. Vamos testá-lo ao vivo para ver como isso vai acontecer. Então, podemos começar fazendo o teste aqui até o botão de visualização aqui, onde podemos visualizar o protótipo e ver o que vai acontecer em nosso telefone celular Então, pode vir aqui e clicar. E então nós o trouxemos para essa plataforma como a temos. Assim, você pode clicar e começar, e ao clicar, você pode ver que isso nos leva diretamente a esse ponto. Está bem? Então, podemos ver, basta clicar e começar, estamos aqui, e é exatamente isso que estamos tentando provar com isso. Então, vamos voltar ao Figma e continuar vinculando ou tornando o aplicativo interativo como um todo Agora, o próximo passo é que eu quero que conectemos essa imagem ao próximo slide. Então, quando alguém clica nessa imagem, ela passa para o próximo quadro Então, podemos selecionar essa imagem, e então podemos chegar a esse sinal de mais, e podemos simplesmente clicar, adicionar e conectá-la da mesma forma, e ela será vinculada a isso. Então, como isso vai ser? Assim, podemos selecionar ou entrar. Porque você tem diferentes tipos de opções. Você tem instante, você se dissolve, você tem um companheiro inteligente. Então, vou selecionar mover para dentro, que mostrará a visualização aqui e você poderá alterar a facilidade E os outros recursos também. Se você quiser que ele se mova da esquerda para a direita ou da direita para a esquerda, você pode ver a visualização ou de cima para baixo, ou de baixo para cima, você pode selecionar como quiser. Então, para este, vamos da direita para a esquerda, e acho que podemos ver uma atualização nisso. E então terminamos. Ok, então podemos encerrar isso, e então podemos tentar testar isso também, que possamos ver a transição do primeiro quadro para o último quadro. Então, podemos simplesmente selecionar o primeiro quadro e vir aqui. E clique em Iniciar. Depois de clicar em começar, isso nos leva a esse ponto. E depois de clicar nisso, dê uma olhada na transição muito rápida e muito interessante. Vamos chegar a isso. Resumindo, veja como criar um design de interface de usuário interativo no Sigma e brincar com ele em seu celular você pode ver, mostramos até mesmo uma prévia de como você pode vê-la ao vivo no seu celular, as várias ações que você realizará as várias etapas e os cliques e como será a interação . Espero que você goste desse vídeo. Obrigado por assistir, e estou ansioso para ver você na próxima aula. Tchau, ok. 23. Como compartilhar e exportar designs: Na última aula, falamos sobre como criar um design de interface de usuário interativo no Sigma E nesta aula, falaremos sobre como exportar ou compartilhar nosso design com colegas, amigos ou qualquer pessoa com quem estejamos interessados em compartilhar o documento. Então, para compartilhar um design específico, você pode vir até o botão de compartilhamento no canto superior direito. Você pode simplesmente clicar nele e convidar a pessoa diretamente, e convidar a pessoa fornecendo seu endereço de e-mail, e você pode simplesmente convidá-la . Eu posso convidar alguém. Por exemplo, deixe-me ver a orientação, mas eu. Então, depois de digitar o endereço de e-mail da pessoa, você também pode alterar a permissão que dará a essa Por exemplo, a permissão no momento é que ele só pode ver, mas ele pode clicar nela e você também pode torná-lo um editor. Para este mesmo projeto. Assim, você pode convidar a pessoa e ela receberá um e-mail convidando-a a comentar ou editar esse projeto específico Ok, então, depois de fazer login na sua conta do Gmail, você pode ver que recebemos um e-mail da Figma assim que você Você pode simplesmente ir em frente e clicar para abrir. Ok, ao mesmo tempo, você pode gravar. Você pode baixar o projeto, pode baixar qualquer tipo ou pode baixar qualquer seção do projeto, qualquer um dos quadros, basta selecionar o quadro, e você pode voltar ao design, descer aqui e ver a exportação Se você clicar em exportar, não poderá definir o tipo de formato de arquivo desejado. Você pode ver que o padrão é PNG, mas você pode ir para JPEG ou S V G do PDF, dependendo Deixe-me usar o JPEG, e eu posso simplesmente exportar Você pode ver que o padrão também é um X, que manterá tudo em relação à qualidade. Mas se você estiver exportando um projeto muito grande, é melhor optar por dois X, o que seria menor na qualidade durante a exportação, mas alta na qualidade durante a pré-visualização do outro lado, talvez do ponto de vista do seu cliente Então, quando terminar aqui, você pode dizer exportar o menu e definir o local para onde deseja exportá-lo. Por exemplo, no meu caso, quero exportá-lo para o projeto Still Figma, e posso simplesmente seguir em frente e garantir que isso seja seguro E isso agora é exportado nesse local específico. Se quiser exportar os quadros inteiros, você pode clicar e selecionar um quadro específico. Mantenha pressionada a tecla Shift e selecione o segundo quadro. Segure a tecla shift e selecione o terceiro quadro, e então você pode ir em frente e vir aqui e dizer exportar. Agora você também pode definir o padrão desejado. O JPG, e posso dizer que exporte as três camadas. E defina o mesmo local. Por exemplo, posso criar outra pasta aqui e chamá-la de saída e clicar em criar. E então eu quero exportar tudo neste local para que eu veja com segurança. E agora, ele foi exportado, então vamos verificar a pasta e ver o que exportamos Você pode ver que exportamos todos os três arquivos que temos Assim, podemos clicar em qualquer para ter uma prévia do que você acabou de exportar Então, isso conclui esta aula sobre como compartilhar seu projeto dentro do FGMA e até mesmo exportá-lo para o seu computador em diferentes formatos Espero que você tenha gostado desse vídeo. Obrigado por assistir, e estou ansioso para ver você na próxima aula. Por quê? 24. Conclusão do curso: Parabéns por concluir este curso. Você chegou ao final deste curso intensivo de Figma para iniciantes Ao longo dessa jornada, você adquiriu uma compreensão abrangente do Figma e de suas funcionalidades para designs de interface Você aprendeu a navegar pela interface, criar e manipular elementos, criar protótipos de interface e, por fim, compartilhar seus designs com o mundo Ao se despedir deste curso, lembre-se prática é fundamental Quanto mais você usar o Figma, mais confortável e confiante você ficará Experimente e explore a comunidade Figma. Eu gostaria de desafiá-lo a verificar a seção de projetos deste curso para um projeto simples para você tentar demonstrar suas habilidades recém-adquiridas. Atenciosamente, gostaria de agradecer muito por estar comigo e desejo-lhe boa sorte em seus empreendimentos subsequentes. Continue projetando.