Masterclass de UI/UX Design no Figma: do básico ao avançado

1. Trailer do Masterclass do Figma: Olá, pessoal. Então, bem-vindos a todos vocês na minha zona master completa de design Pigma UIUX Portanto, nesta série principal em particular, ensinarei a ferramenta Figma do nível mais básico ao nível avançado Em primeiro lugar, vou te ensinar o layout e os recursos básicos da interface. Depois disso, aprenderemos algumas coisas básicas, como componentes, layout automático e prototipagem Eu criei esta série de palestras de uma forma muito sistemática para que qualquer pessoa possa entendê-la com muita facilidade Portanto, não importa quem tenha experiência, mesmo que você não tenha usado nenhum software de design gráfico em toda a sua vida, ainda assim você pode entender o Figma com minha série de palestras Esta série master começará do nível iniciante e subirá para o nível profissional Então você não deve perder minha série de palestras. Nos vemos na palestra. Ok, tchau tchau. 2. Interface, layout e recursos básicos do Figma: Então, agora vou começar minha série de palestras Figma. Então, primeiro de tudo, vou te ensinar sua interface e propriedades básicas e também como o Figma funciona Ok, então vamos discutir tudo. Ok, então esse é um espaço em branco. Onde você precisa criar seu design. OK. Então, primeiro de tudo, vamos entender sobre sua ferramenta, recursos e layout. OK. Então, primeiro de tudo, vamos discutir sobre algumas ferramentas. Aqui temos ferramenta de movimentação, moldura, sapatilhas, ferramenta de caneta, ferramenta de texto Ok, então abordaremos cada tópico, um por um, de maneira muito detalhada. OK. Aqui, estou apresentando seu layout primeiro. OK. Então, suponha que você esteja criando um retângulo Portanto, sempre que você criar algo em sua tela em branco, sua camada será projetada no lado esquerdo da tela. Você pode ver isso. Então eu criei um retângulo e ele está costurando no tipo de camada Ok. 1 minuto. Esta é uma seção de camada em que a camada retangular é costurada. Suponha que eu esteja criando uma elipse, então sua camada aparecerá na seção esquerda da tela Suponha que, se eu criar uma seta, sua camada apareça no lado esquerdo da tela. OK. Então, sempre que você criar qualquer coisa, sua camada aparecerá no lado esquerdo da tela. Ok, então você tem que notar esse ponto. OK. Agora, abordamos as ferramentas e também discutimos sobre o painel lateral esquerdo. Ok, agora vamos discutir sobre o painel lateral direito. Portanto, sempre que você selecionar qualquer objeto, sua propriedade aparecerá no lado direito da tela. Você pode ver isso. Eu selecionei retângulo, então aqui podemos ver que toda a propriedade do retângulo está visível Agora podemos mudar qualquer coisa. Suponha que, se eu precisar alterar alguma coisa na elipse, basta clicar na elipse e sua propriedade aparecerá no lado direito da Suponha que, se eu precisar alterar alguma coisa no erotap, sua propriedade aparecerá no lado direito da tela OK. Então, vamos esclarecer tudo. E agora vou repetir tudo o que eu conseguir. Ok, então esta é uma guia de ferramentas. Suponha que você esteja criando um retângulo para que sua camada apareça no lado esquerdo da tela Essa é uma aba de camada onde toda a camada será coletada. OK. E sempre que precisar editar qualquer camada, você precisa clicar nesses objetos. Suponha que eu esvazie os NVAs, eu tenha criado um retângulo e um círculo Em nvas em branco, criei um retângulo e um círculo. Então, suponha que eu tenha que mudar qualquer coisa no retângulo, então eu simplesmente clicarei no retângulo a partir daqui E agora eu posso ajustar todas essas configurações. Ou, em vez disso, o que eu posso fazer selecionar meu retângulo da camada sexan Este é um sexano em camadas. Então, em vez de selecionar meu objeto diretamente, posso simplesmente selecionar minha camada retangular no painel do lado esquerdo, e sua propriedade aparecerá no lado direito da tela Então você tem um método de ambos. Você pode selecionar seu objeto aqui ou selecioná-lo na camada. OK. Isso é uma coisa básica. Agora, vamos colorir esse círculo. Cor vermelha. OK. Ok, tudo bem. Agora, na seção da camada, você verá que a elipse é sobre o A elipse é sobre o retângulo. É por isso que está assim. Mas o que acontecerá se arrastarmos nossa elipse abaixo do retângulo, então o que Vamos arrastar a elipse abaixo do retângulo. Vamos arrastar agora, você verá que o retângulo cobriu a elipse Esse é um fundamento muito básico do design. Então, suponha que se você já usou o Photosop, então você está familiarizado com Eu acho que você pode estar familiarizado com isso. OK. Ao criar seu design de UIUX, talvez alguns elementos não estejam aparecendo corretamente Você deve verificar a disposição adequada da soma de sexo das camadas Portanto, nesta tela, elipse não está aparecendo porque retangular é sobre a camada da Além disso, o tamanho da camada retangular é muito maior que a elipse É por isso que aqui, a elipse não está aparecendo. Então, o que temos que fazer? Temos que arrastar a elipse acima da camada retangular. Está bem? Tudo bem. Você tem que praticar tudo comigo. OK. Então, sempre que estou criando alguma coisa aqui, você também precisa realizar a mesma atividade no seu computador. Está bem? E com a ajuda de algumas palestras, vou dominar seu Figma Estou começando minha série de palestras desde o início. Portanto, se você estiver familiarizado com algumas coisas básicas, pode pular esta Mas, de acordo comigo, você deve assistir ao vídeo inteiro, não deve copiar nada. Vou aumentar lentamente o nível de dificuldade do meu curso. Portanto, está começando do nível iniciante e subindo para o nível profissional Nos vemos na próxima palestra. OK. Tchau tchau. 3. Propriedades no Figma: Agora vamos aprender sobre a propriedade sexon dentro da figma Então, para aprender um sexon imobiliário, temos que criar qualquer coisa, obviamente Então, vamos criar um retângulo. Ok. Agora, como eu já disse, sempre que você precisar alterar a propriedade de qualquer objeto, seu objeto deve ser selecionado. Então, ou você está selecionando seu objeto diretamente aqui ou, em vez disso, o que você pode fazer é ir para a seção de camadas e selecionar seu retângulo diretamente aqui. Ok. Portanto, não importa qual método você esteja usando, basta selecionar os objetos nos quais você precisa alterar alguma coisa. Ok, agora, nosso objeto foi selecionado corretamente. Agora, sua propriedade, suas propriedades estão aparecendo no lado direito. Ok, então primeiro de tudo, vamos falar sobre a posição. Então, com a ajuda da posição, você pode manipular sua posição arrastando o mouse desta forma Só você precisa passar o mouse. Você precisa passar o mouse sobre o X e ele mudará seu ícone Vamos ampliar. Então, vamos passar a seta do mouse acima do X e ele está mudando seu ícone Ok. Agora, o que posso fazer para diminuir o valor arrastar o mouse para o lado esquerdo. Para aumentar o valor, eu tenho que mover meu mouse para o lado direito. Então, vamos diminuí-lo arrastando meu mouse para o lado esquerdo. Ok. Ok. E semelhante por um tempo. Mas isso não é tão importante porque você pode facilmente mudar a posição do seu objeto, então isso não faz nenhum sentido. Ok. Então, vamos selecionar nosso objeto e seguir em direção às outras ferramentas. Ok. Portanto, com a ajuda da rotação, você pode girar facilmente seu objeto Isso é uma reviravolta. Ok. Então, obviamente, você não o obterá aqui porque é retangular. Ok. Assim, com a ajuda da opção flip, você pode virar horizontal e verticalmente. Ok. Ok. Essa é uma guia de dimensão, o que é mais importante. Ok. Então, a partir daqui, você pode definir qualquer dimensão. Então, digamos que 720 deve ser largura e altura deve ser 1080 Ok, então essa é uma dimensão vertical, então você pode digitá-la manualmente. Ok. Simples. Agora, vamos preencher a cor. Agora, vamos preencher a cor. Então, vamos preencher a cor laranja. Ok. Agora, aqui você verá a opacidade Opson. Aqui você verá a opacidade Opson. Então você pode colocar 70. Portanto, opacidade significa transparência. Assim, você pode diminuir seu valor. Vamos digitar 20. Ok. Em vez disso, temos algum tipo de corte em nosso teclado. Ok, então primeiro de tudo, vamos digitar 100. Ok. Portanto, se você precisar alterar a transparência do seu objeto , teremos alguns cortes em nosso teclado. Então, suponha que, se você tiver que definir sua opacidade para 70%, precisará pressionar sete no teclado Vê? Ok. Se você precisar desfazer alguma coisa, pressione Control Z ou desfazer Controle mais Z. Ok. Suponha que você tenha que definir sua transparência em 30% e, em seguida, pressione três no teclado. Ok. Vamos pressionar Control mais R para Desfazer. Suponha que, se você precisar definir sua transparência em 60%, precisará pressionar seis. Da mesma forma, se você clicar em dois , ele definirá a transparência em 20%. Se você pressionar três, ele definirá a transparência em 30%. Portanto, temos alguns atalhos. Ok. Tchau. Agora vamos aumentá-lo. Então isso é um retângulo. Agora vamos para outra opção. Aqui temos um raio de canto. Aqui temos um raio de canto. Então, o que isso significa? Seu canto SAR ficará radial. Ok, então primeiro de tudo, vamos ativar isso. Ok. Então, posso colocar qualquer valor no raio do canto ou, em vez disso, posso mover o mouse para a esquerda e para a direita, para a esquerda e para a direita Então, vamos colocar o valor de T. Você pode ver que minhas bordas SAP se converteram em curvatura Em vez disso, aqui você verá um pequeno ponto. Você também pode manipular facilmente a curvatura aqui. Ok. E você notará uma coisa: todas as bordas estão mudando ao mesmo tempo. Ok. Mas e se você precisar alterar o raio do canto específico Suponha que você precise alterar o raio do canto específico Você não precisa mudar o canto inteiro, então o que você fará. Então, para isso, aqui temos uma opção separada chamada canto individual. Então, essa é uma opção de canto individual. Ok, então eu vou te mostrar como funciona. Então, primeiro de tudo, vamos remover a curvatura. Ok. Agora temos bordas SAP todo o retângulo. Então, vamos selecioná-lo. Ok. Suponha que eu tenha que fazer curvatura somente aqui. E as partes restantes permaneceriam as mesmas. Então, como eu vou fazer? Então, primeiro, selecionarei o retângulo e clicarei no canto individual Então, vamos clicar no canto individual. Ok. Agora, aqui temos um lado quatro. Aqui temos um lado quatro. Então, esse quatro lados envia para quatro cantos. Então, suponha que eu tenha que mudar esse canto para manipular a configuração Portanto, posso colocar valor diretamente ou arrastar o mouse para a esquerda ou para a direita. Ok. Então, vamos arrastar meu mouse para o lado direito. Você pode ver que eu alcancei a curvatura na parte específica, e a parte de descanso permanece a mesma. Ok. Então é assim que você pode manipular com a opção de canto individual Ok. Então, agora vamos seguir em frente. Aqui temos algumas opções que abordarei nas próximas palestras. Ok, essa é uma opção avançada. Com a ajuda de I, você pode desligar a cor. Ou com a ajuda do botão de menos, você pode remover a cor Ou você pode excluir a cor. Então, vamos pressionar Andrew. Ok. Agora, aqui temos uma opção Etroke. Então, vamos clicar em Estroke. Vamos clicar em Estroke. E aqui, ele perguntará sobre o EtrokePosision. Deve estar dentro, no centro ou no exterior. Ok. Então eu acho que deveria ser o centro. Ok. E vamos escolher sua intensidade. Três. E também, aqui temos a mesma opção de arrastar meu mouse assim Ok. Então é assim que um derrame funciona. Da mesma forma, eu tenho efeito em segundo lugar. Então, com a ajuda do efeito, posso fornecer sadoblur Temos todas as opções que abordaremos nos próximos vídeos, e você também pode explorá-las sozinho. É muito simples. Ok. Você pode adicionar sados atrás do objeto R. Você pode dar o filho direto de Sados. Ok. Você pode fornecer um efeito de desfoque atrás do objeto R. Você pode fazer qualquer coisa. Então essa era a propriedade total do retângulo. Mas se eu criar um círculo aqui , obterei a propriedade de acordo com o círculo. Se eu criar uma seta , obterei Propriedades, de acordo com as setas Portanto, a propriedade depende totalmente do tipo de objeto que você está criando. Está bem? Assim, você pode criar qualquer objeto e, de acordo com seu objeto, propriedade será exibida no lado direito. Ok. Então, suponha que eu esteja criando uma estrela. Suponha que eu esteja criando uma estrela. Então, aqui vou ver uma nova opção que não vou ver no retângulo ou no Ok. Portanto, de acordo com a SAP, você obterá propriedades diferentes. Ok. Portanto, a propriedade sexual pode variar em relação à sua forma ou objetos Ok. Então é assim que funciona a varredura imobiliária. Então, atualmente, estou ensinando algumas coisas básicas e vou melhorar as camadas de dificuldade, os níveis de dificuldade nas próximas palestras Ok. Então, tchau tchau. 4. Atalhos no Figma: Agora, nesta palestra em particular, discutirei alguns tipos de cortes no figma, que tornarão seu design mais rápido Ok. Então, primeiro de tudo, vamos falar sobre como você pode copiar qualquer objeto no Figma Ok. Então, primeiro de tudo, vamos falar sobre a maneira tradicional. Ok, então a forma tradicional é que você tem que escrever clicar com o mouse e obter uma cópia, e depois disso, você pressionará o botão Control mais V. Então é assim que você faz a cópia de qualquer objeto. Portanto, essa é uma forma muito tradicional. Obviamente, aqui não vamos usá-lo. Ok, então vamos deletar. Portanto, pare de copiar da maneira tradicional. Ok. Então, agora temos um método de dois. O primeiro método é o botão Alt. Portanto, no teclado, você deve ter o botão Alt, o botão Alt. Então você tem que pressionar o botão Alt. E com a ajuda do clique esquerdo do mouse, você deve arrastar seu objeto assim, e ele fará sua cópia infinita. Exatamente o que você precisa fazer, você precisa pressionar o botão Alt no teclado e mover o objeto, que deve ser copiado. Você pode copiar em qualquer direção. É assim que você pode fazer uma cópia infinita com a ajuda do botão Alt. Agora vamos falar sobre a segunda maneira pela qual você pode copiar o objeto. segunda forma é Control plus D. Vamos selecionar esse objeto e pressionar Control plus D. Control DDD, Control DD DD Ok. Então é assim que você pode criar a cópia als com a ajuda do botão Control plus D. Ok. Agora, parece tão barulhento, então vamos diminuir o zoom Vamos diminuir o zoom sem alterar o tamanho de nada. Você precisa pressionar Control no teclado e vamos rolar para baixo. Ok. Então é assim que você pode aumentar ou diminuir. É assim que você pode ampliar ou diminuir o zoom em sua tela. Seu tamanho não está mudando no mundo real. Ok. Somente estamos aumentando ou diminuindo o zoom com a ajuda do controle e do botão de rolagem do mouse Portanto, com a ajuda do botão de controle e do botão de rolagem do mouse, você pode aumentar e diminuir o zoom. E você tem que ter certeza de que está praticando a mesma coisa enquanto assiste minha palestra Você tem que praticar tudo. Ok, suponha que eu esteja te ensinando esses fundamentos. Portanto, você precisa realizar todas essas atividades ao mesmo tempo no seu computador. Caso contrário, você não entenderá meu ponto de vista nas próximas palestras. Então, por favor, pratique comigo. Ok. Então, vamos excluí-lo. Ok. Então, aprendemos sobre como podemos copiar. Portanto, temos um método de dois. O primeiro método é Alt plus mouse. Enquanto pressionamos o botão Alt, temos que arrastar nosso objeto, e é assim que podemos fazer com que as pontas copiem ou, em vez disso, basta selecionar seu objeto e pressionar Control plus B. E ele fará uma cópia infinita. E para reduzir o zoom, vamos pressionar o botão Control no teclado e rolar para baixo e rolar para baixo. Agora vamos aprender como você pode fazer várias seleções em seu projeto. Suponha que você precise selecionar vários objetos ao mesmo tempo e, em seguida, como fazer isso. Ok, então com a ajuda da tecla Shift, você pode fazer isso facilmente. Então, vamos pressionar a tecla Shift no teclado, tecla Shift no teclado e selecionar os objetos que você precisa selecionar. Então, vamos selecionar todos os objetos. Agora você vai pensar sobre isso. Podemos fazer isso facilmente arrastando meu mouse assim, obviamente, você pode fazer assim Mas e se não precisarmos selecionar a estrela? Se selecionarmos tudo assim, todos os objetos serão selecionados. Mas e se eu não precisar selecionar a estrela , como farei isso? Eu simplesmente presidirei uma tecla e selecionarei os objetos nos quais preciso alterar alguma coisa E aqui eu não estou selecionando estrela. Vamos mudar a cor para que você possa ver as mudanças. Então é assim que você pode selecionar vários objetos com a ajuda da tecla Shift. Além disso, temos outro uso da tecla Shift dentro da figura. Ok. Então, suponha, por exemplo, que se você ativar a ferramenta retângulo, poderá criar facilmente um retângulo, com altura e largura diferentes. Ok. Mas se você usar a tecla Shift ao mesmo tempo , ela a tornará simétrica E agora, se você mover o mouse, isso não mudará. A razão por trás disso é que apetra foi registrada. Ok. Então, sempre que você usar a tecla Shift, ela o guiará para criar seu objeto simétrico Ok. Então, sem a tecla Shift, eu posso criar um retângulo como este Mas se eu usar a tecla Shift e criar um retângulo , ela manterá proporção específica em todo o design R, suponha que eu esteja criando qualquer linha como essa. Mas com a ajuda da tecla shift, o que acontecerá se eu criar qualquer linha com a ajuda da tecla shift, então ela criará uma linha horizontal pura ou criará uma linha vertical pura. Ou, em vez disso, ele pode fornecer uma linha com 45 graus, mas não criará uma linha aleatória. Se eu usar a tecla shift , ela será pura horizontal ou será de 45 graus ou será vertical. Mas se eu não usar a tecla Shift ao criar uma linha , posso criar uma linha em qualquer direção. E uma vez que eu pressiono a tecla Shift. Tem algumas limitações. Ok. Então, suponha que você precise criar diagramas retos de linhas retas sem comprometer as dimensões, use a tecla Sift Agora vamos aprender sobre o agrupamento. Suponha que você tenha criado alguns objetos, algum conjunto de objetos, e precise agrupá-los. Então, com a ajuda do Control plus G, você pode fazer isso facilmente. Suponha que eu tenha criado retângulo, elipse e atar. Então, no lado esquerdo, camada sexon, você pode ver que todas as camadas são criadas individualmente Ok. Mas, para agrupar, preciso selecionar todos os objetos Ok, então vamos selecionar Sift, shift, shift. Com a ajuda da tecla Shift, selecionei todas as camadas que você pode verificar aqui. Todas as camadas são selecionadas. Agora eu tenho que pressionar o botão Control plus G no meu teclado para agrupá-los. Então, vamos pressionar Control plus G, desculpe, Control plus G. Agora o grupo foi criado com sucesso. Agora, se eu expandir, você pode ver que dentro do grupo, dentro do grupo, eu tenho uma elipse e Então é assim que você pode agrupar qualquer item. Ok. Então, suponha que você tenha criado, suponha que tenha criado um retângulo e depois disso, digite algo aqui Está bem? Oh, você criou um design como este. E se você precisar mesclá-los, selecione o objeto e pressione Control mais G para agrupá-los. Ok. Agora vamos falar sobre a seleção específica do objeto. Ok. Então, vamos criar um grande retângulo dentro desse retângulo, vamos criar outro Vamos mudar. Dentro desse retângulo, vamos criar o polígono e dentro do polígono, vamos Ok, tudo bem. Agora, suponha que você precise mudar alguma coisa no círculo. Suponha que, se você precisar alterar alguma coisa no círculo, obviamente precisará selecionar o círculo corretamente. Ok. Atualmente, todas as camadas são individuais. Eles não estão agrupados. Ok. Assim, você pode selecionar facilmente o círculo a qualquer momento e alterar qualquer coisa no círculo Ok. Mas, mas, mas. Se os agruparmos, isso é um elogio: Control plus G. Agora, o grupo foi criado com sucesso. O grupo foi criado com sucesso. Agora, se você precisar selecionar o círculo clicar no círculo, ele não está selecionando no momento. Você precisa clicar duas vezes com a ajuda do mouse e, seguida, o círculo será selecionado, mas não é necessário que ele funcione em todas as situações. Ok. Então, vamos avançar para o design prático. Isso é um design. Ok. Então, suponha que eu tenha que selecionar essa imagem de menino, então ela não está selecionando corretamente. Esta é a caixa quadrada que estamos selecionando. Ok. Portanto, para a seleção direta, você precisa pressionar o botão Control e mover o mouse sobre o objeto. Então você pode ver que pode selecionar facilmente qualquer objeto. Basta pressionar o botão Control. Você pode selecionar uma peça específica. Suponha que você precise selecionar o texto. Então, ao pressionar o botão Control passe o mouse sobre o texto e clique em Texto, foram selecionados. Se você precisar selecionar UI UX designer. Então, se você selecioná-lo normalmente, então ele não está selecionando, você pode ver que estou clicando, mas não está selecionando. Mas com a ajuda do botão de controle, posso selecioná-lo facilmente. Então, com a ajuda do botão de controle, você pode selecionar qualquer coisa com o mouse. Ok. Portanto, para uma seleção específica, você deve usar o botão Control. Caso contrário, ele selecionará qualquer coisa. Não vamos usar o botão de controle. E suponha que eu tenha que selecionar Exibir mais. Então, estou clicando em Exibir mais e ele não está selecionando. Em vez de Exibir mais, caixa quadrada foi selecionada. Portanto, não é preciso, certo? E isso é demorado. Agora, vamos pressionar o botão Control e passar o mouse sobre a exibição mais Agora, vamos clicar. Simples Ok. Assim, com a ajuda do botão de controle, você pode selecionar facilmente uma peça específica. Então, de maneira semelhante, se você tiver que selecionar o círculo, então você tem que pressionar o botão Control, então você pode facilmente selecionar o círculo. Suponha que você precise selecionar a seiva da pirâmide. Então, sem o botão Controle, vamos tentar selecionar. Não está sendo selecionado corretamente. Agora vamos pressionar o botão Control no teclado e passar o mouse Agora você pode selecionar a seiva triangular. Ok. Suponha que você precise selecionar esse retângulo de radar Então, se você fizer isso sem pressionar o botão Control, ele não funcionará corretamente. Mas se você usar o botão Control no teclado, agora poderá selecionar facilmente uma parte específica. Portanto, para a seleção adequada de uma peça específica, você precisa usar o botão Control. E enquanto pressiona o botão Control, você precisa passar o mouse sobre qualquer objeto Então, vamos ver como isso vai funcionar. Vamos pressionar o botão Control. E enquanto pressiono o botão Control, o mouse sobre objetos alusivos e ele pede que eu selecione qualquer Então é assim que você pode selecionar uma peça específica com a ajuda do controle. Então, se você gostou desta palestra, não se esqueça de me dar uma boa avaliação positiva e comentar. Ok, Bee. 5. Alinhamento no Figma: Olá, pessoal, nesta palestra em particular, vou ensinar como usar o alinhamento no Ok, então, sem perder tempo, vamos começar nosso vídeo OK. Então, suponha que temos quatro elementos , um, dois, três e quatro. Mas eles não estão alinhados corretamente. OK. Então, se tivermos que alinhá-lo corretamente , teremos que selecionar todos os elementos, obviamente OK. E no lado direito, você verá o alinhamento Opson. OK. Então, aqui temos um tipo diferente de opção de alinhamento. Suponha que, se você alinhar a partir da linha de referência esquerda , ela ficará assim Vamos pressionar Control plus. Se você precisar alinhá-los a partir do centro horizontal , ficará assim Da mesma forma, você pode explorar todas as opções, mas normalmente usaremos, mas geralmente usaremos alinhar centro horizontal e alinhar centro vertical OK. Então, vamos selecionar todos os elementos e, primeiro de tudo, criar um Centro comum. Vamos clicar em Alinhar o centro vertical. Agora você verá que todos os elementos estão devidamente organizados com um centro comum. OK. Mas se você notar aqui, a lacuna entre cada elemento é inconsistente OK. OK. Então, para corrigir isso, o que temos que fazer, aqui veremos sempre que você selecionará todos os elementos, aqui você verá esse ícone, rédea O que indica que a igualdade está passando entre todos os elementos. OK. Então, sempre que você clicar em reline, a lacuna entre todos os elementos se torna consistente Ok, você pode alterá-lo facilmente a partir daqui. Tudo bem. Além disso, OK. Então é assim que você pode criar um centro comum. OK. Agora vamos criar um botão. Então, primeiro de tudo, vamos criar um retângulo. Agora vamos usar texto. Baixar. Agora, esse é o texto do nosso botão. Vamos aumentar o tamanho do botão. Agora, o que faremos é mesclar os dois elementos. Então, em vez de fazer isso manualmente, em vez de fazer isso manualmente, você também pode fazer assim. Selecione o elemento. Agora, primeiro, temos que fazer um centro vertical. Depois disso, temos que selecionar um centro horizontal. Ele o organizará automaticamente. OK. Da mesma forma, se precisarmos criar uma guia inicial de qualquer web , criaremos recursos domésticos contato sobre isso nada mais é do que um texto. Isso não passa de um texto. E aqui temos um retângulo. Ok, então temos que mesclá-los. OK. Então, em vez de fazer tudo manualmente, exatamente o que faremos. Primeiro, selecionaremos todo o texto e os alinharemos no centro comum OK. Agora vamos clicar em linha igual ou em um espaçamento igual. OK. Agora vamos selecionar todos eles dentro desse retângulo. Vamos selecionar tudo. Novamente, clicaremos em alinhar o centro vertical. OK. Agora você pode ver que os alinhamos corretamente, então você não precisa fazer trabalho manual se souber como usar o alinhamento Está bem? Por exemplo, você criou um retângulo, criou um círculo OK. Você criou outro retângulo Digamos que seja vermelho. OK. Então, agora o que você pode fazer é selecionar os dois elementos, criar um centro comum. Ok, faça assim. Faça um centro comum. Selecione todos os elementos para formar um centro comum. OK. Então é assim que você pode criar qualquer coisa. É assim que você pode jogar com o alinhamento. OK. Então, se você gostou desta palestra, não se esqueça de me dar uma boa avaliação positiva. Tchau tchau. 6. O que é wireframe, modelo e protótipo: Olá, pessoal. Então, bem-vindos a todos vocês na minha série master completa sobre Pigma UIUX Design Nesta palestra em particular, ensinarei o que é maquete e protótipo de wireframe Então, sem perder tempo, vamos começar nosso. Ok. Então, aqui você verá a pré-imagem, primeira, a segunda e a terceira Ok, então o primeiro é o fio wireframe. Quadro. Portanto, o wireframe é um diagrama aproximado do seu aplicativo ou site. Está bem? O que quer que você crie, você precisa criar um diagrama aproximado do seu aplicativo. Está bem? Tudo bem. Como é um diagrama aproximado, é por isso que você não precisa medir nada. Até você pode criá-lo com a ajuda de papel e caneta. Basicamente, você precisa transmitir sua ideia com a ajuda de um diagrama aproximado Ok. Portanto, sempre que você criar um wireframe, seus outros colegas de equipe poderão entender sua ideia Ok. Com a ajuda do wireframe, você pode compartilhar sua ideia com as partes interessadas, CEO Ok. Portanto, você pode dizer que o wireframe é a fase inicial Agora vamos aprender sobre o que é o mockup Mk up. Portanto, a maquete é uma representação melhor do seu aplicativo. Ok. Você pode dizer que esta é uma versão avançada do wireframe Então, esse é um exemplo de maquete. Essa é uma versão realista do seu aplicativo e, na verdade, tem uma aparência melhor do que o wireframe O wireframe era o diagrama básico do seu aplicativo. Por outro lado, a maquete é uma versão mais realista do seu aplicativo Ok. E também aqui está a versão do nosso aplicativo Ok. Esse é o primeiro, esse é o segundo. Então, a principal diferença é que esse é um design ruim. Este é um design de alta qualidade. Ok, então por que parece ruim e por que parece mais realista por causa da fidelidade. Aqui veremos o termo Fdlity. Então, isso é baixa fidelidade. E esse design é de alta fidelidade. Portanto, fidelidade significa realismo. Se seu design estiver mais inclinado ao realismo, você dirá alta Se o seu design for menos realista, você dirá baixa fidelidade. Então, esse é outro exemplo de baixa fidelidade e alta fidelidade Parece mais realista. É por isso que podemos dizer que isso é uma maquete de alta fidelidade. Isso é baixa fidelidade, maquete. Agora, finalmente, temos um último estágio que é prototipagem, prototipagem Prototipagem ou protótipo. Onde você tocará todo o seu design. Onde você reproduzirá todo o seu design. Então, vamos jogar qualquer design. Então, na fase de protótipo, basicamente o que você fará, você conectará muitas páginas, assim Ok. Suponha que, se eu clicar no bate-papo com Colin , essa página deverá aparecer Se eu clicar em Embaixador , isso deve aparecer. Ok, então você pode atribuir a relação entre todas as páginas. Esse é um processo demorado. Ok. Ok. Assim, você também pode jogar seu protótipo. Então, vamos jogar, e ele está carregando agora. Ok, pessoal, então na fase de protótipo, você pode realmente jogar seu site em tempo real Então, vamos clicar em com Colin. Agora você verá uma nova página aparecendo. Vamos clicar em Criar conta, cadastrar-se, verificar OTP e clicar em Ver perfil de Colin Ok, vamos agendar a agenda da reunião, vá até o agendador. Ok. Então, aqui você notará que estou me movendo em toda a página com a ajuda de um único clique, este é um protótipo Então, eu abordei tudo, arame, maquete e protótipo. Então, sempre que você criar qualquer projeto. Você precisa criar um wireframe primeiro, que é um diagrama aproximado E depois disso, você precisa criar uma versão mais realista do seu design básico no software. E depois disso, você precisa criar mais páginas e vincular todas as páginas para poder executá-las em tempo real. Ok, então se você gostou desta palestra, não se esqueça de me dar um bom elemento de avaliação positiva para que eu possa me motivar. Ok. Tchau tchau. 7. O que é Component no Figma. Como criar: Olá, pessoal. Então, bem-vindos a todos vocês na minha série master completa sobre design Pigma UIUX Então, nesta palestra em particular, aprenderemos o que é um componente e como podemos criá-lo Ok, então primeiro de tudo, vamos falar sobre sua definição. Portanto, os componentes Pigma são elementos de interface de usuário reutilizáveis, como ícone de botão e barras Avigan, o que significa que você criará seu componente por uma vez e, sempre que precisar usá-lo, basta arrastá-lo OK. Suponha que esse seja um projeto real. Este é um projeto real. E aqui você pode ver que usei o mesmo botão várias vezes. Eu usei o mesmo botão várias vezes. Então, sempre que você estiver criando qualquer design, você criará cada botão desde o início cada vez, você não fará isso. Em vez disso, o que você fará é criar seu botão. Você criará seu botão apenas uma vez. E depois disso, sempre que for necessário usá-lo, basta arrastá-lo. Ok, então isso é chamado de componente. Portanto, o componente é um elemento reutilizável. O que é reutilizável? Porque você o está criando uma única vez e pode usá-lo para sempre. Está bem? Portanto, o botão é um bom exemplo de componente. Isso é um componente. Então, eu posso usar esse botão várias vezes no meu design. Portanto, se eu tiver que usá-lo em 50 páginas diferentes, posso usá-lo facilmente porque é um componente. Isso é uma beleza. OK. Agora, aqui, você tem que entender uma coisa. O que é componente e o que é instância. Ok, então você vai entender essa coisa. OK. Mas antes disso. Mas antes disso, vamos criar um componente. Ok, continue com o básico Ok. Agora vou criar um componente. Primeiro de tudo, vamos pegar um retângulo. Vamos criar. Você pode dar o raio do canto, você pode sentir a cor. Agora você pode adicionar um botão de texto, aumentar o tamanho. Agora, no lado esquerdo, você verá duas camadas diferentes. A primeira camada é para texto, segunda camada é para retângulo Está bem? Agora, o que faremos mesclar os dois elementos Então, primeiro de tudo, vamos selecionar o elemento depois de clicar com o botão direito nele. E aqui você verá o botão criar componente. Então você precisa clicar em Criar componente. OK. Agora, aqui você pode ver que temos um novo ícone como esse. Este é um ícone do componente. Este é um ícone do componente. Sempre que você criar um componente, seu ícone aparecerá assim. Está bem? Portanto, posso usar esse componente várias vezes em meu design. OK. Então, vamos pegar uma moldura. Vamos pegar uma moldura. OK. E suponha que eu tenha que usar esse botão aqui. OK. Então, muitos de vocês, pensaremos sobre isso. Nós podemos copiar, podemos copiar e podemos colar isso aqui assim. Mas esse é um método errado. Você não precisa fazer isso. Em vez disso, o que você tem que fazer? Sempre que você precisa usar um componente, você precisa usar sexo ativo Você tem que continuar fazendo sexo ativo. Você não precisa copiar isso. Você não precisa copiar isso. Você tem que ser sacristão de ativos do seu Figma. Então, quando você acessar os ativos, aqui você verá toda a biblioteca. Aqui você verá toda a biblioteca. Você tem que clicar nele. E aqui você verá todos os componentes que você criou recentemente. Então esse é o meu componente. Então, o que eu preciso fazer? Vou clicar nele. E aqui você verá a instância Inset Agora você ouvirá uma instância de um termo. Então, vamos clicar em Instância. OK. OK. Agora, você tem que ouvir com muita atenção. Isso é chamado de componente pai. Isso é chamado de componente pai. E isso é chamado de instância. Você pode dizer filho, pai, filho, pai, filho. OK. Então, qualquer mudança que você fizer no componente pai , seu reflexo aparecerá na instância, ok? OK. Qualquer alteração que você aplique no componente pai, seu efeito será aplicado automaticamente no componente filho, que é a instância. OK. Então esse é meu componente pai, então vamos selecionar isso. OK. Suponha que eu esteja mudando sua cor. Consigo ver isso. Qualquer que seja a cor que eu aplique no componente principal, mesma cor também se aplicará à criança. Qualquer coisa que eu faça aqui , sua reflexão aparecerá aqui Por que você tem alguma razão pela qual isso está acontecendo? Porque esse é o componente pai, pai, pai. E isso é componente infantil. Em figma, em vez de chamar uma criança, podemos dizer exemplo Esse é um exemplo. OK. Portanto, qualquer alteração que você aplique no componente pai, ela também se aplicará à instância ou à criança. OK. Mas se você fizer alguma mudança na criança , sua reflexão não aparecerá nos pais Esse é um conceito principal. Você tem que pensar sobre isso. Qualquer que seja a mudança que você fizer nos pais, seu efeito também se aplicará à criança. Mas seja qual for a mudança que você fizer na criança, seu reflexo não aparecerá nos pais OK. Ok, tudo bem. Então, agora vamos pular para o tópico do apartamento. Mamãe. Então, aqui você verá. Esse é um componente principal. Esse é um componente principal. Você pode dizer pai. Componente pai também chamado de componente principal. Componente principal. E com a ajuda do componente pai, você criará vários filhos. Com a ajuda dos pais, você criará vários filhos. E em vez de chamá-lo de criança, você pode dizer que é um exemplo. OK. Então, primeiro de tudo, vamos esclarecer cada coisa. OK. Suponha que você tenha criado um componente. Suponha que você tenha criado um componente. Portanto, qualquer componente que você tenha criado, você o chamará de componente principal. Portanto, sempre que você criar qualquer componente, dirá que é o componente principal. O componente principal também é chamado componente pai porque é básico. E sempre que você usar esse componente principal em seu quadro, sempre que você o usar. Então você pode chamá-lo de instância. OK. Você pode chamar isso de criança. OK. Agora, a parte mais bonita de puxar é. Qualquer alteração que você aplicará no componente principal. Seu reflexo aparecerá aqui também. OK. Mas qualquer alteração que você aplique por exemplo, seu efeito não aparecerá no componente principal. Isso é uma coisa principal que você precisa aprender. OK. Ok, tudo bem. Ah, ok. Então, vamos deletar tudo. E esse é um componente que criamos recentemente. Então, sempre que você criar qualquer componente, você pode chamá-lo. Esse é um componente principal. Esse é um componente principal. Você pode dizer pai. Pode dizer componente principal ou pai, as duas coisas são iguais. E sempre que você precisar usá-lo em sua moldura , você precisa usar sexo ativo OK. Então, vamos criar um quadro. Vamos criar qualquer quadro. Agora, se você tiver que usar esse componente neste quadro, você acessará o ativo Sexan e, dentro do ativo, verá a biblioteca e, dentro da biblioteca, verá seu botão Portanto, se você clicar nele, obterá o componente filho ou o componente pai. Você receberá um componente infantil. OK. E você pode criar várias versões do seu componente secundário. OK. Então, suponha que o estejamos usando muitas vezes. OK. Da mesma forma, poderíamos ter 50 páginas diferentes nas quais eu usei esse botão várias vezes. OK. OK. Vamos criar vários quadros. Suponha que eu tenha vários quadros, onde usei esse botão. OK. Suponha que eu tenha que mudar a cor do botão em toda a página, então como posso fazer isso? Vou simplesmente usar o componente principal. Vou simplesmente usar o componente principal. E qualquer mudança que eu fizer aqui , seu reflexo aparecerá aqui, aqui. OK. Então, em vez de mudar a cor de cada botão individualmente, obviamente, esse era um processo demorado. Em vez de fazer esse método, o que faremos, simplesmente usaremos o componente principal. Esse é o componente principal. Se forem componentes infantis. E qualquer mudança que eu faça aqui, é o reflexo que aparecerá aqui também. Então, vamos mudar a cor do texto. Vamos mudar a cor do texto. Você pode ver isso. Vamos aplicar o traçado, aumentar a espessura. Vamos mudar a cor do botão. OK. Então é assim que você pode aplicar o componente. Veja que a principal vantagem do componente é que você não precisa criar cada botão toda vez. Você criará qualquer componente por uma vez e poderá usá-lo sempre que precisar usá-lo. Portanto, esse é um processo que economiza tempo. OK. Suponha que você tenha um site como este em que tenha criado 50 páginas diferentes. Suponha que seu sênior peça que você mude a cor de todos os botões. Então, se você for manualmente, levará um dia inteiro para mudar a cor. Veja, se você mudar a cor de cada botão individualmente, isso levará muito tempo, talvez um dia ou dois dias. OK. Mas se você criou um componente, ok, então o que você vai fazer? Você usará seu componente principal. OK. Esse é um componente secundário. Esse é um componente secundário. Obviamente, devemos ter um componente principal. Devemos ter um componente principal. Portanto, temos que usar o componente principal e qualquer mudança que faremos aqui, não importa o que estejamos mudando de cor, texto e tamanho. Qualquer que seja a alteração que você fizer no componente principal, seu reflexo aparecerá em todo o design, não importa o quanto você tenha usado esse botão em 50 páginas ou 100 páginas. Com esse pequeno esforço, você pode alterar a propriedade do botão em todas as páginas. Está bem? Essa é a beleza do componente. E se você não criar um componente , para uma tarefa muito simples, precisará executar cada processo manualmente. Se você não criar um componente, pedirei que altere a cor do botão, então o que você fará, você virá aqui, mudará a cor e simplesmente aplicará a mesma coisa em todo o design. Esse é um processo demorado. OK. Então, em vez de fazer isso, basta criar um componente, acessar o ativo e usar qualquer componente que você queira usar. OK. E com a ajuda do componente, você pode editar todo o seu design com apenas alguns cliques. OK. Então, espero que tenham gostado dessa palestra. Então, se você recebeu alguma ajuda do estúdio, pode me dar uma boa avaliação positiva e comentar. 8. Variáveis no Figma: Olá, pessoal. Então, bem-vindos a todos vocês na minha série master completa sobre design Figma UIUX Então, nesta palestra em particular, aprenderemos o que é variável no Figma e como podemos criá-lo com muita facilidade Em uma palestra anterior, já abordamos o que é componente Então, o componente era um elemento reutilizável, como um botão. Por que é reutilizável? Porque investiremos nosso tempo e esforço apenas uma vez e depois disso, sempre que necessário, podemos facilmente soltar dragões. É por isso que é chamado de elemento reutilizável. Está bem? Então, o botão é o melhor exemplo. O botão é o melhor exemplo de componente, então isso é componente. Mas o que será variável? Se eu criar uma variação diferente desse botão. Veja, esse é o meu componente. Esse é o meu componente. Se eu criar, é uma variação diferente com base na cor do texto, forma e tamanho. OK. Se eu criar uma variação diferente desse botão, isso é chamado de variável. Ok, eu acho que você entendeu. Então, agora vamos entender como podemos criá-lo com muita facilidade. Então, primeiro de tudo, você precisa ficar em branco e ficar e fazer um emaranhado, dar o raio do canto, cor do pálido e adicionar um efeito de traçado Agora, vamos adicionar um botão de texto, botão. OK. Ok, tudo bem. Então, eu ainda não criei o componente. Texto de texto e botão, ambos estão separados aqui. Está bem? Eu não o converti no componente. OK. Antes de tudo, o que vou fazer é criar sua variação diferente. Então, selecionarei as duas camadas corretamente e, depois disso, farei a duplicata. Então, com a ajuda do botão antigo, você pode copiar facilmente o botão. OK. Agora, eu tenho que criar uma variação diferente. Temos que criar uma variação diferente. Então, digamos que se eu tiver uma cor vermelha escura , outras variações seriam de cor vermelha clara. OK. Então esse é meu segundo botão. Vamos fazer com que seja leve. OK. Da mesma forma, vamos mudar a cor do botão para verde. Está bem? E vou copiar o mesmo código de cores para o Festival aqui Agora vamos fazer uma versão mais leve disso. Eu acho que você está entendendo o que eu quero dizer. Na verdade, o que estou fazendo criar o botão principal. Este é meu botão principal. E aqui estou eu criando meu botão secundário. Portanto, o botão secundário é indicado pela cor clara. O botão principal é indicado pelo alvo. OK. Você pode criar uma variação diferente com base em textos diferentes, formas e tamanhos diferentes. OK. Então, aqui estou criando diferentes variações de componentes com base apenas na cor. Ok, aqui estou criando aqui Estou criando varion aqui estou criando variação com base na cor OK. Você pode criar uma variação diferente do componente com base no tamanho e também na forma. OK. Vamos aqui, selecione-o. Coloque a cor azul, coloque a cor azul, copie seu código de cores e cole na segunda. E faça com que seja leve. Faça com que seja leve. OK. Então, atualmente, temos uma versão mais escura, pessoa mais escura e uma versão mais clara, agora temos que converter cada elemento no agora temos que converter cada elemento OK. Agora, aqui você tem que prestar atenção. Em primeiro lugar, abordaremos botões e textos como este. Depois disso, criaremos o componente. OK. Portanto, sempre que você converter dois elementos em um único componente, você verá esse ícone aqui. Está bem? Agora vamos selecionar o botão e o texto do segundo elemento. Agora, na seção esquerda, você pode ver que o elemento de texto foi selecionado. E o retângulo foi selecionado corretamente. OK. Portanto, seja qual for o elemento que você está selecionando, você deve verificar se está selecionando a camada correta. Caso contrário, você pode cometer um erro. OK. Portanto, sempre que você selecionar qualquer elemento, deverá verificar no painel lateral esquerdo. Você está selecionando o elemento adequado ou não. Está bem? Então, vamos converter o elemento no componente. Algo semelhante que temos que fazer aqui, ler o componente. Crie um componente. Crie o componente Create. OK. Agora você pode ver que temos seis componentes diferentes. Temos seis componentes diferentes aqui. Agora temos que renomeá-los de maneira inteligente, ok. Portanto, você precisa seguir qualquer sequência ao renomear. OK. Então, por exemplo, esse é meu componente um, esse é meu componente um. Então, vou clicar duas vezes no texto e agora posso renomeá-lo Mas antes de renomear, você deve entender que é fundamental renomear Então, agora vou te ensinar como você deve renomear seu computador OK. Então, deve ser como um botão. Você tem que prestar atenção aqui, ok? Botão, barra. Botão mm, barra, vermelho, barra ativa Ok, então você tem que renomear assim. OK. Então, agora vamos entender o que é isso. Então, slash significa pasta. Sempre que você usar o slash, Pigma predirá que é uma propriedade diferente OK. Então slash é uma pasta. Slash é uma pasta. Então, primeiro, você precisa digitar o botão. Em segundo lugar, você precisa digitar a cor. Em terceiro lugar, você precisa digitar o status ativo ou inativo Ok, então vamos explorá-lo de forma muito prática para que você o entenda com muita facilidade. Ok, então temos que seguir a mesma ordem. Temos que seguir a mesma ordem. Botão, depois vermelho, que é cor, e depois disso, status, ativo ou inativo Ok, então temos que seguir a mesma sequência. OK. Então, primeiro de tudo, vamos renomear esse componente como um OK. Agora vamos digitar. Vamos digitar o botão. Ativo. Ok, porque ele é um ativista. OK. Da mesma forma, tenho que copiar isso e vou usar o segundo botão cujo nome deve ser botão vermelho e inativo, porque cor clara significa inativista OK. Você também pode digitar desabilitar ou habilitar. Você também pode digitar ligado ou desligado em vez de ativo ou inativo Não é necessário usar texto ativo ou inativo Em vez de ativo ou inativo, em vez de ativo ou inativo, o que você pode fazer, você pode usar off, você pode usar enable Você pode usar a desativação , então aqui você está livre. Você pode usar qualquer coisa. Mas seja qual for a sequência que você atribuiu no primeiro botão, você deve seguir a mesma sequência em todo o botão. Caso contrário, não funcionará. Está bem? Mesmo você não precisa cometer um erro de ortografia Está bem? Você não precisa cometer um erro de ortografia Caso contrário, garantirá que seja consistente. Então aqui você pode ver esse botão. Vermelho ativo. OK. E aqui você verá o botão, barra vermelha inativa. OK. Tudo bem. A mesma coisa que você tem que fazer com outros botões como se eu fosse para o componente três, então eu teria que renomear o botão, depois verde e depois ativo Ok, tudo bem. Vamos copiar, a mesma coisa. Vá para o componente quatro, renomeie-o como botão, botão verde, botão verde e inativo inativista. A mesma coisa que você tem que fazer com o Botão, azul e ativo. Copie o mesmo texto e cole-o no componente seis. Botão, azul e inativo. Tudo bem. Então, eu criei, criei seis componentes diferentes com a renomeação adequada OK. Agora, se você fez isso muito corretamente , o que acontecerá? Você precisa selecionar todo o componente e, se o tiver executado muito bem, verá Opson like e, em seguida, verá Opson Combine como uma variante. Combine como uma variante. OK. Então você precisa clicar em Combinar como variante. Tudo bem. Clique em combinar como variante. Agora, todos os componentes são convertidos em um único componente grande. OK. Agora, aqui temos a melhor parte. Propriedade um, propriedade, dois. Portanto, se você realizou todas as atividades corretamente, finalmente obteremos a propriedade um, propriedade um e a propriedade dois. Você se lembrou de que adicionamos um ícone de barra ao renomear OK. Então foi por propriedade. Portanto, a primeira propriedade significa cor. A segunda propriedade significa ativa ou inativa. OK. Então, agora, suponha que eu tenha que usar o componente. OK. Este é um novo quadro em que preciso usar um componente que criei recentemente. Então, primeiro, vou continuar com sexo ativo. Em primeiro lugar, vou continuar com sexo ativo. Então, vamos continuar com o ativo. Dentro do ativo, aqui vou ver aqui todos os componentes que criei recentemente. Então, isso é um componente. Vamos clicar nele. Instância interna. OK. Então, este é um botão que eu criei recentemente. OK. Mas a parte bonita aqui estou comprando a propriedade um e a propriedade dois OK. Portanto, a propriedade 1 significa cor, então eu posso mudar para qualquer cor verde, azul. Ok. E suponha que eu tenha que comprar uma versão mais clara da cor azul. Em seguida, continuarei com a cor azul e, na propriedade dois, continuarei como ativista. OK. Então, sempre que você usar o ícone de barra na renomeação Ok, ele se converterá em propriedade. Ok, suponha que você esteja renomeando seu botão como botão, botão, botão de barra, barra, vermelho, barra Luz. OK. Então, o que vai acontecer? Esta seria sua primeira propriedade e essa seria sua segunda propriedade. Portanto, sempre que você usar o ícone de barra, ele o considerará como se fosse uma propriedade diferente Então, aqui está o que fizemos, na verdade, renomeamos esse botão curtir Cor, ativa. OK. Portanto, no lugar de ativo ou inativo, você pode usar palavras como ativar ou desativar ou ok, claro ou escuro Então você pode usar qualquer coisa. OK. Em vez do botão, você pode digitar qualquer coisa. Em vez do botão, você pode digitar o cartão componente. Você pode digitar qualquer coisa. Então essa foi a nossa sequência, botão, cor e ativo. Então, aqui está o que está acontecendo, na verdade. A cor é a primeira propriedade e o estado ativo ou inativo é a segunda propriedade Então, no lado direito da tela, você verá as duas coisas. Suponha que, se você criou um conjunto de componentes aos quais atribuiu várias propriedades , aqui você verá várias propriedades sun. Como nos dividimos apenas em duas partes, cor e estado ativo ou inativo, é por isso que aqui temos a propriedade um e a propriedade dois E se você criar seu botão como este botão , tamanho da barra do botão , tamanho diferente, texto diferente OK. Então, o que vai acontecer? Dentro da pasta de botões, você obterá a primeira propriedade sobre o modo mais escuro ou o modo mais claro Segunda propriedade sobre o tamanho diferente. Terceira propriedade sobre o texto diferente. OK. Portanto, essa é a beleza da variação. Agora eu posso usar qualquer variação como essa. Ok, tudo bem. Então, isso foi uma variação. Da mesma forma, você pode criar variações para conjuntos diferentes. Por exemplo, se você quiser criar quatro sóis diferentes desse botão vermelho, como 100% vermelho e cem por cento vermelho, 80% vermelho . 60% d. Na verdade, estou falando sobre os diferentes conjuntos de botões específicos. OK. Assim, você pode fazer isso facilmente com a ajuda de variáveis. Então, espero que tenham gostado dessa palestra. E se você tiver alguma ajuda do estúdio , pode me dar uma boa avaliação positiva. OK. E se você quiser aprender Figma pessoalmente comigo, uma aula ao vivo, então o que você pode fazer é entrar em contato comigo no Instagram, UX por meio de um professor de UX Assim, podemos discutir tudo individualmente sobre Figma. Se você estiver interessado em aprender , entre em contato comigo. OK. Então, espero que tenham gostado dessa palestra. Oi, Bob. 9. O que é um sistema de design?: Olá, pessoal. Então, bem-vindos a todos vocês na minha série master completa sobre design Figma UIUX Então, nesta palestra em particular, aprenderemos o que é sistema de design e como você pode usá-lo no Figma OK. Então, sem perder tempo, vamos pular para a definição principal Está bem? Essa é uma definição. O Design System é uma coleção abrangente de componentes reutilizáveis OK. É um componente reutilizável É uma coleção de componentes reutilizáveis. Então, em palestras anteriores, eu já abordei o que é componente, como você pode usá-lo, qual é a importância do componente Eu abordei tudo em palestras anteriores. Então, com a ajuda da definição do sistema de design, você pode entender uma coisa o componente também faz parte do sistema de design. Se o círculo grande é o sistema de design , o círculo pequeno é o componente. O componente também faz parte do sistema de design, o que significa que o botão que você criou em palestras anteriores também faz parte do sistema de design OK. E é um elemento reutilizável É um elemento reutilizável . Reutilizável Por quê? Porque você investirá seu esforço e tempo apenas pela primeira vez. E depois disso, sempre que for necessário usar, você pode arrastar facilmente qualquer elemento ou componente. Você não precisa criá-lo várias vezes. Você não precisa criá-lo desde o início. Simplesmente, você pode criar uma coleção de elementos reutilizáveis e, sempre que necessário, você pode facilmente arrastar e soltar OK. Portanto, este é um sistema de design. Está bem? Então, por que o sistema de design é importante? O sistema de design é importante para a consistência. Suponha que, se você tem uma marca, suponha, por exemplo, que seja um site. Agora, estou perguntando qual é a cor da marca? Qual é a cor primária do site Qual é a identidade da marca? Então você dirá que essa cor azul é a identidade da marca. Você vai dizer isso. Essa cor azul é a identidade da marca. OK. Se eu perguntar qual é a cor primária do Instagram , você dirá que é um pouco como rosa e se eu perguntar qual é a cor primária do YouTube , você dirá vermelho e preto. Está bem? Se eu te perguntar qual é a cor primária do weiter Então você dirá azul e branco. OK. Então, com a ajuda da cor, você pode criar um design consistente. Está bem? Então, para uma consistência adequada, usaremos o sistema de design. Está bem? Por isso, criamos um sistema de design com base na cor, texto, tamanho, layout, diretriz e componente OK. E, como eu já disse, o sistema de design é o mais importante para a marca. Está bem? Porque cada marca tem sua própria cor exclusiva, chamada cor da marca. OK. Portanto, para uma marca adequada, devemos usar o sistema de design em todo o design OK. Se você ver este site , verá essa cor azul em toda a página. Em toda a página, você verá a mesma cor. OK. Com a ajuda dessa cor, estamos mantendo a consistência, e a consistência é o mais importante ao criar UIUX Está bem? Esse é um princípio fundamental do UIUX A consistência é fundamental. OK. O Design System é um modelo predefinido, temperatura predefinida em que você o criou por uma vez Você pode usá-lo sempre que necessário. OK. Ok, tudo bem. Agora surge a pergunta: por que o sistema de design é tão importante? Suponha que eu seja um CO, CEO de uma empresa. Suponha que eu seja CEO de uma empresa e atribuí aos meus funcionários a tarefa de criar um design de aplicativo de hotel. Você precisa criar um aplicativo para hotel. OK. Em seguida, atribuí a tarefa a vários designers de UIUX. OK. Então, suponha que eu tenha designado Mm She's Katy, suponha Ela é Katie. OK. Então, atribuí um trabalho para Katie que ela deveria criar uma página de login Da mesma forma, atribuí uma tarefa a Rahul: você precisa criar a tela inicial Ok, então eu contratei dois designers de UIUX diferentes e os dois designers estão trabalhando no mesmo projeto Ambos os designers estão trabalhando no mesmo projeto. OK. Então Katty criou essa página de login. OK. E Rahul criou essa página inicial Mas se você notar que não há consistência. Em termos de cor, ícone, tipografia, não há consistência Então, como o design se relacionará com o mesmo projeto, como ele se relacionará com o mesmo projeto. Se você não mantiver a consistência com base na cor, no texto iconografia, seja qual for a página que você criar, toda a página terá uma aparência diferente da anterior OK. Esse é um processo errado. É por isso que aqui vamos usar o sistema de design para uma consistência adequada. OK. Então é assim que o sistema de design se parece. Você criará um conjunto de texto em tamanhos diferentes. Em seguida, você criará uma cor que normalmente usará em seu design. OK. Você criará um padrão como esse. OK. Então é assim que o sistema de design se parece. Agora, sem perder tempo, vamos criar um sistema de design Então, primeiro de tudo, vamos tirar uma moldura. OK. Então, primeiro de tudo, vamos criar um sistema de design para cores. O que eu vou fazer é criar um retângulo como esse. Vou fazer uma cópia. OK. Então, vamos inserir a cor. Verde escuro. Ok, então vamos digitar a cor preta. Vamos copiar a mesma cor. Copie a mesma cor , cole na segunda. Faça com que seja um pouco mais brilhante. Faça com que seja um pouco brilhante. OK. Agora vou copiar o mesmo código. Cole aqui. Reduza a transparência. Então, eu criei vários conjuntos aqui. Está bem? Então é assim que você pode criar um sistema de design. Essa é minha cor primária. Suponha que essa seja minha cor primária. OK. Da mesma forma, posso criar cores secundárias. OK. Vamos descascar outra cor vermelha. E vamos copiar seu código de cores. OK. Então, eu criei vários conjuntos de vermelho. OK. Então essa é minha cor primária, essa é minha cor secundária. OK. Então, eu expliquei como você pode renomear seu componente em palestras anteriores Da mesma forma, você precisa fazer o mesmo processo aqui. OK. Então, primeiro de tudo, vamos clicar em F one. OK. E aqui você verá quatro pontos. Aplique estilo e variáveis, clique nele e clique no botão Mais. OK. Agora, você pode renomear como já fizemos na aula de componentes OK. Então, vamos digitar um. Vamos digitar Black one. OK. Então eu digito aqui Black slash one Então, sempre que eu usar essa barra, ela se dividirá na pasta. OK. Da mesma forma, vou renomear como Preto, um, preto, dois, preto, três, preto, quatro Então, se eu não usar o ícone de barra entre X e número , o que acontecerá? Toda a cor será visível individualmente. Mas se eu adicionar uma tecla de barra como essa, o que acontecerá? Vou pegar preto e, por dentro, vou pegar todas as variedades Então, isso seria muito sistemático. Portanto, não se preocupe com isso se você não entender. Eu vou te mostrar praticamente. OK. Então, primeiro de tudo, vamos renomear o primeiro botão, preto. Eu renomeei isso OK. Clique em Estilo criativo. Então, o primeiro estilo foi criado com sucesso, você pode ver aqui. OK. Agora, clique no segundo botão, vá em quatro pontos. Clique no botão Mais. Novo estilo na variável e o nome da pasta não têm a barra dois Estilo criativo. OK. Agora vá para o terceiro. Adicionar botão Plus. Falta a barra três. Vá em quatro pontos mais x quatro. OK. Tudo bem. Da mesma forma, você também precisa usar quatro cores vermelhas. Ok, então clique na cor vermelha, vá no ícone de quatro. OK. E veja, eu já criei o vermelho um, vermelho, dois, vermelho três. OK. Então, primeiro de tudo, vamos apertar o botão. Vermelho. Vermelho menos um. Ponto F mais ícone, dois vermelhos, crie estilo. Três vermelhos. Tarifas menores que quatro. OK. Agora, suponha que você precise usar essa cor. OK. Então o que você vai fazer? Suponha que eu tenha criado esse quadro e, dentro desse quadro, eu criei um círculo. OK. Então, suponha que eu tenha que aplicar essa cor. OK. Então eu não vou usar pílula Não vou usar a opção de preenchimento para sentir a cor. Isso está errado. Então, sempre que você vai criar um sistema de design, você tem que colocar cores como esta. Primeiro de tudo, você selecionará os objetos nos quais você precisa sentir a cor, eu selecionei o círculo. Agora vou falar sobre quatro pontos, e aqui você verá aqui tudo o que você criou. Ponto. Aqui você verá a ordem sistemática. Como eu já disse isso, estou renomeando assim Vermelho um, vermelho mais dois, vermelho mais três. Então, parecerá que há uma pasta vermelha e, dentro, vermelha, uma, duas, três. Da mesma forma, para preto, obterei preto, um, dois, três. Esse é um processo sistemático. Então, suponha que eu tenha que preencher a cor no círculo vermelho. Então, vou clicar no círculo e continuar aplicando estilo e variáveis. Role para baixo. E aqui você verá uma pasta preta, uma pasta vermelha. Ok, então vamos colocar dois pretos. Então é assim que você pode se sentir. E se você quiser excluí-lo , você pode excluí-lo aqui. OK. Suponha que eu tenha criado outro círculo aqui. Eu tenho que sentir a cor neste círculo, então vou usar quatro pontos Suponha que eu tenha que preencher a cor vermelha também. Então esta é uma pasta principal, vermelha, e dentro de vermelho, temos um, dois, três, quatro. OK. Portanto, sempre que você usar o ícone de barra na renomeação, ele o dividirá como uma propriedade Então é assim que você pode usá-lo. OK. Em vez disso, o que você pode fazer? Você pode renomear assim. Você pode renomear assim. Falta primária uma falta primária e assim por diante. Você pode fazer um nome assim. Portanto, sempre que você usar essa tecla de barra, ela a considerará como duas propriedades diferentes A primeira propriedade é para preto e a segunda propriedade para número. OK. Além disso, você pode fazer um nome assim. Primário primário, preto escuro. Portanto, você também pode renomear assim. Ok, escuro, mais escuro, mais claro, claro. OK. Portanto, sempre que você usar o ícone, tecla de barra, ela a dividirá em propriedades diferentes Você pode renomear como cores primárias vermelhas, cores secundárias pretas. OK. Então você está livre para renomear. OK. Então, basta pensar nisso não importa o tipo de sequência que você esteja usando, mas ela deve ser consistente em todo o sistema de design. Então, eu criei um sistema de design para cores. OK. Da mesma forma, você precisa usar o sistema de design para texto, tipografia Ok, então vamos expandir o quadro. OK. Agora vamos criar um sistema de design para texto. Então, primeiro de tudo, vamos digitar aqui o título. Título. OK. Então, aqui você pode ver que, atualmente, estilo quanti é pop ins, 36 normal. OK. Agora você pode copiar isso e reduzi-lo para 32 e, em seguida, copiar esse 24. 20. Ok, ou você pode digitar o parágrafo. OK. Então essa é a sua tipografia. OK. E em um único design, você não precisa usar mais do que dois estilos de fonte diferentes Estou dizendo que você não precisa usar mais do que dois funtistyle em cada design Em cada design, você precisa usar no máximo dois tipos diferentes de tista de fonte. Em seu design único, ele não deve consistir em mais do que duas fontes diferentes. Esse é um design fundamental. Então, eu criei quatro tamanhos diferentes. OK. Além disso, você pode alterar sua espessura. Está bem? Então, eu criei quatro versões diferentes de forma muito aleatória. Assim, você pode atribuir como você pode atribuí-lo. Novamente, você entrará em quatro pontos. Em primeiro lugar, vamos selecionar esse texto, colocar quatro pontos e adicionar o estilo criativo do ícone plus. Aqui você pode digitar qualquer coisa. Então, digamos que o título um. Digamos que o título um seja nosso primeiro texto. Então vá em Edding two. Adicionando três. Adicionando quatro. Então, suponha que eu tenha que usar isso. Ok, então eu criei quatro tipografias diferentes. OK. Então, suponha que eu tenha que usá-lo. Então, vou usar esse quadro. Aqui, eu vou levá-lo. OK. Agora, se eu tiver que aplicar qualquer um desses sistemas de design, como posso? Em primeiro lugar, vou clicar duas vezes no meu nome e depois disso, a partir daqui, posso escolher qualquer um. Título um, Título dois, Título três, título quatro, parágrafo. Ok, então é assim que você pode usar o sistema de design. OK. Então, quando você vai criar isso, quando você vai criar isso. Suponha que você esteja criando um site como este. Você está criando um site como este. Então, o que você fará é criar primeiro seu sistema de design para cores. Você criará um retângulo ou círculo. Isso é apenas para referência. OK. E o que você vai fazer, você copiará essa cor. OK. Então esse é o meu sistema de design. OK. Então, eu criei um sistema de design para este site. OK. Então, sempre que eu tiver que aplicar essa cor, basta clicar nesses elementos e posso preencher a cor aqui. OK. Portanto, essa é a beleza do sistema de design. Algo semelhante que você pode fazer com texto. Então, basicamente, é um modelo predefinido. É um templo predefinido. Aqui você pode ver que usei essa cor específica em todo o design, em todo o design. É por isso que, como referência, criei um sistema de design e, para criar consistência, usarei a mesma cor. OK. Então é assim que você pode criar seu próprio sistema de design. OK. Espero que tenham gostado dessa palestra. Tchau tchau. 10. Autolayout no Figma ( parte 1 ): Olá, pessoal. Então, bem-vindos a todos vocês na minha série completa de mestrado sobre design iGMAUIUX Então, nesta palestra em particular, aprenderemos o que é layout automático OK. Então, sem perder tempo, vamos começar nosso vídeo Ok, então primeiro de tudo, vamos discutir sobre sua definição. Ok, então o layout automático é um recurso de design que ajusta automaticamente um elemento dentro de um quadro. Portanto, há uma moldura que consiste em uma grande quantidade de elementos. Portanto, sempre que você diminuir ou aumentar o tamanho do quadro, os elementos que estão dentro desse quadro ajustarão automaticamente sua posição. Ok, por exemplo, por exemplo, vamos pegar um projeto prático. OK. Isso é uma moldura. OK. Este é um quadro, que consiste em muitos elementos. Ok, então isso é uma moldura. Todo esse corpo é uma moldura. E dentro dessa moldura, temos muitos elementos como isso, isso, isso. Então, o quadro consiste em muitos elementos. OK. Portanto, sempre que você aumentar ou diminuir o tamanho do quadro, seu elemento ajustará automaticamente sua posição. Por exemplo, se eu estiver diminuindo a largura do quadro , você pode ver que a imagem está ajustando seu tamanho automaticamente com base na largura do quadro Então, isso é chamado de autoyout. Então, na saída automática, na saída automática, temos uma moldura. Otoeut é um recurso de design que se ajusta e se alinha automaticamente com o elemento dentro Ok, então, por exemplo, vamos pegar um contêiner. Vamos pegar um contêiner. OK. Portanto, esse contêiner é uma moldura. Suponha que esse recipiente seja uma moldura e o recipiente consista em água. Consiste em água. É um contêiner. Ok, então digamos que o recipiente seja sua estrutura e a água seja seu elemento. OK. Então, imagine uma coisa. Este é o seu contêiner. Este é o seu recipiente, que consiste em água. OK. Então, o que acontecerá se eu aumentar a largura do contêiner? O que vai acontecer? Obviamente, se eu aumentar a largura do recipiente, água se ajustará em todo o espaço. Ok, aqui eu mencionei quatro pontos de referência, um, dois, três, quatro, que nada mais são do que um meio para mostrar como o layout automático funciona. OK. Então, se você tiver espaço extra, obviamente, você o ocupará. Está bem? Suponha que você esteja viajando com seus quatro amigos no ônibus. Ok, suponha que você esteja viajando de ônibus com quatro amigos. Então, suponha que, se você tiver um assento limitado, você se ajustará em um local muito pequeno. OK. Mas sempre que você conseguir espaço extra, você ocupará todo o espaço, ok? OK. Então, isso é uma moldura. Se eu aumentar a largura da moldura, elemento se ajustará de acordo com o tamanho da moldura. OK. Vamos dar outro exemplo. Isso é um botão. Isso é um botão. OK. Isso é uma moldura. Isso é uma moldura, e dentro dessa moldura, temos um elemento, certo? Temos uma moldura e, dentro dessa moldura, temos um elemento. Então, agora, o que acontecerá quando eu aumentar ou diminuir o tamanho da moldura, seu elemento se ajustará automaticamente de acordo com o tamanho da moldura. OK. Agora você notará uma coisa: ele está mantendo sua posição. Então, se eu vou aumentar o auge da fama, novamente, o elemento é manter sua posição. Então, isso é chamado de layout automático. Portanto, o layout automático é o melhor recurso do gma, que permite que o elemento ajuste sua posição de acordo com o tamanho do quadro Sempre que o tamanho do quadro mudar, seu elemento mudará automaticamente sua posição. Está bem? Então, sempre que tivermos que criar qualquer aplicativo. Ok, então não criaremos um design separado para celular, design separado para desktop, design separado para tablet. Está bem? Como você sabe disso, temos vários quadros. Se você clicar no quadro, então aqui você verá. Temos uma moldura para tablet, desktop, tablet, desktop e telefone. OK. Então, com a ajuda do Autoayout, o que você pode fazer é criar seu design e otimizá-lo para tamanhos diferentes Você pode otimizar o design do aplicativo de desktop para visualização em tablet para visualização em telefone. OK. Então, essa é uma beleza do Autoeyout Agora vamos aprender como podemos fazer isso. OK. Então, primeiro de tudo, vou explicar sua propriedade. OK. Depois disso, aplicaremos o efeito de layout automático. Mas antes disso, devemos entender sua propriedade. OK. Então, aqui temos duas coisas. Consegue ver essa linha azul, esse retângulo azul? Isso é chamado de quadro. E dentro disso, temos um elemento. OK. Portanto, sempre que eu aumentar ou diminuir o tamanho da moldura, seu elemento também ajustará sua posição e tamanho. OK. Então, vamos aumentar o e você pode ver que ele está mantendo sua posição. Ele está mantendo a posição central. OK. Agora, você tem que olhar para este lado. Aqui você obterá um ícone como este. Consegue ver isso? Esse é um veneno diferente do elemento dentro de uma moldura. OK. Então, aqui você verá aqui uma pequena caixa. Aqui você verá uma pequena caixa. Consegue ver isso? OK. E meu inglês é um pouco ruim porque o inglês não é a língua. OK. Mas você deve se concentrar no meu conhecimento. Está bem? Você não precisa julgar minha habilidade de falar inglês porque o inglês não é. OK. Então, aqui você pode ver que o ponto preto representa o elemento e a caixa vermelha representa o quadro. OK. Tudo bem. Portanto, sempre que você selecionar sua moldura, sempre que selecionar sua moldura, você verá a opção de alinhamento. Então, se eu clicar no canto superior, você notará que sua posição foi alterada. OK. Então, com a ajuda do alinhamento, você pode mudar sua posição OK. Portanto, essa era uma opção de alinhamento. Isso foi um alinhamento. Então, se você ficar no centro, o que acontecerá se você aumentar ou diminuir o tamanho da moldura. Portanto, ele se posicionará no centro de qualquer maneira. OK. Se você chegar ao Pogison esquerdo, então ele fará com que ele chegue ao pogison esquerdo Se você clicar com o botão direito, ele manterá o pogison correto OK. Então, sempre que você criar um botão, você tem que colocá-lo no centro, ok? Da mesma forma, temos uma moldura para o ícone dos alunos. OK. Então, se eu clicar no canto superior esquerdo, os elementos se moverão em direção ao canto superior esquerdo , centro superior, canto superior direito , centro, meio direito, meio esquerdo. OK. Então é assim que você pode atribuir seu centro. OK. Ok, tudo bem. Agora, sempre que você aplicar layout automático em mais de dois elementos , o que acontecerá? Aqui você verá uma lacuna. Aqui você verá uma lacuna. OK. Na verdade, quando eu passar o mouse, desculpe, você verá essa lacuna Consegue ver essa linha roxa? Consegue ver essa linha roxa? Isso é chamado de lacuna. Essa é uma lacuna entre cada elemento. OK. Então, onde você vai encontrá-lo, essa é uma lacuna. Isso é uma lacuna. OK. Então, suponha que você o esteja aumentando a partir daqui, então você também verá a mesma mudança aparecer aqui. OK. Então você tem as duas opções. Ou você pode alterar o valor a partir daqui ou, em vez disso, você pode alterar o valor a partir daqui. As duas coisas são iguais. OK. E, uh, você tem que prestar atenção aqui, porque suponha que eu digite aqui 50. Isso significa que sempre que eu aumentar ou diminuir o tamanho da moldura, ela não mudará sua lacuna. Ok, a lacuna será 50, não importa o que aconteça, estou aumentando ou diminuindo a largura do quadro Ok, Gap não é um OK. Então, se eu vou diminuí-lo demais, então não está funcionando. Mas se eu clicar em Hit e digitar Auto e apertar o botão Enter. Agora, o que vai acontecer? Seu elemento se ajustará de acordo com o tamanho da moldura. Certo? Seu elemento se ajustará de acordo com o tamanho do filme. Tudo bem. Então você tem as duas opções. Então, se você vai colocar o valor da lacuna entre cada elemento , você tem as duas opções. Ou você pode inserir qualquer valor. Portanto, se você inserir qualquer valor como 50 , ele fará uma distância consistente de 50, não importa o quanto você esteja aumentando ou diminuindo o tamanho do quadro Ele manterá a distância de 50. OK. E você tem outra opção, que é definir a lacuna para o automóvel. OK. Portanto, quando você definir sua lacuna para o automático , ele ajustará automaticamente a distância entre outros elementos. OK. Então, vamos repetir a mesma coisa. Então, primeiro de tudo, o que você precisa fazer é selecionar um quadro. E depois disso, se você passar o mouse entre essa lacuna, verá essas linhas de hachura roxas, que representam a lacuna entre cada elemento Essa é uma lacuna entre cada elemento. Agora você tem as duas opções. Você pode inserir um valor fixo ou configurá-lo como automático. Atualmente, está em modo automático. Atualmente, nossa lacuna é definida automaticamente, o que significa que se eu aumentar a largura da minha moldura , a lacuna também aumentará. Se eu diminuir a largura da moldura , a lacuna também diminuirá. Se eu inserir qualquer valor fixo, como 40. Em seguida, ele solicitará que você os alinhe corretamente. Estou alinhando-o no centro. Agora, se eu diminuir ou aumentar a largura, o AP é consistente. Aqui, o AP é consistente, 40, 40, 40. Então você tem as duas opções. Você pode colocar qualquer valor fixo ou configurá-lo como automático. Então, eu expliquei esses dois cenários. 11. Autolayout no Figma ( parte 2 ): Então, pessoal, isso é um quadro, e aqui atribuímos a lacuna ao automático, o que significa que sempre que aumentarmos ou diminuirmos o tamanho do quadro, o Gap se ajustará automaticamente. Ok, de acordo com o tamanho da moldura. Portanto, se eu aumentar o tamanho do quadro , a lacuna também aumentará. Se eu diminuir o tamanho do quadro, lacuna também diminuirá. OK. Mas deveria haver um limite, certo? Por exemplo, se eu aumentar demais a largura da moldura , você notará uma coisa todos os elementos foram mesclados e ela está feia Isso estragará todo o seu design. Ok, então você tem que se inscrever. Você precisa aplicar a largura mínima e a largura máxima. Você precisa restringir a dimensão do seu design. Você precisa restringir a dimensão do design como máxima e mínima. OK. Basicamente, você está limitando sua flexibilidade de design. Está bem? Esse é o limite máximo e esse é o limite mínimo. Eu acho que você está entendendo o que eu quero dizer. Ok, então se eu vou diminuir a largura da moldura. OK. Agora, aqui, eu tenho que aplicar o limite mínimo de largura. Então o que vou fazer, atualmente, nossa largura é 1508 Então, vou copiar esse limite. OK. E como temos que aplicar o limite de largura, é por isso que vou continuar com a largura. Suponha que eu tenha que aplicar o limite de altura, então vou continuar com a altura. Aqui temos que aplicar o limite de largura. É por isso que vou continuar com a largura, vamos descer. E aqui temos um valor de adição de largura mínima, adição de valor de largura mínima aqui. OK. Então, aqui você pode ver que eu adicionei a largura mínima da moldura. Então, a partir de agora, o que vai acontecer. Sempre que eu diminuir a largura da moldura, ela diminuirá 1508 OK. Depois disso, não consigo diminuir a largura da moldura porque restringi, ok? E a mesma coisa que você deve solicitar no máximo. Ok, vou diminuir, desculpe, se eu aumentar a largura do quadro, então não há limite, posso expandi-lo de acordo com minha necessidade. Mas é necessário que eu atribua limite máximo a. Está bem? Se eu atribuí a largura mínima, também devo atribuir o limite máximo. OK. Então, suponha que esse seja meu limite máximo. Então, o que farei, nossa largura atual é 1961. Vou copiar esse menu suspenso. E aqui você verá adicionar largura máxima. Ok, então coloque o valor. OK. Agora, o que vai acontecer? Ele aumentará ou diminuirá dentro de um limite máximo e mínimo. Você é capaz de entender o que estou tentando entender? Eu atribuí o limite máximo e o limite mínimo, que não devem ser ultrapassados. Ok, eu atribuí um limite mínimo. Eu atribuí o limite máximo, ele não deve ser ultrapassado. OK. Tudo bem. Completo. OK. Acho que você entendeu, certo? Então, vamos diminuir a diferença. OK. Vamos colocá-lo no centro. Então, eu atribuí a lacuna 55. Já que reservei uma lacuna de 1 minuto, tudo Como eu aloquei uma lacuna de 55, que significa que essa lacuna é Eu atribuí que, não importa o que aconteça, estou aumentando ou diminuindo o quadro Ok, ele continuará mantendo uma lacuna de 55. OK. A partir daqui, você também pode mudar. Ok, tudo bem. Agora, aqui você verá a opção de preenchimento. Você pode ver isso. Essa linha azul é preenchida. preenchimento é uma distância entre a moldura e o elemento Por exemplo, C. Isso é chamado de preenchimento. Isso é chamado de preenchimento. Isso é preenchimento horizontal. Da mesma forma, teríamos preenchimento vertical. Ok, então isso é um preenchimento horizontal. Então esse é o seu elemento. E esta é a sua moldura. Portanto, o preenchimento é uma distância entre o preenchimento é uma distância entre o elemento e a moldura. OK. Da mesma forma, você pode atribuir um preenchimento dessa forma. OK. Agora vamos explorar outra coisa. Aqui temos um layout diferente, como layout horizontal, layout vertical, para que você possa alterar seu layout desta forma. Está bem? Tudo bem. OK. Agora, temos outra moldura aqui. Temos outra moldura. Como eu já disse, o quadro consiste em elementos. OK. O quadro consiste em um elemento. Nesta linha azul, eu adicionei um efeito de traçado para que você possa ver a moldura. Essa linha azul representa a moldura. Essa linha azul representa o quadro e, dentro desse quadro, temos dois elementos. O primeiro elemento é a imagem, segundo elemento é o texto. Agora, vamos entender as propriedades do elemento. Já aprendemos a propriedade da moldura. Agora vamos aprender a propriedade do elemento. Então, primeiro de tudo, vamos selecionar a imagem. Vamos selecionar a imagem. Está bem? Então, na largura do sexo, você verá o recipiente do comprimido Então, o que isso significa? O recipiente do comprimido age como uma água. Recipiente de comprimidos, age como água. Este é o melhor exemplo de recipiente de enchimento. Esta é uma moldura que consiste em água. Esta é uma moldura que consiste em água. Então, se eu aumentar a largura da moldura, água se espalhará por toda a moldura. OK. Se você der espaço extra, ele ocupará. OK. Aqui você pode ver. Eu aumento a largura da moldura. Portanto, seus elementos estão se ajustando de acordo com o tamanho. Então, a mesma coisa se aplica aqui. Se eu clicar nesta imagem e entrar na seção de largura e na largura interna, se eu clicar no contêiner de campo , o que acontecerá? E veja, você deve se lembrar de uma coisa: o recipiente Peel é uma propriedade de um elemento. Ok, e o elemento se comportará de acordo com o quadro. Você tem que se lembrar dessa coisa. O recipiente do poço é uma propriedade do elemento. Essa imagem, essa imagem é um elemento. Aqui, aplicamos o recipiente para comprimidos. Sinta-se um recipiente. O recipiente de solda age como água. OK. Portanto, o contêiner de campo é uma propriedade do elemento. No lugar do elemento, pode ser qualquer coisa. Pode ser imagem ou texto. Qualquer coisa que esteja dentro de uma moldura chamada elemento. Portanto, você verá o contêiner de campo no elemento, não no quadro. Ok, então o contêiner de rodas é uma propriedade do elemento, certo? E o elemento se comportará de acordo com o quadro. OK. Então, eu apliquei o efeito de contêiner de campo nesta imagem. Eu apliquei o efeito de contêiner de campo nesta imagem. OK. Então, quando ele vai se comportar? Se eu fizer alguma alteração com a moldura. OK. Portanto, se eu diminuir ou aumentar o tamanho do quadro , seu elemento ajustará automaticamente seu tamanho e posição. OK. Essa é a beleza de um recipiente de enchimento. Então, vamos repetir a mesma coisa. OK. Vamos repetir a mesma coisa. Você tem que assistir a essa palestra em particular mais de três vezes, três a cinco vezes, porque isso é um pouco confuso Então, essa linha azul representa a moldura. OK. E eu adicionei um efeito de traçado azul na moldura para mostrar a você. Está bem? Caso contrário, o quadro não ficará assim. OK. Dentro dessa moldura, temos dois elementos. O primeiro elemento é a imagem e o segundo elemento é o texto. OK. Então, primeiro de tudo, estamos falando sobre essa imagem. OK. Então, quando clicamos nessa imagem, depois na seção de largura, aplicamos o efeito de contêiner de campo. OK. Portanto, o contêiner de campo é uma propriedade de um elemento, que se ajustará de acordo com o tamanho do quadro. Se você diminuir o tamanho do quadro, tamanho do elemento também diminuirá. Se você aumentar o tamanho do quadro, tamanho do elemento também aumentará. O contêiner de campo é uma propriedade de um elemento, que depende totalmente da estrutura. Então, o quadro aumentará, o elemento aumentará. Se o tamanho do quadro diminuir, o tamanho do elemento diminuirá. Vamos demonstrar isso se eu vou diminuir o quadro. Então você pode ver que seu tamanho está mudando agora. Está bem? Tudo bem. A mesma coisa que você também pode aplicar em altura. Vamos clicar na imagem. E se eu aplicar o contêiner de campo em altura, o que acontecerá? Se eu aumentar a altura, imagem será ajustada automaticamente de acordo com o espaço livre. Se eu reduzir a altura, você verá que a altura da imagem também foi reduzida. Se eu aumentar a altura da moldura, você verá que a altura dos elementos também está aumentando de acordo com a altura da moldura. OK. Então, aqui você tem uma opção de contêiner de testamento. Então, se você clicar na imagem e clicar aqui, aqui você tem uma largura fixa. Então, aqui você tem duas opções diferentes, contêiner de campo e largura fixa. Suponha que tenhamos explorado o contêiner de campo, certo? Então, vamos clicar na largura fixa. E vamos ajustar a largura. OK. Portanto, largura fixa significa, obviamente, que não mudará. Isso não vai mudar. Se eu diminuir ou aumentar o tamanho da moldura, a largura não muda, certo? A largura não está mudando. Se eu aumentar a altura, a imagem estará se ajustando sozinha porque se você clicar na imagem e continuar com a altura Sexton, atualmente ela será selecionada no contêiner de campo, selecionada no contêiner de campo que significa que ela ajustará sua altura de acordo com a altura da moldura Então, se você fixar sua altura assim, agora, não importa o quanto você esteja aumentando ou diminuindo, sua altura não está mudando Então você tem duas opções. Você tem duas opções. Estamos falando sobre elemento. Estamos falando sobre o tamanho do elemento. OK. Então, quando você clicar em qualquer elemento, não importa o que esteja clicando na imagem, ícone, texto. OK. Sempre que você clicar em qualquer elemento, você tem duas opções em largura e altura, largura e altura. Você verá essa opção em largura e altura. OK. Qual opção você verá? Contêiner de testamento. Sinta o recipiente e conserte. Então, quando você atribuir propriedade do contêiner de campo , o que acontecerá? Se você aumentar o tamanho do quadro, tamanho do elemento também aumentará. Se você diminuir o tamanho do quadro, tamanho do elemento também diminuirá. Mas se você selecionar largura ou altura fixa, ela não alterará sua altura e largura de acordo com a moldura. OK. Acho que você entendeu. OK. Então, eu abordei as coisas básicas sobre o layout automático. Basicamente, expliquei a propriedade do layout automático. OK. E também, temos uma coisa que eu deveria te ensinar, que é 1 minuto. Ok, então se eu clicar no texto, se eu clicar no texto, estou selecionando outro elemento. Então, aqui temos uma opção de contêiner de campo, e abraçar conteúdo é uma nova opção Então, eu já expliquei o contêiner de campo. Eu já expliquei a largura fixa. Aqui temos um conteúdo incrível. Então, o que vai acontecer? Antes de tudo, vamos ajustar a largura. OK. Então, eu atribuí o recipiente do abraço. Portanto, sempre que você atribuir um contêiner HGA, ele bloqueará sua posição Agora, se você aumentar, se aumentar ou diminuir a largura do seu quadro, ele não se moverá. Basicamente, dirá não vou sair daqui. Ok, vou bloquear sua posição. Então, isso é chamado de conteúdo de abraço. OK. Isso é chamado de conteúdo Hug, que pode ser aplicado ao texto OK. Ok, tudo bem. Vamos selecionar o texto. Vamos selecionar o conteúdo do abraço. Vamos diminuir a largura. OK. Agora, se eu vou diminuir ou aumentar a largura. A posição do texto foi registrada. Ok, não está mudando de acordo com Okay. Então, eu cobri tudo. Em primeiro lugar, abordei tudo relacionado à moldura. O quadro consiste em muitos elementos. Ok, o quadro consiste em muitos elementos. E sempre que precisar alterar algo relacionado ao alinhamento, você precisa clicar no quadro OK. Depois disso, expliquei a você todas as propriedades dos elementos. Portanto, nos elementos, temos um contêiner de campo de correção de propriedades. E ug. OK. Portanto, se você clicar em Corrigir , não importa o que você altere, sua moldura, largura ou altura, ela será corrigida. Se você usar o contêiner de campo , ele ajustará automaticamente seu tamanho de acordo com o tamanho do quadro. Se você clicar no conteúdo do Hug, elemento bloqueará sua posição e não se moverá, não importa o quanto você esteja aumentando ou diminuindo o tamanho do quadro OK. Então, eu cobri tudo. E na próxima palestra, vou te ensinar como aplicar o layout automático Está bem? Eu abordei a propriedade básica do layout automático e, no próximo vídeo, ensinarei como aplicar o layout automático em seu design Está bem? Se você recebeu alguma ajuda com este vídeo , pode me dar uma boa avaliação positiva e comentar para que eu possa me motivar 12. Como criar um design de site responsivo de UI/UX no Figma?: Olá, pessoal. Então, bem-vindos a todos vocês na minha série master completa sobre design Figma UIUX Portanto, nesta palestra em particular, aprenderemos como podemos criar um design responsivo completo com a ajuda do Figma enquanto usamos o AutoEoutFeature Figma enquanto OK. Então, sem perder tempo, vamos começar nosso vídeo Em primeiro lugar, vamos replicar este site, ok? Estamos usando esta página como referência e tentaremos replicá-la Ok, então primeiro de tudo, vamos pegar um DextoFrame onde replicaremos nosso OK. Então, primeiro de tudo, vamos criar uma guia. OK. Vamos criar uma guia. Então, primeiro, vamos pegar uma ferramenta de texto e digitar home. Depois disso, com a ajuda do botão Control plus D, você pode duplicar isso e fazer cursos, entrar em contato com a comunidade e sobre nós Agora, você precisa selecionar todos eles e alterar sua propriedade a partir daqui. Você pode alinhá-lo corretamente, ok? Alinhe-os corretamente. E com a ajuda dessas três linhas, o que você pode fazer é fornecer uma lacuna igual entre cada texto. Portanto, certifique-se de clicar nele. Agora, finalmente, temos uma diferença igual. Finalmente, temos uma lacuna igual. Agora vamos clicar nisso. E aqui temos a opção de autolayout. Então clique nisso. Com a ajuda do layout automático, você pode torná-lo responsivo Está bem? Agora, no lado direito, você obterá sua propriedade. Está bem? E isso é chamado de quadro. Portanto, este é um quadro, e você pode renomeá-lo como uma guia Está bem? Para facilitar a navegação, você pode renomeá-lo. No lado esquerdo, você pode ver que temos uma nova camada chamada tab. OK. Agora, no lado direito da tela, temos uma propriedade. Então, com a ajuda do alinhamento, o que você pode fazer é alinhar seu elemento em relação à sua estrutura Assim, você pode alinhá-los adequadamente no centro. OK. Agora vamos aumentar a altura Ok. Então aqui você tem um alinhamento. Então, se você clicar no canto superior esquerdo, ele se moverá em direção ao canto superior esquerdo. Se você clicar no canto superior direito, ele se moverá em direção ao canto superior direito. Então é assim que você pode alinhá-los. Se você clicar no canto superior, inferior, desculpe, canto inferior direito, ele se moverá em direção ao canto inferior direito. Então, se você vai criar uma guia , ela deve estar no centro, ok? Agora, aqui temos um preenchimento horizontal e um preenchimento vertical, então essa é uma lacuna entre o quadro e o elemento de texto Está bem? Portanto, você precisa atribuí-los corretamente. Essa é uma lacuna entre a moldura e o elemento. Ok, agora vamos diminuir o tamanho, ok? Agora vamos falar sobre a lacuna. A partir daqui, você pode manipular a configuração da lacuna. Você pode inserir um valor fixo ou automático. Então, vamos selecionar automático. Se você selecionar automático em vez de valor fixo , o que acontecerá? A lacuna variará de acordo com o tamanho da moldura. Se você aumentar o tamanho do quadro, lacuna também aumentará. Se você diminuir o tamanho do quadro , a lacuna também diminuirá. OK. Da mesma forma, se você inserir qualquer valor fixo em vez de colocá-lo automaticamente, se inserir qualquer valor fixo, ele manterá a mesma lacuna entre cada texto. Está bem? Assim, você pode usar as duas coisas de acordo com sua necessidade. Então, suponha que você possa digitar 50, 40, então ele manterá a mesma lacuna. Agora, para preencher a cor, você precisa continuar. Antes de tudo, você precisa selecionar sua moldura e continuar sentindo. E a partir daqui, você pode escolher sua cor primária. Então, vou usar a cor azul como cor primária. Agora vamos mudar o texto. Portanto, para uma seleção específica, você precisa usar o botão Control e, para a seleção múltipla, você precisa usar o botão Sift, o que significa que você precisa usar os dois botões juntos Ok, pressione o controle e clique do mouse. Com a ajuda dessa combinação, você pode selecionar todo o texto. Agora selecione elementos inteiros e torne-os componentes. Então, isso é chamado de componente pai. E sempre que o usarmos, ele chamará componentes secundários. Então, vou para a seção de ativos, e aqui vou obter minha instância principal, que significa componente filho. Agora vou ajustar seu tamanho, ok. Vamos ajustá-lo aqui. Este é meu componente principal. Este é meu componente pai e esse é meu componente filho. Então, o que quer que eu faça no componente pai , seu reflexo aparecerá no componente filho. Se eu mudar a cor dos pais, isso também se refletirá na criança. Agora vamos criar o logotipo do site. Então, vamos usar o nome I school Hub. Você pode alterar a propriedade do texto. Você pode aumentar o tamanho. Você pode alterar a espessura de cada texto. Você pode alterar a cor do texto. Então, vamos selecionar a escola e aplicar a cor do nosso tema. Então, para aplicar isso, você precisa usar quatro pontos e pode aplicar assim. Agora, vou baixar um logotipo, que anexarei ao meu logotipo. Basicamente, eu tenho que anexar esse logotipo com o Ikolhub. Você pode criar seu próprio logotipo assim, então vamos mesclar os dois elementos Vamos alinhá-los adequadamente. Agora, vamos alinhá-los corretamente. Agora selecione todo o elemento e aplique o layout automático. Portanto, com a ajuda do autoayout, você pode alterar facilmente a posição dos seus dois elementos Assim, você pode mudar sua posição. Agora vamos renomear esse logotipo. E se você quiser criar um componente, também poderá criar um componente do seu logotipo para poder usá-lo sempre que necessário. Então, vamos colocar nosso logotipo. Agora é hora de criar um banner do nosso site. Então, estou criando um banner com o retângulo Alpha. Agora, vamos fazer o upload da imagem daqui. Vamos selecionar qualquer imagem. Eu acho que eu deveria usar essa imagem. OK. Está bonito. Agora, vamos aumentar a altura da nossa moldura para que as pessoas possam rolá-la. Agora temos que criar outros elementos também. Como se tivéssemos que criar esse retângulo de imagem. Eu tenho que criar este, inscrever para o outono e a primavera. OK. Então, vamos tentar replicar esse site Então, eu criei muitos retângulos, retângulos grandes, retângulos pequenos e retângulos superpequenos, e estou mesclando esses dois elementos como um grupo para que OK. Vamos ajustar sua posição, alinhá-las adequadamente e temos que escrever um texto como se inscrever para o outono e a primavera Então, vou digitar algo diferente. Vamos digitar exploradores. Você pode alterar a configuração do texto Você pode diminuir ou aumentar sua espessura. Vamos alinhá-los e ajustar sua posição. Mas antes disso, devemos aplicar o layout automático. Agora, vamos ajustar sua posição. Agora, selecionaremos os dois elementos e os criaremos como um grupo. Está bem? Agora, aqui podemos fazer o upload da imagem , mas antes disso, podemos duplicá-la porque precisamos desse elemento três vezes Agora, o que vou fazer é aplicar efeito de layout automático entre esses três elementos, mas antes disso, vamos alinhá-los adequadamente e criar uma lacuna consistente Está bem? E você pode virar a esquina. Como selecionamos todos os três componentes, é por isso que, se mudarmos o raio do canto, ele mudará ao mesmo tempo Agora selecione todos os elementos. E, novamente, aplicaremos o layout automático. Agora, se você digitar aqui qualquer valor fixo , ele será corrigido. Agora vamos criar um cabeçalho. Comece sua jornada de UX conosco. E agora vamos organizá-lo adequadamente, selecionarei todos os elementos e aplicarei efeito autoeu entre todos esses elementos Você precisa garantir que o layout automático seja aplicado corretamente Agora você pode manipular sua distância. Tudo bem. Eu criei esse quadro. Está bem? Agora vamos arrastar a imagem e colocá-la assim. Novamente, aplicaremos o layout automático. Basicamente, o que estou fazendo aqui aplicar o layout automático em um pequeno elemento. Depois disso, vamos mesclá-lo com outro elemento, ok? Ok, agora vamos arrastá-lo em nosso quadro. Agora temos que fazer o upload da imagem. Vou ver a imagem e o vídeo dentro da ferramenta Retângulo e selecionar várias imagens com o botão de controle Com a ajuda do botão de controle, você pode selecionar várias imagens e soltar sua imagem com a ajuda do botão esquerdo do mouse. É super fácil. Agora vamos digitar connect com nossos alunos atuais. Vamos ajustá-lo e criar um parágrafo. Aqui estou pulando este vídeo porque esse é um processo repetitivo. Está bem? Se eu não pular alguma área, esse vídeo seria muito longo Agora, aplique o layout automático. Então, basicamente, você precisa dividir seu site em várias partes e, depois disso, mesclar todas as partes no grande layout automático Então, basicamente, você precisa dividir seu site em pequenos grupos. Você precisa aplicar o autolyou nesses pequenos grupos e, depois disso, mesclar todos os pequenos grupos com a ajuda do OK. Agora, vamos selecionar conectar com nosso aluno atual e, na seção de largura, temos que selecionar um contêiner de campo. Então, com a ajuda do contêiner de campo, o que você pode fazer, ele funcionará como uma água. Então, temos uma moldura, e dentro dessa moldura temos uma água. Portanto, se você aumentar a largura da moldura , o que acontecerá A largura da água também aumentará em relação à largura do contêiner. Coisas semelhantes também funcionam com nosso site. Portanto, conectar-se com nossos alunos é um elemento de texto e atualmente está dentro do quadro. Então, selecionei a propriedade do contêiner de campo no texto. Ok, então funcionará como água. Se eu diminuir a largura da moldura , ela também diminuirá. Da mesma forma, você precisa selecionar seu parágrafo e, novamente, aplicar o contêiner de campo. Agora, ele ajustará sua posição de acordo com o tamanho do quadro. Se você diminuir o tamanho do quadro , ele também diminuirá. E a partir daqui, você pode ajustar a lacuna. Você pode alterar o valor a partir daqui. OK. Agora é hora de criar um sexon diferente em nosso site, como sexon de perfil OK. Então, vamos tentar replicar isso Vamos criar um retângulo, um retângulo maior. Faça um raio de canto. Agora selecione uma cor branca. Crie uma pequena caixa quadrada para o perfil, crie um canto suave e alinhe-os corretamente. Agora vamos criar outro retângulo aqui. E usaremos a cor primária para preencher esse retângulo. Então, a cor azul era nossa cor primária. Agora vou ajustar isso assim. Está bem? Portanto, selecione uma caixa quadrada e coloque-a na frente da nossa moldura. Selecione, traga para a frente. Então, se você clicar em trazer para frente, então seria a camada superior. Agora vamos digitar um nome de perfil de texto. Então, estou digitando meu nome Ankit. Agora, baixei um ícone no perfil Para o ícone, você também pode usar o plugin. Você pode ajustá-lo. Agora vou aplicar o efeito de layout automático entre essas duas coisas, o Ankit e aquele ícone, aplicar Então, basicamente, você precisa aplicar o layout automático em um elemento pequeno e, depois disso, mesclá-lo com Da mesma forma, vamos criar um texto de designer de UIUX. Vou alinhá-los adequadamente. Da mesma forma, vamos digitar on-line e alinhá-los corretamente. Agora podemos aplicar efeito de layout automático entre esses elementos. Então, selecione todos os elementos e aplique o autoyout. Selecione todos os elementos e aplique o layout automático. Então, eu deletei um texto on-line porque estava feio Agora estou criando o botão chamado chapéu com o Ankit. Então, estou baixando a imagem PNG do bate-papo. Você também pode usar o plugin. Vamos diminuir o tamanho. Selecione o texto e o ícone, alinhe-os corretamente e aplique o layout automático Agora aumente o tamanho do quadro e você poderá convertê-los no botão. Você não precisa de um retângulo aqui. Você pode converter sua moldura em um botão assim. Se você sentir a cor em sua moldura , ela será convertida no botão. Agora vamos mudar a cor do texto. Ajuste-o corretamente. Agora, selecionarei o elemento inteiro e aplicarei o Autoout, mas está feio Então, o que vou fazer é remover o Autoot e depois mesclar esses dois elementos como um grupo Agora vou aplicar o Autoout. OK. Então, em algum momento, se você estiver tendo algum problema, tente converter quaisquer dois elementos em um grupo e, depois disso, você pode aplicar a saída automática OK. Então, vamos replicá-los. Portanto, sempre que você estiver enfrentando alguma dificuldade ao criar o Autoeout, precisará agrupar de forma inteligente quaisquer dois elementos e, depois disso, aplicar aplicar Agora vamos fazer o upload de todas as imagens. Com a ajuda do botão de controle, você pode selecionar várias imagens e soltá-las facilmente desta forma. Agora selecione sua moldura e aplique o Autoaout. Mas você pode ver que ele não está respondendo de acordo com nossa necessidade Então, o que faremos é arrastar todos os nossos componentes dessa forma. Como está respondendo de acordo com nossa necessidade, é por isso que não precisamos mais de uma moldura branca Podemos converter essa moldura em uma moldura branca. Basta selecionar sua moldura e você poderá sentir sua cor assim. Você pode sentir a cor branca. Você não precisa de uma moldura branca. Está bem? Vamos ajustar o texto. Agora vamos arrastar nosso logotipo para dentro da nova moldura. Vamos ajustá-lo. Então, pessoal, dá para ver que está funcionando bem. Então, finalmente, criamos uma página responsiva. Ok, pessoal, se vocês gostaram dessa palestra , não se esqueçam de me dar uma boa avaliação positiva e comentários para que eu possa me motivar . Ok, tchau tchau.