Masterclass em Figma: projete e faça um protótipo da sua primeira ideia de aplicativo para dispositivos móveis

1. Introdução à aula de mestre ao Fma: Bem-vindo ao meu curso. Terra mais dura figo marvit. Em apenas 14 dias nas escolas, você vai aprender todas as diferentes ferramentas e técnicas e dicas sobre como biqueira arame do que projetar e , em seguida, protótipo sua idéia APP a partir do zero. Eu vou compartilhar com vocês todos os casos Sharper comumente usados para que você possa acelerar seu fluxo de trabalho dentro da invenção. Da mesma forma, vamos compartilhar com você todas as diferentes ferramentas de prototipagem e dicas e técnicas sobre como usar diferentes transições afetam diferentes emissões para que você possa converter seus projetos estáticos e projetos de mandrilamento em algo Incrível. Nós vamos projetar juntos receita de alimentos chamaram germes. Vamos projetar sua tela de logon X filtros de pesquisa. São diferentes animações de menu lá onde o menu vai passar de um esquema para outro e como você é inteligente. E ele fez como usar efeitos excessivos. Como usar todo esse tipo de coisa dentro de Sigma. Há muitas tarefas ao longo da escola, então eu estou indo para o pé. Fique de olho no seu progresso, e eu vou lhe dar feedback oportuno sobre como você pode melhorar seu você acentuar habilidades de design . Eu acredito que qualquer um pode aprender qualquer ferramenta de design dentro de apenas duas semanas, isso é suficiente. Então vamos começar e mergulhar na invenção agora. 2. Faça o download e instale o Figma no Win e Mac: neste vídeo, nós estamos indo para ir cabeça para figment dot com, e nós estamos indo para baixar figura MMA, e nós vamos ver o que são diferentes características e como podemos usá-los. Qual é o modelo de preços da Fig.? Mãe, o que é a versão gratuita dá e qual é a versão paga? Diferenças. Então vamos começar. - Não. Primeiro você está indo para figura ponto com e este é o site deles, e você pode ver aqui eles dizem luta Igman de graça. Então você tem que criar sua conta aqui, então você vai se inscrever e criar sua conta. Este é o primeiro passo. Agora o segundo passo é, uma vez que você tenha criado sua conta, você vai para downloads sigma dot com barra downloads. Como você pode ir do recurso de função de recesso é e ir para downloads e aqui está você vai baixar aplicativo de desktop. Para, se você estiver em um sistema operacional Mac OS ou Mac, você vai baixar este aplicativo de desktop e, se você estiver no Windows, você vai baixar o aplicativo de área de trabalho para Windows. Agora, se você tentar usar o seu MMA figo em seu navegador do que você vai usar este mapa. busca, instalador do Windows. A maioria das pessoas que eu acho que 99,9% eles vão baixar estes fazem. Então não precisamos nos preocupar com isso. Os instaladores do Fort apenas baixam o aplicativo de desktop e instalá-lo em seu PC ou Mac. Agora aqui, eu vou mostrar a vocês qual é o modelo de preços. E quais são os recursos que estão em diferentes modelos de preços para este modelo de figo? Primeiro é gratuito para que você possa criar depois de dois editores. Quer dizer que duas pessoas podem editar um único projeto? Você pode ter uma equipe fora para designers e três projetos, e você pode criar três projetos. Máximo fora de três projetos, histórico de versões de 30 dias. Então este reboque isso realmente salva suas de versõesde design. Portanto, quaisquer que sejam as alterações que você está fazendo em um arquivo de design, eles serão salvos por apenas 30 dias e dólares ilimitados estratificados. Você pode usar nosso upload, qualquer arquivo ou qualquer tamanho fora do arquivo. Isso não é um problema. Visualizadores gratuitos ilimitados para que você possa compartilhar seus projetos com pessoas ilimitadas para que eles possam visualizar seu projeto. Agora você pode ver aqui nós temos profissional e organização. Agora, a principal coisa que estamos procurando aqui é o histórico ilimitado de versões. Esta é a primeira coisa, e segundo ele é convidar apenas projetos privados. Então, por exemplo, se eles são empresas ou empresa é que eles querem trabalhar em apenas projetos privados, eles podem criar convite só eles podem enviar, convidar apenas convites privados, dedos diferentes membros, bibliotecas de equipe compartilháveis Para que você possa projetar suas bibliotecas de design e compartilhá-las com sua equipe. Essa é outra característica da profissão. Então, Então, essas são as diferenças. Então, se você é uma organização muito grande, você pode optar por esta. Agora, quais são as diferentes características? Por que estamos pensando que o estigma é a próxima grande coisa? - Não. A razão é que a primeira coisa é que é uma plataforma cruzada. Você pode usar esse design mesmo em seu navegador. Então esta é a primeira coisa Sempre que você olha para uma ferramenta de design, você tem que ver se ela pode ser usada em qualquer lugar em qualquer plataforma. Isso é uma vantagem. ponto em segundo lugar é que há muitas ferramentas fora que eu posso pensar que eles são ferramentas de próxima geração para designers. Há um monte de coisas que você pode fazer um monte de recursos, mas neste roubou totalmente horas, projetos responsivos. Então temos plugins. Você pode ver que você pode baixar diferentes plugins e estender a funcionalidade fora Sigma você pode ver aqui. Aqui não temos splash, então você pode baixar qualquer imagem e sua imagem stock que é grátis. Da mesma forma, temos isso, Eu quantificar, e você pode usar quaisquer ícones diferentes, como ícone de design de material ícones Scougall. Quatro ícones incríveis que são muito populares. Então estas são as características de Sigma, e é assim que você vai passar por aqui. Cadastre-se e abaixe carregar figo, aplicativo de desktop MMA e vamos começar na próxima lição. Então vamos passar para a próxima lição. 3. Nova interface Figma 2022: Neste vídeo, vamos ver a Figma, nova interface porque a antiga era há dois anos. Então agora este é o novo. Então, vamos mergulhar na interface sigmas. Ok, então uma vez que você fizer login na Figma, você verá que esta será a interface, embora você não veja que eles estão no topo, esses são os arquivos que abri. Então, estes não vão estar lá. Se você estiver usando isso pela primeira vez. À direita, haverá um perfil. Então, se você clicar aqui, você pode ver que este é o meu e-mail. Além disso, você pode acessar o perfil da comunidade I configurações de plug-in de perfil interno. Portanto, essas são as configurações. Então você pode ver aqui, você pode alterar seu nome, e-mail, senha, outras coisas daqui. E você também pode acessar o perfil da comunidade a partir daqui. Então esse é o meu identificador da comunidade como destinatário e você pode alterá-lo se quiser. Esses são os plugins que você instalou. Você pode clicar aqui e desinstalar ou mostrar detalhes daqui. Além disso, você pode usar plug-ins daqui. Então, o que quer que você tenha instalado, o que vai melhorar a capacidade da Figma, isso vai ser aqui. Então você pode ver que eu tenho todos esses plugins. Então, esses são muitos plugins de qualquer forma. Então, essa será sua conta. O perfil da comunidade é necessário porque você vai para a comunidade para baixar muitas coisas diferentes. Então você pode ver agora eu mudei para meus perfis de comunidade. Então aqui você pode ver isso diz comunidade. Então, se você quiser voltar ao seu perfil principal, você tem que clicar aqui, mudar para a essência ou qualquer que seja o seu nome em sua Figma como perfil, você voltará à interface. Ok, então vamos começar com a visualização recente. Visualizado recentemente. Então, sempre que você começar, ele estará aqui. Então, temos três botões. Anteriormente, os botões, mas não muito bem projetados. Eu diria. Isso é muito fácil. Novo arquivo de design. Clique aqui. Novo arquivo fig gem, que é para diagramas de quadro branco e colaborando com diferentes esboços ou ideias. Esta é outra ferramenta da Figma. Então esse é o arquivo deles. Se você quiser importar o arquivo do figma sketch ou de qualquer imagem, você pode clicar aqui e clicar no arquivo figma. Vamos ver se eu tenho algo em downloads. Ok, então você pode ver que eu tenho esse arquivo dot fig também são arquivos de esboço escuro, então você pode importar ou ambos. Basta clicar no arquivo figo e abri-lo assim. E levará algum tempo para importar porque é uma ferramenta online. Então, ele vai mostrar que você pode ver feito. E aqui eu tenho esse arquivo aqui. Vou clicar duas vezes nele. Para abrir esse arquivo. Você pode ver que é basicamente na maquete Clay do alto para a academia. De qualquer forma. Então, vamos voltar à nossa interface principal, que será essa casa. E nós temos, você já sabe que este é um novo arquivo. Este é o arquivo gem config. Então, vamos criar principalmente esses novos arquivos de design ou talvez importar alguns arquivos. Ok, então aqui em baixo temos todos os arquivos recentes em que trabalhei ou abri. Então você pode ver que existem alguns sistemas de design, formas vetoriais desenhadas à mão, formas, muitas coisas. E se você votar para remover qualquer arquivo daqui, você pode simplesmente gostar, vamos clicar aqui e clicar com o botão direito do mouse e remover do recente. Você pode selecionar vários arquivos. Por exemplo, vamos, vamos, vamos selecionar vários arquivos como eu tenho este, então estou pressionando e mantendo pressionado a tecla Shift, este e este. Então eu selecionei todos os três, removo três itens dos recentes. Então, vou removê-lo assim porque essas são muitas das minhas tarefas de alunos. Então eles continuam enviando. Ok, então nós cobrimos esta área. Filtrar por todos os arquivos, arquivos de design, arquivos fig Gem são protótipos. Normalmente temos todos os arquivos. Então temos este visualizador alternar lista de arquivos com ícones pequenos se você gostou disso. Porque ele vai mostrar há quanto tempo você criou ou abre este arquivo. Você pode ver alguns dos arquivos que abri há dois meses. E esta será a visualização da sua grade. Portanto, essas são duas visualizações para seus arquivos recentes. Também temos modelos de fig jam aqui ou diagrama de arquitetura de informações , todos esses diagramas, se você quiser usá-los, você pode clicar neste e começar a construir o que quer que você quero. Ok, então temos esses perfis da comunidade. Então, se você for para a comunidade, você pode baixar ícones, wireframes, sistemas de design, todas as coisas gratuitas, plugins tudo. Portanto, esta é uma característica muito boa do novo recurso das bruxas Figma. Você pode procurar qualquer plugins, talvez. Digamos que tamanho, digamos tamanho, e veja se temos evento C, tamanhos de ícones, tamanhos de corridas. Portanto, esses são plugins diferentes. Então, aqui temos diferentes criadores que estão realmente criando esses plugins. Estes são plugins e também se você for para Arquivos, você pode ver que temos arquivos diferentes que têm esta tela, por exemplo, você pode ver os tamanhos de tela do iOS 14. Então, a tabela periódica do iPhone. Portanto, esses são tamanhos de tela diferentes. Assim, você pode baixar arquivos diferentes se quiser baixar. Por exemplo, se eu quiser baixar esse arquivo, esse é o tamanho A3, A4, A5 para projetar. Você pode clicar nesta duplicata e ela será duplicada em sua interface Figma tem. Aqui, nós o temos. Ok, então vamos voltar para casa e você estará na comunidade o mesmo. Você pode clicar em gostar ou amar isso, seja lá o que for. E você também pode ampliar, diminuir o zoom. Você pode ir em tela cheia e ver o que outros, outras coisas criaram este autor. Vamos voltar. Vamos voltar aqui. Você pode clicar em wireframes e verá muitos wireframes aqui, plugins, arquivos, tudo. Então você pode ver aqui como este. Eu realmente adorei esse. Então, vou replicar este aqui. Adoro isso. Ok, então isso é sobre comunidades. Então, vamos voltar para o meu perfil principal. Ok, então aqui temos isso. Então, discutimos recentes e comunitários. Você também pode definir seus arquivos aqui. Veja, temos minha primeira classe de design figma ou Figma. Este é um projeto. Você pode ver o que aqui. Esses são arquivos e são de arquivos da comunidade. Comunidade. Ok, então é assim que vai mostrar uma busca, muito avançada, muito boa busca. Você pode pesquisar temas de arquivos ou pessoas, até pessoas. Então, vamos selecionar Chris, nós o temos. Mude uma pessoa. Certo, então eu tenho que entrar para ver. Então este é um dos meus colegas de trabalho. Vou esconder o e-mail aqui. Então essa é a pessoa que está trabalhando comigo agora é um desenvolvedor. Ok, então temos a barra de pesquisa coberta. Temos essa mudança de perfil principal de comunidade para trás. Nós cobrimos esta seção à direita. Essas serão suas atualizações. Se você tiver algumas notificações. Então, essas serão suas notificações. Então temos rascunhos. Rascunhos são, na verdade, projetos. Então você é realmente projeto e tudo mais. Você cria uma edição, cria um novo arquivo. Sempre que você for criar um novo arquivo, ele estará em um rascunho. Então, uma vez que eu clico nisso, você pode ver aqui. Então, vamos pressionar E para o quadro de arte e vamos clicar neste. Ok, então você pode ver quando eu criar alguma coisa, então vai estar nos rascunhos. Então, no topo, temos a hierarquia. Rascunhos é o projeto. Este é o nome do arquivo. Então, se você clicar aqui, você pode editar o nome do arquivo, meu arquivo Figma. Certo? Se você quiser movê-lo para outro lugar, você pode clicar nessa seta e ver mover para projetos. Então, eu tenho projetos diferentes como esses. Estamos aqui no aplicativo gastronômico da classe Figma. Posso clicar nisso e posso mover isso para lá. Além disso, existem mais algumas opções renomeadas como lead, favorita este arquivo. Então, esse arquivo favorecido significa que se eu clicar neste arquivo favorito, este arquivo, ele vai aparecer aqui. Você pode ver incêndios favoritos. Então, esses são meus arquivos favoritos. Então, se eu quiser abrir qualquer arquivo favorito, posso fazer isso facilmente. Mesmo se eu fechar, é este. Certo? Então, se você quiser alterar o plano de fundo, clique no lado de fora e temos esse plano de fundo, você pode alterá-lo para o que quiser. Então temos à esquerda que temos você pode ver as páginas. Se você tiver que clicar nisso para ver as páginas, você pode adicionar mais páginas aqui. Antes de entrar nisso, vamos estudar a hierarquia Figma. Então, no topo, temos equipes. Então, isso vai ser como aqui. Então, consiga seus produtos compartilhados XID. Estes são minha equipe. Então, se eu o recolher, você pode ver que são projetos compartilhados. Esta é outra equipe. Terra que você está animado, isso é outra coisa. Então, se eu clicar em Equipe, você pode ver isso diz dois membros aqui. Então esses são os projetos que foram criados dentro dessa equipe. Esses são os membros. Ok, então essas são as pessoas que realmente estão assistindo o acesso a isso porque esses são todos meus alunos. E então temos configurações aqui. Assim, você pode alterar o nome da equipe. As bibliotecas de equipe habilitam o plano e o faturamento, atualize seu plano se você quiser. Porque alguns dos recursos, como compartilhamento de biblioteca ou compartilhamento ativos, são realmente um recurso premium. Você tem que pagar por isso. Certo, então vamos voltar para a hierarquia Figma. Então esta é minha equipe. Em seguida, temos projetos dentro dessa equipe. Você já viu que esses são os projetos, isso é equipe. Figma class é um aplicativo gastronômico de projeto natural. Esses são todos meus projetos do que temos arquivos dentro desses projetos. Então, se eu abrir algum projeto, vamos abrir, por exemplo, como se tivéssemos isso. Então, temos esses rascunhos, que é projeto, e então temos um arquivo dentro dele. Então, esse é realmente meu arquivo. Você pode ter isso. Na verdade, estes são arquivos, este é o nome do arquivo, meu arquivo HTML de fosfato e, em seguida, essas são as páginas dentro dele. Então, vamos ver, temos páginas. Então, arquivos e arquivos dentro desses arquivos temos páginas. Podemos ter dez páginas, 20 páginas, quantas páginas, o que quiser. Em seguida, temos várias pranchetas dentro de uma única página. Então, vamos voltar aqui. Então, temos esta página. Vamos diminuir o zoom. Então este é um quadro de arte. Este é um quadro de arte. E se eu quiser criar outro quadro de arte, clique em a. E vou ter uma placa de arte para iPhone. vez, pressione um no teclado, iPhone SE. E novamente um, vamos usar algum tablet ou aqui 11 Pro. Como você pode ver aqui, estas são todas minhas placas de arte na parte inferior. Então, ou você pode dizer quadros. Então, esses são meus quadros ou quadros de arte diferentes. Posso ter talvez 50 ou 60 em cada página. Então, como agora, eu selecionei esta página. Se eu for para a segunda página, que não é nada aqui. Então esta é a equipe de hierarquia Figma is. Em seguida, temos projetos e temos arquivos. Em seguida, temos páginas, várias páginas. E então temos muitos quadros e pranchas de arte. Então, temos uma única equipe, podemos ter duas ou três equipes também. Então normalmente temos uma ou duas equipes, equipe MAX do que temos vários projetos dentro dessa equipe. Como você pode ver, eu mostrei aqui. Portanto, essa equipe tem 12345 projetos. Este tem um projeto. Então, dentro desse projeto, se eu abrir este projeto, meu copo, você pode ver que temos vários arquivos. Deixei 1234567891011 arquivos neste projeto da classe Figma. Se abrirmos esses projetos da classe Figma, então você pode ver que temos vários arquivos aqui. Então, temos como, vamos para o ListView. Temos dez projetos diferentes, então dez arquivos diferentes aqui. Este é um projeto que eu selecionei. Esses são os arquivos. Então, se eu abrir qualquer arquivo, vamos selecionar esse arquivo. Levará algum tempo para carregar. Ok, então aqui temos o arquivo. Esta é a página, uma única página dentro dela. E então temos a placa de arte ou uma única placa de arte dentro desse arquivo. Então, se eu clicar nesta seção vazia aqui, posso ver o nome do projeto e, em seguida, o nome do arquivo aqui. Então, vamos voltar. E se você quiser criar uma equipe, você pode criar uma equipe. Você pode vaporizar. Vamos criar uma equipe e você pode adicionar seus colaboradores depois disso. E se você tentar continuar, ele pedirá o pagamento porque é um recurso premium. Então você pode ter apenas uma equipe que eu acho que para a versão normal ignorar por enquanto. Então você pode ver isso me mostra escolher Professional. US$12 por litro por mês. geléia de figo é de US $1,3 por litro por mês. Acho que é anualmente. Se for mensal, é em torno de US $15. Então, vamos tentar fechar isso e voltar ao nosso tema. Oh, gritos. Então, ele criou uma equipe na verdade. Então, vamos tentar excluí-lo agora que você possa alterar o ícone, o que quiser. Vamos equipes de UX. Então, eu tenho que digitar o nome para excluir essa equipe. Certo? Certo, então vamos ver se eu perdi alguma coisa. Ok, então dentro desta área aqui, então se tivermos painel esquerdo, que é camadas, ativos e páginas, e então temos as pranchetas aqui na parte inferior dentro dessa página. E você pode ver isso diz páginas e este é um quadro de arte. À direita. Você pode ver que eu tenho isso aqui. Comece a conversa se você quiser colaborar com alguém, compartilhe, se quiser compartilhar esse link com alguém, copie o link e cole esse link. Ou você pode enviar e-mail, digitar o e-mail aqui, vários e-mails separados por vírgula. Se você quiser compartilhar com várias pessoas, eu normalmente copio o link e o compartilho com quem eu quiser. Ok, então este é o presente ou protótipo. Na verdade, faltam fontes. Então, se você tiver alguma fonte ou tipo de letra ausente , ele mostrará aqui root e isso está faltando neste arquivo. Em seguida, temos esse nível de zoom, ampliamos, diminuímos um controle de 100% 0. E então temos visualização de pixels, uma grade de pixels, grade de layout de opções diferentes. E estes estão no topo. Temos ferramentas diferentes. Você pode ver aqui, este é o menu. Por aqui. No Mac, o menu está no topo, aqui, no topo aqui. E no Windows, ele é colocado aqui assim. Mais uma vez, você opõe texto vetorial, organiza plugins. E se eu for para plugins, você pode ver na parte inferior que eu gerenciei plugins. Então, plug-ins gerenciados, posso desinstalar ou instalar novos plug-ins diferentes ou o que você quiser, por que você pode gerenciá-los lá dentro. Essas são minhas bibliotecas. Esses são, na verdade, os estilos que compartilhei com diferentes membros da equipe são arquivos de design projetados. Estes são, na verdade, você pode dizer estilos de cores, têxteis, e vamos estudar muito sobre isso. Ok, Então, no topo, você pode ver que estes são todos meus arquivos abertos. Então, se eu quiser fechar alguns arquivos da hierarquia fitbit, então vamos fechar este. Ícone x. Esses são os que estou trabalhando agora. Então eu não vou mostrar isso porque eles assinaram um NDA de qualquer forma. Então aqui temos alguns, alguns arquivos. Você pode ver que essas páginas são diferentes. Então, se eu clicar em qualquer página, eu tenho camadas diferentes. Ativos aqui. As camadas estão aqui. Então você pode ver esses são, na verdade, quadros. Este é o ícone do quadro. Então, essas são imagens diferentes. Os ícones são diferentes. Então, sempre que você clicar em qualquer página, ela mostrará todas as placas de arte imagens ou camadas dentro dela. Vamos voltar para a casa. E acho que é isso. Isso é mais do que suficiente para você entender a nova interface da Figma. Espero que você tenha gostado desta lição. Certifique-se de continuar aprendendo e encontraremos outro vídeo até lá, tome cuidado. Adeus. 4. Painéis diferentes e o que eles fazem no Figma: nesta lição. Vamos mergulhar profundamente em Mawr sobre a interface de Sigma e o que podemos fazer Estamos aqui Painéis diferentes, camadas diferentes afirmam molduras coisas assim. Então vamos começar agora. Você pode ver que eu criei essa equipe. Esta é a minha equipa do que tu. Emocionante Você pode ver por aqui. Se você quiser criar um novo projeto, você pode clicar aqui Novo projeto e eu vou chamá-lo de Food De E estas são diferentes configurações de compartilhamento. Todo mundo que você empolgado pode se dirigir. Por exemplo, se eu convidar mais um membro da equipe, eles podem viciar esse arquivo. Então eu vou clicar em um projeto morto criar para que você possa ver o seu cabelo que eu já criei Você pode adicionar a descrição aqui Yams, aplicativo para nós, coisas assim. Então agora você pode ver meu arquivo. Então, se voltarmos para arquivos recentes da figo hma, você pode ver que este é o meu aplicativo Então eu estou indo toe duplo clique e abri-lo e vai demorar algum tempo porque ele é armazenado na nuvem. Então aqui está o meu yum zap Você pode ver aqui e à direita. Você pode ver, nós nunca temos que abrir um arquivo. Nós projetamos protótipo e poderíamos então estas são as três coisas três painéis que você vai ver em nosso cabelo deste lado, nós temos camadas e ativos. Então as camadas são basicamente nossos todos esses quadros. E dentro desses quadros, temos objetos diferentes, então você pode vê-lo. Estamos aqui também. Você pode ver que estamos aqui. Temos páginas. Então, dentro de páginas, temos arame frames, inhames, aplicativo e estilo cara em componentes. Então estas são as três cadelas que criei dentro deste projeto. E você pode ver dentro deste arquivo e você pode adicionar novas páginas se quiser. Você pode adicionar uma cadela nova. E, hum, vamos excluir esse clique direito excluir. Então este é inhame são estes são o arame. Este é o componente guia de estilo. Então essas são três páginas, então nós temos esses ativos. Então os ativos são basicamente de um componente. Então, se você criar um componente, você pode usá-los novamente e novamente. Nós vamos recuperar componentes nas próximas lições para que você possa ver agora que temos um monte de componentes diferentes. Então, se um componente arrastar eu posso facilmente arrastar e soltá-lo em qualquer lugar dentro do meu projeto. Da mesma forma, isso mostra que você clica nesta seta, ele vai mostrar-lhe páginas novamente e às vezes ele está oculto. Então, se você tem algo assim e não descobrir onde estão meus bebês? Você vai clicar aqui. Então temos à direita. Temos alguns estilos locais thes air. Os têxteis que criei. Estes são poucos estilos de cores que eu criei. Você pode usá-los novamente e novamente. E este é o painel do tribunal. Este é o protótipo e este é o design. Então, no protótipo, você ia protótipo seu aplicativo como este. Você pode ver o quê? Aqui Eles são muito fora fluxos diferentes que ele vai fluir de um para outro. Nós também podemos, se você clicar do lado de fora aqui, você pode ver que temos opções de dispositivo. Você pode clicar no iPhone pro, uh, Max iPhone 11. Todos esses diferentes dispositivos em que você deseja mostrar seu protótipo. E qual é a moral? Você vai usar a cor de fundo para isso? Um, quadro inicial. Vamos começar do registro. Então estas são as opções que temos no design. Temos estilos locais, cor de fundo. Já discutimos eso. São coisas diferentes que você vai conseguir no tribunal. Gord está realmente mostrando o que é o cabo neste item? Então, se clicarmos aqui, você pode ver que este é um CS escolta para webs, site de R nos e direita para dispositivos Apple. Este é o Android Court para este objeto que eu selecionei à esquerda. Você pode ver que este é o ícone. Este ícone vai representar quadros. Então, sempre que você tem quadros, você vai ver este ícone aqui e tudo dentro dele aqui. Então isso é realmente componentes ah. Então tem este formato de diamante. Então, todas as formas de diamante são componentes do que temos isto estes são grupos diferentes. Você pode ver que estamos aqui. Você pode abri-los. Você também pode abrir esses componentes. Vamos voltar aos componentes mais tarde. Mas é assim que isto é uma forma para exemplos. Todos esses ícones que mostram que este é este tipo de camada off como você pode ver configurações de criação de perfil é um texto. A Leah. Então, tem que estar aqui. Então, essas são configurações diferentes. Por exemplo, como este logotipo. É um fator. Então tem um logotipo vetorial aqui. Eso todas essas coisas diferentes. Então, se clicarmos na imagem, vamos ver, aqui está o ícone de imagem para que você possa ver esta é a sua imagem que você pode encontrar instantaneamente onde seu arquivo está. Suas imagens, seu texto é para que você possa reconhecê-las por esses pequenos ícones à esquerda. Agora, se você quiser mover este projeto para outro projeto, por exemplo, agora ele está em empregos. Quero movê-lo. Você vai clicar aqui, mover para o projeto, e eu vou movê-lo para o aplicativo foodie. Então, agora você pode ver que ele foi movido para aplicativo foodie e agora é assim dizer foodie ab barra polegares para cima. Ok. Da mesma forma, você pode mostrar o histórico de versões O que foi um histórico de versões? Como eu editei todo esse fogo que você pode ver aqui. E estes são este é um histórico de versões fora dos meus 30 dias anteriores que eu posso mudar de volta para qualquer um . Então, se eu clicar aqui, ele vai para a parte de trás do dedo suíço no último. Então vamos não tentar. Você também pode ocultar o histórico de versões, estilos publicados e exportação de componentes. Estes projetos duplicam este projeto. Renomear ou excluir, principalmente temos que renomear. Então você clica aqui. Posso levá-lo ao inhame. Receitas, receita Seja em algo assim. Então você pode ver que é assim que você vai renomear. Ok, então isso é um pouco fora. A familiaridade com isso interfere. Vamos passar para a próxima lição em que vamos mergulhar nessas ferramentas e ver o que são essas ferramentas e como podemos usá-las. Então vamos passar para a próxima lição. 5. Usando quadros e pranchetas: Agora, nesta nossa primeira lição, vamos criar um novo quadro ou quadro de arte, e vamos manipulá-lo e ver o que podemos fazer com ele. Então vamos pegar Stockett agora. Eu vou mudar para o meu projeto de prática e eu vou criar um novo arquivo e ele vai ser sem título por profanado, então vai levar algum tempo para o Senhor ou aqui assim. Então agora temos essa tela em branco. Se você quiser alterar a cor de fundo, vamos usar como este, e você pode ver aqui temos camadas, ativos e páginas. Se você pode ver pelo arquivo sua idade Hizb um. E se clicarmos aqui vai me mostrar mais páginas para que você possa adicionar mais cadelas aqui assim. Agora estou na página um, e a primeira coisa que vou fazer é dar folga no dedo do pé. Este quadro não clique aqui porque temos fatias aqui, outra ferramenta escondida. Então clique no quadro e você pode desenhar seu próprio quadro, por exemplo, como este. Então este é realmente os vencedores 3 42 por 5 80 E se nós novamente clicar no quadro ou pressionar a tecla F no teclado, ele vai nos mostrar telefone diferentes opções ou projetar diferentes tamanhos e quadros e quadros de arte para iPhone. Então temos. E bem aqui, por exemplo, se clicarmos nele, este é o tamanho padrão do Android. E se quisermos criar mais são mais telas. Aqui, vamos pisar na sua moldura e vamos criar uma moldura de tablet aqui. Então tablet muitos para que você possa ver essa diferença entre os tamanhos e isso é limpo outro e novamente, F e eu vou ir parar de gás do dedo do pé, e eu vou projetar um site. Então eu vou clicar aqui em uma área de trabalho. Então é assim que você pode criar vários quadros diferentes ou quadros de arte. Você pode clicar duas vezes aqui no topo, e isso vai mostrar que estamos aqui, por exemplo, que parar arte board. Você pode renomeá-los ou você pode, hum, doméstico ou aqui, uh, este é Android. Nosso senhor. Certifique-se de que você sempre renomeá-los, porque às vezes há vários ou muitos quadros de arte, e você esquece o que waas quadro de arte em que você estava trabalhando o que ele faz. Então, eu abro o livro. Então você pode ver aqui nós temos três placas de arte diferentes e se clicarmos aqui, você pode ver que temos diferentes opções à direita. Este é o nosso design dab. Estamos certos sabendo guia projetado. E à esquerda temos páginas e dentro da primeira página, temos três livros de arte. Então, se clicarmos no local para isto estar vazio, não temos nada aqui. Se clicarmos fora de alguém, qualquer coisa, este é o nosso arquivo. Então vamos mudar o nome do dedo Vamos chamá-lo de quadros e livros de arte. Então é assim que você pode criar diferentes obras de arte. Agora, se você quiser criar algo para o qual não está listado nos quadros aqui, então ele não está listado. Por exemplo, temos este Apple Watch. Queremos criar algo para o relógio Motorola G ou algo assim. Então nós vamos para ir para este material de design de material ou você é fontes cortar dispositivos Agora, por aqui, você pode ver que temos plataformas. Temos proporções de dimensão de tela que podem se esconder em DP. Então é isso que você vai usar. Então, uh, na plataforma, se clicarmos aqui, você pode ver que são janelas. Este era o X. Este é o Mac. Este é o Apple Watch. Você pode ver ou ouvir 38. 42 mulheres. Então, se entrarmos aqui para que você possa ver que este é o relógio LG G. Então, é 187 por 177 e então nós temos 213 por 230 Então se nós estamos projetando para algo assim para um relógio que não é provocado por aqui, por exemplo, como você pode ver Moto 3 60 eu posso usar esses tamanhos para 41 por 2 44 Então eu vou Volte e eu vou chutar aqui. Onda ajustou para 42 por 44 algo assim. Então ele waas 2 40 uma mordida de 44 a 41 por 2 44 2 41 por 2 40 pés. Então você pode ver agora esta é a sua placa de arte para este relógio LD azul ou relógio Motorola para que você possa usar este design de um dedo do pé algo Então é assim que você cria diferentes tamanhos e molduras e placas de arte para o seu trabalho de design. Então, se você clicar em ou aqui você pode ver, nós temos diferentes opções. Este é o valor X, qual é? Isso mostra que é o que é longe daqui. Se você se mover para aqui assim, você pode ver os valores X e Y estão mudando. Nós sabemos o que está em. Não estamos preocupados com os valores de sotaque fora deste quadro de arte. Estamos mais preocupados com este peso e altura. Você também pode bloquear as restrições. Então agora ele vai crescer em proporção. Ok, então 450 por exemplo, se eu seus 600 vão ficar assim, ele vai crescer em proporção. Vamos voltar à escola. Venha e ou controle Z Então estas são opções para a tradição. Acho que não precisamos ler isso de qualquer maneira. Ainda assim, podemos usar estes são um raio de canto se quiser usar rádio de canto. Este é o conteúdo do clipe. Então, o que quer que você tenha aqui, por exemplo, isso você pode ver agora está cortando meu conteúdo. Então eu desenhei um retângulo sobre isso e mostra Haftar participou. E se eu clicar aqui e remover isso, você pode ver que eu posso ver além deste quadro de arte agora, ele não está cortando meu conteúdo. Então, isso é sobre o conteúdo do clipe. Isto é muito importante e penso que é tudo. Não precisamos muito do dedo sobre isso. Se você quer alinhar estes quadros de arte? Você vai pressionar Shift ou manter pressionada a tecla de navio e clicar e selecionar todos esses quadros de arte selecionando seus nomes. E você, você pode parar uma linha como esta? Você também pode usar o estudo acima que eles estão indo para usar ter algum espaço sobre ele. Então, se você selecionou mais objetos que você pode ver mais de dois objetos que você pode ver que temos esta opção de espaçamento múltipla Um, na figo Ma, este é um recurso muito legal. Você pode ajustar o espaço, por exemplo. Eu quero ter algo como um intervalo de 80 pixels entre eles. Então é assim que você pode ter isso. Então isso é tudo sobre quadros e nossa placa, como você pode organizá-los, como você pode gerenciá-los. Qual é o conteúdo deste clipe e o que ele faz? Acho que não garantiu isso. Vamos passar para a próxima lição e cavar mais na invenção 6. Ferramentas de design de Figma: este vídeo vai ser sobre lemas de figo. Então vamos começar e aprender quais são as ferramentas aqui e como podemos usá-las. Então, primeiro, nós estamos indo dedo do pé, criar um quadro. Este é o nosso quadro de arte. Então vamos chamá-lo de quadrode treino”. Ok, então nós temos este quadro, e se você quiser raiz, mova-o. Esta é a sua ferramenta de seleção ou moveu tudo. Você pode movê-lo por aqui. Então, o que quer que você desenhe, por exemplo, eu desenhei sec emaranhado aqui. Se eu quiser movê-lo, vou usar este movimento. Disse que isso é realmente o padrão irá adicionar um pouco mais baixo aqui. Então, se você quiser escalar algo por proporção, você vai selecionar este homossexual ou escala Dole. E agora você pode ver que você pode dimensioná-lo para baixo ou para cima sempre que você estiver importando alguns ícones dentro de Sigma AB. Eu acho que eu preferia usar dole escala porque ele vai manter a proporção e não vai estragar seus ícones aqui. Então certifique-se de usá-lo quando você está indo para dimensionar algo em proporção como este. Por exemplo, imagens ou algo assim, que você quer escala do dedo do pé em proporção. Agora aqui temos novamente quadro duplo e fatia a fatia é que eu vou voltar a fatia uma vez que eu tenho algo aqui. Então vamos primeiro discutir essa forma. Será que temos retângulo, linha, seta, elipse, imagem mal ido estrela e lugar. Então comece por retângulo para que possamos colocar um retângulo aqui. Basta clicar no arrasto e sair daqui. Você também pode ver que temos um raio aqui. Então, se você quiser oh, selecione o raio do canto que você pode selecionar arrastado por aqui. Ou você também pode colocar raio aqui, por exemplo. Eu coloquei oito existe agora e você pode mudar a cor trocar a cor aqui física. Isso é preenchê-lo com a cor. Então aqui temos um botão grande e agradável E aqui novamente, esses mesmos são realmente opções. Opções padrão em X Y posicionando Grã-Bretanha Alta Tradição Gordon Radius. Você pode ver se eu tentar mudá-lo aqui vai mudar sua cabeça. Você também pode arrastar assim para alterar o raio do canto. E, novamente, se clicarmos aqui, temos cantos independentes. Você pode ter canto diferente da AIDS 20 por exemplo, Como este ou CEO como este. E você também pode ter mais uma opção, que é o nosso alisamento canto EUA para que você possa ter alisamento canto como este que você já viu em um monte fora de um mac O R nos. Nosso iPhone APS você pode ver aqui. Esta é uma boa opção. Você também pode adicionar efeitos diferentes aqui. Se você quiser adicionar sombra, você pode ver que temos efeitos diferentes. Vamos contornar esses efeitos de acidente vascular cerebral, acidente vascular cerebral e efeitos, literal. Agora você precisa se preocupar com isso. Sinta cores que você pode ver ou ouvir. Mais uma vez vamos mergulhar profundamente no Phil e maciço leniente todas essas ints gananciosos. Mas agora estamos discutindo essa ferramenta de retângulo. Então aqui temos a ferramenta de ângulo da seita e, hum, você pode Eu já mostrei todas as opções que podemos ter com isso. Assim que tivermos o segundo emaranhado Dole, vamos ter medo e outro retangular aqui como este, e se sobrepõe assim. Então é assim que estes líderes são organizados. Então você pode movê-los. Ok, então vamos mudar o seu dedão do pé algo assim, algo assim. Então eu vou pisar algo assim de qualquer maneira, então agora eu vou voltar para a ferramenta de fatia. Então, se eu quiser ter uma imagem ou algo nele vai ser nós estamos aqui assim então eu posso usar a ferramenta de fatia, e eu posso clicar em exportar, e ele vai exportar Onley esta fatia. Então, o que quer que esteja dentro desta fatia, eu vou exportá-la, e eu estou indo para o pé. guardá-lo Vamosguardá-lona área de trabalho. Deixa-me mostrar-te o que significa. Escola. É altos. Então aqui nós cortamos para que você possa ver que isso é fatia. Então este é o aborto que eu queria aqui. Então esta é a função fora da ferramenta de fatia. Não é muito útil, Mas às vezes em web design, você pode usar algo assim. Vamos apagar esta fatia aqui. Ok? Agora, vamos deletar esses dois. Então temos mentir para você pode arrastar sua linha assim, e você pode mudar sua espessura do dedo do pé. Cinco. Está indo para o centro, dentro ou fora. Então, essas são diferentes configurações com novo centro e vamos, uh, fazer 50. Mas isso troca sua direção e mudança de respiração segurando o turno do peito , para tê-lo em diferentes ângulos de rua como este. Então, se você quer que ele seja reto em algum ângulo, você vai segurar e pressionar Shift assim. Então nós temos isso e vamos passar para este anúncio. Vastos golpes. Podemos ter diferentes cantos redondos. Você pode ver o cabelo ao redor, cobrir uma lacuna quadrada, e então temos mentiras. Adel e depois temos flechas triangulares. Então todas essas opções diferentes e nós temos Dash e Gap. Então, uh, vamos lá. O que? Então esta é na verdade, primeiro 1 é traço e segundo é lacuna. Então vamos ter que entrar em coma. Vamos ver se temos, queremos aumentar a lacuna. Então eu usei 25 para a lacuna. Você pode ver que há um monte de espaço entre estes pratos. Metal é, na verdade, o ângulo aqui. Esta é a articulação Ângulo Médio é realmente ângulo muito afiado. E se você quiser ter um ângulo em torno aqui, então esta é na verdade a linha, e tem um monte de opções diferentes. Vamos civilidades e voltar para a linha simples. Ok. Então você também pode salvar este estilo e você, estilos Congar e estilo adequado para o acidente vascular cerebral. E você pode reutilizá-lo agora, estamos indo para o pé. Discutir sobre adoções Essa linha relacionada. Dedo. Então, Lyinto, esta é a nossa ferramenta de linha. Você pode mudar a cor, o que quiser. Por exemplo, como este , normalmente uso em links. Por exemplo, se eu tenho um imposto ou aqui sobre este é um link algo como este. Então você pode usar linhas para separadores ou qualquer coisa. Da mesma forma, temos total É novamente uma ferramenta muito agradável. E você pode ver agora se você desenhar uma linha na tela distante, ele vai ser muito pequeno. Então, em vez de usar um, você pode usar quatro. Então esta é uma espessura. Então, se você tentar reduzir a espessura, vai ser algo assim. Então, se você quiser um animal maior, você pode usar mais espessura como esta. Então eu acho que cerca de quatro ou três é bom. Boa aparência. Você foi mudado em tudo. Em qualquer lugar que queiras voltar a gostar disto. Se você quiser ir com opções avançadas, você sempre pode ir por aqui. Flecha do Triângulo Oh, estão mentindo em tudo. Oh, nenhum é algo assim. É um jogo indo dedo do pé desaparecer tudo ao redor ah, quadrado deitado em tudo Não para que você possa ver que é convertido para dizer linha simples e não há nenhuma seta em uma extremidade. Então isso é muito estranho para mim porque eu queria voltar para a interestadual e agora é uma linha. Então nós vamos criar outro Arrojo aqui como este e não Sam a espessura como esta . Então este é o nosso arável. Então as opções são quase as mesmas, como esta ferramenta de linha, e isso é tudo. Você pode mudar a direção sempre que quiser. Oh, este é o arável. Então nós vamos para as eleições de elipse basicamente círculo. Então, se você quiser obtê-lo em uma proporção, segure seu turno e ele vai ser perfeitamente por perto assim. Então eu estou segurando e pressionando a tecla Shift. Então, esses são meus lábios, e você pode ver se eu clique aqui. Ele mostra arco para que você possa clicar aqui e continuar arrastando assim e você pode criar um gráfico. Você pode ver que estamos aqui. Gráfico ou gráfico. Da mesma forma, você também pode alterar isso para criar um gráfico um círculo, um gráfico. Então, isso é muito fácil na figo. Miley adorava esse recurso. Isto é muito, muito interessante. Então comece aqui em arco e continue se movendo assim para que você possa mudar o início também. Então, se você quiser ter algo assim aqui, você pode ter algo assim. Eles são sculler assim. Este é um recurso muito legal. E também esta proporção vai mudar assim. Estas opções são também nós estamos aqui. Então este é o ângulo. Ângulo inicial menos 90. Esta é a liberdade condicional, eu acho, e esta é a questão tecnológica necessária. Esta é a liberdade condicional, eu acho, eu acho, Então eu vou voltar para algo assim. Sim, e vamos usar 100 cantos aqui. E é assim que você cria um gráfico de circa muito agradável usando apenas fezes escondidas. Então este é um banquinho labial. Isso é realmente ótimo. Muito poderoso. Eu realmente amo isso. Você pode ver aqui que você pode criar um monte de coisas. Por exemplo, como este, hein? Qualquer quente Esta é a minha omelete. Certo, então temos polígono. Um polígono vai ter novamente cantos diferentes. Você pode aumentar os cantos. 10 56 Tudo o que você quiser, ovos foram para cima ido tudo o que você quer apareceu. E você também pode mudar o raio do canto aqui. Você pode mudar a contagem daqui. Estes são realmente bons controles. Eu não vi esses controles em nenhum dedo do pé. Isto é muito fixe. Sigma tem um monte de recursos que eu acho que outras ferramentas de design estão faltando em. Talvez eles vão ter em um ou dois anos e Sigma tem um seco Agora, uh, então nós temos assustado isso está indo para o pé. Crie uma estrela segurando a tecla Shift. Você pode tirar uma estrela. Quatro jardineiros, três cantos. Esta é uma ferramenta ninja e, uh, cinco cantos, seis cantos. Então eu vou ficar com cinco cantos e isso vai ser, eu acho, o ângulo dos cantos. Então vamos aumentá-lo. Então esta vai ser uma estrela muito agradável para as minhas filhas. Eu acho que eles vão amar estes esta estrela porque ele tem alguns que você pode ver em. Você também pode mudar o raio ou aqui assim. Então este é realmente um bom ser iniciado. Meus médicos vão adorar de qualquer maneira, então esse é o ângulo, como você pode ver onde. Isso é chamado de carro. Esta é uma proporção. Então isso é realmente como você pode fazer um grande você pode ver estilo de fato gordo ou uma estrela magro o que você quiser. Não, parece uma estrela do mar. Então esta é uma ótima ferramenta. Então isto é uma estrela. Você pode criá-los. Então, sobre uma imagem de lugar, vamos olhar para a imagem de lugar na próxima lição porque ele tem um monte de opções. Então vamos passar para a próxima lição para discutir, lugar, imagem e fumaça ou figment sapos. 7. Ferramenta de tipo, no Figma: neste vídeo. Vamos falar sobre a ferramenta de texto aqui. Então, apenas besty ou texto, clique neste texto e você pode arrastar algo assim para criar uma caixa de texto aqui. Tóquio, O parágrafo. Este é um parágrafo, LA, blá, blá, blá, blá, blá. Então você pode ver agora ele está indo para dentro deste recipiente. Da mesma forma, você também pode usar algo assim aqui, então você pode ver que estas são as opções à direita. Então, temos opções de texto. Este é um tipo de letra formado, que é Roberto. Você pode criar alterações para o que quer que você tenha instalado em seu sistema. Este é o tamanho do tipo. Hum, então agora nós não temos nenhuma opção. Vamos limpar. Drew é esse. Certo, então aqui temos, ela era desse tamanho. Certo, então temos uma prancha média regular. Estes são estilos diferentes fora deste texto. Então temos auto. Isto é basicamente a altura da linha. Posso mudá-lo para 30 ou posso colocar, por exemplo, 200% aqui. Algo assim. Então esta é basicamente a diferença entre as duas linhas, o sexo entre as duas linhas, e você pode ver o que tinha essas linhas azuis? Esta é, na verdade, a distância entre estas linhas azuis abaixo do seu próximo, que é marcado linha de base. Então temos espaçamento de letras. Você pode ter 5% melhor espaçamento ou qualquer coisa que você quiser. Nós estamos aqui. Então temos espaçamento de parágrafos. Então, se tivermos mais de dois parágrafos, por exemplo, vamos alterá-lo. 100% de esperanças. Vamos mudar isso. 100% e desculpa 2%. E teremos outro parágrafo. Ou aqui. Como este? Sim. Aqui. Essa é outra garota. Isso vai este boné e não, Se eu tentar usar isso, ele vai dedo do pé. Dê alguma diferença entre estes dois parágrafos. Já foi detectado que eu tenho peito e gaveta aqui. E este vai ser o próximo parágrafo para que eu possa ter mais espaço dentro de dois parágrafos e, uh, escapar. E é assim que vai acontecer. Na verdade, este é o meu contentor. Então eu posso me mover assim para ter mais informações dentro dele. Ok, então isso mostra que é um tamanho fixo. Isso mostra que é altura automática. Então é novamente sangue para este fundo fora deste texto aqui. E então nós temos fora disso. Então, quando nós clicamos fora dele, ele está indo toe Mover em torno disso ele vai ter seu próprio veredicto. Por isso, é bom quando você está criando alguns botões, mas em um parágrafo você vai usar fixo como este. Então vamos voltar à escola, Kamanzi. E agora temos diferentes opções fora alinhamento meio alinhar linha superior alinhar linha inferior que vai ter. Por exemplo, se eu tiver algo assim, um contêiner maior, eu posso soltar uma linha que eu posso alinhá-lo no meio deste contêiner. Você pode ver esta linha azul. Este é um contêiner e eu também posso alinhá-lo na parte inferior deste contêiner então depende de como eu não vou obter a sua linha. Então temos centro à esquerda e à direita uma linha fora do texto. Então há um alinhamento de estacas, direita, direita, esquerda Incentivo. Então este é basicamente o alinhamento dentro deste recipiente e este é o alinhamento fora do texto fora de configurações estranhas, diferentes de altura da ordem. Como este contêiner será aqui e, em seguida, temos mais algumas opções como você pode ver onde aqui mais algumas opções são como podemos justificá-lo aqui do que temos subjacente em. Então nós temos isso nada do que nós temos. Atacar para algo assim. Parágrafo em Dent. Se você quiser recuar parágrafo como este e o início do parágrafo, uh, então temos casos diferentes. Em maiúsculas. Em minúsculas. Este é o caso do título, e este é tão apertado que eu sei sobre estes portões formas sensíveis e espécies de capital é espaçamento. Então estas são diferentes opções que são o forte. Opções avançadas são opções de tipo aberto. Então agora você pode ver que eu selecionei este telefone rasa e você pode ver este Tyfo tem espaçamento maiúsculo e formas sensíveis a maiúsculas e minúsculas para que você possa ter essas opções clique se você quiser usá-los. Por exemplo, se eu tentar usar o espaçamento de capital aqui, guerra está próxima, por exemplo, assim. Então agora olhe atentamente se eu tentar, uh, uh, usar este espaçamento de maiúsculas para que você possa ver o espaçamento de maiúsculas ativado no Capitólio. Da mesma forma, temos esses estilos de número de estilo. Então, se eu tentar usar 123456789 para você, algo assim. Então você pode ver que podemos ter esse estilo de número de amigos. Estas são novamente opções diferentes, então estas são realmente opções fora de faces de tipo aberto. Você pode ver que existem opções estilísticas estilísticas. Espaçamento horizontal, denominadores de fração astutos. Eu acho que nós não queremos usar todos estes, mas eu acho que você deve saber que estas são as opções disponíveis estavam aqui. Então, se você é um geek tipográfico, você pode usar esses conjuntos estilísticos ou opções aqui. Então, isso é tudo sobre esta ferramenta fiscal. E, hum, eu acho que você vai entender o que ele faz e como você pode mudar seus quatro tamanhos de estilo. Diferente espaçamento entre linhas. Diferente espaçamento entre parágrafos, como ele vai se comportar. É altura automática. Coisas estranhas como o alinhamento de impostos dentro do contêiner ou o alinhamento de decks fora do próprio texto . Então isso é tudo sobre camadas Dex. Se você tiver sugestões ou melhorias no curso, você sempre pode elogiar, e você sempre pode discutir comigo. Se não entende nada, pode me fazer perguntas. Espero que tenham gostado desta lição. Vamos passar para a próxima lição 8. Como usar a ferramenta Caneta para criar formas: neste vídeo, nós vamos aprender sobre a ferramenta Ben de Sigma e como podemos criar diferentes ícones de formas ou diferentes tipos de coisas usando a ferramenta caneta. Então isso é basicamente para tentar, então você pode pressionar B e aqui temos a extensão e apenas clicar e arrastar retirar linhas retas como esta, e nós estamos voltando para o primeiro a ter esta forma que era nave, e você pode ver agora mesmo mostra que temos derrame. E esta é a sagacidade do derrame. Então este é clique em feito. E esta é a sua forma agora, você pode expandi-la. Você pode alterar a espessura da linha de espessura. Você também pode adicionar preenchimento, cor, preenchimento. Faça assim. Ok, então se você não tem nenhum preenchimento de cor, você pode clicar duas vezes dentro desta forma nesta nave, como aqui, e nós estamos novamente de volta na ferramenta caneta mais para que você possa ver onde nós estivemos aqui. Na verdade, este é Ben Tool e este é baldes de Espanha. Então, se você clicar no balde de dor e você pode clicar aqui, é novamente fazer a mesma coisa que fizemos para encher este navio e se você for para este Bendel, ele vai realmente dobrar estes cantos. Então, se você clicar nele, você pode ver Agora nós temos canto upended aqui assim. Então estamos aqui assim aqui, como este Comando ou Controle Z para voltar para que você possa ver agora que temos curvas. Então, se você quiser mudar qualquer canto aqui, você pode clicar novamente aqui. Uma vez que você tenha selecionado isso e ele vai voltar para a forma que ele waas. Então vamos voltar para a ferramenta span. Vamos voltar para a ferramenta de movimento. Então nós vamos clicar neste movimento e nós também podemos mover este nosso, por exemplo, temos este Joffe ou algo assim. Nós também podemos mover essas alças dedo do pé tem a forma dobrando para nossas necessidades, por exemplo, como este. E, hum, se nós quisermos mudar, faz apenas este identificador, por exemplo, eu quero este identificador. Eu não quero esse dedo manipulado se mover assim para que você possa ver agora se nós movê-lo nesta direção, ele está se movendo. Mas se eu tentar movê-lo em destruição, ele vai se mover junto com este segundo punho. Então você está indo para pressionar e segurar a tecla de opção Archy Archer para mover isso ao redor sem mover o 2º 1 que você pode ver ou ouvir assim, por exemplo. Quero ter algo direto como isso que você possa ver agora de novo, se quisermos fazer o mesmo, posso voltar com isso de novo. Se eu tentar mover esta alça, ela vai se mover. Comprou deles. Então é assim que você pode mover essas alças. Você pode opção hold opção ou são para mover o único. Você também pode movê-los em torno desta alça inteira. Então este é um ponto de ancoragem para que eu possa movê-lo em qualquer lugar que eu quiser. Posso criar qualquer tipo de fatores como este. Posso remover o derrame. Posso adicionar efeitos diferentes, como sombra e tudo mais. Tudo o que eu quiser. Posso mudar o folicular. E essa é a coisa má que você pode fazer com Bendel. Então vamos excluir todo esse vetor e o que eu vou fazer é, por exemplo, eu tenho essa nave, por exemplo. Eu tenho lábios. Então eu ouvi essa Ellipse. Ok, então se eu quiser entrar no clima de batalha e quiser mudar algo nesta elipse, eu vou clicar duas vezes sobre ela. E vocês podem ver agora que estamos de novo neste vetor ancorado. Então temos esta caneta para baixar aqui. E se eu quiser adicionar mais pontos de ancoragem aqui, então se eu quiser onde um aqui, vamos pressionar Escape. E um, estamos aqui Press escape porque estamos apenas adicionando e adeus solo Hit um aqui, Skip. E um aqui e o pulo. Agora eu vou me mover, Tool, e eu vou movê-los ao redor, por exemplo, como este, eu vou movê-lo para dentro. Da mesma forma, este Oops. Vou voltar a andar, Tool. É assim, assim. Você pode ver o que eu estou tentando fazer aqui. Assim, desta forma, você pode criar ícones diferentes se você quiser. Por exemplo, se eu voltar para lidar, eu posso criar e outros linha aqui. Mova-se assim. Isto, isto, assim. Assim aqui, assim. Então aqui vamos nós e vamos para o gol de campo novamente. Vá para a ferramenta balde e eu vou selecionar outra cor. E eu vou encher este também. Então, mais uma coisa, que eu acho que esqueci aqui, se você quiser ter algo curvo, por exemplo, se você tiver uma ferramenta de caneta, você pode clicar aqui e não deixar o seu mais apenas arrastar e você terá ocorrido ângulo. Então, se você quer ter ocorrido ângulo, você pode fazer algo assim. Então, sempre que você quiser um ângulo de garota de cartas, você pode fazer algo assim. Então, estes são os conceitos básicos fora deste plano para você pode criar ícones. Eu não recomendo que você continue criando ícones diferentes usando o gasto tudo. É uma perda de tempo que eu acho que você pode usar. Você deve usar o ícone já construir que são padrão para qualquer dispositivo dos EUA ou Android. Assim como em seus sites. Você também pode comprar ícones premium. É realmente um desperdício de tempo se você continuar criando ícones usando esta ferramenta caneta. O Eso venceu. Eu fui. Na maioria das vezes, fiquei claro com os meus alunos. É esta forma como aqui? Este. Então vamos mover isto primeiro vamos construir um retângulo como este, e teremos cantos arredondados de 50 como este. Em seguida, vamos usar nossa ferramenta pan e criar algo que é clicar duas vezes sobre ele. Então não temos alças aqui. Agora, crie Pento. Você gasta ferramenta, e nós vamos ter que adicionar um pequeno anúncio aqui. Esperanças O que está acontecendo? Mm, assim. Como este. Isto. Ok, então nós criamos um anúncio aqui. Vamos preenchê-lo com a mesma cor. Então agora vocês podem ver aqui que temos um raio de canto ajustado para 50. Então eu vou usá-lo para ter algo assim. Vamos usá-lo. Certo, então vamos clicar. Clique em Escape, tecla Breast Escape. E é assim que temos um ícone muito bonito fora da bolha de fala. Você pode ver a fala, mas bem, vamos usar a descoloração. Então é assim que você pode criar e manipular diferentes formas e diferentes, diferentes. Você pode criar diferentes ícones simples usando figo MMA. Acho que isso é tudo. Eu não quero que você crie um ícone muito único aqui, mas eu realmente adicionaria algum exercício onde você pode criar algo assim e se familiarizar com esse mental. Espero que você tenha gostado de usar esta ferramenta de proibição, e se você tiver alguma dúvida, você sempre pode me perguntar, Vamos passar para a próxima lição. 9. Localize o ferramenta de imagem: neste vídeo, vamos ver como usar lugar, imagem, imagem, ferramenta e Sigma e talvez alguns mortais. Agora vá até aqui e espaço livre, imagem ou nave de comando ke ou cuidado navio controlado. E você pode ver que eu vou selecionar todas essas imagens diferentes ou aqui. Então vamos como este. Este aqui eu estou pressionando ou segurando Chave de Controle Comandante para ter várias seleções. Parece com este, este. E vamos selecionar, hum, este e eu vou pressionar em aberto para que você possa ver agora eu tenho cinco imagens e apenas continuar arrastando assim para onde você quiser colocar algo assim e Sigma está realmente enchendo tudo por conta própria. Eu realmente amo esse recurso. Continue arrastando e isso é tudo. Então você pode ver que é assim que eu posso criar um coledge de imagem como este. Este é um recurso muito legal e mais uma coisa. Então é assim que você pode colocar imagens. E se você tem algo, por exemplo, dentro de um quadro, por exemplo, eu tenho lábios, um, diferentes a cada dólar de pessoas diferentes e, por exemplo, por exemplo, dentro de um quadro, por exemplo, eu tenho lábios, um, diferentes a cada dólar de pessoas diferentes e, por exemplo, isso E agora se eu quiser colocar imagem. E, uh, vamos selecionar qualquer um destes novamente. Quatro um, Duke 34 Muito bom. Muito, muito legal. Então você pode arrastar e soltar o que quiser. Esta é uma característica muito legal. Então vamos de novo colocando tudo aqui assim. 1234 Ok, então vamos deixar este. Vamos fazer isso. Este registra este e concentra-te neste. Agora, se você clicar sobre isso ou aqui, você pode ver à direita. Temos Phil como imagem, e mostra 100% para que você possa reduzir a opacidade aqui. Isto é opacidade. E se você clicar aqui, você pode ver que temos opções diferentes. Por exemplo, podemos alterar a exposição ou podemos reduzir a exposição. Podemos aumentar o contraste, e podemos aumentar a saturação, que vai melhorar a temperatura das nossas cores. Esta é, uh, temperatura quente. Há uma temperatura escolar. Este é um pouco controles fora da fotografia E. Então, se você quiser ir para trás, você pode voltar, e ele vai clicar sobre isso. 0% são as configurações normais como esta. Vamos torná-lo um pouco maior assim. Então eu uso a tecla Shift e uso este adulto para expandi-la. Ok, então se você quiser mudar a imagem, você pode clicar novamente aqui e para exemplos como esta imagem como esta. E agora você pode ver aqui que temos opções Phil. Então estas são as opções que mostram que como ele vai preencher este objeto. Então isso está cheio. Ele vai preencher todo o objeto. Isto está em forma. E se você clicar a pé, você pode vê-lo é cortado dentro, e você também pode você pode ver isso não é porque não é uma imagem arredondada ou imagem. Portanto, não se encaixa dentro dele. Então, ok, então vamos usar Phil agora, e você também pode usar colheita. Então, a colheita vai ajudá-lo a mudar o tamanho deste. E você também pode alterar o posicionamento dessa imagem. Por exemplo, esta imagem que estamos aqui, e você também pode alterar o tamanho da imagem pressione e mantenha a tecla Shift pressionada. E, por exemplo, quero que o dedo do pé tenha algo assim. Ok, então você também pode mover a imagem ao redor como este X fechar isso e você pode ver aqui nós temos a imagem onde nós queríamos. Então, novamente, vamos para a imagem. Isto é colheita. Então, no corte, você pode soltar a imagem. Por exemplo, eu quero ter algo aqui como este e vamos sair e você pode ver que isso é realmente cortar danos. Então ele está basicamente mudando o quadro da imagem. E se você quiser novamente ir para o corte, esta é realmente a área de cultivo. Esta seção azul estamos aqui. Se você clicar nesta imagem atrás você pode ver que temos adultos diferentes. Estes são pretos. Então, se você quiser mudar o tamanho da imagem por trás deste corte, você pode fazer isso com esta música como esta. Então esta é uma ferramenta muito boa, então você também pode girá-la. Mas acho que isso não vai ajudar aqui. Vai deformar esta imagem, modo que é tudo. Então esta é uma característica muito agradável fora deste corte fora da imagem. Então você pode usar estilo para azulejo está realmente indo dedo do pé. Ajude-nos a estilizar esta imagem. Então, na verdade, estou reduzindo o tamanho dessa imagem porque temos que ver o efeito de azulejo. Então vamos movê-lo assim e clique X aqui. Então é assim que ele está modelando sobre a imagem. Portanto, estas são poucas opções com sensação de imagem que você também pode ocultar a sensação de imagem que você também pode movê-lo. Você também pode adicionar o campo de imagem a partir daqui. Faça isso se você ir para a imagem, ele vai dizer-lhe que Selecione uma imagem. Então você constrói qualquer imagem daqui. E estas são opções diferentes. Como ele vai caber, preencher, ajuste realmente fazer Tente usar 100% da imagem e tentar encaixar dentro deste recipiente. Por exemplo, se tivermos um contêiner fora como este e queremos preenchê-lo com uma imagem para que você possa clicar se você quiser preencher algo com imagem, você pode clicar aqui ele está preenchido e você pode clicar aqui e ir para sólido, sólido e mover para a imagem. Então aqui temos ele mostra que tentar escolher uma imagem aqui para que você possa escolher qualquer imagem , por exemplo, como se parece com esta. Ok, então agora você pode ver que está cheio. E se eu tentar me preocupar, você pode ver que ele está tentando encaixar toda a imagem neste retângulo. Agora está deixando algo à direita e à esquerda. Então, se eu tentei reduzir o tamanho Ok, então este é um ajuste perfeito. Se eu quiser cortá-lo, você pode ver que eu posso cortar este recipiente. E eu também posso mover essa imagem assim. Espero que não tenha destruído esta imagem. Phil está colocando sua imagem e como você pode usar este lugar. Ferramenta de imagem dentro de Sigma. Espero que tenham gostado desta lição. Vamos passar para a próxima lição. 10. Ferramenta de lápis de comentário: Esta é a última parte das suas ferramentas de invenção, e eu vou compartilhar com vocês algumas das ferramentas que deixamos aqui. Por exemplo, esta ferramenta de lápis. Então temos esta ferramenta de mão e disco um mental, embora estes não são muito úteis. Mas se você clicar nesta ferramenta de lápis, você pode ver que você pode desenhar o que quiser. Então, se você tem um tablet ou dispositivo de mesa Ben, você pode assinar facilmente, ou aqui você pode facilmente identificar áreas de design como esta. Aqui, você pode usar o que quiser. Você pode desenhar livremente nesta tela. Estas são quase minhas assinaturas estavam aqui, e isso é tudo sobre ferramenta de lápis, então você não precisa se preocupar com isso. Então, se você quiser mudar, você pode clicar duas vezes, e você terá diferentes opções como aqui, assim, e você também pode aumentar seu salto para que você possa ver que estas são quase minhas assinaturas. Não é muito perfeito. Mas se eu tivesse uma caneta, que eu vou comprar em um futuro próximo Aiken, use algo assim para que eu possa desenhar fatores. Tudo o que eu quiser, eu posso desenhar um pouco. Você pode ver desenhos animados ou algo assim. Então isso é tudo sobre este lápis para então nós temos essa alça que vai mover coisa, qualquer lugar que você quiser. Então vamos voltar para mover Tool, que é V E se você quiser ir rapidamente para esta mão para você pode pressionar ou segurar sua barra de espaço assim e agora você pode se mover. Então esta é a tecla de atalho para esta barra de espaço de imprensa da ferramenta manual, e você pode se mover em sua tela. Da mesma forma, temos esta ferramenta de comentários e você pode adicionar seu show de comando aqui. Isso é basicamente por exemplo, eu amo sua natureza doentia. Eu vou adicionar um smiley ou aqui Smoochy e mais para que você possa ver nesta seção de comentários eu estou vendo que um comando de mim e endereço residencial. E você pode ver que este é o meu nome em poucos segundos. Eu amo suas assinaturas. Então, se você tem uma equipe inteira, eles podem responder de volta e eles podem dizer isso realmente, ou algo assim. O que quer que você eles queiram no comando aqui. Então, isso é que você pode dizer, uma ferramenta de colaboração um pouco fora para colaborar em seu design e melhorá-lo Então estas são as outras ferramentas aqui. Mais algumas coisas que eu acho que esqueci, é que se você passar por aqui no retângulo, por exemplo, eu desenhei um retângulo E se eu puder desenhar elipse aqui e se eu sobrepor estes, eu posso tirar os dois fora eles. Estou selecionando-os clicando em shift, shift, mantendo pressionada a tecla shift e clicando em ambos. Então vamos diluir este. Além disso, este também este. Então aqui temos duas formas diferentes. E se eu quiser combiná-los, você pode ver que temos diferentes opções aqui. Seleção da União. Então agora eles são combinados e eles são uma forma aqui como esta. Ainda assim, você pode se dirigir a eles. Você pode clicar aqui, clique duas vezes, e você terá que moldar na união. Você pode movê-los, por exemplo. Eu quero tê-lo aqui. E eu, por exemplo, queria duplicá-lo. Quero ter outra forma como esta. Eu realmente pressionei e segure minha tecla de opção arqueiro para duplicar estes. Então, clique nisso. É como esta opção de imprensa e segurar Arden. Você terá o Bellerose e você pode ter algo assim. Então você pode ver que este é um sindicato fora desta nave. Da mesma forma, podemos ter seleção de assunto. Então agora você pode ver todas as elipses superiores que eles subtraíram deste retângulo aqui. Então nós temos isso exclui seleções ou o que quer que esteja, hum, sobreposto. Vai ser excluído. Então, por exemplo, as áreas sobrepostas, elas serão removidas. Você pode ver onde aqui. Então você pode ver agora essas áreas sobrepostas foram removidas. Para entender esta seleção de intersect, vamos ter novas formas. Então, vamos deletar este. Temos um retângulo aqui. 2º 1 mais aqui, o que vai ser um pouco mais escuro. Isso é como um barco fora deles. Inspecione o Intersect. Então Intersect é realmente o que é comum dentro deles e tudo é removido. Assim, a área comum vai estar no final e tudo vai ser removido. Então é assim que esta combinação ou esta ferramenta sindical realmente funciona. Se você tem alguma pergunta ou não entendeu nada, você pode sempre me perguntar. Vamos passar para a próxima lição. 11. Preencher cores e usando gradientes no Figma: neste vídeo. Vamos olhar para este sujeito aqui, e vamos explorar diferentes maneiras de usar este campo. Como você pode usar cores diferentes como solar, chuva linear, diamante angular, uma imagem. E não vamos olhar para esta imagem que já discutimos Stared. Então, , vamos começar criando um retângulo aqui e vamos criar uma elipse aqui. Então, estou segurando o turno. Vamos usar uns 300 cantos como 16. Ou aqui e agora você pode ver que o arquivo Phyllis C. Quatro c quatro c quatro. Esta é a sua capacidade. Quanto as cores devem ser transparentes ou norte, algo assim. Então, se eu tentar usar, por exemplo, como esta cor aqui e eu tentar adicionar outro campo e eu quero que ele seja, hum, alguns ingredientes como este e vamos mudar a cor para este, então a parte inferior Um vai ser um assassino. Em seguida, use esta cor, ou agora você pode ver o topo é realmente um int ganancioso. Então, se eu tentei, quando eu clicar aqui, ele diz linear. Então aqui temos cor sólida do que temos linear Quênia tem dois pontos para fora desses pontos aqui, que na verdade vai mostrar onde a sculler vai parar e começar. Então esta cor vai começar a partir daqui. Se você quiser adicionar mais um, você pode clicar aqui assim e você pode usar um pouco de cor como esta. Por exemplo, se você quiser dedo do pé, mude-o e você também quer mudar o topo aqui, por exemplo, assim e você quer que o fundo fique muito escuro. Você pode usar algo assim. Agora você pode ver que estamos usando um ingrediente linear em cima desta cor azul. Se você quiser destacar isso mesmo ver, tentamos aumentar sua capacidade. Vai mostrar mais abaixo deste Grady. Então isso é meio como um tipo verde C de radiante. E você pode sempre você também pode esconder e mostrar. Por exemplo, você tem que se sentir assim. Posso adicionar quantos preenchimentos quiser, por exemplo, quero adicionar um rádio. O rádio vai ser destruído. Então, para radiante, vamos usar este aqui. Então é que eu usei radial e você pode ver agora ele tem apenas regular e, em seguida, ele tem er vital ou transparência de um lado. Então, se você clicar aqui, você pode ver que temos duas configurações. Uma é esta cor. Uma delas é essa capacidade. Então, para cada ponto fora das cores, você pode ter duas coisas. Por exemplo, se eu tentar aumentar a opacidade, você pode ver agora que temos Ah, cor radial com o limite é realmente um pouco transparente e dentro é uma escolha. Então você pode criar muitos efeitos como este. Por exemplo, se eu tentar usar algo assim e eu tentar usar a cor branca aqui, você pode ver que temos esse tipo de efeito fora. Você pode ver assim fora é branco, que está se misturando com este fundo. E lá dentro está o assassino para que possas ter mais paragens. Por exemplo, se você quiser mudar a cor nesta seção aqui, por exemplo, como este, você pode ver agora o que está acontecendo aqui. Da mesma forma, você pode alterar a opacidade deste dedo. Então agora eu estou tentando mover as circulares e há espaçamento. Vamos diluir este. Então eu sou. Eu selecionei esta unidade tem limite pressione excluir, e temos uma cor ido. Agora você pode ver que isso está bom. Da mesma forma, para este, vamos remover o verdadeiro. Vamos usar linear agora. Um monte de coisas que você pode fazer por aqui. Por exemplo, se você clicar neste linear, você pode mudar a direção desse int creedy assim. Então, se eu tentar mudar a direção, eu posso mudar a direção como esta cruz de imprensa e você pode ver aqui que temos outro. Então o que eu não vou fazer é remover essa desculpa. Escuro aqui, Onda, vamos aumentar a opacidade desta seção ou aqui. Escuro aqui, Onda, Vamos tentar o dedo do pé. Mova-se assim. Próximo. Mova as cores, assim. Troque esse dedo do pé algo assim que o arrasta um pouco mais. Então temos menos cor para esta gota ou este, uh, ponto aqui. Então temos três pontos para os pontos do assassino. Então isso é que você pode criar botão de download como esse e cor branca aqui. Da mesma forma, você pode fazer o mesmo por aqui. Se você quiser criar algo para estes, uh estes textos aqui, você pode fazer o mesmo. Então troque assim. Agora você pode ver que temos muitas opções. Você pode adicionar como muitos se sente um quente mesmo no texto aqui, mesmo para essas formas. Aqui você pode agir 234 Qualquer que seja o efeito que você deseja criar, você pode criar um semelhante para o rádio. Você pode ter esse tipo de coisas para angular. Principalmente não precisamos disso. Mas talvez se você quiser usar, você pode ver que você está aqui. Isto é e será? Na verdade, cria algo assim, o que não precisamos. Talvez em algum carro interfira ou algo assim, podemos precisar que seu diamante vai ter algo assim. E o último é a imagem. Já discutimos este assunto. Então, estas são diferentes opções de cores são diferentes. Opções Phil aqui. Você também pode criar estilos para essa sensação. Por exemplo, eu tenho isso um int ganancioso aqui. Vou clicar aqui e usar a tela, Ian, Ian, e guardá-la dentro do ingrediente em segundo lugar ou algo assim. Então, se eu tentar usar qualquer um do retângulo eu posso apenas clicar aqui e pressionar isso e isso vai ser aplicado a este retângulo aqui. Então isso é tudo sobre cores e ingredientes diferentes e como você pode usar diferentes INTs creedy , efeitos diferentes, por exemplo, este fundo transparente. Você pode fazer com que ele se misture com o fundo aqui para usar a mesma cor que o plano de fundo . Você pode ver se nós movê-lo para dentro do retângulo colorido aqui, ele vai mostrar seu limite, mas em um fundo branco, ele não vai mostrar. Então isso é tudo sobre cores. Se tiver alguma pergunta que queira me fazer, pode sempre me perguntar. Vamos passar para a próxima lição. 12. Botões de gradientes: Agora você aprendeu tudo sobre brilho, Phil cores Tudo. Agora é a hora de sua tarefa em sua tarefa é que você tem que criar uma carga linear . Lini Ingrediente Fardo Como este eu criei e sempre mencionei seu nome que Grady na Grã-Bretanha por Sarah por Julius ou qualquer que seja o seu nome, porque é mais fácil para mim, você sabe, feedback. Dê feedback para que seja mais fácil para mim dar feedback. Então Gedeon Grã-Bretanha criar dois botões com todas as cores que você gosta. Eles devem ter algumas cores que o texto é visível neles. Então não tente criar um fardo. O foram o texto é difícil de ler. Então esta é a sua próxima missão. Brilhantes fardos por você. Então estou ansioso para ver esta tarefa. Você pode ver isso na tela, certo? Barulho? Eu não há nenhuma explicação necessária, então certifique-se de criá-los e eu estou lendo para sua tarefa. Então comece a ler agora. 13. Como usar máscaras no Figma: neste vídeo, vamos aprender sobre Sigma e como usamos diferentes mesquitas e técnicas de mascaramento e sigma. Então mascarar é basicamente você tem um recipiente como você pode ver este retângulo. Este pode ser o meu contentor e todos os elementos. Por exemplo, imagens ou botões. Eles vão estar dentro deste contentor. Então, se algo é maior do que este recipiente, ele vai ser cortado. Por isso, não vai aparecer fora deste contentor. Então, para entender melhor este exemplo, vamos arrastar e soltar uma imagem ou aqui. Então vamos pegar essa imagem e deixá-la aqui. Então isso é muito grande. Então eu vou segurar minha chave do navio e ter um pouco de tamanho aqui. Você também pode dimensionar rapidamente usando algo assim ou aqui. Então agora temos essa imagem, e aqui temos o contêiner. Então a contenção é na parte de trás e a imagem está na frente para criar uma mesquita. Nós vamos selecionar os dois, então vamos selecionar e arrastar alguma seleção ao redor deles. Então ambos são selecionados e vamos pressionar controle de arte, controlar todos M ou opção de comando e criar uma mesquita. Então você pode ver agora que criamos a mesquita com sucesso. Agora, se você olhar para ele aqui para que você possa ver que esta é a nossa imagem. Este é o nosso retângulo. Esta é a nossa mesquita. Então, se você tentar selecionar este contêiner e movê-lo ao redor, você pode ver que ele vai revelar a parte da imagem que estamos realmente usando. Na verdade, estamos alinhando esse retângulo, então é como um portal. Você pode ver que é uma fronteira onde você pode ver as outras dimensões alimentos de qualquer maneira, Então é assim que estas imagens. Então, se você quiser expandir esta imagem, você tem que selecionar esta imagem e você tem que habilitá-la assim e nós vamos jogar set aqui assim. Então, se você trabalhar este retângulo ou este recipiente ou este realmente este dedo do pé mesquita, tem algum arredondamento. Vamos criar 80 erros. Então temos muito bom este próximo, como este. Oops. Então nós temos esta mesquita, esta aqui, então nós vamos selecionar os dois fora deles para movê-los por aí assim. E se quisermos um grupo, podemos agrupá-los dentro de um grupo toe ter este grupo simples para que não queremos ver uma seleção muito grande o tempo todo. Então é assim que se cria mesquitas. Então agora você vai adicionar uma mesquita. Então temos esta mesquita. Você já viu que quando é como este, eu posso mudar o tamanho dele assim. Eu posso mudar a posição fora da mesquita e também se eu quiser mudar o tamanho da imagem aqui. Então, se eu quiser que o Toby diminua, eu vou selecionar esta imagem e eu estou indo para o dedo do pé. Torná-lo menor, assim, assim. Da mesma forma, se eu quiser mudar esses cantos, vou usá-lo desta vez. Então é assim que na verdade você criar mesquitas são têm recipiente para criar diferentes tipos de projetos, onde você está indo para esconder o resto fora da porção agora, Da mesma forma, você pode ter outros elementos para na mesquita. Então, se eu tiver um fardo, por exemplo , como este, vamos criar um botão rapidamente. Então nós temos este botão, há grupo ele. Vamos, G, Bt dentro E eu queria estar dentro deste retângulo ou dentro deste recipiente. Então eu quero ter o meu botão dentro desta mesquita. Então eu vou arrastá-lo até aqui e soltá-lo aqui logo acima deste retângulo. Então agora você pode ver este addle estendendo-se a partir desta imagem, incluindo este botão e este retângulo. Então mostra que estas são as coisas que estão dentro deste recipiente. Então agora você pode ver que eu não posso ver o meu botão porque ele está fora do recipiente. É como um portal do meio. Você pode ver o outro lado. Mas se algo estiver fora dos espelhos, você pode vê-lo, então você tem que movê-lo. Então, estou tentando movê-lo para cá. Então você tem que movê-lo para dentro deste recipiente assim. E agora você pode ver que está por trás dessa imagem. Então eu vou movê-lo para cima agora. Você pode ver que está dentro desta mesquita e dentro deste recipiente. Esta mesquita deve área. Então, não. Se eu quiser movê-lo ao redor, Por exemplo, Eu quero dedo do pé esconder o lado direito deste botão. Posso fazer isso assim. Esta é a outra ponta deste fardo fora do meu contentor, por isso não consigo vê-lo. Então esta é na verdade a técnica de mascaramento e, ah, isso vai ser muito útil em seu projeto. Eu uso principalmente sempre que eu importar e imagens. Eu uso um dedo retangular mascará-lo para que eu possa facilmente controlar sua posição. É Ilya o quê? Quero mostrar o que quero esconder. Então este é um conceito muito importante. Espero que você tenha entendido esse conceito de mascaramento e como usá-lo e como ter muitos elementos dentro de uma mesquita. Vamos passar para a próxima lição. 14. Imagens de Masking de: você já aprendeu como as coisas mesquita. Então, agora é a hora da sua missão. Então agora eu vou te dar uma tarefa, dedo do pé, mesquita e objeto ou qualquer imagem, e você vai criar algum texto introdutório sobre você que eu tenho quatro cuidados ou eu amo assistir desenhos animados inimigos ou eu estou muito ocupado ou eu sou uma enfermeira por profissão ou o que quer que esteja em sua mente. Então, quaisquer que sejam seus hobbies, ou você faça ou você que seu amor é sobre, você tem que compartilhá-lo comigo e usar sua própria imagem. É melhor que nos apresentemos. Então deixe-me mostrar a minha pele o que eu criei. E eu também vou te dar algumas dicas sobre como criar o mascaramento do. E quais são os problemas que você pode obter. Então vamos fazer o dedo sobre as telas agora. Agora você pode ver aqui eu criei duas telas. Esta é uma mesquita personalizada. Eu criei uma forma aqui, e eu inseri minha imagem dentro, e eles estão dentro de um grupo. É sempre melhor que você agrupe seu grupo, seus elementos que foram mascarados. Caso contrário, o estigma vai continuar adicionando coisas neles. Então, sempre que você começar com isso, você pode criar algo assim. Você pode usar uma elipse aqui, desenhar uma elipse com a tecla Shift pressionada, arrastar sua imagem para dentro dela. E assim, por exemplo, deixe-me desenhar em arrastar isso você pode ver Não, eu tenho uma imagem cada alcatrão em meus lábios. Vou selecionar as duas elipses na mesquita inferior. E eu vou mover isto para dentro disto aqui assim. Então isso é fácil. E sempre tente o dedo do pé, crie um grupo, por isso é mais fácil. Gerenciá-los. Então este é um dia agora. Se você tentar criar uma forma com o pêndulo, por exemplo, eu tento criar uma forma como esta, e eu quero inserir uma imagem dentro. Há um truque que você pode ver aqui. Não há nenhum Phil aqui, então tente adicionar Phil primeiro. Caso contrário, sua imagem não vai preencher isso. Então vamos trazer isso de novo. E aqui temos. Vamos como água fora da mesquita, e agora você pode ver que eu criei uma mesquita muito personalizada com a forma personalizada aqui. Então lembre-se sempre que Tente preencher sua forma vetorial antes de fazer algo assim. Então este é o exemplo. Então comece com o seu nome. Bem-vindo, John ou Sarah ou seja lá qual for o seu nome e depois descobrir a classe e algo sobre você. Como se eu assistisse muitos jardins inimigos. Principalmente ultimamente re superpoderes amor para explorar todos os tipos de projetos. Até eu gosto de explorar o seu design ou qualquer tipo de design. Três d ou eu amo o dedo do pé vê-los lavá-los. E eu tenho quatro filhos e trabalho independente dos últimos 10 anos. Esta é a minha introdução simples, e você pode ter um botão muito usos. Vamos começar ou ser humildes. Sempre o que você acha que é a palavra-chave da sua vida. Então esta é a tarefa de mascarar. Então certifique-se que você criou eu vou continuar procurando por sua missão. Ok? Então, como submeter esta missão? Você tem que clicar neste quadro de arte. Você tem que ir para exportar. Clique aqui, e isto é por aqui. Exportar iPhone Bless. Então, não, eu vou exportá-la para a área de trabalho. E esta é a imagem que você vai enviar. Então, ok, então esta é a imagem. Então isso é Você pode ver que esta é a imagem, e isso é você tem que fazer upload e como uma tarefa, que eu possa facilmente me relacionar. Ok, então estou ansioso pela sua missão. Não submetida. Vamos começar esta mesquita em missão. - Não. 15. Criando estilos reutilizáveis: neste vídeo, vamos falar sobre isso. Deve telhas que vão ser nossas cores, ensaios e têxteis que você pode usar uma e outra vez e fácil re aplicar a outros elementos de texto ou outros botões ou qualquer coisa que você tem. Assim, também podemos criar efeitos diferentes. Então deixe-me mostrar-lhe fazendo algo para que você possa ver que eu usei foram aqui quatro cores. Então, se eu selecionar este retângulo, esta é uma cor de preenchimento Então como eu posso usá-lo novamente e novamente Então eu estou indo dedo do pé clique aqui Isso é chamado de estilo e eu vou clicar aqui, criar estilo Então uma vez que eu tenho isso, eu posso renomeá-lo como aço eu sou azul algo assim e eu vou ter um estilo aqui Então se eu pairar sobre ele ele ainda mostra azul. Da mesma forma, para estes eu vou criar nomes diferentes Segunda cor laranja re Então temos este primário azul escuro e vamos criar outro azul Primário. Então agora você pode ver que temos quatro esforços de cor sobrecarga. Estes são o estilo da nossa equipa. Portanto, estes não são locais para este documento. Então, esses são nossos estilos de design locais que podemos aplicar neste documento. Então este é o nosso projeto agora. Esta é a página de treino, na verdade. Então temos quatro colas julgamento, para que você possa ver como podemos aplicá-los Fácil. Deixa-me mostrar-te. Então eu estou saudando retângulo também lábios aqui e eu vou para ir em vez de ir para preencher eu posso eu estou indo para ir. Existem duas maneiras, na verdade, então vá para o estilo e selecione as cores que você quiser. Por exemplo, eu quero essa cor de forma semelhante. Por exemplo, estou criando um fardo. Então eu tenho que estrita ângulo por aqui. Este é um bom, mas e tudo se aplica a ele. Ele existe. E eu queria ser assim. Então isso é muito fácil para mim. Eu não quero me lembrar disso e você pode ver aqui que temos azul escuro primário. Então, o principal é a reutilização, por exemplo, apliquei a mesma cor. Então, este retângulo como este E se eu quiser mudar a cor e eu quiser que ele seja outra sombra deste azul? Então o que eu posso fazer aqui é clicar aqui e então eu vou clicar neste estilo de edição. E aqui temos a opção dois cadeia de descoberta, por exemplo. Eu queria o Toby, , vamos ver esta capa. Então agora você pode ver o nosso azul escuro primário é totalmente diferente. Certo, então vá até aqui. Você também pode ir a partir de você também pode ir dedo mudanças a partir daqui, então não gostei deste quadro e ir para estilos locais e você pode clicar nas configurações e vamos mudá-lo de volta para algo muito escuro como este. Então aqui temos a cor, tamanho e como podemos editá-los e como podemos reaplicá-los e qual o efeito que ele terá. Então, por exemplo, se eu quiser que ele seja algumas outras cores Então, se eu clicar aqui, você pode ver que ele me mostra todas essas cores. Não posso viciar nem mudar de cor. Não estou aberto todas as cores. Então, se eu quiser voltar então eu tenho que clicar aqui d estilo morto. E agora você pode ver que eu tenho meu preenchimento de volta para que eu possa mudar sua cor para qualquer coisa, e ele não está preso dedo do pé. Estes dois elementos são estes dois testes de cores. Agora vamos aprender sobre têxteis. Então aqui você pode ver que eu tenho este título. Tenho este parágrafo de texto. É normal. 18 porcos, Ils Roboto, morrer cara. E esta é a Roberta Light 64 fotos. Posso aumentar o tamanho de 72 se eu quiser. Oh, e este é o meu rumo agora. Eu também posso criar o mesmo estilo. Você pode ver o mesmo botão aqui. De volta para cá. E eu vou ter que ir para grande ou para 72. Isso seria fácil para mim lembrar. Da mesma forma, aqui, eu vou tê-lo. Ah, melhor gráfico 18. Então isso significa que 18 porcos é o tamanho do parágrafo e você pode ver que eu tenho que têxteis aqui. Então, sempre que eu quero um novo texto aqui, por exemplo, eu estou digitando algo sendo então eu queria ser um título. Então, eu vou apenas ir até aqui, clique sobre isso e apenas desmoronei meu esconderijo 72 e eu vou ter todas as configurações que eu fiz aqui. Agora, se você quiser editar este estilo, por exemplo, por exemplo, eu já criei um estilo e eu quero mudá-lo então a coisa é que você tem dedo do pé klik em qualquer lugar por aqui, ou você pode simplesmente não gostar de nada que é a maneira mais fácil. E você pode apenas clicar sobre isso e eu vou mudar para, digamos preto e eu vou ter 64. Vamos usar algum outro para, por exemplo, como este. Esta é melhor, e acho que não tem um traseiro. Então vamos usar pesado. Então, um, bordo. Então isso parece bom. Então você pode ver que é assim que você muda seu estilo para que você possa sair desse osso. Rio, você pode selecionar este. Clique neste, vá para este ícone. Então isso é um pouco, uh, você pode ver um caminho um pouco maior para viajar. Eu gosto desse jeito. Então eu simplesmente não gostei e fui a partir deste estilo local e mudá-lo aqui muito parecido com esses assassinos e esses títulos ou esses têxteis. Você também pode criar outros estilos. Por exemplo, eu quero ter. Vamos separá-lo, e eu vou criar um ingrediente linear. Agora é assim e eu vou mudar a cor para este dedo do pé. Aumente a opacidade. Então não, nós criamos aqui e selecione disco radiante e novamente eu vou para estilos e vamos barba, ingrediente ou aqui. Então eu tenho o meu ganancioso em estilo semelhante a este. Então, se você quiser se candidatar a este, eu vou clicar aqui e este é o meu fundo com ingrediente. E vamos adicionar mais algumas coisas aqui. Por exemplo, quero desanexá-lo e quero alguns efeitos. Por exemplo, eu quero sombras aqui, então eu vou ter sombra solta, e isso vai ser um pouco mais escuro. Shadow que usou algo assim e eu vou ter sangue de 50. Vamos reduzir para 30. Exclusivo para 25 35 Olhando bem. Vamos descer um pouco. 6 18 Agora criamos a sombra. Vamos limpar o estilo para isso. Temos sido muito bom estilo e clique neste mesmo ícone mais para criar um estilo. Então este é o nosso, ah, drop shadow 4 botões, algo assim. Então temos outro estilo. Então, se formos para fora dos escândalos e clicar aqui, você pode ver não, nós temos um fato estilos cor, tamanho e têxteis. Então estes são diferentes tipos de estilos que você pode experimentar aqui, e você pode reaplicá-los para qualquer que eu acho que você quiser. Por exemplo, eu vou para esses efeitos e assim e nós temos essa sombra, eu não quero lembrar os valores dessa sombra uma e outra vez. Então este é um conceito muito bom em qualquer e poderoso conceito de estigma. E eu realmente amo como eles têm usado esses efeitos estilos, cores, testes e têxteis locais separadamente. Então eu espero que você tenha entendido o conceito fora do estilo e como reutilizá-los. Vamos passar para a próxima lição. 16. Painel de efeitos no Aplicativo Figma: neste vídeo, nós vamos aprender diferentes efeitos fora do seu design e como você pode usar o painel de efeitos de tese no lado direito sempre que você estiver projetando usando o produto. Então, quatro coisas que vamos criar uma é esta sombra muito leve, assentar sombra em torno dela, muito pequena sombra em torno dela. Então temos outro, que vai ser uma sombra muito suave e gasta. Então nós temos este efeito três D, e nós temos este efeito embutido, a mesma coisa que eu fiz quando eu comprei meu primeiro você um curso de design com loja de fotos, Então eu estou fazendo isso em lema figo. Então estes são os quatro efeitos que vamos criar. Então, primeiro, vou remover todos esses defeitos daqui para mostrar onde eu comecei, na verdade. Então, aqui temos elementos simples. Branco simples. Agora você pode ver que uma coisa é comum. Eu tenho um fundo de cor clara. Isto é muito importante. Sempre que você está tentando ter alguma sombra, você tem que ter alguma luz colorida, fundo colorido pico. Isso vai funcionar muito melhor agora. A primeira coisa que vamos fazer é criar esta sombra aqui, que vai ser uma sombra muito que você pode ver muito expandida, muito turva sombra. Então pressione este passaporte e temos uma sombra simples que se parece com isso. Isto não parece muito bom, por isso vamos melhorá-lo. Então, para as opções estavam indo dedo do pé, venha aqui. Então temos essas opções X valorizam o movimento fora da sombra no lado direito. Então ele vai se mover para tentar pressionar cinco por aqui. Você pode ver que está se movendo. O valor da destruição é de cima para baixo. Então, se você quiser ir para o fundo, é assim que você pode fazer isso. Então, aumente o valor do vie para mover a sombra na parte inferior. Se quiser, mova o outro lado. Você vai usar menos cinco como este e menos 15 como este. Então, isso é legal de volta. Certo, então sangue é o quanto borrado deve estar. Então ele vai ter algumas bordas suaves. Então, se você tentar aumentar o valor do sangue, ele vai se tornar mais suave. Então a primeira configuração que vamos fazer é eu vou usar X um. Então eu vou me mover um pouco ou aqui que eu vou usar o sangue 32. Então eu queria ser muito suave como a sombra e o viral. Você será ele. Então eu quero movê-lo um pouco para baixo. Então eu quero menos sombra no topo. Um pouco mais aqui. Então eu vou usar 20%. Não quero que sejam sombras muito duras. Então eu quero torná-lo macio. Estou a reduzir a opacidade 20%. Agora você pode ver que está ótimo. Agora, a última coisa que você pode fazer é mudar esta cor de preto. Então, a mesma cor fora deste fundo. Então eu vou clicar aqui, e eu vou movê-lo por aqui. Agora você pode ver novamente quando eu selecionei a cor Ele foi novamente 200%. Então eu vou usá-lo para 30% agora. Você pode ver que isso está parecendo muito bom. Sombra suave. Vou lhe dar tarefas para fazer algo assim. Muito agradável. Muito limpo, muito criativo. Você pode ver aqui agora, mesma forma para este, vamos usar algumas outras configurações. Então, novamente nós vamos para cair sombra. Você pode ver que temos mais opções em uma camada de sombra, fundo desfocado. Mas agora estamos indo com sombra e em uma sombra vai ser o próximo. Então agora nós estamos indo para Jane as configurações então x será zero sangue vai antes eo valor vie será sobrevivência será também. Portanto, queremos isso muito perto do nosso anterior e isso vai ser 15%. E o assassino que vamos usar Lex usa essa cor e eu vou reduzir sua capacidade para 20% assim. Então esta é uma cor um pouco diferente para o fundo, um pouco azulada. Este é um pouco azul esverdeado, mas olhou para ele. Ele está olhando criar no topo fora deste fundo. Então isso é muito suave. Feche a sombra. Se você quiser mudar a cor um pouco. Quer uma sombra mais escura? Você pode ir nesta área mais escura. Se você quiser alguma sombra mais clara ou efeito baseado em luz, você pode ir nesta seção. Nós estamos aqui. Você pode ver Se você olhar de perto para a esquerda, você pode ver luz, escuro, luz, escuro, luz, escuro. Então eu vou com este para ele. Agora, vamos para isso dentro do efeito inset. Então, clicando nisso e se clicarmos em efeitos, queremos que o dedo tem que realmente efeitos. Um deles vai estar na sombra. Então, uma vez que usamos em uma sombra, você pode ver que ele já tem um interior de efeito inseto não. Em Ha é este efeito, eu vou ampliar para mostrar a diferença. Então isto é realmente o seu interior, e, uh, é chamado de efeitos. E eu posso usar 20% aqui, e eu vou aumentar para baixo um pouco. Desculpe-me. Três ao norte, abaixo um pouco acima. E agora vou usar outro efeito, que vai ser a minha sombra. Agora, esta sombra não vai ser escura aqui. Quando algo é peito, haverá uma sombra clara sobre isso. Aqui nesta área, a luz vai cair neste fundo aqui. Deixa-me mostrar-te o que quero dizer. Então vamos ter um sangue de sombra. Vamos reduzir o borrão a zero porque não queremos que ele se desfoque. Por que vai ser divertido? Queríamos estar apenas junto com estas linhas. Ou aqui deixe-me ampliar um pouco mais. Você pode ver esta grande linha ou aqui. Não, não queremos que isso seja ótimo. Vamos usar uma linha branca aqui agora. Se você ampliar, você pode ver que há uma linha branca. Vamos diminuir um pouco. Há uma linha branca ou aqui. Então deixa-me mostrar-te. Vamos aumentar a capacidade 200% porque você não pode visualizá-la. Agora você pode ver que temos uma linha larga aqui que vai melhorar nosso efeito interno . Então aqui temos um botão perfeito no set. Nós usamos alguns fora em uma sombra. Você também pode usar este quatro e nós temos uma sombra, que vai ser uma luz branca aqui sobre isso. R. Então isso vai completar o seu efeito de visão agora, chegar a este tratado efeito tratado é muito simples. Vamos criar um efeito. Sombra solta. Será e nós vamos reduzir o borrão 20 Agora você pode ver isso se torna sólido. Não, vamos usar a mesma cor neste botão e vamos nos mover para esta seção mais escura ou aqui. Então vamos usar, por exemplo, este que é tudo o que precisamos para um fardo de três D. Você pode ver se você quer aumentar o seu ah, tratado nous ou sua sombra, você pode aumentar, por exemplo, ir para seis. Você pode ver agora que parece um pouco mais tratado. Então é assim que você usa efeitos diferentes quando você tenta ser uma sombra diferente em insetos efeito quando você está tentando usar figo MMA. Agora vamos estudar os dois últimos efeitos que são o borrão e o fundo da Caçadora. Se você clicar em seu sangue, você pode ver que este santo é realmente desfocado e você pode mudar o sangue citando, por exemplo , 15 ou algo assim. Então, se você quiser borrar camada, será algo como isso, que é muito fácil, muito fácil de entender o conceito deste sangue Lear. Agora a última coisa é, vamos estudar o sangue de fundo. Agora, por exemplo, eu quero este item e eu quero tudo em cima. Se ele, por exemplo, eu tenho um retângulo aqui e ele está escondendo toda esta tela, por exemplo. Esta é a tela inteira, então eu vou adicionar o efeito de Borrão Bagram. Agora você pode ver que nada está desfocado. Assim que você tentar o dedo do pé, reduza a opacidade do seu preenchimento aqui, por exemplo, eu quero ser 50%. Você pode ver que o fundo por trás deste regular é realmente desfocado. Então, se você quiser mudar o sangue, você pode aumentar o sangue. Você pode ver agora que está mais borrada e, hum, não visível, na verdade. Então, se você tentar usar a cor branca, nosso cabelo, algo assim, você pode ver que isso é realmente borrão de fundo. Então, se você tentar colocar algum texto aqui, um, eu gosto muito disso. Então ele está realmente voltando. Eu queria estar no topo deste fundo, algo assim. Então você pode ver sempre que eu tento mover isso isso está indo para o dedo do pé, ter um efeito borrado. Isso vai acontecer se você tentar movê-lo ou rolá-lo. Vai ter algum efeito como este. Então esse efeito foi visto pela primeira vez em dispositivos IOS? Acho que sim. Isto é realmente como você pode usar o fundo. Não se esqueça de reduzir a opacidade da sua cor de preenchimento aqui porque não vai funcionar sem isso. Então, se você tem algum cenário como este, não vai funcionar. Então tente usar 80% 70% 50% ou o que parece bom para você. Então estes são todos os efeitos que eu já lhe mostrei. Se você tiver problemas para entender esses efeitos para me fazer perguntas e espero vê-lo em breve na próxima lição, até então, tomar o seu e por 17. Projete ► usando efeitos de camada: Agora, Sua próxima tarefa é que você está indo para criar esses três botões com o fato de sombra com três efeito D com inseto ou efeito pressionado. E quero que mencione seu nome no topo. Então comece a criar esta tarefa. Vou te dar algumas mãos. Estas são as minhas configurações. Se você vai para esta sombra, você pode ver que estas são minhas configurações para sombra 0 15 O valor de sangue é quatro. Spread é uma cor azul escuro para o mesmo. Este 40% azul é a opacidade fora da sombra. Então temos este. Isto está realmente dentro deste líder e então solte sombras. Você 05 é o valor vie. Então, faça um pouco para baixo, e então nós temos a cor verde escuro 100% para este aqui, nós temos que realmente cair sombras. Um é uma linha branca de 10 linhas na parte inferior, que eu já te ensinei. Este aqui e na sombra é 06 Borrão. Quatro é de valor I e cor laranja escuro para a sombra dentro do efeito do peito e 100% é a sua capacidade. Então, estou ansioso. Então, vendo esta tarefa, então comece a lê-la agora 18. Componentes na Figma: neste realmente de nós vamos falar sobre um conceito muito importante, que é chamado de componentes. Agora. Componentes são basicamente seus elementos de design que você pode reutilizá-los. Você pode alterar algumas das suas propriedades, e ainda assim você pode usá-los. Então deixe-me compartilhar com vocês o que é basicamente o conceito para que o componente possa ser agrupado fora de qualquer elemento de design, seu fundo fiscal, seu Parton, seus guardas, seu você foi projetado cabeçalhos ou qualquer coisa que você ter. Portanto, é basicamente grupo fora dois ou três elementos, por exemplo. Nós vamos criar um botão aqui, e eu vou usar as coisas Brugler aqui. E uma vez que nós selecionamos isso aqui nós temos isso em torno desta curva redondeza. Então eu vou usá-lo aqui. Então nós temos uma boa rodada, mas cabeça irritada. Agora vamos adicionar o próximo aqui. Então Presti e nós vamos ter um texto como “Senhor Não sabe “, melhor escapar e vamos alinhá-lo no meio. Um pouco aqui em cima, Jeanne, a cor branca. Então eu estou mudando o controle físico das pilhas aqui agora mesmo. E vamos adicionar o Ed aqui. Então eu já falei com alguns fora das chaves de choque. Então eu vou usar controle ou comando barra invertida dedo do pé, obter a minha pesquisa, e eu estou indo toe ícone mergulho. E aqui temos quatro ícones incríveis. Então isso é realmente Blufgan. Então eu vou morrer flecha. Então você pode ver que nós temos muitos anais aqui, então eu vou usar Não, ela era essa aqui. Então este é o ar aqui, e agora você pode ver que temos este vetor de frente e mudar seu com 22,5. Ok, então, não, está parecendo bom. Isso muda de cor para branco e vamos torná-lo um pouco maior. Então eu vou pressionar este país em proporção restrita. Então eu estou indo com o tamanho, tipo 36. Algo assim. Isso parece ótimo. Ok, então nós temos alguns dos elementos aqui. Nosso eu vou em nosso Dexter e nosso passado. Agora, você também pode aplicar alguns efeitos. Se você quiser uma camisa solta aqui, você pode ter uma sombra como esta. Então 8% de sangue x valor o movimento desta sombra. E aqui está a sombra. Por que significaria que ele vai descer da parte de trás no fundo do Lear. Então aqui temos um botão muito bom. Agora, agora mesmo, vamos agrupá-los. Então vamos grupo de controle ou comando G. Mas se você não quiser apalpar eles, isso é bom também. Então, assim como todos os elementos e nós estamos indo toe press comando todos K ou controlar todos K para criar um componente. Então vamos criar um componente. Agora você pode ver como tão bom que eu criei este componente. Você pode ver que o olho perdido aqui está totalmente mudado. Então, isso é basicamente um componente mestre mestre mestre componente é realmente o nosso principal elemento de design que está em sua forma original. Então vamos duplicar este para que você possa pressionar. agora Então,agoravocê pode ver que eu tenho um elemento duplicado no topo oferecido, então eu o arrastei até aqui. Agora você pode ver o que eu fui embora. O 2º 1 componente para é diferente, embora seja o mesmo que o componente um. Mas agora é um exemplo. Então isso é que você pode ver ou ouvir no lado direito deste chamado Isto é chamado instância. E se eu clicar aqui, não há caso. Aqui está. Ele está dizendo componente. Então, se eu clicar aqui novamente, você pode ver que temos essa pequena área de painel aqui em vez disso. Componente um. Portanto, é uma instância instantânea fora do componente um. Então, é como se você é um programador, este é o conceito de um pai e filho Em Javascript e Java, você faz classes diferentes e as mesmas propriedades. Então é como um pai e um filho. Então agora você pode ver que esta criança tem todas as propriedades pais escritório. Mas acho que isso não é bom. Então, se eu quiser mudar, por exemplo, a cor como esta, eu posso fazer isso. Ainda assim, você pode ver que é semelhante em tudo como seu pai ou experimento. Então este é o conceito de componentes. Então nós temos este componente. Assim que concluirmos criar qualquer componente, não podemos reverter. Então este componente vai estar disponível neste painel de ativos aqui para que você possa ver este quadro de prática prática e nós temos este componente de um para que você também pode renomeá-lo. Por exemplo, vou renomeá-lo Bt e baixar. Então eu vou renomeá-lo BD en download. Então, agora, se formos para os ativos, você pode ver. Então mostra bonito e download e eu posso arrastá-lo e soltá-lo e colocá-lo em qualquer lugar que eu nasci para que você possa continuar criando um monte de diferentes ativos e componentes como este. Mas certifique-se de criá-los uma vez que você está finalizado com seu design, porque será difícil. Você tem toe alterar o componente mestre para obter a mudança é feito. E se você quiser criar uma nova empresa para que eu não queira essa instância? Quero um botão novo semelhante a este. Mas eu queria ser outro componente, então eu vou clicar com o botão direito aqui e eu estou indo toe Use este comando Detach instância. Então agora você pode ver se eu vou para o painel de camadas é novamente fora do quadro para que você possa ver este quadro que eu tenho aqui componente toe Então isso é realmente no grupo. Se você clicar no grupo, ele vai sair do grupo porque nós criamos o grupo em primeiro lugar. Assim que tivermos isto, posso mudar o que quiser. Por exemplo, eu quero cantos diferentes. Então eu cliquei aqui, e eu vou usar 16 aqui e 16 ou cabelo e, uh, zelo. E, você sabe, aqui, por exemplo, digamos que eu queira um botão como este para que eu possa criar outro componente. E eu acho que isso vai ser e novamente componente mestre. Portanto, certifique-se de que, ao criar um componente mestre, mantenha as cópias em seu design e use esse componente mestre e mova-o para alguma outra página . Por exemplo, vou criar outra cadela chamada Guia de estilo. Assim que voltar à minha página, vou tirar os dois destes. Vamos criar uma cópia. Eu estou realmente pressionando e segurando Arche e opção dedo do pé chave arrastar e criar uma cópia. Então eu estou indo dedo do dedo puxado fora do controle Comando X, e eu vou voltar para o guia de estilo e distrito aqui. Então nós temos componente aqui para que você possa renomeá-los para Lord Flat ou algo assim e, hum, então nós vamos voltar. Então, uma vez que você tem aqui e você quer que algo tenha mudado alguma coisa, por exemplo, eu acidentalmente Jane a cor do dedo do pé este regular e eu realmente não gosto e eu não quero que ele esteja pronto. E quero voltar atrás do jeito que era antes. Então eu vou chutar aqui. Isto é Deus reinicializado. Instância. Uma vez que eu vou clicar aqui, você pode ver que ele diz redefinir substituições. Então, na verdade, eu ouvi apenas na cor. Então, se eu quiser anular, eu posso sobrepor os impostos também. Então eu vou digitar. Não faço o download agora. Então, agora, se você clicar aqui e clicar sobre isso ele disse substituições. Vou redefinir tudo. Portanto, o texto está indo para trás o primeiro 1 padrão. Mas um ícone tudo é redefinir o componente mestre. Da mesma forma, se você quiser abordar algo ou mudar algo para o componente mestre, você pode clicar aqui, ir o componente mestre e ele vai para outra página. Bem, na verdade, o componente mestre está residindo, então também, você pode adicionar alguma descrição aqui. Tudo o que você quiser sobre o Bond. Isso é tudo. Isso é o que os componentes são e as instâncias são e como você pode ir para o componente mestre , como você pode redefinir componentes. Estas são as 43 ou quatro coisas como, na verdade, esses componentes funcionam. E vamos falar sobre mais desses componentes sobre essa restrição na próxima lição porque eu acho que eu não quero que ele fique pronto por muito tempo. Então, isso é tudo. Se você tem alguma pergunta para me fazer, vamos para a próxima lição. 19. Usando restritas com componentes: Agora nesta lição, vamos entrar em um pouco mais de detalhes sobre essas restrições aqui. Portanto, restrições de país são basicamente limitações. Você pode se inscrever em um grupo ou componente, então deixe-me compartilhar com você como você pode fazer isso. Então, por exemplo, criamos esses componentes na lição anterior. E vamos mover o dedo ali, componente mestre aqui. Então componente mestre é realmente aquele que você está indo para mudar e aplicar essas restrições ou aqui. Assim que você clicar neste ícone para expandi-lo, você pode ver que teremos restrições aqui para cada elemento aqui. Então, como este anúncio aqui, por exemplo, deixe-me mostrar-lhe. Na verdade, se eu tentar expandi-lo, vamos expandir isso e você pode ver como isso está se expandindo. Eu não quero estender essa experiência de botão assim. Então este texto não está no meio. Isso é realmente esticado, e isso é realmente errado. Então, vamos voltar. Controlador Kamanzi E nós queremos que eu estou realmente desenvolver clicando. Então, uma vez que você clica, você vai relaxar. Este você pode ídolo pressione controle ou comando toe diretamente folga este, então você não tem que clicar duas vezes ou clicar duas vezes ou tentar ir para este elemento. Basta clicar. Eu mantenho sua chave de comando e chuto sobre ele. Então agora você pode ver que nós sentamos aqui escala e escala em ambas as direções. Então vai escalar. Não queremos que seja escalado. Então vamos consertá-lo à direita aqui,canto direito, canto direito, e assim o topo. Então vai ser consertado por aqui. Não queremos que este botão se expanda em destruição. Nós só queríamos estar expandindo na direção horizontal, nem na vertical. Então isso é dito assim. Se eu tentar expandi-lo, você pode ver Não, é. É corrigido neste canto que é marcado. Agora você pode ver isso. Este ruído dólar não fixo. Então, vamos resolver este problema. Então controle ou segure, comande seu controle e clique aqui, e nós vamos fixá-lo à esquerda. E vamos usar este centro. Estão à esquerda e ao centro. Isso é bom. Então você também pode fazer a mesma vida esquerda e inferior ou superior. Isso seria bom. Então você também pode ser assim. Então, uma vez que tenhamos dito isso, você vai ver o que é o que vai acontecer se nós expandirmos. Você pode ver o baixo ou não está no mesmo ponto onde deveria estar. E se eu tentar expandir daqui, você pode ver que este é o comportamento que eu quero ter neste espartano. Agora, a parte mais difícil de escalar ou ter restrições é para o fundo desesperado . E assim, se você clicar em um desânimo folga, é bom. Você pode expandi-lo em quatro direções, mas não queremos expandi-lo em destruição. Por isso, neste momento, acho que não é bom. Então o que nós vamos fazer é que nós vamos folgar esta sobrecarga de fundo. Isto é, na verdade, ele é definido para escala e escala. Portanto, este é o comportamento padrão. O que queremos é, na verdade, queremos escala em destruição. Você pode ver que você ouve o anual que ele está se contrair na direção horizontal da esquerda direita, e esta é a habilidade de cima para baixo. Então nós vamos selecioná-lo no sábado top e em destruição nós vamos ter habilidade. Então deixe-me mostrar como vai se comportar. Então você tem que dissecá-lo porque você está agora neste plano de fundo, então de selecionado e selecione este novamente este componente. E se eu tentar, você pode ver se eu tentar aumentar a altura, você pode ver que ele vai ficar o mesmo. Não vai expandir-se ou escalar e destruir. Mas se eu tentar expandi-lo daqui, ele vai expandir-se em destruição ambas as seções. Então este é o comportamento que eu queria com o meu componente. Então é assim que você pode aplicar restrições diferentes em seus botões em suas diferentes setas suspensas , menus, menus suspensos. Você é taxado, seus alinhamentos e tudo o que você pode ver por aqui. Este é o meu abdômen, que vamos construir no final deste curso, e você pode ver se eu vou ao estilo. Pessoal, nós temos um monte de componente Shal aqui, então você pode ver que eu tenho esses componentes aqui onde nós temos este ícone e esses ícones foram deixados e superiores. Você pode ver da mesma forma, este foi para a esquerda e o dedo superior. Embora eu ache que deveria ser aqui assim, certo e trabalho de qualquer maneira. Então é assim que realmente tudo está funcionando aqui. Da mesma forma, se você for para este, uh, este e se você clicar neste addle, você pode ver que está certo e superior. Então ele vai ficar aqui se eu tentar Toe Jane o tamanho que é mudar de tamanho deste aqui . Então você pode ver que ele vai ficar na mesma área onde eu queria estar, então você pode ver que ele vai estar no topo direito na mesma posição. Então é assim que realmente você aplica restrições. Da mesma forma, se você olhar para a receita de pesquisa, isso vai ser o mesmo. Como você pode ver por aqui. Deve estar aqui, na verdade, na verdade, à direita e por cima. Então é assim que você usa restrição em seus componentes e os aplica para ter melhor expansão ou melhores componentes flexíveis. Espero que tenha aprendido muito nesta lição. Vamos passar para a próxima lição. 20. Atalhos comuns de 1 - Figma: Neste vídeo, vamos aprender alguns dos figos comumente usados, meus guardas curtos. E nesta lição, eu vou mostrar a vocês como você pode banir ou zoom em torno de seus pés minha interface esconder e mostrar alguns dos controles. Então, vamos começar. Então, primeiro, vamos dar o pé. Olha para o Penn. Então, se você pode pressionar sua barra de espaço e segurá-la e você vai ver esta mão e você pode facilmente banir ao redor ou mover este seu quadro ao redor onde você quiser dedo do pé, este é o primeiro atalho. Agora, o 2º 1 é sobre níveis de zoom. Então você pode ver aqui você pode ver que ele está definido para nível de zoom ou 50%. E ele selecionou esta moldura. Se você quiser zoom toe 100% você está indo para pressionar zero assim pressionando zero para que você possa ver este é o tamanho real do quadro fora do quadro são placa de arte que eu estou usando. Agora você também pode ampliar o ajuste do dedo do pé para que você possa pressionar um para que você possa ver agora ele foi ampliado ajuste do dedo do pé e é 71% agora e também você pode pressionar um ou nove. Então um é mais fácil de lembrar zero para 100% 1 é para ajuste do dedo do dedo do zoom, e dois é para zoom para seleção. Então, por exemplo, se eu tiver, vamos diminuir o zoom primeiro para e você pode diminuir o zoom usando comando ou controle mais tecla menos. Então você tem dedo segurar sua tecla de controle, e junto com isso, você tem que pressionar menos menos foi Omar Plus vamos zoom em isso é muito fácil. Além disso, então eu estou apenas segurando minha tecla de controle ou comando em um Mac se você estiver em um comando Mac e se você estiver em um Windows do que a tecla de controle menos e mais. Então vamos supor que eu waas projetando neste nível de zoom e eu quero ampliar este Olá lá. Então, não, eu vou selecionar esse objeto primeiro, então eu vou arrastar e diminuir e pressionar, para não, eu vou selecionar esse objeto primeiro, então eu vou arrastar e diminuir e pressionar, paraque você possa ver agora que ele está no foco. Então, se você quiser voltar ou você tem que zoom dedo 100% ou você quer zoom para caber pressione um. Então esta é uma ótima maneira de ampliar e reduzir quando você está projetando. Na maioria das vezes, quando você está projetando, você tem que ampliar e diminuir um monte de vezes. Então esses atalhos vão te ajudar. Agora, sempre que você estava projetando você, às vezes você precisa de suas réguas para desenhar algumas das diretrizes para apoiar seu design ou você tem que alinhar algumas coisas. Então, na figa, você tem que habilitar seus governantes primeiro para que você possa ver no topo aqui ou à esquerda. Nós temos isso normal. Então vamos mudar a respiração e estamos agora. Você pode ver que temos réguas no topo e na esquerda. Então, se você quiser Oh, se você não se lembrar deste atalho, você pode ir até aqui neste menu e aqui temos turno mais R. Então você pode habilitá-lo aqui também. Então, uma vez que você tem habilitá-lo, você pode arrastar as diretrizes para aqui assim. Eles vão esfaquear dois objetos diferentes. Por exemplo, eu tenho este. Vou arrastar e soltar minhas diretrizes assim. Então este é outro atalho. Mudança são e você está indo toe habilitar seus governantes. Agora eu escondi meu governante e você pode ver que minhas diretrizes também desapareceram. Agora, se você quiser mostrar seu design para alguém e você não quer mostrar esta seção de design aqui, este painel aqui também é o painel de camadas à esquerda. Você pode pressionar e segurar sua tecla de controle ou comando junto com sua barra traseira Então controle barra invertida e você pode ver que temos escondido nosso figo Mazz você y que está em torno de nossos objetos. Então, novamente você pode mostrá-lo pressionando e segurando comando controlador mais barra invertida Da mesma forma, temos outro atalho que é barra de pesquisa. Então, se você quiser procurar algo rapidamente em figo MMA ou você quer adicionar algo tudo que você quer para pesquisar um plug in, você instalou a tecla de atalho é controle barra invertida para que você possa ver controle ou comando de tecla mais barra invertida você pode procurar, por exemplo, cada alcatrão Andi, Eu apenas clique aqui ar ITAR plug in e você pode ver aqui nós temos um nome que é Nós também podemos novamente ir para a pesquisa e nós também podemos procurar por exemplos como este conteúdo real ou empresa ganhou um monte de coisas. Há carros curtos. Há plugins. Tudo pode ser pesquisado por esta barra de pesquisa aqui, Então, este é um muito comum muito fácil de usar controlador de tecla de atalho barra de comando. Então você tem que se lembrar que barra traseira para esconder seu você eu fazendeiro barra do dedo do pé tal Agora, se você está projetando para sites ou APS móvel, você pode ter seu layout grades ou colunas aqui. Se você está familiarizado com bootstrap ou outras horas Gridley. Então eu vou rapidamente adicionar um grande aqui, Vamos adicionar concordou. E, por exemplo, temos este incrível aqui ativado. E se eu quiser escondê-lo rapidamente, por exemplo, eu estou projetando aqui e eu não quero dedo do pé, você sabe, incomodado por este credo, eu tenho dedo usar minha tecla de atalho, que é controle turno mais quatro no Windows e Control mais G no Mac controlado Shift quatro nas janelas para que você possa ver na parte inferior. Diz que a grade de layout está escondida. Isso é muito bom na marca de figo que mostra o feedback, que é muito, muito bom. Apresentar qualquer software de design. Se você é uma experiência de usuário ou familiarizado com a experiência do usuário, você sabe que o feedback é muito importante. Então comanda o G num Mac. Se você é um usuário de Mac para ocultar esse nível de layout e deslocamento de controle mais quatro, essas três teclas vão se esconder. Lee fora cria no Windows, modo que é tudo sobre alguns fora dos atalhos que estão indo para esconder e mostrar coisas diferentes enquanto você está projetando. Vamos passar para a próxima lição onde vou compartilhar com vocês algumas das teclas de atalho que vocês precisam se familiarizar. Então vamos passar para a próxima lição. 21. Atalhos comuns de teclado: neste vídeo, vamos ver alguns dos mais atalhos de teclado Sigma que são comumente usados quando você está em um quadro ou tela de desenho. Então, sempre que você abrir um novo arquivo, há muitas coisas que você pode fazer. Por exemplo, você deseja alinhar esses objetos. Então, primeiro, vamos olhar para essas teclas de atalho de alinhamento. Então você tem que selecionar dois objetos para alinhá-los. Então, uma vez que você tenha uma mentira selecionada para fora deles, você pode pressionar arte e nós para centros verticais. Não, eu vou pressionar todos e nós Então agora você pode ver que eles estão alinhados em uma direção vertical . Então, a parte de baixo estava chegando e a esquerda estava descendo, eu acho que vamos voltar Controller Kamanzi, Art e V. Você pode ver da mesma forma que podemos fazer, uh, uh, com arte e idade para centros horizontais. Então eles são centros horizontais são você pode ver aqui estes são seus centros. Então eu vou pressionar tudo mais coceira dedo alinha-los assim, por exemplo. Eu tenho isso e isso e eu quero alinhá-los ou gentilmente eu vou pressionar arte e cada um para que você possa ver isso é como você alinha objetos diferentes. E, mais comumente, usamos alinhamento horizontal e alinhamento vertical. Agora vamos olhar para alguns dos atalhos das ferramentas aqui no topo, que vamos exagerar muitas vezes. 1º 1 é um R F para placa de arte. Você pode desenhar sua moldura ou arte, mas aqui, ou você pode clicar aqui e escolher entre um tamanho pré-definido ou aqui, por exemplo. Vou usar este andróide. Não, vamos aumentar o zoom e eu vou banir o dedo aqui, e eu vou pressionar meu arco para um emaranhado ou quatro elipse, e eu vou segurar meu dedo chave do dedo do pé, tê-lo em proporção como este inferno para linha. Então, vou arrastar a minha linha. Eu estou segurando turno, por isso é direto da mesma forma para ferramenta fiscal. Eu vou pressionar o meu chá, e eu posso arrastar assim ou eu posso apenas Presti e oops, eu tenho que pressionar o dedo do pé escapar e eu tenho eu estou indo para Presti novamente e pressionar aqui. Olá, Esperanças Olá, querida. Algo assim e eu vou pressionar escape em um momento como aquele. Então é assim que você vai usar essas ferramentas aqui? Se você quiser acessar a ferramenta de gastos, você pode pressionar ser tecla de atalho e fazer algo assim, algo assim. E, hum, eu acho que isso é tudo fora das teclas de atalho, eu acho que são comumente usados. E estas são as ferramentas que vamos exagerar de novo e de novo. Agora vamos apagar este, e eu vou voltar. Estamos aqui e vamos estudar. Alguns dos mais atalhos costumavam usar muitas vezes um deles é duplicado, então eu queria escolhê-lo nesta camada, e eu quero que ele seja exatamente o mesmo assim. Há muitas maneiras primeiro você pode usar arte ou opção tecla e pressionar, e você terá um cursor duplo como este. Basta arrastar este objeto onde você quiser colocá-lo, e você pode ver que este é um duplicado. Agora você pode pressionar e segurar comando ou controle mais d tohave. Outra duplicata , será. Ele irá repetir o seu passo. O mesmo espaçamento tudo e duplicar o objeto. Não, temos três desses retângulos. Quero apalpar eles. Eu vou selecionar todos eles e vou pressionar o Comandante Controle G Grupo agora. Você pode ver o ícone aqui. Este grupo foi alterado. Tem essa resposta de marcha aqui em torno dele. Então é um grupo e todos esses retângulos estão dentro desse grupo? Não. Se quiser o Owen, agrupe a mesma tecla de atalho. Mas com uma adição fora do turno. Então, controle ou comando, mais turno mais g. Então você pode ver agora que eles estão de volta. Estamos fora daquele grupo. Esse grupo não existe mais. Ou lá agora, à esquerda, você pode ver que esta é a nossa pilha anterior. Então temos imagem no retângulo superior este retângulo azul na parte inferior três retângulos pretos e texto. Não, Se você quiser mudar a posição fora do empilhamento sem, você sabe, usando o mouse, você pode arrastá-los assim, são arrastados assim. Por exemplo, eu tenho aqui, então se eu mover meu retângulo no topo, você pode ver que o texto está atrás deste Lear então se eu movê-lo para cima, ele está agora aqui. Então isso é chamado de ordem de empilhamento. Vou mudar as cores desses retângulos para que você possa facilmente ver a diferença. E para este, vou usar branco. Agora, você pode ver que eu tenho todos esses retângulos aqui, e este é o meu retângulo na parte inferior. Não. Se eu quiser alterar a ordem de empilhamento, eu posso usar a tecla de atalho como deslocamento de controle e colchetes. Então, não, eu vou pressionar. Eu selecionei esta camada, por exemplo, esta camada, e eu vou deslocá-la para cima ou para baixo usando deslocamento de controle no suporte para que você possa ver aqui você pode usar isso vai ser no fundo. Então, se eu atacar para usar o deslocamento de controle e o registro esquerdo do colchete, ele vai descer a maior parte, um, fora de todas as camadas, pilhas empilhadas. Assim, mesma forma, se eu pressionar o registro certo ou o registro final, ele vai subir. Você pode ver ou ouvir a tecla de atalho para Mac teclado é arte mais comando mais colchete. Por isso, é o nosso suporte de comando e para o turno de controle do Windows e do suporte esquerdo e direito . Assim, você também pode remover seu turno da tecla e você apenas pressionar e segurar o controle junto com o suporte e você pode ver que ele vai mover um passo para cima, um passo para baixo, um passo para cima. Então, vou deixar o turno dentro desta de teclade atalho. Então eu vou exibir ambos os atalhos na versão Mac e versão do Windows para movimento de camada única se ele não fez a pilha e movendo-se para cima e para baixo na parte inferior e na parte superior fora da pilha usando suas teclas de atalho. Agora vamos terminar esta lição mostrando as teclas de atalho do último dedo do pé, que são mascaramento, e este componente para que você possa ver se você passa o mouse ali. Ele também mostra a tecla de atalho para o Windows. É arte de controle mais K. E para Mac, é controlar tudo para mais classificação, comando R mais chave ou opção mais chave. Então, o mesmo, tudo é igual. O comando é para Mech. Então, para criar um componente que vai ser usado de novo e de novo. Então eu vou dar folga no dedo do pé. Todos esses três e eu vou pisar aqui ou eu posso passar arte e chave de controle . E agora você pode ver que o ícone foi alterado. E é um componente agora, então você pode ver que esta é uma tecla de atalho muito boa. Vamos usá-lo de novo e de novo, se você quiser. Toe, volte, seus estados mais antigos e você quer quebrar esse componente. Você não quer usá-lo corretamente. Podemos ter muitas opções aqui? Ok. Então você pode ver ou ouvir. Tragam adiante. Traga para trás. Estes eram o atalho. As teclas são usadas seleção de grupos ou seleção de quadros. Você também pode emoldurá-los. Alisar contorno, usar como mesquita. Esta é a próxima tecla de atalho. Eu vou dizer para você controlar mais m. Então é assim que você cria um componente? Não. Se quiser mascarar algo, por exemplo, vou usar uma elipse aqui. E eu quero mesquita, esta área atrás de mim. Então este é um componente na parte de trás, e esta é a elipse no topo. Então, o que eu vou fazer é ir para o pé. Mova isto para trás. Esta está na parte de trás. Você pode ver que esta vai ser minha mesquita e a de cima vai ser o que eu realmente estou tentando esconder. Então essas porções à esquerda e à direita estarão escondidas. Então, vou selecionar os dois. Você pode ver que meu contêiner está lá atrás e minhas informações ou o que eu quiser mostrar. Meu conteúdo está no contêiner da frente, na parte de trás, conteúdo na frente. Então nós vamos folgar os dois fora deles e nós estamos indo controle de mama dedo do pé ou comando R mais M controle sobre eles. Então você pode ver agora que eles são obrigatoriamente. Então isto é Você pode ver este sinal mostra que você pode ver. O que? Aqui. Isto é pequeno. Você pode ver como a lua. Então este é este ícone. Isso mostra que isso foi mascarado. Então, esta é na verdade as nossas mesquitas. Para que possamos ver, mostrar e esconder nossa mesquita clicando aqui. Também podemos bloquear a camada aqui, e estes são os nossos componentes. Então este é o conteúdo que estamos tentando mostrar. Então, não, eu tenho uma dica muito pequena e simples para você. Então, uma vez que você está projetando e começou a projetar em figo MMA e você esqueceu qualquer tubarão . Erkki, não procure no Google. Basta clicar aqui nesta área estreita, este ponto de interrogação. E aqui temos atalhos de teclado de atalho. Assim, uma vez que você seleciona esses atalhos de teclado, quer você esteja em um Mac ou um PC Windows, você pode facilmente ver todos os atalhos diferentes são. Zoom, formas fiscais eleição causa que eles transformam, organizar e componentes. Então isso acaba com nossos atalhos de figo mais. Espero que tenham gostado e aprendido o Senhor dos cartões curtos e vão usá-los nas próximas lições. E no seu novo você pode ver projetos de design. Então, se você tem alguma pergunta para me fazer, vamos para a próxima lição. 22. Colaboração com designers na Figma: um dos recursos mais legais fora Sigma é que você pode colaborar com outros designers, viver em qualquer design. Então, se você está projetando, por exemplo, este arquivo você pode ver que você está vendo dois cursos aqui. Um está aqui, que é apenas uma mudança mostrando o nome do outro designer, que está incluído na minha equipe agora. Você pode ver aqui diz 40 meses agora se eu voltar para a equipe minha equipe, você pode ver que esta é a minha equipe do que você. Excitante. E do lado direito, pode ver que sou eu. E este é, na verdade, o meu outro olho. Mac e eu temos logado e usando outra conta usando este nome, então eu tentei mudar nele. Portanto, é mais fácil para você ver que outra pessoa está tentando mudar esse design. Você pode convidar membros clicando sobre isso em membros brancos aqui, mas você tem que vir para esta tela fora da sua equipe, na verdade, então esta é a minha equipe. E se voltarmos, deixe-me voltar. E, por exemplo, vocês podem ver que estas são as mudanças que estou tentando fazer. - Não. Se eu tentar mudar algo no meu I, Mac, ou tentar mudar o movimento, o cursor que você pode ver. Agora está mostrando que o Fatma ou o outro designer está tentando mudar algo. Então, se eu tentar segurar isso e tentar arrastá-lo até aqui, você pode ver que isso está realmente, uh, acontecendo no meu outro Mac. Então eu não estou fazendo isso no meu PC. Então, se eu tentar fazer algo assim e se eu tentar mudar a cor, deixe-me mudar algumas das coisas aqui para que você possa ver que dois designers podem trabalhar simultaneamente neste design. Então eu estou tentando mover, colocar meus clientes e tentando mudar, Você pode ver. Então este sou eu me movendo e outra caixa está se movendo por outro designer. Então é assim que você pode realmente trabalhar simultaneamente em um único design e dois ou mais dois designers que eles podem trabalhar simultaneamente. Então, se você estiver trabalhando em uma equipe, você pode trabalhar em um único design, e você pode acelerar seu projeto por ter vários designers trabalhando na mesma coisa. Então, se você tiver, por exemplo, protetores de estilo já criados e seus componentes. Você pode simplesmente adicionar designers e eles estão indo arrastar e soltar esses componentes e continuar construindo projetos com muita velocidade. Então, este é um recurso muito legal Off Sigma colaboração com seus designers. Chama-se colaboração ao vivo. Muitas outras ferramentas também estão implementando isso. Espero que tenham gostado desta lição. Se você tiver alguma dúvida ou tiver alguma sugestão, você sempre pode me perguntar, Vamos passar para a próxima lição. 23. Trabalhando com bibliotecas de equipe: neste vídeo de, vamos falar sobre um recurso muito agradável fora de casamentos Rick chamado bibliotecas de equipe para que você possa compartilhar seu você pode ver ou ouvir têxteis. A cor se esforça em seus estilos de fatos, juntamente com seus todos os componentes. Então, sempre que eu desenho, eu realmente estou projetando. Principalmente eu projetei em uma página de design, então eu tenho uma página separada para guia de estilo. Então, nesta página, eu normalmente tenho todos os componentes, todos os ícones diferentes, que já são componentes. Então, vou compartilhar com vocês como realmente gerenciar sua biblioteca de equipe e como você pode atualizá-la e como essa atualização refletirá para seus outros membros da equipe. Então é É basicamente a colaboração tipo fora projetado compartilhamento de biblioteca onde você pode compartilhar toda a sua empresa e vender seus estilos que você criou em seu projeto. Assim, outros designers podem facilmente pegá-los e usá-los em outras telas. Então o que você tem que fazer é quaisquer que sejam seus componentes principais. Por exemplo, você pode ver a navegação inferior. Este é realmente um componente, e é exemplo que eu realmente manter todos os meus componentes mestre neste guia de estilo. Então, no guia de estilo, você pode ver. Temos todos os componentes que temos logotipo, logotipo pequeno, logotipo grande do que temos. Diferente significava este plano de dieta chips, e então temos botões diferentes do que temos. Barra de pesquisa. Estas são navegações. Então o que vamos fazer é criar quadros diferentes, por exemplo, ou este. Vou chamar-lhe Navegação de Navegação. Então agora o que vou fazer é que não precisamos disso. Então este não está na navegação. Isto é, na verdade, navegação. Isto é, na verdade, uma navegação. E isto não é navegação. Isto está fora disto. Isto também está lá fora. Então eu vou separá-los em reboque, categorias diferentes. Então eu estou gerenciando eles em diferentes quadros de arte. Ou você pode chamá-los de quadros. Então a navegação vai ser por aqui. Então, o que quer que esteja na navegação, vai ficar por aqui. Da mesma forma, eu vou criar outro quadro A ou F G. E aqui eu vou chamá-lo de, hum, botões e controles. Então, aqui, eu vou arrastar meus dois fingindo que minha barra tal porque é um item de controle. Estes são Ok, selects, mova-os para cá também. E além disso, acho que vai ficar tudo bem. Então agora vamos criar outro quadro. Vamos chamá-lo de, hum, preso ser guardas e itens. Então aqui vamos usar todas essas opções que vão estar dentro da receita. Cardos. Também vai ser receita. Isto está realmente relacionado com a pesquisa. Vamos movê-los. Vamos movê-los para a seção de fardos aqui porque são pinos, então vamos usá-los. Certo, Certo, então aqui temos um cartão, um cartão de receita grande aqui, então vou expandir este quadro de arte a seguir. Mova-os para cá, faça deste quadro de arte um grande, mais grande como este. Então temos esta receita grande, esta pequena receita, então temos este cartão ligado. Então temos o passo receita preparar uma receita. Então, temos componentes diferentes aqui. Da mesma forma novamente. Se quiser ficar com o logotipo , vou ligar para eles. Vamos criar em que estão entediados ou quadro. E eu vou chamá-lo, hum, ir, ir e ícones. Então eu vou pegar todos os meus logotipos e ícones e arrastá-los para cá assim. Estes são poucos ícones. Na verdade. Você pode criar um pacote inteiro de cinco contagens aqui. Então eu estou realmente criando Vamos fazer isso um regular aqui. E agora eu vou apenas redimensionar meus quadros de arte. Nada mais. Nada extravagante. Estes são meus ícones estavam aqui e meu local e eu estou indo dedo do pé. Mantenha-os assim. Ok, Então, uma vez que eu tenha criado em gerenciado este guia de estilo, você tem que ir dedo ativos e você pode ver por aqui. Eles são chamados, mas e então nós temos se nós, hum, abrir esses botões e controles, nós temos diferentes botões e controles. Então temos logótipos. Acho que este se encaixa melhor na seção de receitas aqui. E mais uma coisa, se você quiser mudar a cor de fundo um pouco outra coisa, porque é mais fácil ver fundos brancos aqui. Da mesma forma, para este, vou usar um pouco de garantia vermelha Gresh aqui. Da mesma forma, para este, eu vou com este. E também para esta diversão, só para ter certeza de que tudo é visível facilmente, uh, vamos torná-lo menor assim. Ok, então nós conseguimos tudo. Se formos para os bens, você pode ver que temos categorias diferentes. Locais e navegação é mais fácil. Você os reutiliza. - Não. Depois de ter organizado todos os seus estilos, seus componentes, você tem que clicar neste ícone da biblioteca da equipe neste painel de ativos movido para oh, este painel de ativos e clique neste. Agora você pode ver que eu tenho este figo Mahfoud AB você pode clicar em Publicar e nós estamos indo dedo do pé. Ligue para eles. Vamos chamá-los cheios. Agora você pode ver que é a biblioteca de publicação. Ele está me mostrando que ele vai publicar essas atualizações de biblioteca publicadas com sucesso. Agora, uma vez que você publique seu estilo, você pode voltar para Sigma. Então aqui temos este estigma um gás de estigma, que é o nosso aprendido, Você excitante. E agora vou criar um novo arquivo aqui. Então vamos criar um novo arquivo. Sem título e vou abrir este sem título e vou criar um quadro. E se eu movi ativos, você pode ver se temos uma guia aqui para criar um setor componente Lear. Então, para isso, vamos explorar nossas bibliotecas. Então eu vou clicar aqui, e eu vou fazer isso para este arquivo. Assim que eu ligar isso, você pode ver que eu posso ter acesso a todos os botões. Tudo o que temos aqui. Por exemplo, este botão em seguida arrastar coisas chip para aqui nesta barra aqui. Então eu posso usar todos esses componentes. Da mesma forma, se eu tentar criar, por exemplo, e emaranhar aqui e eu quero acesso do dedo do pé, as cores que você pode ver nós temos todas as cores aqui. Então, estes são o meu estilo, por exemplo, creme radiante de disco. Então eu posso acessar todos os meus estilos, todos os meus botões, todos os meus componentes, por exemplo, Aqui nós, se nós chamamos de componentes de cartão de receita, você pode ver que eu tenho todos esses componentes. Por exemplo, este aqui. Posso arrastá-lo até aqui e usá-lo assim. Então todos os meus outros designers, eles podem simplesmente arrastar e soltar dentro disso uma equipe, por exemplo, por exemplo, nós temos Vamos voltar e você pode ver que esta é a nossa equipe aprendeu você empolgante. Então eu criei o guia de estilo Theis nesta equipe. Então eu tenho são apenas plano de equipe de educação operado. Então eles me deixaram criar este sistema de design neste estilo de design guias que podem ser compartilhados com outros membros da equipe. Então agora você pode ver que este era o meu projeto. E se eu criar qualquer outro membro da equipe, por exemplo, ainda mais estamos aqui. Se ela abrir um novo documento ou tentar adicionar algo aqui, ela pode facilmente acessar todo esse projeto. E, por exemplo, pernas. Isto é local. Então você pode ver que também podemos acessar nossos têxteis. Por exemplo, se eu tentar escrever algo aqui, vamos. E agora você pode ver se eu vou até aqui. Eu tenho têxteis para comida, mapa de figo para que eu possa mudar para este ou eu posso mudar para este. Por exemplo, você pode ver que estamos aqui. Eu também posso mudar para qualquer estilo de deck que você tem para que você possa ver aqui nós temos diferentes têxteis para que você possa mudar o dedo do pé de qualquer têxtil. E se você quiser mudar, vá para a definição do dedo A. Então, se eu for até aqui e se eu mudar algo neste guia de estilo aqui, por exemplo. Vamos Jane algo aqui, por exemplo, este aqui. Então eu vou mudar a direita fora deste aqui para que você possa ver assim que eu mudar algo ele diz Publicar alterações editor em suas bibliotecas de equipe se eu clicar em publicar. Hum, estranho mudou. Então eu vou atualizar minha biblioteca de publicação que eu mudei essa coisa. Publique aqui. E agora se eu for aqui, está bem? E eu tento usar este para que já fosse operado. Vamos mudar de novo. Por aqui. Vamos mudar de novo. Por isso, vou pô-los no meio assim. Eu fumei ele no meio. Então, vamos publicar as alterações novamente. Está bem? Então, não, se eu for até aqui, você pode ver que ele diz que assuntos componentes estão disponíveis, então se eu posso descartar ou eu posso revisar Então se você clicar em revisão, ele diz que você tem que atualizá-lo. Então, se eu tentar atualizar, você pode ver que ele está indo toe atualizar o alinhamento oferecido. Então deixe-me mostrar-lhe mais uma atualização, para que você possa facilmente vê-lo então vamos mudar sua cor para outra coisa. Vamos usar isso, uh, uh, esta cor laranja apenas o dedo do pé demonstrar que eu mudei um assassino. Como? Na verdade, as bibliotecas a vapor funcionam. Então aqui estou eu, tentando usar o dedo do pé. Este e novo é na verdade este laranja, então eu tenho que revisá-lo. Eu tenho que atualizá-lo e você pode ver que ele foi atualizado para este laranja. Então é assim que você realmente compartilha bibliotecas com os membros da sua equipe. Você pode compartilhar seus componentes. Você pode compartilhar todo o seu estilo, guiar seu estilo, seus botões, seus componentes com os membros da sua equipe. E é assim que você realmente gerenciá-los em diferentes molduras dedo do pé. Nomee-os corretamente. Então, quando alguém os acessa, você pode ver que estamos aqui. Alguém aceda a eles. Eles têm categorias diferentes, então eles podem facilmente arrastá-los para cima. Então você tem que se mudar. Sempre que você criar um novo arquivo, você tem que mover para ativos e tentar usar tentando ativar terceiro esta biblioteca. Então, se eu ativei este, você pode ver que eu também posso acessar a biblioteca de cores pessoais. Então isso limpou um retângulo. E se eu for aqui, você pode ver aqui nós temos o aplicativo maluco Mahfoud, as novas cores emocionantes e cores pessoais. Então essas são todas bibliotecas diferentes, essas bibliotecas da equipe de diretores. Posso acessar em reboque qualquer projeto. Então eu espero que você tenha gostado desta lição de biblioteca em equipe. Se você tiver algum problema ou se você está preso algum em algum lugar, você sempre pode me fazer uma pergunta ou começar a discussão. Vamos passar para a próxima lição. 24. Guia comunitário em Figma - Novo recurso: Hoje vamos ver uma característica muito mais recente do sigma ab, que é a comunidade. Agora eles acabaram de lançar sua guia de comunidade. Você pode ver aqui à esquerda, Comunidade na cama beta. Esta é a versão beta para a comunidade e esta é uma grande, realmente grande iniciativa e realmente grande recurso para este figo meu aplicativo. E você realmente vai gostar. Então, se você clicar aqui na comunidade, você pode ver que este é o meu perfil Fichman. Handel diz Fichman.com, S e N3C ea taxa de ativo e DC. E se você não sabe como definir seu perfil público, este URL, você pode ir para este aqui, seu nome. Deixe-me voltar às configurações. Então você tem que ir para as configurações. E você pode ver nas configurações, este é o meu nome, e-mail, senha. E então temos outra coisa que é chamada de perfil público. Agora você pode ver que eu defini meu perfil público identificador em S e destinatário. E se você quiser definir seu perfil público, tente escolher o nome que é específico para você ou você o usa muito em fóruns diferentes. Ok, assim que você definir seu perfil público, então definir seu perfil público, você pode ir para a comunidade. Então eu tive que clicar duas vezes na comunidade para chegar aqui. Algo estava bagunçando. Na verdade, está em beta. Então esse é o problema, talvez. Ok, então aqui temos, se você olhar para cima, temos diferentes categorias, UI kids, se você clicar em kits de interface do usuário, você terá um monte de kits de interface de usuário gratuitos. As pessoas, diferentes membros da comunidade que estão compartilhando com você ou com outros membros. Portanto, essa é uma grande iniciativa que diferentes pessoas compartilharam seus recursos e podemos usá-los e trazê-los para nossos projetos. Da mesma forma, você pode ver que temos web design. Então, há muitos recursos para ícones, para ilustração. Então, se você, por exemplo, se você quiser trazer algo, você pode clicar aqui. E podemos gostar disso. Por exemplo, eu gosto desses, então eu vou clicar sobre isso, como você pode duplicar isso. Então, se eu clicar em duplicado, ele vai abrir na minha guia sigma como um novo arquivo. Você pode ver agora que temos todas as ilustrações para que possamos usá-las em nossos projetos. Isto é realmente fácil de usar estas ilustrações. Então, voltando para a comunidade, deixe-me mostrar que há mais algumas coisas que eu vou mostrar a vocês que podem ser úteis para vocês. Uma delas é essa identificação cortada. Então, se você quiser procurar algo, ícones, conjunto de ícones ou algo que você pode clicar aqui. Da mesma forma, temos ilustrações. Eu terei wireframes e nós projetamos sistemas que são realmente úteis. Então, se você está tentando começar algum site ou algo assim, você tem que usar algum sistema de design. Então, para ser capaz de usar isso, há um recurso, deixe-me apenas usar este. E vamos duplicar isto. Você pode ver 1.1 K 1100 pessoas já duplicaram. Então eu vou clicar na duplicata. E eu vou abrir no meu FISMA. Vamos ver, está levando algum tempo. Ok, então aqui temos os estilos de design de material que você, eu entendo. Agora, se você for aqui, aqui, você pode ver que isso está realmente aberto nos meus rascunhos. Então este é realmente o meu projeto que é rascunho. Se eu quiser abri-lo, eu tenho que abri-lo aqui ou movê-lo para outra coisa clicando aqui. Ok? Então, agora, sempre que você tem que compartilhar seu design de material, você tem que ir para os ativos. E você pode ver já há uma versão leve, há muitos ativos. Então aqui, agora você pode clicar aqui e você tem que clicar em publicar. Para publicar esses estilos. Você tem que publicar este guia de estilo para que você possa usá-lo em seus designs. Então eu vou clicar em publicar. Mover para a equipe para publicar componentes. Então vamos mudar a equipe. Vamos para a minha jogada. Vamos para a aula de Sigma. Isto é um projecto. Então eu vou dizer Material Design Lite. Então vou publicá-lo agora. Ok? Agora, uma vez que você tenha publicado estes, nós temos que voltar para esta classe Sigma. Ok, então agora neste projeto, ele foi compartilhado. Então, se eu tentar abrir qualquer arquivo, por exemplo, este sem título aqui, eu posso usar esses componentes. Então vamos deletar isso. Apague isso. Então, se eu for para os ativos, você pode ver que me deixamos ir a este. Vamos verificar este para que ele seja compartilhado, mas eu tenho que habilitá-lo. Então eu usei este ícone de biblioteca. Então eu tenho dois nm de alerta. E vocês podem ver que eu tenho componentes de design de materiais aqui. Se eu quiser usar qualquer componente como este, botão mais ou botão Novo arquivo ou o que você chamá-lo. Posso arrastar e soltar listas diferentes. Posso arrastar e soltar cartas diferentes. Então eu não quero criar isso sozinho. Este é um bom começo. Vai poupar muito tempo para você. Você não precisa criar todos esses componentes. Então esta é a característica das comunidades. Então a comunidade é realmente útil. Vou pôr um amor aqui. E se eu voltar, você pode ver se eu voltar para a minha comunidade aqui, escola de volta, qual é o problema com isso? Às vezes não volta para a comunidade Sigma de qualquer maneira. Então, se você voltar para o meu perfil aqui e seu perfil estiver visível, vamos abrir este. Então você pode ver neste perfil eu tenho recursos e assim se eu clicar em gostos, você pode ver, então todos os recursos diferentes que eu tenho suco ou eu gostei r aqui. Então você pode ver perfil de usuário, biblioteca sigma, Eu vivi. Aqui. Temos estes dois plugins. Então é assim que você usa sua comunidade. Então vamos voltar para a comunidade e podemos clicar em plugins para então temos que arquivar abas ou arquivos de cabelo e plug-ins. Assim, você também pode explorar diferentes criadores. Por exemplo, essa pessoa, essa pessoa ou se você quiser segui-la, você pode segui-la para novas atualizações. Então, quaisquer novas extensões ou algo assim. Da mesma forma, eu posso clicar em sistemas de design, por exemplo, como este, e eu posso usá-lo em meus projetos, meus sites ou qualquer outra coisa. Portanto, este é um ótimo recurso para usar. Obtenha recursos diferentes, use-os e toque e diga obrigado e coloque um pouco de amor aos recursos ou aos criadores desses recursos. Essa é uma ótima característica, uma ótima adição ao sigma. Espero que tenham gostado desta lição. Se tiver alguma pergunta, pode sempre me fazer. Vamos passar para a próxima lição. 25. Usando Grids e guias: nesta lição antes de cavar no reboque e começar a projetar algo que eu estou indo toe familiarizá-lo com alguns dos conceitos que usamos muito tempo em projetos em design, seu design, Web design e muito off designers e cursos. Eu vi que eles realmente sentem falta disso, o que é muito importante, e isso é realmente grade layout. Então você sempre tem toe usar grade de layout sempre que você está projetando para uma tela móvel. Oh, nosso site. Então, neste vídeo, vou explicar a vocês como você pode usar esse nível de layout e como você pode criar saídas diferentes quando estiver projetando para sites móveis e da Web. Agora, se você quiser ver como criar classe bootstrap, se você é um Web designer, então você pode ter que YouTube meu canal e você pode assistir este vídeo. Bootstrap para a criação de grupos, este é um vídeo detalhado de oito minutos de vídeo sobre como criar e Bush um quatro graus em sigma. Então vamos começar e ver como podemos criar diferentes tipos de berços. Então, há na verdade dois tipos de carreiras, então eu vou mostrar a vocês uma é, na verdade, a má ganância deste porco. E segundo 1 se eu tentar adicionar aqui, você pode ver que ele vai adicionar abaixo de um. Então o padrão é grande, tão grande. Então eu estou indo dedo do pé e 10 porcos doentes é o tamanho da caixa, então você pode ver se nós zoom aqui. Cada caixa tem 10 porcos doentes por 10 pixels. Então, se quisermos mudar algo, por exemplo, avisei que a caixa seria uma grande venda e não removerei isso. Então isso é chamado 88 saída Grande. Que usamos muito tempo no desenvolvimento móvel Android e até mesmo em nossos projetos dos EUA. EUA Então, se você está projetando para iPhones ou abdominais Android, eu acho que esta é uma grade grande criança. Então, se você quiser mudar a cor do Grande, por exemplo, eu quero que ele seja um pouco nesta grande área, algo assim. Você pode alterar a cor da tela. Então é assim que você cria Theis? Uh, foi exhilarante. Agora vamos para outra coisa, que é chamada colunas e linhas. Então, se eu estou projetando para laboratórios móveis, eu tenho que alinhar minhas coisas em colunas maiores. Então eles nos têm layout simples ou seguir algum layout. Então, para o alinhamento, eu vou adicionar algumas colunas para que você possa ver que eu posso adicionar, como qualquer número de colunas. Mas sempre tente dedo do pé, adicione os números que podem ser divididos por dois. Então nunca adicione nossos números, mesmo use. Sempre use números pares. Então é assim que se usa os números pares. Então eu estou realmente usando seis neste projeto, você pode ver que eu posso ver em segundo plano porque não é. Esta é a opacidade, na verdade. Então, se eu tentar endurecê-lo, você pode ver que eu sou incapaz de ver o que está por trás. Então, é melhor que eu tente usá-lo 10% algo assim, que eu possa facilmente projetar e alinhar minhas coisas ao redor. O segundo hit é seu tipo, então você pode alinhá-lo no meio e você pode especificar a ponte fora das colunas. Por exemplo, eu quero colunas de 80 pixels de largura, algo assim. E Goodall é na verdade a distância entre duas colunas. Então esta é a sarjeta. Podemos usar 30 algo assim, ou talvez 24. Depende do tamanho da tela, seja qual for a tela que você está tentando usar. Então, se eu tentar usar 12 aqui, você pode ver que está parecendo algo assim. Agora, você também pode salvar seu layout, cria. Você pode ver aqui, aqui no estilo de atualização para que eu possa salvá-lo em 12 colunas ou algo assim. Parte do nome aqui, porque algo assim. Então eu criei estilo acordado e eu posso facilmente aplicado em qualquer verde. Da mesma forma, por exemplo, eu vou criar outro quadro de arte E. E eu vou usar o iPhone oito mais Não, eu vou criar um grande claro e eu vou pressionar o dedo do pé mais e ele criou 10 pixels. Quero que o dedo do pé queira ser como 16 porcos são ótimos, por exemplo. Então eu posso ter um 16. Porcos são ótimos assim. Agora, se eu tentar colocar meu botão aqui, por exemplo, eu posso colocar meu botão. Ele vai ficar nessas áreas para que você possa ver que este é o meu traseiro, e eu vou usar o arredondamento fora dele, e eu vou usar um pouco de cor como este. E se eu tentasse alinhar no meio. Então agora está no meio. Você também pode tê-lo para gastar duas caixas específicas como esta. Então agora você pode ver isso é como realmente você tenta usar o de forma semelhante para o texto. Você também pode alinhar seu texto. Olá. E você pode alinhar seu texto à sua grade assim. Então, estas são as minhas regras. Então eu estou tentando usar esta 80 horas aqui para a minha próxima. Então esta é na verdade a área que estou tentando usar. Então, se eu tentar reduzir a capacidade 50% para que você possa ver melhor. Então esta é na verdade a área da cabeça ou a área que vai cobrir. Então, se eu tentar movê-lo para cá, então se eu tentar diminuir este para que você possa ver que este é o limite em torno dele. Você também pode alinhá-lo no meio ou em um trabalho. Mas eu acho que está indo para o pé. Use tanto espaço. Então é assim que você pode usar isso, e você pode alinhar seus diferentes ícones. Além disso, você pode adicionar outra nota. Por exemplo, se eu quiser ter algumas colunas aqui, então você pode ver que eu posso usar quatro colunas e eu vou tê-las no centro. E esse é o seu 60. Vamos usar mais 75. Isso é usá-lo. E. Isto parece um pouco melhor para mim, e eu vou usar 24. tamanho 20 é maior, eu acho. Bom. Agora você pode ver que eu posso alinhar reuniões com discreto. Então vamos assim. Então não tenho duas notas. Uma é minha base base base base grade ou meu crédito na parte de trás, que é um porco doente, ótimo. Que é o trabalho, na verdade, caixas e um é grade de coluna. Então um é, uh, 16 porcos doentes que eu também posso usar aqui algo assim para ter mais opções para alinhar coisas. Então, o que quer que você está projetando em um aplicativo móvel, tente toe ter algo como isso. Vai guiar-te. Você pode facilmente alinhar seus elementos sobre isso juntamente com essas linhas, por exemplo, como este. Da mesma forma, você também pode habilitar a mudança de réguas e são e você pode, uh, arrastar e soltar diferentes diretrizes aqui. Dedo uma linha das coisas melhor. Então, sempre que eu tento criar outro pequeno quadro de arte, você pode ver que esta diretriz está vindo aqui porque eu desenhei sem selecionar meu quadro de arte. Então, sempre que você quiser ter, sempre que você quiser ter algo que vai agir como uma diretriz global, você pode ver seu cabelo. Então, se eu tentasse selecionar este direito aviso elétrico. Então, se eu cair, desenhe algo nele. E se eu tentar criar outro quadro de arte, por exemplo, como este, você pode ver que não há nenhuma diretriz aqui. Mesmo que eu tente usar o mesmo quadro de arte que eu usei antes. Então você pode ver que não há nenhuma diretriz porque eu selecionei e eu desenhei esta diretriz para esta tela específica. Agora, se você quiser ter uma diretriz global, por exemplo, eu crio outro quadro de arte aqui, que será o iPhone Pro X. Vamos criar o mesmo tamanho Ivan oito mais. Agora você pode ver que estes são o barco. Placas de arte são do mesmo tamanho, mas se eu quiser ter e ah diretriz que vai ser global, você tem reboque selectee selecionado, e se você tentar arrastá-lo e soltá-lo dentro desta área, ele vai estar presente em Este. Então o que temos que fazer é arrastá-lo e soltá-lo na área do meio, que não é a área comum, que é um espaço vazio que não é o 80 de qualquer quadro de arte ou moldura. Então eu vou deixá-lo cair sobre o cabelo e você pode ver que ele está presente ou em todos os três quadros de arte . Então é assim que você realmente usa este global essas diretrizes globais para alinhar todos os seus elementos. Por exemplo, se eu tiver talvez uma navegação inferior para que ele será alinhado a este. Então, se eu tiver uma navegação superior, será nesta seção para que você possa dividir todo o seu aplicativo móvel ou seu Web design o que você tem, usando essas colunas de grade diretrizes para que você possa escolher as diretrizes locais e globais diretrizes. Estas colunas, este layout, design do dedo da grade, melhores layouts para projetar APS com melhor aparência. Espero que você não tenha destruído esse conceito, e eu realmente desejo que você aprenda isso e use isso em qualquer projeto de design que você faça. Vamos passar para a próxima lição 26. Novo Figma Auto Layout 101: Hoje vamos dar uma olhada em um dos recursos do Figma, que é o layout automático. Então, eles atualizaram recentemente. Este é o meu 2022 e vou mostrar como usar isso. E vamos pegar alguns botões e criar algo incrível para ver como ele funciona. Então o mesmo é, vamos começar com T, e vou digitar algum texto aqui. Vamos criar um botão. Vou fazer 20 pixels. Vamos continuar usando entre negrito. E para criar um botão, vou pressionar Shift a. E criamos um Layout automático. Layout automático foi adicionado. Assim que adicionarmos o layout automático, você pode ver que este é um novo painel à direita. Temos a direção do layout automático, direção horizontal, direção vertical. Estes são os preenchimentos entre o espaçamento entre itens que vou compartilhar com você em alguns momentos. E este é o preenchimento em torno desse botão. Vamos adicionar uma cor de preenchimento. Vamos adicionar uma cor de preenchimento disso. Vamos usar essa cor azulada. E vamos fazer alguns cantos arredondados de oito pixels. E agora vamos experimentar o preenchimento em torno desse botão. Portanto, para esse layout automático, o preenchimento é horizontal. preenchimento é esse. Então eu posso arrastá-lo assim. Você pode ver que há linhas cor-de-rosa dentro do botão que está me mostrando, vamos mantê-lo para 40. E isso vai ser a horizontal, superior e inferior. Então, vou mantê-lo para 16. Então este é o meu botão perfeito, tipo de botão perfeito. Vamos tentar usar alguma cor azul escuro para o texto do botão. Ok, então este, este parece ótimo. Ok, então mais uma coisa que eles adicionaram aqui. Se eu passar o mouse sobre o botão, você pode ver se eu clico aqui, ele me deixa inserir o valor aqui. Então aqui está o preenchimento. Então, uma vez, clique uma vez. E o que aconteceu? Aqui está o quadro. Opa. Então eu tenho valores diferentes agora. Então você pode ver aqui, eu tenho valores diferentes para cima, direita, inferior e esquerda. Então eu acho que preciso clicar aqui para ver que este é o caminho certo. Então, vamos tentar reduzi-lo. Acho que há um bug porque uma vez que eu mudo o valor, eles realmente desapareceram. Certo, então eu os tenho agora. Então, se eu clicar aqui, você pode ver que isso é se eu clicar aqui, 20, ok, então aqui temos de novo. Então eu tenho que clicar aqui novamente, dez. E agora eles desapareceram. Opa, eu acho que há um bug agora de qualquer forma, então você pode controlar tudo daqui. Então, se você quiser paddings independentes, você pode abrir isso para ver que eu tenho ligações independentes para a esquerda e para a direita. Então você pode separá-los com vírgulas para 4020. Então, se eu quiser ter 60 à esquerda, você pode ver que eu tenho, eu posso ter 60. Esta é minha parte superior e inferior. Vamos tentar usar 32 no topo. Aqui temos isso. Vamos mantê-lo como padrão. Vamos usar 36 à esquerda e à direita e na parte superior e inferior. Então esse vai ser meu botão. Agora, se eu quiser criar uma barra de menu simples, posso apenas replicar esse Controle ou Comando D. Você pode ver que estou replicando apenas esse texto e ele está na direção horizontal. E esse é o espaçamento entre os itens. Então este é o quadro, este é o quadro de layout automático, e esses são os preenchimentos entre eles. Então você pode ver, eu posso clicar e arrastar assim, aumentar o preenchimento entre eles. E, na verdade, é expansível. Então, se eu tentei sobre nós, vamos usar no convés aqui. E novamente, também temos o preenchimento na parte superior e inferior. Podemos controlá-lo aqui. Este é um recurso muito bom. Eles têm um preenchimento separado, todo o preenchimento em torno dele. E eles têm mais interfaces de usuário mais amigáveis do que antes. Ok, então aqui temos isso. Barra de navegação simples. Ok, agora o que vou fazer é replicar esse quadro inteiro. Então, Comando D, quadro 234. E eu tenho esses, todos esses quadros e vamos selecionar todos esses quadros. E eu tenho que criar outro layout automático. Agora eu tenho outro layout automático. Agora você pode ver que a direção é cima para baixo, isso é vertical. Então, agora vamos brincar com esse espaçamento entre itens. Vamos usar 24 aqui. E essa é a separação entre esses itens. Você pode ver que eu posso controlá-lo daqui também. Posso clicar aqui e entrar como 16. E vamos tentar ver que posso mudar o preenchimento. Vamos tentar ver o preenchimento aqui. Sim. Esses são os paddings ou padrão. Vamos adicionar 24 na parte inferior. E vamos adicionar a esquerda. Você pode ver agora esse é outro quadro. Este é outro quadro de layout automático e adicionei paddings. Também estou usando esse espaçamento entre itens. Então você pode ver o que aqui, vamos tentar usar 32. E se você quiser preenchê-lo com alguma cor, você pode fazer isso apenas para mostrar como isso vai funcionar. Então, este é realmente o quadro externo. Então eu tenho quadros automáticos internos. Então eu tenho quadros automáticos externos externos. Só para mostrar que temos vários itens que podemos separar por espaçamento. E vamos adicionar mais uma coisa a este quadro automático. Vou acrescentar, digamos retângulo aqui. Vamos tentar adicionar um retângulo aqui. Então, ele vai ser colocado aqui assim. Agora, você pode ver que realmente tem o layout que era, você pode ver aqui direção vertical. Então, qualquer coisa que eu acrescentar , ele estará na direção vertical na parte inferior. Ou se eu quiser alterar a posição deste item, posso movê-lo para cima ou para baixo onde quiser. Agora, se eu quiser que ele esteja em um lugar específico fora do controle disso. Vamos criar um círculo menor como este. E vou ter cantos arredondados de 60. Portanto, é um pequeno círculo. Opa, 36 não deveria ser a altura k. Então acabei de criar um pequeno círculo, digamos que foi assim. Então eu quero um status aqui ou aqui, ou talvez aqui à direita. Talvez um botão fechar para este quadro. No momento, ele está dentro do layout automático. Gerenciando a direção vertical. Há um pequeno botão mágico aqui. Ele chama. Diz posição absoluta. Então você precisa selecionar esse elemento, clicar na posição absoluta e ele vai sair desse layout automático. E vamos usá-lo aqui assim. Você pode ver agora, você pode ver que ele ainda está dentro desse quadro de layout automático, mas ele tem uma posição absoluta, assim como a usamos em HTML. Portanto, esse é um recurso muito, muito bom. Ok, então mais uma coisa é que você pode ver aqui o redimensionamento de abraço, redimensionamento vertical e redimensionamento horizontal abraço conteúdo fixo. E então tivemos o terceiro, preenchemos o conteúdo que eu acho que era esse contêiner. Você pode ver que isso é muito bom, então fora disso, este quadro externo, só me mostra o conteúdo HUD e a largura fixa. Então, se eu tentar usar uma largura fixa, será assim. E vamos movê-lo para cá. No número dois, mova-o assim. Ok, então para este, vou usar o contêiner completo. Então você pode ver assim que eu cliquei no contêiner completo, ele encheu seu contêiner. Então o contêiner é mais escuro e o mais leve é realmente meu conteúdo. Portanto, o conteúdo vai preencher o contêiner. Então isso é corrigido. O conteúdo quente vai se expandir sempre que eu. Então você pode ver se eu troquei conteúdo muito quente, ele vai voltar. Ok, então este é o contêiner de derramamento de conteúdo quente largura fixa é auto-explicativa. Não preciso explicar isso. Ele vai manter a largura desse quadro fora. Moldura externa fixa. O conteúdo crescerá com o conteúdo interno. Então, vamos tentar ver o Dia do Julgamento. Assim, você pode ver o conteúdo externo. O quadro externo está realmente se expandindo com o conteúdo interno porque está abraçando o conteúdo. Eu nunca, o conteúdo está se expandindo. Por exemplo, estou abraçando algo assim. Então, se alguma coisa, alguém dentro daquele que estou abraçando talvez um balão, se ele começar a expandir, eu tenho que expandir meus braços. Então é assim que o abraço realmente funciona. Então, vamos ver se eu perdi alguma coisa aqui. Então, temos esse alinhamento. Acho que preciso mostrar o alinhamento aqui. Então, vamos adicionar um retângulo ou talvez um botão aqui. Vamos criar um retângulo. E pense que é um botão. Então, vamos criar esse botão. Vou movê-lo para dentro aqui. Então, vamos supor que este é o nosso botão. É arredondamento de pixels. Então este é o meu botão. Então, agora você pode ver que tudo está alinhado à esquerda. Então, se eu clicar neste quadro externo, vamos chamá-lo de quadro externo. Estes são os quadros internos. Certo? Então, depois de selecionar esse quadro externo, você pode ver que essas são as opções de alinhamento. Então, agora está à esquerda, alinhamento superior esquerdo. Se formos a este, como o alinhamento certo, você pode ver que tudo está alinhado à direita. O botão também se move para a direita. Se eu usar o meio, ele vai alinhar tudo assim. Certo? Então, às vezes, o que acontece é que eu quero que esse botão esteja alinhado à esquerda e talvez todos esses primeiros fiquem à direita. Então, a maneira simples é que vamos chamar isso de btn. E vou criar outro layout automático como esse para esse botão. E para todos esses quadros, vou criar outro automóvel. Então agora eu tenho que layouts automáticos dentro disso. Então, para isso, vou mantê-lo à esquerda. Você pode ver, você pode ver agora e para o meio. Então, vamos chamar esse conteúdo. Vamos chamar esse botão. Você pode ver que você está aqui. O conteúdo está no topo, e posso movê-lo o conteúdo independentemente do botão, porque eu os tenho em dois quadros diferentes. Então eu tenho diferentes contêineres contendo quadros para eles. Da mesma forma, você pode ver agora que está novamente dentro desse quadro, quadro de conteúdo. Então, ele está se movendo nessa direção que você pode ver aqui. Então, vamos tentar, clique novamente nisso. Vamos chamá-lo de status. E eu vou clicar novamente nesta, posição absoluta e ela voltará para o lugar que estava antes. Então, vamos tentar aumentar meu status. Este é o único. Vamos tentar usá-lo aqui. Vamos movê-lo para cá. Certo? Então, estudamos o, estudamos esses alinhamentos. Começamos essa direção vertical e horizontal assim. Em seguida, estudamos a separação entre itens diferentes. Vamos usar 80. Então, eles são, na verdade, você pode ver agora que esse quadro tem que entre quadros. Então, seja qual for o espaçamento, será entre esses dois. Portanto, se você quiser controlar o espaçamento entre diferentes grupos de itens, você precisa agrupá-los em quadros de layout automático. Certo? Então, temos mais algumas opções aqui. Você pode ver como, como você pode ver aqui, ensacado e espaço entre animações muito agradáveis. Talvez eu possa tentar algo aqui. Vamos tentar usar esses meios. Ok, acho que precisamos de dois ou três itens nessa direção para ter espaço entre eles. Então, neste momento, eu tenho apenas um. Então, vamos criar um grupo de botões. Então, vamos replicar esse comando D. Então, agora ele está se movendo na direção inferior. Vamos clicar neste quadro automático, quadro de layout automático para os botões, e vamos movê-los nessa direção. Ok, agora, vamos tentar ver se consigo. Ok, então eu tenho que fazer com que o recipiente cheio desse jeito. Certo. Então, primeiro você precisa ter certeza de que seu interframe ou onde você precisa usar esse espaço entre está realmente enchendo o recipiente. Então o que eu fiz foi criar três botões dentro do quadro do meu botão. Você pode ver que esse layout é da esquerda para a direita. Porque eu quero que ele preencha todo o quadro. Então você pode ver aqui, essas são as opções de alinhamento agora porque eu troquei do espaço traseiro entre eles. Então, se eu voltar para as malas. Você pode ver que eles vão se alinhar assim, mais próximos um do outro. E eles vão ter esse espaçamento entre itens, que é dez. Então, vamos usar 24. Então este é o espaçamento entre eles agora. Mas se eu mudar para o espaço entre eles, você pode ver o espaçamento entre eles. Diz auto, automático, automático. Então essa é a principal diferença, então ela vai espaçá-los automaticamente. E agora você pode ver que este quadro de botão está realmente definido para preencher esse contêiner. O contêiner é o mais escuro. Também mais uma coisa é que eu acho que os traços, isto é, na verdade, se colocarmos um traço ao redor do botão, vamos usar um traço de 15. Então você pode ver agora, vamos usá-lo lá fora. E você pode ver agora meu derrame está realmente ficando fora disso. Vamos tentar usar uma cor branca talvez. Vamos, vamos tentar algo assim. Então ele está saindo do meu quadro. Vamos tentar ver se ele acomoda. Então, no momento, diz que os traços são excluídos. Vamos incluí-los no layout. Agora você pode ver o preenchimento e o espaçamento, tudo é contabilizado pelos traços, traços também. Ok, então agora vou voltar ao fato porque quero te mostrar algo interessante. Em vez de usar um espaçamento de 20 vezes, vamos tentar usar menos dez. Menos dez. Vamos colocar um golpe aqui só para mostrar que ele vai ser como branco, seu tema. Então, vou estar lá fora. Vamos tentar usar o mesmo traço. Se Dean, lá fora, Whoops, óxido, só vai ser branco. Agora você pode ver que eu tenho três botões e três botões que estão se sobrepondo. Vamos tentar usar cores diferentes e um pouco diferentes aqui. Então, apenas para mostrar o que está se sobrepondo com o que temos agora, 33 deles. Então este está na parte inferior agora, e estes estão no topo. Então, se eu tentei, então temos mais uma coisa que é o empilhamento Canvas. Então você pode dizer que diz o último por cima. Então, se eu mudar para o primeiro no topo, você pode ver que o primeiro está agora na parte superior e outros um ou na parte inferior. É útil quando temos imagens de avatar diferentes, ícones diferentes e queremos que eles se sobreponham. E o último é, na verdade, o deslocamento da linha de base, que é quando temos um ícone e um botão. Então, vamos tentar usar algum ícone. Opa, não aqui. Vamos ícone. E vou usar qualquer ícone agora. Vamos usar este. Este será um álbum de ícones. E se eu tentei usar isso dentro disso, dentro do botão, permite combinar o comando G para agrupá-los. E vamos tentar ter um texto aqui. Diz, ok, vou alinhá-lo perfeitamente. Se eu puder. Vamos movê-lo para fora disso. E vamos mover este também para fora deste, apenas para ver como eles realmente vão se alinhar. Então, vou escrever para a guerra entre os itens. Então, agora é, na verdade, é bastante óbvio e está alinhado com este. Vamos tentar ter um texto menor, texto menor na parte inferior. E vamos tentar mudar a cor. Vou aumentar a distância para 32. Certo? Então, neste momento, ambos estão alinhados, mas se você quiser alterar o alinhamento, vamos tentar mudar alguma coisa. Você pode ver o que aqui. Se tivermos um sapato de alinhamento de linha de base, podemos mudar assim. Então, se tivermos dois ou três textos e um ícone, podemos usar esse alinhamento de linha de base para alinhá-los. Então, agora você pode ver o alinhamento da linha de base, que não está funcionando para esse cenário. Mas posso garantir que , em alguns cenários, quando temos um texto e um ícone que não estão alinhados, você precisa usar esse alinhamento de linha de base. Então, isso é o quanto eles mudaram. Eles forneceram novas opções, como alinhamentos de linha de base, compensando traços do que nós. Este aqui. Eu realmente amo esse recurso deste fixo, este, posicionamento absoluto, realmente, muito bom recurso. E então temos uma apresentação muito agradável de paddings, preenchimento em todo o item. Preenchimento esquerdo, preenchimento direito. Se passarmos o mouse sobre eles, esquerda, direita, esquerda e depois preenchimento esquerdo e direito. Vamos fechá-los porque na verdade não corresponde ao meu HTML. De qualquer forma. Então, isso é tudo sobre. Eles também moveram esse abraço, conteúdo do abraço sentir conteúdo para o quadro. Opções como largura, altura porque era mais adequada para o quadro. Então esse é meu vídeo recente ou novo vídeo e como você pode dominar seu layout automático. Conceito muito simples. Antes, era muito difícil para mim entender. Eu vi muitos dos meus alunos em design, alunos que estão realmente tendo problemas enquanto entendem esse conceito de layout automático. Espero que você tenha entendido layout automático bem e bom a partir deste vídeo, vou encontrá-lo em breve em outro vídeo. Certifique-se de se inscrever e compartilhar este vídeo até então, tome cuidado. Adeus. 27. Usando quadros de grupo vs Frames: neste vídeo, vamos aprender as diferenças entre grupos e quadros e empreendimentos. Você deve usar quadros em vez de grupos. Agora, se você olhar para ele aqui, você pode ver que este é um grupo. Isto é uma ilustração. Então, se eu tentar escalá-lo, você pode ver que ele vai escalar todo o grupo junto com isso, você pode ver quando eu clicar aqui, há um limite azul em torno dele. Na verdade, são seus ossos. Então este é realmente o limite fora disso. Também cresce quando você tenta escalar qualquer grupo. Então este é um grupo fora da ilustração. Estes são fatores diferentes. Se eu tentar aumentar o tamanho, você pode ver que os ossos estão realmente se movendo. E se você olhar para ele aqui no tamanho da restrição, é uma habilidade e ah, na verdade vai escalar. É um padrão. Você pode dizer restrições. Opção fora de qualquer grupo. Então, agora, se eu tentar selecionar, por exemplo, vamos dizer direito e digamos topo agora você pode ver o que está acontecendo aqui. Cada grupo tem restringido de acordo com o dedo, o quadro pai mais próximo para que você possa ver se você olhar para ele aqui em toda esta hierarquia do lado esquerdo, cerveja e moldura para este grupo é na verdade o nosso quadro de arte. Agora vamos ver o que acontece se eu tentar aumentar o tamanho muitas vezes Art Board. Você pode ver que esta restrição está realmente funcionando para este quadro de arte, então ele está ficando com a direita e esquerda fora do nosso tabuleiro. Agora vamos ver o que acontece quando nunca dissemos essas restrições. Então, principalmente sempre que você tenta importar qualquer gráfico dentro de sua fleuma um arquivo ou está entediado, a mesma coisa acontece. Por exemplo, se você tem um grupo como este e é uma ilustração agora, você pode ver se eu tento aumentar a eleição, diminuir o zoom e tentar aumentar o tamanho disso. Você pode ver o que está acontecendo. O tamanho fora da ilustração está ficando maior com este quadro, então vamos em seguida. Vamos ver o tamanho seu tamanho é 573 por 5 31 Agora, se eu tentar redimensioná-lo, você pode ver agora que é 80 98 806 Agora, se você não quer esse comportamento e você não quer que ele escala assim. Próximo. Volte para todos os fios. Ok, então agora, se você quiser um amplo esse comportamento, você quer que seus ícones permaneçam onde eles estão. Você tem que usar quadros porque os quadros estão indo para o pé. Deixa-me mostrar-te. Na verdade. Então aqui temos isso Vamos emoldurar direito. Clique e seleção de quadros. Agora você concebe. Temos dois quadros aqui. Uma é esta ilustração desculpe. Este quadro de prática, este é realmente o quadro de arte. E depois temos outra moldura. Qual é essa moldura? Um dentro dele. Então vamos chamar isso de opções. Agora você pode ver que temos um quadro dentro de um quadro. - Não. Se tentarmos alterar o tamanho deste quadro de prática, você pode ver o tamanho desse objeto. Ele wa 618 por 2 25 Não, Se eu tentei dedo do pé novamente, redimensioná-lo. Você pode ver. Deixa-me torná-lo maior e mostrar-te qual é a diferença? tamanho permanece o mesmo. Então este é o comportamento que eu preciso quando eu tenho elementos dentro de um recipiente e eu quero ir e eu quero que eles permaneçam na mesma área onde eles estão e eu não quero que eles redimensionem. Então você tem que usar sempre a nossa moldura. Caso contrário, você terá esses problemas que os ícones continuarão crescendo. Por exemplo, vamos, uh, remover este quadro. Estou pressionado turno controlado ou comando turno G dedo do pé no grupo este quadro e agora eu vou agrupá-los. Agora você pode ver que eles estão em um grupo. Então vamos chamar essas opções de grupo. E se eu tentar agora o tamanho é o mesmo. Agora, se eu tentar usar o tamanho, você pode ver o que está acontecendo. Esses ícones estão saindo e tudo está bagunçando porque eu não os quero. Você sabe escala? Se eu tentar clicar neste ícone duplo clique, você pode ver que estas são as restrições. Então estas são as restrições, escala e escala. Então ele vai ficar menor e menor. Como eu redimensiono isso para que você possa ver Deixe-me mostrar, você sabe. Então esses ícones são que você pode ver agora lá 44 esperar nossa jornada. Eles tinham 72 pixels de largura. Agora você pode ver que este é o comportamento que não queremos. Então a diferença básica entre grupo e quadro é que o grupo vai ter restrição. Ledgett dedo do quadro pai. O quadro pai será principalmente é placa de arte e para o quadro não temos tais problemas. O quadro está indo para o pé. Aja como um recipiente independente ou uma janela e tudo seja alinhado de acordo com essa segunda coisa é que sempre que temos um quadro, por exemplo, sim, sim, isso é G, eu acho que espero que tenhamos moldura, Seleção de amigos todos os controles e G. Ok, então nós temos essa fama. Existe uma outra opção que é o conteúdo recortado. Se você quiser criar algo, ele vai agir como uma janela. Esta moldura vai funcionar como uma janela. Então, se você tentar estender, por exemplo este ícone fora deste, você pode ver agora ele está escorregando para fora porque nós definimos o esconderijo Grã-Bretanha fora do quadro. Mas se você tentar o dedo do pé, fazer algo com esta ilustração, por exemplo, este era um grupo e por exemplo, eu tenho este vetor ou este braço e eu tento estendê-lo. Você pode ver que nada é cortado e mais uma coisa que você pode ver Se eu tentar clicar aqui, o limite está realmente ajustando automaticamente. Os ossos estão se ajustando automaticamente. Este é, na verdade, o recurso fora do grupo. Então, se você tem algo assim que você quer, você não quer recortar o conteúdo, você pode usar este grupo. E se eu for a este agora, você pode ver que temos um ícone sobre. Harris diz redimensionado para caber a vida. Eu tento clicar aqui, você pode ver agora o tamanho fora do quadro foi ajustado para o contrato de clipe. Então ele está realmente tentando descobrir onde está o limite desse conteúdo? Então este é um recurso fora quadros quadros têm uma altura específica e ler tudo fora deles vai ser cortado. Mas os grupos, eles não vão se comportar assim. Eles não têm nada para cortar. Eles terão limite automático. Eles vão aumentar os ossos fora de seus elementos dentro deles de acordo com o seu retorno alto. Então, sempre que você tentar mudar a largura e altura, ele vai mudar o limite fora deste grupo. Então é assim que eu tento sugerir que sempre que você está projetando seu abdômen ou qualquer coisa, por exemplo, deixe-me mostrar-lhe isso aqui. Está bem. Então você pode ver aqui esta parada um é realmente você quer criar um quadro. Por exemplo, eu quero ter uma altura de retorno fixa para esta frente. E não quero que esses ícones aqui mudem sua posição e mudem seu tamanho sempre que eu tento aumentar a placa dura ou aqui da mesma forma para esta barra aqui. 30 minutos, quatro pessoas, 1,5 quilocalorias. Você tem que usar uma moldura. Se você tentar usar um grupo, tente aumentar a altura deste quadro de arte aqui. Vai estragar tudo. Essas coisas vão se mover. E, na verdade, aconteceu uma vez quando eu estava tentando projetar neste exercícios aconteceu. Ah, muitas vezes se eu não os converti em quadros, então os quadros vão realmente ter um limite específico e as restrições vão trabalhar dentro desta área, por exemplo, Vou usar a esquerda e a parte inferior para este. Da mesma forma, para este também esquerda e tédio. Agora, se você quiser escalar um quadro, você tem que clicar aqui, ir para a escala, ferramenta e você tentar o dedo do pé. Use isso se quiser realmente dimensionar a altura e a largura de um quadro. Mas para um grupo que você pode, você não precisa usar a escala. Você pode usar o movimento para fazer e você pode apenas dragão pressionar seu turno e manter sua tecla Shift para escalar assim. Agora, mais uma coisa sempre que você criar componente ah ou aqui componentes para que eles vão agir como quadros. Tudo vai ter restrições. Você pode ver o seu aqui? Agora você pode ver sempre que você está dentro de um quadro ou você está dentro de um componente os bones ou as restrições estão indo para trabalhar dentro deste limite, este limite de quadro em vez disso. Se você olhar para este grupo, se eu tentar selecionar este topo e digamos que à esquerda estes ossos são essas restrições, limites são realmente de acordo com seu quadro pai, você pode ver aqui o quadro pai é este quadro de prática e essas restrições estão se ligando à porta. Então essas linhas, essas linhas pontilhadas, estão mostrando que elas estão ligadas. Então essas restrições estão ligadas ao quadro espiritual. Então, quando eu clicar aqui e clicar duas vezes neste. Se eu tentar usar, por exemplo, centro e fundo, ele está indo dedo do pé. Tem restrições com isso neste quadro aqui. Da mesma forma, para este, se eu tentar usar esquerda e emprego, ele vai toe ficar o mesmo. Então esta é na verdade a fronteira por causa desta banana aqui. Então, vamos reduzir o tamanho da banana pressionando a mudança. E agora você pode ver que o osso é o mesmo. Então temos que pressionar este limite de redimensionamento novamente e este é o nosso limite. Agora, se eu tentar clicar aqui, você pode ver que essas restrições estão ligadas a este quadro em vez do quadro pai , que é prática para ele. Então eu espero que você tenha entendido as diferenças entre grupos e quadros, e quando você tem que usar um em vez disso, o outro vamos passar para a próxima lição. 28. Exportando ativos e imagens: nesta lição, vamos falar sobre como exportar suas imagens e ativos. Agora, isso é muito importante. Se você está projetando para um aplicativo android ou e eu s aplicativo, existem diferentes configurações ou diferentes opções de exportação para ambos os sistemas de design. Então, por exemplo, como você pode ver, este é o meu aplicativo Android e foi projetado para um dispositivo Android. Então, sempre que você estiver exportando suas imagens, por exemplo, seus ministrações, elas são suas imagens, por exemplo, suas imagens PNG ou quaisquer botões ou qualquer coisa que você tem que exportá-lo para tamanhos diferentes. Então, existem diferentes dispositivos Android lá são Eles usam tamanhos diferentes para suportar esse aplicativo. Então deixe-me mostrar-lhe um artigo rápido aqui. Você pode ver que este é um artigo rápido sobre o meio de lidar com a diversidade e estes são diferentes. Bolsos são baldes EI profundos. Liguei para os baldes de resolução para dispositivos Android. Eu tenho um curso separado fledge completo no dispositivo Android e design. Mas material do Google, onde eu tenho discutido todos estes apenas você tem que lembrar que 0,75 atos 75% 1 próxima 1.523 e quatro. Estas são as coisas para as quais você tem que exportar. Deixa-me mostrar-te. Se você mudou para a Fig MMA, por exemplo, esta barra inferior você tem que exportar. Então eu selecionei esta barra inferior, por exemplo, esta e se você for aqui, você pode ver que há uma opção de exportação. Então, se você quiser, remova alguma opção de exportação. Você tem dedo do pé klik menos. E se você quiser adicionar, você tem que adicionar à frente. E este é, na verdade, o tamanho que mostra. Ele mostra um X outro significa o mesmo 100% 150% 200% 300% 400%. Então eu vou selecionar 400% porque eu realmente queria que o dedo do pé tivesse todos esses tamanhos. Então, estas são as opções de exportação para um dispositivo Android. Você pode ver que estamos aqui no fundo. Diz barras de tédio de exportação. É um nome fora deste grupo. Então von x, 100% 304 101 150% e 75% que será menor do que o tamanho que projetamos . Nós projetamos em 100%. Então estas são as opções de exportação que você também pode alterar o tipo de arquivo do nosso cabelo PNG vai ser Você pode dizer que vai ser transparente em segundo plano. Se você vai para esta pré-visualização, você pode ver o fundo é transparente para estes três botões Oh estão movendo a Grã-Bretanha ou o que quer que você chamá-los. Se eu for para jpg, vai ter um saco branco agora. Na verdade, ele está me mostrando esta prévia, mas ele vai ter um fundo branco. Todos os outros são Deixe-me remover todos os outros. Em seguida, remova todos estes E agora se eu mudar o jpg ainda, ele está me mostrando a visualização errada de qualquer maneira, Então a imagem J P G ou J Big vai ter um fundo branco. Acho que é exportado. Eu vou pressionar exportação e eu vou para a área de trabalho e vamos ver se é como ele tem fundo branco ou não. Então você pode ver ou ouvir que tem, como fundo. Tem fundo branco. Você pode ver se eu arrastá-lo para a Fig. Mauer aqui. Você pode ver se eu amplio e tem um fundo branco. Ok, então isso vai acontecer. Já te disse que a imagem de J. Peg vai ter um fundo branco. Então qualquer coisa que você quer exportar e você, por exemplo, maioria das imagens em um site, por exemplo, esta imagem que você pode estar usando Jay big image, porque uma imagem muito grande uma imagem de fundo muito grande. Você tem que usar algo assim. Por exemplo, no meu este yum Zab nesta tela de login. Se eu ampliar esta tela de log na tela, hum, essa tela de slogan que você pode ver nós temos, ah, ah, sobrecarga de fundo, esta imagem de fundo. Se eu tiver que exportar esta imagem de fundo na parte de trás, você pode ver que é, hum todos estes eu fui grupo eles juntos. Então este é todo o meu passado. Você pode ver Então este vai ser o meu passado. Então, eu vou pressionar sobre cima, exportar. E eu vou usar um jpg porque Jeb vai me dar o menor tamanho para todo esse fundo. Então isso vai ajudá-lo sempre que você está exportando para sites ou qualquer coisa que é muito grande, imagem muito grande. Você tem que usar J peg image em vez de PNG. PNG deve ser usado para, por exemplo, esses ícones ou talvez esses botões ou algo assim. Principalmente, esses ícones vão ser um SPD para fazer, então eu vou para isso agora. Então você aprendeu que quando você tem que exportar para dispositivos Android, você tem que adicionar diferentes densidades de tamanhos diferentes. Por exemplo, dois x três x quatro x, o é tamanhos diferentes até agora e dispositivo IOS. Se você está projetando para um dispositivo IOS, deixe-me mostrar-lhe aqui para que nós só precisamos de um x 100% 200% e 300%. Então estes são os três realmente tamanhos que são usados por dispositivos IOS. Então, se você está projetando para dispositivos IOS, você precisa exportar seus ativos para esses três lados. Então, vamos voltar. Tofig MMA e nós estamos, por exemplo, eu vou selecionar esta tela Se eu quiser o exportar esta tela inteira, eu vou exportar PNG e eu vou exportar para estes três tamanhos um ao lado de X entrada X. Você pode ver a visualização sobre se eu exportar para aqui ele está indo toe exportar três arquivos diferentes . Então eu vou ver o que estamos aqui na área de trabalho e ah, aqui temos esses três arquivos para que você possa ver este sufixo é realmente o nome do arquivo que é adicionado 101 Adicionar dois x força o nome fora do arquivo e, em seguida, o sufixo está realmente indo mostrar que é a idade percentual ou esta é a densidade ou isso é ah, você pode escalar essa imagem. Então, estas são duas coisas diferentes. Você tem uso de reboque em seus laboratórios móveis para números que você estava projetando Da mesma forma, para IOS, você pode ver isso é realmente tela de íris. Você tem que usar thes três até agora somos nós para os nossos tamanhos U. S. S. T um x dois x três x Para Android. Na verdade, temos quatro ou cinco tamanhos. Um próximo 1,5 x dois x três x quatro X ponto som cinco x ou 75% Então estes são todos os tamanhos diferentes que você tem que exportar. BND vai ter fundo transparente. Jeopardy não vai ter fundo transparente. SPD é para ilustrações, por exemplo, como esta ilustração SPD gráfico vetorial escalável. Usei principalmente os meus ícones e as minhas ilustrações. Eu sei que eu exportá-los em excesso arquivo SVG formá-lo. Pdf é basicamente um documento. Se você está projetando um documento e você quer exportar ou você quer mostrar seus projetos em um arquivo pdf, você tem que usar o rápido de para exportar. Da mesma forma, uma vez que você tenha definido todas as opções de exportação para todas as suas diferentes telas, você pode ir para aqui dedo do pé desculpe ou aqui não por aqui, mas neste menu. E você pode usar a exportação de arquivos para que você possa exportar todas as ilustrações diferentes e tudo mais. Se você selecionar tudo aqui que foi selecionar tudo e então eu posso ir para exportar. E estes são todos os diferentes ativos que vou exportar 11 SX. Então, se você tem um projeto muito grande você pode dizer e você quer exportar todos os ativos de uma só vez , você tem que selecionar todos os hardboard e usar esta opção de exportação no menu de arquivos e clicar em exportadores. Vai exportar todas as resoluções diferentes. Então, isso é tudo sobre a exportação de seus ativos para seus dispositivos Android para o seu ah, Eu uso dispositivos, dispositivos da Apple e para seus sites para. Espero que tenham aprendido algo criado nesta lição. Se tiveres alguma pergunta, pergunta-me sempre. Continue em movimento e continue projetando. 29. 05 variantes no figma simples: Neste vídeo, vamos falar sobre a mais recente e nova característica do sigma, que é a variância. E há variantes de diferentes componentes como nós criamos botões, então eles podem ser desativados retorna, eles podem ser botões primários, botões secundários. Pode haver botões que estão tendo uma barra de carregamento ou eles estão carregando e descarregando estado ou prestígio ou overstates. Então todos esses estados, eles tinham que ter um sistema para criar tudo isso em apenas um componente. Então, neste vídeo, vamos aprender exatamente isso. Então vamos começar. Agora você pode ver que estas são poucas variações. Vou mostrar-lhe o poder da variância se você clicar aqui e se você quiser mudar para o botão cinza ou desativado, mas, e você pode ver que você só tem que usar esta opção aqui, que é uma nova variação. E depois temos que mudar para azul. Então isto é, na verdade, eu mesmo criei isto. Este é um feito sob medida. Da mesma forma, como você pode ver aqui. Aqui temos um componente. Você está com fome agora? E temos duas escadas verificadas. Podemos verificar e ligar e desligar. Então, vamos criar os dois neste tutorial. Então vamos começar. Agora vamos começar do zero. Então eu vou pressionar um quadro de arte e eu vou criar uma arte. Mas por aqui, então nós vamos ter retângulo aqui ou pressione são para retângulo para criar um bom botão. E eu vou dar um pouco de redondeza aqui. Vamos dar uma cor primária, apenas este azul. Vou pressionar T para SMS. E este vai ser o nosso botão principal. Estamos? Certo, aqui temos o texto. Vamos colorir de branco. Então temos um botão aqui. Agora o próximo passo é, ele está sempre indo para trabalhar em um componente. Então nós temos que selecionar os dois, criar um componente, e aqui temos um componente, vamos chamá-lo, mas uma barra intrometida Marie. Ok, então nós temos um botão e vamos criar um pouco mais de variação. Então você pode ver uma vez que eu clique aqui, há uma nova opção aqui, que é chamada de variância. Então você tem que clicar sobre isso mais, e lá temos outra variante. Então vamos personalizar esta variante primeiro. Então teremos o botão verde aqui. Vamos chamá-lo de algo assim. Vamos fazer algo assim. Vamos mudar a cor do texto para pretos como este. Então vamos manter isso simples e temos 2 milhões. Então à frente. Então, agora, se você clicar em toda a caixa delimitadora, então se você quiser adicionar uma nova variante, você pode clicar aqui no sinal de mais e ele lhe dará quantas variantes quiser. Posso ter um botão cinza aqui assim. E isto vai ficar um pouco mais escuro como este. Então nós temos agora três botões neste quadro. Então, se clicarmos aqui em todo o limite deste, esses três botões, você pode ver que nós declaramos aqui propriedade. Então propriedade é, na verdade, poderia ser o seu tipo, poderia ser suas cores, poderia ser o tipo de coisa que você está criando. Na verdade, está na hierarquia. Vai estar no topo. Assim, uma propriedade pode ter variância múltipla. Vou repetir de novo. Este é um conceito essencial muito, eu sou muito inicial. Uma propriedade pode ter várias variantes. Por exemplo, posso chamá-lo de primário. Vamos chamá-lo de botão. Ok. Então nós temos o botão aqui e, em seguida, se eu clicar aqui, eu vou, isso é basicamente o principal. Isto é, ou podemos chamá-lo primário, primário azul. E então eu vou clicar nele. Vou mudar o nome da variante para verde primário. E então eu vou clicar aqui e principal deficiente. Ok, então vamos chamá-lo de cinza. Ok, então nós terminamos isso, então como podemos usá-lo. Por isso, já criámos isto. Vamos movê-lo para fora deste quadro. Agora vamos passar para os nossos bens. Nós estamos, nós temos este componente aqui e nós vamos arrastar este componente botão. Este é o que acabamos de criar. Ok, então agora você pode ver à direita nós temos este nome de propriedade aqui à esquerda este é o botão. E à direita temos a variância, azul primário, cinza primário, verde primário, ou o que seja. Você pode até chamá-los como primário, Hoover e talvez deficiente. Cabe a você, Por exemplo, vamos nomear este pairado. Então temos este para ser desativado. Então agora você pode ver que temos três estados aqui, para casa, primária e incapacitada. Não sei por que isso está alinhando assim. Eu acho que eles devem ter o mesmo que você pode dizer a mesma ordem que nós criamos aqui. De qualquer forma, ainda assim, podemos mudar para quem quisermos, assim. Ok. Agora vamos chegar ao ponto em que temos que criar uma pequena caixa de seleção, que é uma caixa de seleção móvel. Então eu vou fazer isso redondo. Vamos usar 320 k. Então primeiro temos que criar diferentes componentes. Então agora vamos usar uma elipse. Apenas 21 por 21 mudou a cor para branco. Vamos fazer um pouco assim. Mova um pouco mais aqui deste lado e reduza a largura deste. Ok, então nós temos um pouco de acordo aqui. Então, vamos criar componente clicando aqui ou Alt Control tecla ou Command Alt tecla. Eu não tenho certeza qual é o atalho no Mac de qualquer maneira, então você pode clicar aqui. E aqui temos o componente. Uma vez que temos o componente, temos que criar sua variância. Vou clicar aqui. E aqui temos outra variante. Vamos clicar duas vezes e entrar nessa variante, mudar a cor para verde. E vamos mover isto para cá. Deste lado, assim. Então esta vai ser a nossa outra variante. Então, para a propriedade, vou selecionar sobrecarga verificada. E uma coisa que você tem que fazer é quando você clica aqui, você tem que descrever seu nome de variante. Para isso, vamos usar falso. E para este é verdade. Então isso, isso criará alternância aqui. Então agora temos que usá-lo. Então vamos movê-lo para cá. Vá para os ativos. Nós temos esse componente, e vamos clicar nele. E temos a caixa de seleção aqui. Realmente legal. Espero que tenham gostado desta lição. Eu vou te encontrar em outra aula em breve. Até lá, cuide-se e tchau. 30. 06 Variantes de figma Avançadas: Agora vamos entrar em um pouco mais avançado uso desses recursos. E nós vamos criar entrada aqui. Torná-lo um componente. Vamos adicionar variância. Então, antes de criarmos mais destes em vértice, vamos criar uma nova propriedade. Estamos aqui na propriedade da NYU e vamos dar o nome do tipo. Então nós temos tipo e isso é propriedade. Esta propriedade vai ser o estado. Então estes são na verdade, estes são ambos na verdade vão ser tipo x. adicionar um novo tipo ao squint para ser entrada de texto. E se clicarmos em um deles, isso será estado padrão ou estado normal. E para este vai ser ativo. Agora vamos criar mais destes. Vamos criar este, outro. E para o tipo que vamos usar, vamos criar um novo aqui. E nós vamos usar realmente caiu, vamos chamá-lo de dropdown. E depois temos outro. Antes de nos mudarmos para outro, vamos adicionar um retângulo aqui. Polígono, na verdade, para o menu suspenso. Vamos movê-lo assim. Vamos renomeá-lo, selecione. Agora podemos criar outra variante. Vamos criar outro obediente. E eu vou voltar a usar este aqui, copiá-lo aqui. E este nós vamos chamar de select. Vamos mudar a cor para outra coisa. Como este. Só para fazer a diferença. Da mesma forma para este, vou mudar a cor para algo assim. Ok, agora eu vou selecionar este e este, e este vai ser Type drop-down. Ok? E para estes dois, eu estou segurando realmente turno. Vamos usar entrada de texto. Agora para cada um temos que definir o, definir o estado. Este vai ser normal, este vai estar activo. Então agora você pode ver que estamos realmente usando dois conjuntos diferentes de estados e tipos. Então, como podemos usá-lo, basta arrastar, colocar texto aqui. E se formos pela direita, podem ver aqui que podemos mudar o estado aqui. Em seguida, também podemos alterar o menu suspenso e o tipo deste. Então isso é realmente que Vos uso onde podemos combinar duas propriedades diferentes. Agora, se você quiser criar variantes de seus componentes já criados, então não, você não quer criar componentes e você já tem poucos componentes, então é muito fácil. Deixe-me, deixe-me criar um componente aqui. Mas eles devem ser dif, componentes diferentes. Por exemplo, aqui temos componentes de diferentes estados. Por exemplo, temos este. Este é o estado ativo, vamos chamá-lo de ativo. E eu vou criar um componente aqui. E vamos para as camadas. E aqui temos outro. Isso vai ser, vamos chamá-lo de nav como barra invertida normal ou normal. E barra invertida nav desabilitada. E se você quiser criar os dois e você vai querer criar variantes, você tem que simplesmente arrastar assim. E você pode ver à direita, você pode ver combinado como variância. Basta clicar sobre ele aqui assim. E você verá as propriedades desativadas e normais já criadas, variantes. E para a propriedade vamos apenas dar o nome de navegação, talvez algo assim. E quando você tiver que usá-lo, basta arrastar e soltar isso agora aqui. E você pode mudar seu estado assim e ter certeza, uh, mais uma coisa é que se você quiser alterar a forma ou, por exemplo, se eu quiser mudar a forma do estado, isso depende de você. Não se trata de uma questão muito importante. Você pode mudar esses dois estados. Então você pode ver seu cabelo de navegação, navegação normal desativada é um maior. Então, cabe a você. Você pode mudar qualquer coisa em qualquer variante. Então isso é tudo sobre variância e seu poder em figo, minha esperança que você tenha gostado desta lição. Vejo-te em breve na próxima lição. Até lá, cuide-se e tchau. 31. Noções básicas de Prototyping e sobreposições: neste vídeo de, vamos aprender alguns dos conceitos básicos de prototipagem em Sigma. Agora você pode ver que eu projetei três telas simples e uma é na verdade uma navegação esquerda , que é um quadro personalizado. Então, se você clicar aqui, você pode ver o tamanho para 51. Altura é 726 agora. Primeiro, vamos começar com estas três telas. Então aqui temos. Vamos à zona para caber Prima 1, e você pode vê-lo aqui. Temos três quadros, então todos eles têm o mesmo nome, então eu vou renomeá-los. Há, uh, renomeá-lo um que o viu no reboque para que é renomeá-lo para três. Então nós pisamos um dedo, 33 telas, e não há muito nisso. A primeira coisa que você tem que notar e você tem que lembrar é que se você quiser qualquer feito seus objetos, você tem que nomeá-los o mesmo Lear, por exemplo. Aqui diz, ilustração ou ouvir e ver se vamos neste painel Lius. Os nomes são a mesma administração porque eles são as cópias um do outro, e no mesmo próximo, ele diz ilustração o mesmo. Ou aqui deve ser a Ilustração. Ok, então essas camadas também estavam aqui. Estes grupos têm os mesmos nomes. A única coisa que está mudando é uma é esta ilustração está mudando. O nome é o mesmo. E também você pode ver por aqui. E nós temos essas barras de baixo. São três barras e estou mudando as cores deles. Então, para este, o próximo, temos essa cor diferente para o 3º 1 Este está ativo, outro para o nosso, inativo. Isso é tudo o que está acontecendo dentro da tela. Então temos esta navegação à esquerda. Então, primeiro, o que vamos fazer é ir para o nosso protótipo ou ouvir a tela do protótipo, e agora você pode ver nenhum fora. As placas de arte são selecionadas. Então, primeiro, temos alguns protótipos configurações como orientação do que temos dispositivo que queremos ver no nosso protótipo do que temos o modelo Gould. Desculpas prateadas da meia-noite. Além disso, temos alguns preview também. Que plano de fundo Você deseja exibir essas seleções. Vou selecionar este plano de fundo e depois temos o quadro inicial. Qual deles devemos? Então vamos usar um. E vamos começar a combinar essas telas. Comece a conectar essas telas agora. Primeiro vamos fazer é eu selecionei este quadro de arte e cliquei neste nome e nós temos alguns. Você pode ver um pequeno círculo aqui que é basicamente um ponto de colecionador. Da mesma forma, se clicarmos aqui, você pode ver se eu estava em diferentes elementos ou grupos. Estou vendo os mesmos itens de colecionador. Então, se eu quiser oh, ter alguma interação aplicada dedo do pé Este item que eu vou fazer. Use este conector para este. Eu nos movi assim e usar seu corretor. Por isso, neste momento, não usamos mais o nosso cabelo específico. Então, vamos com a tela inteira. Vamos selecionar este. Então aqui temos apenas clicar e arrastar e vamos deixar para a próxima tela agora também . Assim que deixarmos isto, temos poucas opções aqui. Interação vai ser na torneira no arrasto durante a aspiração enquanto pressionando veio mau jogo centro do mouse. A maioria das folhas. Estas são todas interações diferentes. O que realmente você está tentando fazer Então nós vamos selecionar na torneira. A seguir é o que vai acontecer quando você adaptar este 80 0 à frente. Nunca fique aberto Overlay varrido com volta perto da abertura Então estas são coisas diferentes que você pode fazer Você pode abrir um link que você pode fechar qualquer excessivamente que você está usando. Você pode voltar para a tela anterior. Você pode bater com outra coisa. Oh, aqui temos aberto ao vivo. Vamos voltar a isto. Abra o seu nome. Eles são atraídos. Então, Então, eles esperam esta outra vez. Então aqui está a interação com entrar. Então, a seguir é o que qualquer missão vamos fazer. Então, estas são as animações. Citando movimento. Seguir em frente com slide e deslizar para fora. Inimigo inteligente dissolver ou instantâneo instantâneo instantâneo vai fazer nada vai sempre se dissolver na próxima pele. Inteligente animado. Nós vamos usar principalmente este aqui. MoveOn está realmente se movendo em e em que direção. Então, se ele se mover, vai ser assim. Ok, então você pode ver a visualização da animação aqui. A seguir, temos o tempo de Theis. Então temos, por exemplo, vamos usar 400 milissegundos. Então vamos usar em vez de nos mudarmos. Vou usar o smart a qualquer minuto e vou usá-los daqui a uma hora. Esta é a opção que eu uso a maior parte do tempo. Eu amo isso. Então, essas são as opções que selecionei aqui. E então novamente para isso novamente, o 2º 1 nós vamos fazer o mesmo. Estou a clicar nesta área branca. Estou outra vez. Slack clique e arraste e deixe-o para o ninho próxima tela para que você possa ver as configurações que eu fiz da última vez na torneira. Navigato inteligente e facilidade de imagem fora do tempo. Eles foram salvos. Então, uma vez que você tenha selecionado as configurações, ele vai aplicar as próximas telas. Se você quiser alterá-los, você pode alterá-los. Então vamos ver como estes realmente parecem agora. Então, vamos jogar este presente e clicar neste presente e nós estamos indo para o pé. Vê este protótipo? Agora você pode ver que estamos na primeira tela e agora vamos tocar no dedo do pé. Aqui, você pode ver o inimigo inteligente de qualquer missão porque nós o preparamos para se mover, facilitando a facilidade. E também o nome das ilustrações são os mesmos, para que você possa ver como essas ilustrações estão realmente mudando umas para as outras . Agora você já viu isso. Não temos nada para onde voltar. Então, também podemos definir sua guia. As seções estavam aqui. Nós também podemos usar que estes e sim. Então vou deixá-la aberta e voltar ao meu arquivo. E, hum, eu posso tê-lo configurado para voltar aqui também para este para ir para o primeiro 1 aqui, eu vou colocá-lo para ir para o próximo e este para voltar para a escola de volta ou para a frente e tentar avançar. E você pode ver como tudo isso está mudando. Ok, então nós aprendemos que auto Um Emir. Se você tem os mesmos nomes fora dos elementos, eles estão indo para o pé. Eu tenho Ah, tempo de riel. Muito agradável. Suave. Qualquer missão em transição de uma forma para outra está mudando isso. Ok? Não, a segunda coisa é a área de degraus. Então, sempre que você está prototipando um monte de designers que cometem este erro você pode ver esta 80 horas aqui é muito perto da próxima. Então a primeira coisa que podemos fazer é que podemos aumentar seu passo Índia para que você possa fazer algo assim e isso é chamá-lo, Sim, Índia. E então vamos projetar e reduzir a opacidade a zero. Então, sempre que você quiser corrigir algo, você tem que conectá-lo usando isso. Por exemplo, vamos excluir este. A mídia pessoal. Agora você pode ver, por exemplo, o pular, então Skip vai ser um botão. Então, se eu tentar clicar aqui, você pode ver que tem uma caixa delimitadora muito pequena. Agora eu vou fazer é eu vou criar um retângulo aqui e ter uma idéia feliz . Vamos chamá-lo de área e vamos reduzir sua opacidade para 0% na verdade estavam tentando escondê-lo. Por quê? Porque isso vai funcionar como um grampeado nossa área alvo principal ou o capitão deles. Então, agora, se formos para o protótipo agora, você pode ver que eu vou passar para isso. Então, aqui. Agora, o próximo passo é que nós vamos dedo do pé selecionar este passo qualquer nosso cabelo e nós vamos dedo do pé clique e arrastar e deixá-lo para este. Agora isso diz no toque Navigator, Mas nós não queremos nunca chegar a este e disse que vamos abri-lo como um excessivamente então vamos usar este aberto lá e não temos configurações diferentes com a posição fora este excessivamente No centro superior esquerdo, no topo, no canto inferior esquerdo, no centro inferior, algo assim. Mas vamos usar homens, Will e eu vamos jogar set aqui assim. E mais algumas coisas é que eu vou usá-lo. Este em cima à esquerda. Também posso usar esta posição aqui. Eu também posso usar manual ou superior esquerdo que pode ser usado homens vai. Acho que vou ficar com o manual agora. Estas são poucas opções de poluição para centrar ou algo assim. Da mesma forma, temos mais algumas opções como roupas Ao clicar em arquitetos, sempre que alguém clica fora desta área, ele vai ficar fechado novamente. Temos adicionar fundo por trás excessivamente, então vamos adicionar um pouco de cor escura seu cabelo. Você também pode adicionar vital e mais aqui em usar 50% de capacidade e a qualquer missão que eu vou usar é movida em vez de instância. Então ele vai se mover assim da esquerda, direita e outras configurações estão indo para o mesmo. 400 milissegundos estão dentro e fora. Desculpe-me isso. Vamos tentar isso agora. Este é o último passo onde estávamos indo klik. Nossa guia no salto. Certo, então aqui temos nossa navegação esquerda. Muito agradável. Quando eu digo que se eu tentar clicar aqui fora, ele vai voltar para dentro, para fora, para dentro, dentro, fora. Então isso parece muito bom. Estes são os dois conceitos básicos de qualquer prototipagem. Você vai ligar suas telas juntas. Você está indo dedo mover de um esquema para outro tocando. E também vamos sobrepor telas diferentes como você pode ver onde aqui temos sobre chumbo Estas são as direções se movendo. Mexam-se. Então isso é tudo Estes são os conceitos básicos fora prototipagem para sigma. Se tiver alguma pergunta, pode sempre me perguntar. Tome cuidado com todos esses grampeando nós. Tente ter uma boa área de amigo para que você possa pressioná-los com o couro de bater do que suas bocas fora do seu PC ou do seu Mac. Então, isso é tudo. Se você tem alguma pergunta para me fazer, vamos encontrá-lo em outra lição. 32. Noções básicas de protótipos: Agora você aprendeu tudo o básico. Preferiu hyping como? Transição do dedo do pé de um esquema para outro. Como você inteligente, qualquer feito e como overly telas em cima disso. Então saiba que sua tarefa é que você tem que criar essa tela de três ou quatro e você tem que compartilhar comigo. Você vai criar algo assim. O que está acontecendo? Então ele vai definir em arrastar de qualquer maneira. Então aqui está três telas e, em seguida, você tem barba de reboque alguns excessivamente com qualquer um que você tem, Por exemplo, o salto. Isso é demais. Eles devem estar vindo da esquerda, certo? Ou onde quer que você queira colocar que você pode querer colocá-lo no topo. A borda de baixo para cima. Tanta coisa é do fundo da tela. Cabe a você. Então este é o protótipo. Uma vez que você criar este protótipo, você tem reboque clique no protótipo de compartilhamento, e você pode ver que há configurações em Lee pessoas convidadas para este arquivo e qualquer pessoa com o link para folgar este qualquer um com o link e copiar link e compartilhar que links para mim. Então eu sou capaz de ver e ver visualmente o seu protótipo. E eu vou dar feedback para você. Se tiveres alguma melhoria, digo-te isso. Então, certifique-se de criar essa protrusão. Eu posso ser mencionado seu nome em algum lugar, então eu posso facilmente lembrar que este é o protótipo do meu aluno. Então três telas ou talvez quatro telas ou duas telas tradição de uma para outra e terceira tela para o excessivamente. Esta é a sua missão. Então vamos começar agora. Estou lendo para ver o seu perfeito eu não. 33. Troca com os retardes e tempo: neste vídeo, vamos aprender mais algumas coisas que podemos fazer enquanto protótipos em figo MMA. Então vamos seguir em frente e aprender mais algumas coisas, como, até ver ou ouvir. Aqui temos. É como este, esta interação e você pode ver que estamos usando varridos com. Então vamos estudar amarrados e como você pode fazer isso. Além disso, vamos aprender Delay, por exemplo. , Se tivermos aqui, se formos a essas interações, então temos interações, e então temos qualquer missão. Então, dentro deste painel de interação, vamos estudar. Mais algumas coisas para que possamos melhorar na prototipagem. Então, aqui temos. Defina na guia. Nós também estamos indo para estudar drag e também depois dilly todos estes, por exemplo, vil pairando enquanto pressionando ele pad jogo thes pode não ser necessário a maior parte do tempo. Por isso, agora vamos ignorá-los. Talvez no futuro, eu vou criar mais lições sobre essas opções. Os são diferentes interações enquanto segura algum objeto enquanto pressiona. Talvez você esteja tentando criar um jogo com a tecla de manutenção. Ah, e entrar na chave e mudar alguma coisa. Centro do rato, a maioria das folhas. Touchdown. Então estes podem ser mais necessários em jogos, basicamente. Então, aqui estamos nós. Então vamos começar. Primeiro, vou apagar essas interações já significantes. Portanto, há muitas maneiras que você pode ir para este protótipo mais nós estamos dentro dele. Você pode pressionar delete e vai excluir essa interação. Da mesma forma, para este, vou pressionar delete, ou você pode ir até aqui e selecionar nenhum. Esta é outra maneira. Então, às vezes, talvez o estigma não esteja funcionando para você. E você não é familiar. Como? Toe remover essa interação entre esses dois elementos. Você pode fazer isso. Ok. Então varrido com então primeiro que vamos fazer é que já temos isso. Uh, você pode dizer que isso é realmente nosso excessivamente nós abrimos uma sobreposição aqui. Então, sempre que você estiver dentro e excessivamente, e você quiser mudar para outra navegação, por exemplo, alguma navegação, por exemplo, como esta. Então estamos dentro dessas configurações e queremos ir dentro das configurações e e esta é a tela de configuração. Então, este é realmente o dedo esquerdo de navegação chamado. É apenas uma duplicata disto. Então, Então, o que faremos é mostrar-lhes como funcionará em alguns segundos. Então, primeiro, vamos folgar esta camada ou aqui, e vamos criar uma interação. Então nós vamos mover o dedo do pé esta tela na torneira, e nós vamos usar isso. O navegador que vamos usar navegação varrida vai realmente remover este quadro. E ele vai para este quadro, então tudo o que deixamos para trás será, você sabe, hum terá desaparecido. Então este é outro problema. Então lance varrido é principalmente ir trabalhar no dedo do pé. Quando você está em um excessivamente ancorado você já tem um excessivamente em seu ab. Vou mostrar-vos mais um exemplo. Então primeiro temos isso, e ele vai para lá. E da mesma forma, quando nós prestes cruzar sobrecarga ele vai voltar para esta tela, a tela, e nós vamos usar na torneira bateu com, e ele vai ser navegação esquerda. Este e vamos usar dissolver. Ele está dentro, ou está fora. Você pode usar qualquer um deles por 50. Estou usando preserva a posição Scroll. Assim é, às vezes, quando temos uma tela muito longa. Neste momento, não temos. Mas se alguém é ter ah rolagem e embattled rolagem vertical e eles têm educado ele está indo toe Fique na mesma posição que vai. , Vai preservar as posições de rolagem. Se você tem escola para baixo, vai ser. Quando cozinhar, volte. Estará na mesma posição. Então, agora eu me oponho só para você ver diversão. Nós realmente não precisamos porque nossa navegação esquerda é pequena. Ele não é capaz de rolar. Então vamos jogar isso. Este é o nosso protótipo. Até ver o seu cabelo. Aqui temos. Vamos jogar isso e vamos para o pulo. E aqui temos nossa navegação. Então, por exemplo, acha que esta é a navegação? Não, se quisermos ir para as configurações e eu não quero esconder todas essas telas atrás. Então eu vou selecionar aqui e você pode ver este quadro inteiro o quadro de parada. É varrido com outro amigo onde eu posso mudar minhas configurações e então eu posso voltar. Então este é realmente o caso de uso ou cenário fora usando uma correia com função em figo MMA em figo MMA. Então, isto é tudo sobre varridos. Agora, deixe-me mostrar-lhe mais um exemplo. Aqui temos o nosso figo Mahfoud no qual vamos projetar nesta lição. E vocês podem ver que eu criei um feedback de sobreposição muito simples. Então, uma vez que você enviou este, uh, este seu comentário sobre um prato ou qualquer receita aqui. Então, sempre que você enviar isso depois de enviar isso, ele irá mostrar-lhe uma mensagem de feedback, e esta vai ser essa mensagem de feedback. Então o que nós vamos fazer é apenas mover para o protótipo e este é realmente o nosso excesso que você pode ver, esta tela está indo para o dedo do pé. Pegue isso demais, então se eu mostrar a vocês, na verdade, então vamos rapidamente para aquela tela onde temos isso aqui. Então, se eu voltar aqui, temos tudo pronto para comer agora. Então, quando clicamos aqui, ele mostra um excessivamente que já discutimos. Então isso não é demais. E se você tentar clicar aqui Se você tentar clicar aqui, nada está acontecendo porque nós não ligá-lo com o próximo jogo. Então eu quero é que eu quero esbofetear esta tela com outro que vai ser Obrigado por enviar seu comentário. Então vamos voltar e fazer isso agora. Assim que alguém clicar aqui, vou para a tela. Eu estou indo para selecionar na guia esbofeteado com esta tela varrido com a tela que eu queria dissolver Você também pode usar animador inteligente movimento Eu estou indo para slacked Smart, animate Desta vez está dentro está fora e isso é tudo que eu preciso agora. Então eu vou voltar para cá agora. Se eu tentei pressionar isso, você pode ver que nós temos isso e ele desaparece depois de algumas vezes. Então isso é que eu vou te dizer em um segundo. Certo, assim que você clicar aqui, este é o nosso feedback. O que eu fiz foi selecionar a interação após o atraso. Então, depois de uma despedida, ela vai desaparecer. É como uma mensagem de feedback que aparece e desaparece automaticamente depois de algum tempo. Então vamos aumentar o tempo para 2000 milissegundos, o que é igual a dois segundos. Então por aqui, vamos dar uma folga tão perto, excessivamente. Então, em vez de voltar ou acabar com isso, vamos usar perto. Excesso. Isto é tudo o que precisamos. Então estes são para as árvores. As coisas que aprendemos nesta lição primeiro é que uma vez que você está em um humor excessivamente, você quer bater com outra tela que você tem que usar tapa. Aqui temos essa atração rápida. Então, onde está, deixe-me escolher este. Então aqui temos na torneira, rápido. Ok, então agora eu vou usar isso em. E, uh, oops, eu vou usar dissolvido é sempre realmente melhor para este aqui porque ele está indo para o pé. Vamos como essa posição na escola. Vai ser melhor porque não queremos que as coisas sejam feitas para cima e para baixo. Só queremos que o dedo do pé da tela apareça e desapareça depois de dois segundos. Então, na verdade, eu tenho sempre que você quiser usar este tempo, atrasar roupas e sobreposição, você tem reboque folga este quadro e ir para a interação e uso após atraso nesta interação e tempo usado aqui e fechar o excessivamente. Agora vamos ver isto. E se clicarmos aqui, submeter excessivamente Summit revisão sobre massa viva. E se clicarmos aqui, você pode ver obrigado. E vai desaparecer depois de dois segundos. Então esta é a interação que queríamos, e nós a criamos usando ID de tapa e atraso de tempo. Espero que tenham gostado desta lição. Se você tiver alguma dúvida, você quer me perguntar alguma coisa sobre prototipagem em figo MMA, você sempre pode me perguntar, vamos passar para a próxima lição. 34. Sobre a ação de arraste + rolagem vertical: nesta lição, nós vamos aprender sobre arrastar na tração. Então, se eu selecionar este, você pode ver nesta interação que temos no toque no arrasto. Então isso vai ser usado muito tempo. E quando você está projetando ou criando alguma interação ou protótipo, assim por diante arrastar está realmente indo dedo do pé em rastreado quando você tenta arrastar algum objeto. Então, para isso, vamos criar, uh, e retângulo aqui. Então pense que isso é um e-mail. Então você está usando, na verdade, por exemplo, você está usando o Gmail, e este é um e-mail aqui. Então tem um imposto sobre o seu cabelo. Vamos colocar um texto sem sapatos neste fundo para ser assim. Então aqui temos um e-mail. Basta pensar que este é um e-mail que acabei de receber. Vamos usar aqui há minutos. Eu suponho que eu acabei de receber este e-mail e este é o meu verdadeiro vamos como este e comando g para controlar um grupo. Somos um grupo. Ok, então nós temos este e-mail miserável. Ok, então só o nosso e-mail aqui. Troque o seu sculler por outra coisa, atire neste. Ok, então nós recebemos apenas um e-mail e eu quero arrastá-lo. E eu quero aqui meus controles, Toby deletar ou talvez movido para alguma pasta ou algo assim. Então vou usar o Elemental. Aqui está um vai ser este, então eu Este vai se mover assim. Ok, então vamos copiar isso e colocá-lo aqui. Controle C, Comando V. E aqui temos o mesmo e-mail aqui. Mas aqui, queremos que seja arrastado para este local. Arraste para este local, e nós vamos usar outro. Então vamos criar mais 10 aqui, 84 altura. Combinando com isso assim, e nós vamos usar alguma outra cor, como esta. E vamos mover isso um pouco mais. Nós estamos aqui. Ok, então este é o nosso estado de travessia. Se quisermos adicionar alguns, você pode ver alguns ícones, lábios neles, controle de deslocamento, barra invertida eu penhorar. Eu vou usar ícones materiais, e ele vai aparecer ou cabelo, então eu vou usar excluir. Então aqui temos deletar. Desculpe-me, e ainda temos comida. Vamos lá para dentro. Isso ajuda. Vamos arrastá-lo e usá-lo aqui. Sim. Então vamos o que é aqui temos esta lista, Sr. Bean. Imagem arrastada e normal, para que eu possa facilmente ver o que está acontecendo. Eu nunca vou ver o que está acontecendo aqui. Então aqui temos esse fator. Vamos movê-lo para cá com este retângulo. Vamos deletar aqui. Temos este espectro acima deste retângulo mudar sua cor branca. E em seguida, você um pouco de Dexter junto com ele. Então estes são apenas alguns ajustes. Quero dizer que pesa e como podemos usá-lo. E qual é realmente o caso de uso fora desta opção para que possamos ter mais opções aqui. Vamos usar manter isso aqui agora. Basta diluir e selecionar todos eles. Vamos, G. E isso vai ser nossas ações de arrasto Escoltado ações de arrastar. Agora, se você quiser usar isso, nós também queremos este grupo Toby aqui, e nós vamos posicioná-lo. Vamos lá. Vês? Vai ser por aqui, mas vai ser do lado de fora desta seção ou aqui. Isto vai estar aqui fora fora desta moldura. Então agora vamos para o protótipo. Então nós compramos estes este e-mail e arrastar ações. Temos ambos estes em ambos estes quadros. Ambos são pranchas. Só uma mudança de posição. Então nós temos esse estado de arrastar e isso é realmente estado normal. Agora, nós vamos protótipo isso. Primeiro, vamos selecionar este elemento aqui e-mail porque nossa ação de arrastar vai acontecer neste líder. Então vamos ligá-lo a este estado de arrasto aqui e na torneira em vez de em que vamos usar no arrasto. Então, no arrasto, ele está indo toe navegar toe toe este estado de arrasto, e nós vamos usar inteligente de qualquer maneira, ele e mais fácil está fora. Ou seja, eu vou usar. Então vamos usar 4 50 milissegundos e vamos ver como isso acontece. Agora você pode ver que temos este e-mail aqui e vamos executar ação sobre arrastar e você pode ver uma vez que eu tenho arrastado. Você pode ver esta opção de exclusão ou aqui. Então, não criamos o arrasto de volta aqui. Então vamos ligar isso agora. Então agora você vai selecionar Eu fiz isso ou isso, então nós vamos selecionar este e, hum, que é usado no drag. E ele vai mover o dedo do pé, nunca chegar ao estado normal e nós vamos usar as mesmas configurações sobrecarga. Então, vamos voltar. E arrastou isto assim e isto e isto. Da mesma forma, se você quiser ter todo este Dragnea, você também pode usar isso e você também pode usar a mesma ação aqui no arrasto. Então, se você perdeu isso um ano e você usar esta área, a mesma coisa vai acontecer. Você pode ver Então neste momento eu acho que o nosso presente está muito perto. O protótipo. Então, esta é na verdade a ação de arrastar. Então você também pode ter mais uma tela onde isso realmente é excluído. Então, uma vez que você arrasta e, em seguida, toque sobre isso aqui, ele está indo dedo do pé. Remova este e-mail e mova todos os outros e-mails para cima. Então, para este exercício, eu queria dizer-lhe como usar na ação de arrastar e como você pode usar isso quando você está tentando criar algum protótipo no figo MMA agora Vamos falar sobre ações de rolagem simples. Corações na escola e na escola vertical. Você já começou a escola vertical. É muito fácil. Sua tela tem comprimento aqui do que a tela normal. Mas e a escola horizontal, por exemplo? Eu tenho, tipo, três caixas estavam aqui, e isso está lá fora. Então o que eu vou fazer é que eu quero que eles sejam permitidos por parafuso. Então agora você pode ver que isso está fora de todo esse quadro. Então, como posso fazer isso? Como eu posso rolar estes, Por exemplo, Eu tenho este aqui como este. Está a sair, por isso tenho de o arrastar para dentro desta fama. Então este é o nosso normal aqui, e nós temos quatro diferentes. Você pode ver quatro quadros diferentes aqui para retângulos diferentes ou talvez imagens ou talvez qualquer coisa. Hum, você pode pensar fora. Podem ser as suas receitas ou qualquer coisa. Então, se nós temos quatro desses, e eu quero que eles sejam arrastados à base de plantas, então sempre que alguém abre este aplicativo, eles podem facilmente rolá-los. Então agora, se eu for até aqui, você pode ver Vamos, hum, repetir isso e nós temos aqui, certo? agora você pode ver na dissecação está acontecendo. Então esta é na verdade a tribo drag está aqui, mas eu quero que eles sejam o nível do parafuso tão fácil. Vou escolher todos eles. Eu vou usá-los dentro de um quadro, então eu vou usar a seleção de quadros. Este é o meu amigo. Então o que eu vou fazer é reduzir o tamanho dos meus amigos um tamanho de janela, na verdade. O que é 500? Vou usar 400 em vez disso. Então este vai ser meu amigo. E eu vou usar o conteúdo do clipe assim. Esse é o Z usado aqui assim. E eu vou usar 400 para um tamanho como este. Então, isso parece melhor agora para qualquer quadro que você pode selecionar fornecendo opções. Então, uma vez que você tenha selecionado este quadro, você pode ir para o protótipo aqui. Então este quadro é selecionado. Você pode ir até aqui Sem escolaridade, e queremos ter um comportamento de rolagem horizontal para esse comportamento de estouro. Então isso realmente vai acontecer aqui, então você também pode configurá-lo para todo este quadro de arte para que você possa ter o nosso sob rolagem vertical e horas para a escolaridade. Cabe a você. Então, uma vez que isso é definido, você pode facilmente arrastá-los assim. Você pode ver muito bem. Muito fácil. Quer dizer, acho que devo explicar um pouco mais. Vamos usar a janela. Verdes, Toby. 300 esperanças, nem 30. Quero que o quadro seja de 300. Desculpe-me isso. Então aqui temos a estrutura. Vou mover a moldura. Hum 60. Isso Então eu vou mover o conteúdo dentro do quadro como eu gosto deste. Ok, então quadros na verdade de interior, ele vai trabalhar como uma janela. E agora, quando eu tento usar isso, você pode ver onde está aqui. Muito agradável. Muito bom arrasto e escola por aqui. Na verdade, deixamos o nosso único elemento aqui, que é o nosso verde. Eu estava indo bem, então é muito longe. É por isso que isto está a acontecer. Então vamos usar todos eles e você estuda para ter uma igual e distâncias entre eles . Vamos como estes. Certo, então isso é muito legal. Muito agradável. Muito agradável. Então isso é realmente como você pode protótipo e habilitar rolagem horizontal ou escolaridade vertical e usar quadros para elementos de ervas escolares como estes. Então eu acho que isso vai te ajudar muito em sua prototipagem quando ele estava usando sigma este ar sobre o básico que eu tenho coberto. Eu não acho que você precisa de mais do que isso agora para criar belas interações. Se tiver alguma pergunta, pode sempre me perguntar. Vejo você na próxima lição. 35. Hover da protótipos usando o Figma: Nesta lição, vamos ver uma de outra característica da prototipagem em sigma, que é enquanto paira. Então este é outro gatilho. Basicamente temos que animar algo ou movido para outra tela quando você está pairando algo. Então deixe-me mostrar a vocês como eu realmente usei isso. Então agora você pode ver que este é o meu projeto. Eu realmente projetei este site recentemente, agora em fase de desenvolvimento. Agora, se você olhar para aqui, você pode ver quando eu passar o mouse sobre este link, ele se desvanece para a cor azul, que é na verdade todo o meu overstate para o meu web design. Então, sempre que eu passar o mouse sobre isso, você pode ver aqui. Então você pode ver que a cor mudou. Então isto é, na verdade, eu fiz este protótipo para mostrar ao meu desenvolvedor, meu desenvolvedor web, que como você vai aplicar todo esse efeito sobre esta navegação. Da mesma forma, você pode ver aqui, mesmo que eu fiz para esses botões aqui, chamar um duplo seis da mesma forma, o inferior. Então foi assim que eu mostrei a ele ou expliquei ao meu desenvolvedor que é assim que você vai usar isso, essas cores sobre esses botões. Então hoje eu vou mostrar a vocês como você pode facilmente criar isso. Este é um exercício simples. Você pode ver por aqui. E isso é muito, muito, muito fácil. Então, há apenas coisas que você não precisa fazer muitas coisas. Agora, deixe-me mostrar-lhe, deixe-me reorganizar isso para você. Ok, então esta vai ser a nossa tela padrão, ou a primeira. Então este vai ser o nosso primeiro em que temos todos os estados, todos os botões em estado normal. Estado normal significa que eles estão indo para ser apenas de forma simples que não há nenhuma animação pairar, nada. Então isso vai ser estado padrão ou estado normal. Então, quando alguém paira sobre este botão. Agora, para cada lição de casa, para este e este, vou ter duas telas diferentes. Então você pode ver aqui, vamos chamá-lo sobre botão e vamos chamar isso ou link. Então, o que eu realmente fiz, vamos deletar isso. Então você criou, por exemplo, você criou esta tela ou aqui, deixe-me ampliar. Então sim um símbolo, mas em um link simples com cor cinza e certifique-se de que você tem um alvo toque ou área de calor em torno dele. Então o que eu fiz foi desenhar um retângulo. Deixa-me mostrar-te. Então eu apenas desenhei um retângulo aqui, fiz 0%, e movê-lo para dentro desta tentativa agora, na parte inferior desta tentativa agora. Agora o texto é que o topo e nós temos uma camada escondida por trás disso. Então é isso que vamos usar. Para protótipo ou vincular nossos protótipos. Então este é apenas um bot simples e 24 pixels é uma redondeza e este é o tamanho e a largura. Isto é apenas uma forma. É tudo o que precisamos. Agora, vamos, vamos torná-lo um pouco menor. Isso é ótimo. Ok, então agora temos nosso estado padrão pronto. Agora vou replicar isso pressionando e pressionando opção de arte D e arrastando assim. E depois vamos arrastá-lo assim. Então este vai ser o nosso padrão. Este vai ser o nosso estado de botão de aspiração. E este vai ser o nosso estado Over Link. Ok, então o que vamos fazer só vamos mudar a cor. Vamos usar algo aqui. E eu vou para aqui assim. Use isto. Ok, então você pode ver que neste estado eu não mudei nada por isso porque se eu tentar mudá-lo, quando alguém pairar sobre, ambos vão mudar. Agora, vamos preparar o segundo. Então aqui nesta hiperligação, nada vai acontecer a este botão. Mas este link vai realmente mudar sua cor deste cinza para o arranhão preto. Certo, isso é tudo o que precisamos. Então agora vamos passar para este protótipo e vamos ligar estes. Primeiro. Vamos ligar este a este. E em nossa interação em vez de OnClick, vamos pressionar este vil pairando. Então, tudo isso enquanto paira, enquanto pressiona, estes são quase o mesmo mouse entra folhas do mouse. Estes são quase o mesmo que aspirar. Mas eles têm outras opções como talvez você queira animar algo. Estes são para aqueles tecla e gamepad é realmente a tecla que você pressionou, por exemplo, quatro ou cinco ou seis, ou P, o você qualquer tecla no seu teclado. Agora não precisamos entrar nisso. Tão vil pairando que vamos selecionar enquanto pairamos. E para a animação que vou usar, vamos usar dissolvido primeiro. Então eu vou usar facilidade dentro e fora 300 milissegundos. E então, para este, eu vou me mover, ligá-lo a este, as mesmas configurações aqui. Agora vamos ver como ele realmente acaba. Então agora você pode ver muito legal. Então, sempre que eu sobre isso, você pode ver como ele realmente anima e desaparece para essa cor. Realmente ótimo, realmente ótimo. Da mesma forma para este. Opa, o que está acontecendo aqui? Vamos ver, qual é o problema. Dissolver está dentro, fora o, por isso não é OnClick, Temos que selecionar em enquanto hoovering. Da mesma forma para este. Oh, muito bom, muito bom, muito, muito legal efeito. Ok, então agora você aprendeu a usar este vil pairando em protótipo usando sigma. Espero ainda que você possa usar esses efeitos em seus protótipos FISMA. Você pode usá-los em seus protótipos de web design como eu fiz aqui neste protótipo para mostrar ao meu desenvolvedor que é assim que todo o efeito vai funcionar. Espero que tenham gostado desta lição. Vejo você em breve em outra lição. Até lá, cuide-se e tchau. 36. Projeto ► em arraste e rolagem: Agora é a hora da sua próxima missão. E sua tarefa é que você já aprendeu a função de arrastar como esta. Você pode ver onde aqui nesta função de arrastar protótipo. E esta é a sua primeira tarefa que você tem que criar um arquivo. Você pode limpar isso simplesmente. Eu só quero saber se você entendeu o conceito. Tudo o que você pode criar um e-mail, o que você quiser, então arraste e arraste. Então esta é uma parte desta missão. Em segundo lugar, é que você tem que criar alguns esta rolagem horizontal dentro de um quadro. Então esta é a sua próxima missão. Crie isso e, em seguida, você tem que clicar no protótipo de compartilhamento Qualquer pessoa com o link e copiar link e compartilhar comigo o link em sua discussão ou na seção de atribuição ou seção de projeto , o que está disponível para você e eu quero veja o que você criou. Certifique-se de tentar usar seu nome em algum lugar para que eu possa lembrar que isso é deste aluno. Então eu estou vendo o fazendeiro para sua missão esperando por ele. Agora continue projetando e melhorando e continue protótipos. Como sempre, isso vai limpar o dedo do pé. Um mundo melhor com bons projetos de qualquer maneira, estoque No 37. Aplicativo de espelho - prévia, dispositivo real: neste vídeo, vou falar sobre como você pode visualizar ou visualizar seu figo, meu design em um dispositivo real. Então, há muitas maneiras. Então, há um aplicativo tribunal espelho Sigma. Então você tem que baixar isso em seu celular, por exemplo. Você pode ver que isso está em seus dispositivos Mac ou seus iPhones. Então você tem que baixar este espelho de figo mãe para o seu iPhone. E então você tem que baixar o espelho de estigma para seus abdominais android. Por isso, agora tenho o meu telemóvel Android comigo. Eu vou mudar para essa tela com minha câmera e eu vou mostrar a vocês como você pode ver seu globo ocular de pássaro. Aqui, deixe-me mostrar-lhe este protótipo em um dispositivo real. Então, há alguns passos que vão ajudá-lo a ver isso, porque algumas coisas são confusas e há muito que você pode ver comentários ruins para figo meu aplicativo. Acho que estão a tentar melhorá-lo. Três estrelas aqui e também 2,5 SARS ou aqui. Então eles realmente precisam melhorar isso. Mas ainda assim, acho que vou guiar-te por todo este processo. Então vamos mudar para a outra câmera e ver como realmente você tem que fazer isso. Agora você pode ver meu momento de figo. App está aberto no meu telefone Android e você tem este e-mail e senha você tem toe digite a senha eo e-mail fora do seu figo. Minha conta. Eu já o salvei. Então, eu vou pressionar o registro. Não. Uma vez que você entrar, ele vai lhe perguntar isso. Selecione um quadro ou componente que direcione o Dax esteja diretamente na tela de desenho. Então agora você tem que mudar para o seu figo, meu ab aqui, e você tem que selecionar os escândalos aqui. Então eu estou indo para slack câmera Estado de um, que está agora na minha tela. E você vai ver que depois de algum tempo de carregamento ele carregou esta tela aqui. Então, uma vez que a tela é carregada, eu posso apenas um protótipo, por exemplo, tocando aqui. Ele vai animar e transição para telas diferentes, embora seja um pouco legging e lento. Mas acho que pode ver o canto superior direito. Estamos aqui que eu vou para Skip, e você pode ver, o menu deslizante está chegando aqui. Eu vou para as configurações e eu quero voltar e então eu estou indo dedo do pé, mover isso para fora. Então é um grande lento. Mas eu acho que, hum, você pode ver pelo menos alguns fora do trabalho fora dele e você pode ver como ele está realmente indo para ser visto em um aplicativo móvel. Acho que eles têm que trabalhar muito nisso, mas ainda assim, é uma prévia da vida. Seu projeto. Algumas das vezes em que você está projetando, você tem que ver seu design real em um dispositivo real como você pode ver onde aqui eu posso ver claramente qual é o tamanho do tipo, o que é um tamanho de quatro, mas que a mídia da equipe é o suficiente para North este tipo de coisa. Então você tem que ver seu protótipo em um dispositivo vivo, realmente ver algumas coisas fora das coisas. Por exemplo, você pode ver este botão é realmente bom o suficiente dedo do pé, você sabe , Tab ou aqui , por exemplo, este ícone círculo aqui, este este este círculo próximo é realmente um bom tamanho. Eu posso facilmente dar um tapa para o dedo. Então, essas são as coisas que você tem que ver. Por exemplo, este telefone para Chuy é este tamanho de texto e as margens nos lados deste dispositivo. Então, estas são algumas das coisas reais que você precisa ver ao vivo em seu dispositivo. Então você pode voltar. Esperanças voltam para esta figueira. Você pode sair e é isso. Espero que tenham gostado desta lição. Você tem que baixar o aplicativo stigma Miller em seu dispositivo móvel se você está no iPhone IOS e certifique-se de que o tamanho do quadro que você está selecionando o tamanho da placa de arte é realmente o mesmo que o seu dispositivo agora. Você pode ver este aplicativo aqui, que eu estou realmente tentando usar é o Google. Acho que na verdade me deixa mostrar. É pixel do Google para se destacar. Então este é 400 limão por 8 23 Este é o tamanho para o meu dispositivo andróide, então eu realmente tive que descobrir o dedo do pé. Assim que abri isto aqui, tive de ver qual é o tamanho que vai caber neste dispositivo. Da mesma forma, se você estiver tentando testes no dedo do pé e iPhone 11 pro ou oito mais você tem que usar esse dispositivo físico. Caso contrário, é que não vai caber dedo do pé toda a tela. Vai ser um pouco fora, ou talvez algum dia dentro da tela e sair. Algumas áreas negras estão lá fora. Então estas são as coisas sobre o uso do aplicativo espelho da mãe da figa. Espero que tenha aprendido algo valioso com esta lição. Vamos passar para a próxima escuta. 38. Criando quadros de wireframes e inspiração: antes de começarmos a projetar este, uh, bom aplicativo fora de como as receitas. Vou mostrar a vocês qual é o meu processo de planejamento e como cheguei a esse projeto. O que me inspirou? Como selecionei essas cores para o meu esquema de cores. Embora eu tenha cursos diferentes, você pode olhar para eles. Tenho esquema de cores. É assim que você pode dominar o esquema de cores? Seleção de tipografia? Eu não vou entrar em um monte de detalhes porque estes são grandes tópicos, maiores. Mas sempre que eu começar a projetar qualquer coisa da experiência do usuário, ponto de vista, você está indo para o pé. Sempre tenha algumas armações de arame. Então, sem isso, você não vai a lugar nenhum antes desses arames. Temos, ah, ah, manter a experiência do usuário, processo de design, usar as histórias, usar os cenários, afinidade, diagramas e tudo mais. Então vamos entrevistar usuários. Nós vamos ver quais são as necessidades deles, e nós vamos converter seus joelhos necessidades dedo do pé, fazer as histórias, guerras e características, e essas características vão estar em um quadro vil. Então arame quadro vai ser o ponto de partida fora do design da interface do usuário ou sempre que você estiver indo para projetar. Então temos todas as necessidades do usuário aqui. E você pode ver que esta é a minha tela de logon. Estes são os tubarões de pele do meu desenho. Mau. Perdoe meu projeto, ou tento ser o mais simples possível. E você pode ver que nós temos eu tenho a idéia de ter algum, hum, lugar ou algo assim. Algumas maçãs aqui. Algo assim. Sim. Vem fazer login com o Facebook e fazer login com o Google e pular o Logan, por exemplo. Eu vi e estudei, tipo, quatro ou cinco voltas populares antes de desenhar esta. Isto é muito importante. Então eu vou mostrar a vocês, uh, uh, esta é a inspiração para mim para o esquema de cores, então eu realmente amo o verde e laranja. Então eu uso principalmente isso. Então isso é na verdade um esquema de cores. Mas eu não vou lidar com este esquema de cores. É diferente. Estas são cores diferentes. Agora você pode ver que eu vou me inspirar para o cinismo deles. E depois temos um apoiador de ideias. Então, nestas idéias para um você pode ver estes são os abs receita popular, mas nenhum deles parece mente. Então, menos totalmente diferente, eu tenho as idéias. Ideias diferentes como esta navegação inferior. O que são coisas diferentes? Você pode ver algumas coisas. Por exemplo, a estrela classifica isso. Então temos o ícone de busca aqui. Então, algumas da adoção legal, algumas do assassino, outras do que você pode dizer idéias como você pode ver, estas são separadas por estas linhas. E se eu olhar no meu design, você pode ver que eu usei essas linhas semelhantes. Você pode não notar essas coisas muito simples. Você pode ver que eu tenho estes em meus ingredientes aqui. Então isso é muito importante. Você tem um monte de idéias vendo outras idéias. Você vai ter um monte de idéias se você continuar olhando idéias diferentes em outros I outros abs. Outros designers que você tem reboque expandir o seu você pode dizer design, gosto e continuar olhando em diferentes projetos. Ele está indo dedo do pé, dar-lhe inspiração e ele vai melhorar você como um designer. Então, você pode ver inspirações diferentes. E estas são as idéias que eu tive e daí eu fui dedo do pé tem algo assim. Então eu continuo tentando estes quadros de fogo e você pode ver que temos sobremesas Sellards médias, sobremesas saudáveis, destaque no 30 metros receitas saudáveis receitas estrelas título, ingredientes e preparação. Porque estas são as duas coisas mais importantes sem ingredientes, você não pode começar a preparar a sua receita para que os ingredientes estão indo para vir. Então, sempre que alguém domina este ab, este é realmente carregado primeiro, e então você se move para a preparação. Da mesma forma, você pode ver se voltamos a armações de arame. Nós temos essas opções aqui, então este é o meu login nas configurações da conta, e essas são as coisas que eu tinha em mente. Então, mais algumas coisas como você pode ver ou ouvir, ouvir. Temos diferentes alergias e dietas que você prefere. Então este é realmente este é um recurso que eu realmente projetei e implementei em minha pesquisa aqui , então você pode ver se eu vou procurar para que você possa ver se você tentar pesquisar algo, você tem um monte de filtros. Funcionários. Morri com filtros de plano. Filtros são alergias comuns como essas outras alergias comuns. As pessoas têm comida de soja, grãos integrais, glúten, incluindo analogias ou algo assim. Então você pode clicar e selecionar ambos fora deles. Você pode selecionar a dieta e você pode selecionar uma alergia que você tem. E estes serão os resultados. Eso ele vai ter preencher este tal barra e ele irá mostrar-lhe os resultados Então você pode ver Eu também adicionei esta cor que está dentro deste esquema de cores e também esta laranja para que você possa ver que eu realmente mudei alguns dos aspectos. Por exemplo, eu tenho um monte fora escuro, verde maçante no fundo sobre o cabelo em vez de concordar ou alguma cor verde. Eu disse isto. Você pode ver o que aqui e os telefones que estou usando. Aqui estão estes formulários Rubik Google e dinheiro Yanta. Então, se você estiver indo para começar este projeto estão abertos. Meu design em seu fleuma ahap tentar baixar e instalar esses formulários é um sentido realmente bonito . Senso disse que se laranja e fácil de ler e tem algum estilo para ele. Estes são muito claros. Então estes são os dois fortes rostos de morrer que usei na concepção disto. Este é o logotipo. Eu me projetei apenas para este exercício rapidamente. Então você pode entender. Você poderia entender o significado disso. E, uh, isso é tudo. Então eu tenho alguns fora dos ícones aqui, que eu realmente, hum você pode dizer que eu tenho um AB que é chamado Nuclear AB. Aqui, eu uso os ícones deste Você pode usar ícones do Google Material Design, ícone do Google Material. Então você pode tal material koukal Icahn e aqui você pode ir por aqui. Eu posso projetar material e você pode selecionar Senhor daqui para que você possa ver que temos flechas . Diferentes tipos de adultos. Estes são ícones padrão. Você pode usar ícones dele. Há muitos vídeos. Mostrei que como baixar e usar um ícone inteiro. Você pode ver um sistema. Vou compartilhar esses ícones com você se quiser. E você pode ter esses arquivos SPD. Prefiro usar arquivos SPG como um ícone porque eles são expansíveis. Então isso é tudo. assim que todo o meu projeto correu de mãos dadas. E espero que aproveite este exercício e aprenda com tudo isso. Na verdade, projetou. Eu sempre tenho visão. Sempre sugerir que se você é tipografia Regan ou esquema de cores ou design de camada, você tem que fazer outros cursos que estão indo toe melhorar suas habilidades de design aprendendo uma ferramenta e habilidades de design são duas coisas separadas. Espero que tenham gostado deste vídeo. Como preparar o seu antes do seu projeto. Você tem que baixar esses quatro tipos que você tem reboque. Selecione seu esquema de cores. Você tem que ter algumas idéias e inspiração em sua bolsa, e você tem que ter seus amigos vis, Freddie. Então vamos passar para a próxima palestra e começar a projetar agora. 39. Planejado antes de projetar: Agora, neste vídeo, vamos começar. E antes disso, vamos lidar com nossas notas e elas são ótimas e vamos ter algumas diretrizes para que possamos facilmente defini-las antes de começarmos e alinhar nossos principais elementos , como nossa navegação superior ou navegação inferior de acordo com essas diretrizes. Então o que eu vou fazer é eu tenho uma equipe que você está animado. Então eu tenho um projeto na classe de invenção dele, e eu vou clicar no novo arquivo. Você também pode clicar em rascunhos neste novo arquivo e pode criar um novo arquivo. Então, uma vez que você criar um novo arquivo, ele será sem título. Então nós vamos renomeá-lo e vamos renomeá-lo para GMA food app gratuito. Então aqui temos. Vamos mudar a cor de fundo, então eu vou usar um fundo mais escuro porque é mais fácil ver as coisas aqui. Então, aqui temos. A primeira coisa que eu gostaria que você criasse aqui são seus quadros vis, que você possa criar suas armações em papel, caneta e lápis e apenas pegar a tela curta e trazê-los aqui. Isso é tudo que você não precisa para desenhar o seu Você pode dizer arame frames em figo MMA. Se você quiser desenhar quartos para sua esposa aqui, tributar até você agora eu vou criar três páginas. Um deles vai ser armações de arame. O segundo será o nosso projeto. Os próximos estudiosos somos nós. Sim, ou vamos chamar de design masculino. E então podemos ter outra página chamada Styx Guide. Onde estávamos, todos os nossos componentes estarão, então isso vai ser em uma estrutura. Agora vamos para o design principal, e a primeira coisa que vamos fazer é pressionar A ou F G para ir a estes quadros de arte ou quadros. Então, à direita, temos o iPhone 11 pro Max 11 pro. Eu vou usar 11 pro, e aqui temos nosso quadro de arte agora, antes de continuar, porque cada quadro vai ter as mesmas configurações que o próximo. Então vamos definir nossa nota de layout aqui. Então, vamos pressionar este ícone de mais aqui, e nós estamos indo para ir dedo do pé colunas e nós vamos usar quatro colunas aqui. Vamos ao centro, Alinhe Aid e cada coluna terá quase 70 grandes de largura, e Deus terá 20. Então isso vai ser nossas colunas e configurações para o nosso nível de layout. Então, uma vez que tenhamos definido claramente fora da nota, vamos passar para o próximo passo, que vai ser nossas diretrizes. Então certifique-se que você tem régua aqui em cima e à esquerda para que você possa ver à direita este menu nós temos réguas ativadas. Portanto, certifique-se de que você aprendeu réguas ativadas você pode pressionar shift em nosso para ativá-los. Então, uma vez que você os fez e você pode ver feito fora e sobre, então uma vez que eles estão ligados, nós vamos arrastar uma régua para aqui, e nós vamos colocar o primeiro 1 em 24 pixels aqui, e então nós vamos arrastar e soltar o próximo a 72 pixels aqui. Então isso vai ser para o alinhamento de nossos ícones. Nossos ícones vão tocar este 80 aqui que este vai ser o nosso bar aqui. E se descermos aqui será o nosso em 150 Big Oezil. Nós estamos aqui. Você pode ver à esquerda. Se eu for aqui à esquerda, você pode ver que o valor é 150, então vamos deixá-lo assim e vamos arrastar o último que vai ser aqui. Então, se você não tem certeza de que como você pode você está indo para arrastar estes. Você pode criar seu próprio elemento. Então aqui, por exemplo, eu vou ter altura fora 60 porcos é para a navegação inferior. Então eu estou indo toe criar uma caixa aqui fora de 60 pixels apenas para temporária, apenas caixa temporária e eu vou alinhar isso. Então você viu que eu cliquei fora do dedo do pé, torná-lo orientação universal. Então, temos três diretrizes no topo. Da mesma forma, você pode fazer o mesmo aqui para que você possa criar um ativo fora do seu retângulo com tamanho de 24 pixels e nós vamos alinhá-lo na parte superior. E se você não sabe como fazer exatamente 24 pixels. Basta criar esses elementos como este elementos temporários, e nós vamos arrastá-lo e soltá-lo assim. Vai estourar por aqui. Isso é muito bom, porque temos que ser algo. Temos algo parecido com isto. Então vamos criar agora, torná-lo lado 72 você pode ver que ele está se encaixando corretamente. Temos no 72. Então nós vamos estar em 150 Isso é cordão. Nós o temos em 150, então nossas principais diretrizes estão completas. Vamos, hum, certificar-nos de que estas são realmente diretrizes globais. Então eu estou indo toe klik fora e arrastar e soltá-lo aqui assim, que eu vou fazê-lo 1 50 Clique fora arrastar e soltá-lo aqui assim. Então acho que temos que vir aqui. Então vamos removê-lo e criar um novo. Vamos arrastá-lo e soltá-lo aqui. Então é assim que vamos estabelecer nossa interface principal e como vamos começar . Esta vai ser a nossa tela. Então, uma vez que nós estávamos indo para completar para a tela, nós vamos apenas para replicar este. Então, clique nesta tecla Artur Option e nós vamos duplicá-lo como este para que você também pode segurar sua tecla shift para todos podem tecla shift para tê-lo alinhado na mesma maneira na mesma linha, que exatamente onde o seu primeiro quadro é. Então é assim que você realmente faz. Então esta é a nossa, esta vai ser a nossa primeira tela. E uma vez que tivermos isso, vamos renomeá-lo no dedo do pé, um, no empate ou algo assim. E vamos Delia Rex usou este retângulo. Tínhamos um retângulo aqui, então vamos desenhar um retângulo para o fundo. Para ser este tamanho normal aqui assim, expresse um para ampliar o ajuste e nós temos este fundo. Vamos chamá-lo de PG ou fundo. Agora vamos arrastar nossa imagem para dentro dela, e vamos colocar dentro deste contêiner e movê-lo para onde avisamos a imagem para ser 40. Crie uma interface de usuário da tela de login: Agora vamos para os recursos para o jantar. Eu ataquei com este exercício. Você é. Você já baixou. Agora vamos abri-la e a imagem do motorista aqui. Então aqui está o nosso aplicativo de comida. O recurso é, E dentro das pastas de imagens, você pode ver essas outras imagens. Aqui estão as imagens para fundos que estão muito vazias e podem ser usadas aqui. Então eu realmente uso este. Então eu vou arrastar e soltá-lo e figo meu como este, que zoom out. E você pode ver que este é realmente o limite desta imagem pressione shift, opressão pessoa Hold shift e altere opção dedo do pé chave. Torná-lo meu grande, menor assim. Você vai movê-lo assim. E uma coisa que vamos fazer é que vamos folgar ambos fora desta camada e nós estamos realmente indo para controle de mesquita, arte e opção de comando marcador. E aqui está a nossa mesquita. Então agora você pode ver que este fundo está mascarado por este retângulo aqui, então eu estou livre para movê-lo. Vamos esconder nosso layout. O turno de controle 4 é um atalho no B C e acho que o controle G ou controlado. Não me lembro do atalho no Mac, mas ele será exibido na tela. Então, hum, só para ter certeza de que podemos facilmente projetar em vez de discos distraídos por aqui. Então eu quero mudar isso. Você pode ver que selecionei esta imagem ou aqui. Então ele está se movendo dentro deste contêiner. Então vamos movê-lo assim, e você pode ampliá-lo e você pode fazer as pazes. É um pouco menor assim, e acho que está ótimo. Agora, se você quiser alterar Ah, esta imagem ou qualquer configuração você pode ir para esta imagem. Você pode alterar os destaques aumentar o destaque, Como este destaque é realmente torná-lo um pouco mais brilhante. Brancos são sombras mais proeminentes, Atmore, sombrias contra. Se quiser tornar as sombras mais escuras, pode ir até aqui ou talvez algo assim. Então aqui temos a nossa imagem. Agora vamos para a pasta de outros fontes e obter o nosso logotipo Agora. Na verdade, o que eu fiz é que eu criei este logotipo dentro do estigma hap e eu realmente não recomendo que eu realmente nunca recomendo o lema figo. Crie um logotipo. Então, o que está acontecendo é quando eu tento exportá-lo usando SVG formá-lo. Está me dando um logotipo muito desviado. Então agora você pode ver que eu o exportei usando agricultores PNG aqui e exportou este logotipo. E nós vamos arrastar este logotipo PNG porque s que não está funcionando. Não tenho certeza do que está acontecendo, então aqui temos nosso arquivo. Então vamos arrastar isto para aqui assim. Então nós vamos colocar o nosso logotipo assim aqui, e então nós vamos colocar o nosso texto aqui, que waas livro de receitas Saudáveis. Agora vamos pegar nossa ferramenta de texto e administrador, e vamos para bem aqui. Livro de receitas saudáveis, e você pode usar Roberta para dois. Mas nós temos usado Sim, forma Monta. Este é realmente um telefone Google fica livre, e nós vamos usar 18 existem aqui para este. E, uh, espaçamento de letras vai ser de 5%. E, uh, eu acho que é tudo o que vamos alinhar no meio deste um pouco à esquerda e a cor será será será o próximo uso exceto um semelhante sete anos. Ganhou 88. Então esta é realmente uma grande cor azul. Você pode ver seu cabelo e eu não quero que o usuário esteja muito atento a isso. Então, aqui. Então este é o nosso logotipo. E esta é a nossa próxima linha ou o que quer que lhe chames. Certo, então aqui temos. Em seguida, vamos criar dois botões que vão ser fazer login com o Facebook e fazer login com o Google. Então, obtenha e use essas cores do Google e do Facebook. Você pode ir para este site marca cor start net, e você pode encontrar as cores fora do Google, por exemplo. Você pode digitar o Google aqui, e esta é a cor vermelha que o Google está usando para que você possa copiá-lo levou área de transferência, e você pode usar a mesma cor ou aqui. Então vamos criar um retângulo, e vamos usar cores azuis para o Google, um regular para o Google e Blucher para o Facebook, este aqui. Então, apenas agarrando esses valores aqui e nós vamos criar alguns botões, pegar um retângulo e o tamanho da carga que eu vou usar é 304 é a terceira vez. 48. Brasil é a altura, então vamos usar 304 e 48 é a altura. Em seguida, alinhe-o no meio, ou você pode usar este são as nossas opções coceira. Então esta é na verdade a tecla de atalho. E eu vou usar a cor do Facebook, que vai ser vamos copiado daqui e apenas baseado que estava aqui assim. Entrar. Então temos nosso botão no Facebook. Em seguida, use um cantos arredondados fora quatro saídas em torno de ness por aqui. Então este vai ser o nosso botão, e nós vamos arrastar e soltar nosso ícone do Facebook, que já temos dentro de um recurso são ícones. E este vai ser o Facebook com o Facebook Facebook, este aqui. Então aqui está o Facebook. Vamos arrastá-lo e soltá-lo aqui assim que está se movendo para dentro. Isso é desarrumado isso Vamos lá, mude barato. Então nós realmente precisamos disso. Não precisamos deste. E também marchar se g um grupo. Então este é o nosso Facebook. Oh, legal. Então nós vamos pintá-lo branco, ou podemos usar um grande off um branco azulado aqui. Algo como isto. Isso também pode funcionar. Então o imposto que vamos usar é fazer login no Facebook. Eles refletem isso nossa opção V trabalhar rapidamente. Alinhe. Ou você pode usar esta opção B e novamente, a cor. Vamos usar esta mesma cor. Então vamos adicioná-lo ao nosso Oops. O que estava acontecendo foi adicionado em outros estilos. Eu vou dedo do pé mais azul, um, branco, uh, azul. Desculpe-me isso. E nesta cor, também. Vamos chamá-lo de Facebook. Sim, fumo. Então, para chegar ao mesmo branco, vamos usar estilos aqui, assim como esta cor. Então faça login com o Facebook e o texto será Rubik. Então, quatro botões eu estou usando um telefone muito grande. Árabe também é Google para bem, bons punhos morrer. E como você pode ver, é um pouco maior tipo de letra. Então vamos usar um pouco menor como este, e vamos usar 2% ou cabelo e vamos usar o caso, Toby, Toby, todas as lacunas como esta. Agora, novamente, vamos alinhá-lo no meio porque ele está saindo. Não, podemos alinhar estes lados do fardo. Então vamos ter uma lacuna fora. Vinte e quatro aqui à esquerda. Vamos ter um 24 aqui, dedo do pé. Então esse é o seu começo. Uma guerra aqui. Então temos sobre a Grã-Bretanha. Você pode vê-lo aqui. Vamos selecionar isto. Todos estes. Vamos primeiro agrupar este comando de controlo G. Para que possamos ver. Não, isto é um pouco melhor porque temos o nosso passado separado. Agora você pode ver o mascarando qualquer olho aqui. Então temos tudo isso fora da mesquita. Então este é o nosso logotipo. Então vamos agrupar estes nosso grupo de logotipos escaldá-los. Este é o nosso fundo para o botão BG Burton mediana. E estes todos estes estão ligados com o botão Facebook vidi no Facebook como este, é sempre melhor. Você organiza tudo assim. Assim que tivermos isso, vamos pressionar o controle. Comando d é que podemos criar um componente ou aqui para que você possa fazer qualquer coisa assim. Então agora eu não vou criar um componente. Eu vou apenas duplicar e replicar e ter outro fardo aqui como este. E, hum, vamos arrastar o ícone do Google para aqui. Sim, nós temos. Vamos arrastados até aqui. Mesma cor branca, cores locais. E este é o penhasco branco que vamos usar. Oops. Então? Então vamos movê-lo com o teclado. Estou pressionando as teclas Shift e seta para movê-lo, porque do meu mouse, não era difícil, facilmente caranguejo capaz. Então vamos remover este grupo. Isso é realmente bom, então isso é bom. Ok, então vamos cantar a cor do dedo do pé. O mesmo branco aqui e a Galeria Bagram ser o assassino do Google. Então vamos até aqui e encontrar a cor vermelha do Google. Este vai ser o assassino do Google e menos o que é feito, acrescentou e Jean a cor do assassino estudante. E agora vamos adicionar essa cor do Google à nossa loja de estilos. Então, vamos adicionar o estilo criado correto do Google. Então nós temos nossos dois botões. Mais uma coisa é, se você quiser adicionar sombras, você pode adicionar uma loja de fatos, então eu vou adicionar uma sombra muito sutil aqui para borrar. Vamos usar o sangue dele, e eu vou ter ele também exulta como este, e isso vai ser quase 15% sombra muito, muito sutil. Assim que tivermos essa sombra, também podemos limpar um efeito chamado estilo de fato. E vamos chamá-lo de Burton Shadow. Tão certo. Então agora vamos selecionar seu plano de fundo aqui, e vamos aplicar o mesmo efeito que é tudo. Então, uh, então eu acho que você está gostando disso. E, hum, você vai ficar realmente espantado com os recursos de Sigma vamos e a última linha aqui, que é Vamos navegar. - Não. Ou você também pode renomeá-lo para ignorar o login em algo assim não são comichão. Vamos movê-lo com as teclas Shift e seta e você também pode movê-lo. Um porcos por setas como este único pixel e eu vou fazer isso. Vamos apertar o seu presente. Segure sua tecla de shin de AR, e você pode ver que você selecionou esta. E se você arrastar e hum, sobre o seu e outro item, ele vai mostrar a distância entre os dois 27 que eu queria Toby. Vamos, hum, usado 20. Eu acho que é que é bom que é facilmente definível, então você também pode ter o dedo do pé pensar sobre as coisas. Por exemplo, esta vai ser a ideia de tabulação para este. E isto vai para o DAP aqui para este. Esta vai ser a idéia de guia ou seção para este. Então estes têm algumas boas margens entre eles. Boa distância entre eles. Assim, o usuário pode facilmente rápido. Então a cor para este registro de pulos e será H S B. A cor é 178 que é o verde. Você, nossa principal cor primária 73 é a saturação e brilho é 19%. Esta é a cor do registro de pulos. E este é o nosso major. Você pode ver a cor, que são nossas pernas. Vamos para a faculdade verde escuro. Este é o nosso escuro, cor verde muito enegrecida estavam usando para texto que são muito escuros e principalmente para os links cor. Então isso vai estar ligado. Esta é também a mesma cor para este logotipo. Os slogans não são negros. É verde muito escuro, qual é este? Ignorar pular por muito tempo e assim a distância entre esses dois botões é 12 pixels. Você pode adicionar a distância se quiser. Se você quisesse ser mais espaçoso. Você pode adicionar para ter 16 como este. E você também pode adicionar um pouco mais de distância aqui 24 ou algo assim. Mas eu acho que eu gosto como este 12 é bom o suficiente para mim. E 20 é bom o suficiente para mim. Então é assim que você cria e mantém os judeus. Problemas de habilidade fora do absolved porque este estes três Mas como eles são mais baixos nesta área nosso cabelo seu Tom puro você sistema pode facilmente chegar a esta área. Agora, se você quiser, você completou a tela. Então vamos diminuir o zoom. Isto é muito necessário. Sempre que você cria algo, eu sempre diminuo o zoom e vejo isso se eu quiser. Somos apenas um espaçamento. São alguns elementos que quero mover. Você pode ver que estes não estavam nos centros onde eu os movi para o centro um pouco aqui . Está parecendo ótimo. Vamos ver isso em um protótipo aqui. Então eu mudei para este protótipo iPhone 11 provam modelo. Eu vou usar a tela espacial e, uh, uh, explicou que esta é a única coisa que eu não gosto sobre figo pode levar algum tempo porque é um aplicativo em nuvem. Leva algum tempo se suas imagens são muito grandes e leva algum tempo para Lordá-las assim . Então isso parece bom. Acho que tenho o problema com isso aqui no Chile. Você pode ajustar a imagem. O que? No entanto, você avisou. Então vamos rapidamente apenas a imagem e vamos torná-la um pouco maior assim. Certo, isso está perfeito para mim. Este parece perfeito para ampliar o ajuste. E acho que isto vai acabar com esta lição. Se tivermos algum problema ou algo que não esteja ótimo. Por exemplo, você pode ver na imagem aqui fundo. Tem alguma coisa aqui. Então o truque simples é se você quiser remover algo, eu vou usar uma elipse aqui assim. Eu mudei para o design, e eu vou usar o mesmo seletor de cores, e eu vou usar a mesma cor desta área aqui para que você possa vê-la aqui. Agora eu vou mover este lote aqui assim, e vamos movê-lo logo acima deste plano de fundo, e em vez disso eu acho que eu posso ver algumas das sombras aqui. Vamos ampliar. Oops, parece com isso. E vamos fazer com que seja maior assim. Então agora você pode ver que não é muito visível de longe. Você não pode adivinhar que há algo usado aqui, então é apenas a maioria dentro de seus antecedentes. Isto está a parecer bom. Então estes são truques simples que você pode aprender quando alguém está projetando. Espero que tenham gostado desta lição. Se tiver alguma pergunta ou não forçou nada, pode me perguntar. Vamos passar para a próxima lição. 41. Tela de casa - Design de aplicativos para dispositivos de Mobile: agora, a primeira coisa que vamos fazer é que vamos converter este componente botão dedo do pé porque vamos usar este botão com no ícone. Então vamos fazer isso. Então vamos selecionar este grupo. Este é o nosso fardo do Burton no Facebook. E clique nisso e isso vai ser um componente. Este é o componente mestre. Então não queremos Overwatch, componente Master. Toby, dentro deste design, queremos ter sobre instâncias ou aqui, então comando ou controle dados duplicados para que você possa ver que temos outro. Então, selecione este machado mestre de comando de controle de componentes e vamos movê-lo para o nosso guia de estilo. Então, se você não criou um quadro aqui, basta pressionar f ou a e nós estamos indo para obter um quadro e baseá-lo aqui assim. Então aqui temos a nossa fingir. Agora, vamos pegar algumas configurações aqui. Então este texto eu tenho um duplo clique para obtê-lo. Vai ser, um, um, enfiar o dedo do pé neste lado direito e na parte inferior aqui, ou você pode tê-lo na direita e em baixo. Isto vai ser outro cenário, por isso terá sempre o mesmo espaço por aqui. Da mesma forma, para este ícone do Facebook estavam indo dedo do pé ter desligado esquerda e direita. Então ele vai manter o mesmo espaçamento esquerdo e inferior se tentarmos aumentá-lo. Então, se tentarmos aumentar esse fardo, você pode ver se eu tento aumentá-lo aqui. O logotipo do Facebook está colando a esta esquerda. Então este vai ser o comportamento deste botão. Então este é o nosso componente. Se quisermos mudá-lo mais tarde, podemos transformá-lo em nosso componente mestre. Então este vai ser o nosso botão com, hum, ícone de botão. Vamos chamar de botão com Icahn. Então este vai ser o nosso botão com ícone. Certo, então vamos voltar ao projeto principal e vamos embora. Porque na verdade, eu acho que nós também devemos usar o mesmo componente aqui, mas agora nós vamos deixá-lo porque ele se baseou muito tempo. Então, uma vez que você criou componente, basta mudar a cor e alterar o logotipo aqui. Eu ligo para cá e você terá algo assim. Então vamos mergulhar. Replicar isso e vamos pressionar pressionando nossa tecla de opção e junto com eu vou pressionar a tecla Shift para criar outra tela como esta. Agora vou apagar esta imagem aqui nas esperanças de fundo. Então isso vai ser Vamos renomear isso primeiro. Então vai ser a nossa tela de refeições médias, então isso vai ser feito significa tela. Então vamos fazer isso e abrir este e nós estamos indo dedo removido Esta elipse esta imagem aqui Isto é bom. Vamos, hum, remover esta mesquita em baixo aqui e vamos no turno do grupo G Ian isto e isto vai ser removido por aqui. Isto vai ser uma opacidade grande, menor e 30%, e nós vamos fazer isso um pouco menor. Eu tranquei essas proporções ex. Vamos fazer com que seja 20 24 32. Este parece bom. Isto vai estar algures por aqui. Então este fundo vai realmente ser esta cor e d. F. F. três f quatro. Então esta vai ser a nossa cor de fundo principal que vai conter toda a tela Então esta vai ser a nossa cor. Então você pode ver que isso está ótimo neste fundo. Se quisermos aumentar a opacidade, vamos usar 40% aqui assim. Então este logotipo vai ser minimizado aqui nesta tela. Vamos deixar assim. Vamos trazer ícones antes disso. Vamos remover isto ou aqui assim. Então nós temos este espaço vazio ou aqui, nós vamos trazer nossos ícones de Adul de volta. E aqui temos o ícone de filtro do que temos essa garrafa aqui. Todas essas coisas vão ser por aqui, então vamos começar. E esta é a nossa flecha esquerda. Isto é, na verdade, 24 por 24 pixels, então você pode ver qual cabelo 24 é do tamanho, e vamos colocá-lo aqui e alinhá-lo assim. Então temos o nosso cone seco ou ícone de funil aqui. Vamos agarrar e largar tudo aqui assim. Isso também vai ser 24 isso vai ser alinhado com discreto. Então você pode ver que este é o valor fora da grade. Temos este layout criar quatro colunas e estavam alinhando as coisas de acordo com isso. Em seguida, mova-o no meio. Escrito à direita à esquerda foi é um pouco desequilibrado. Design item mais aqui. Assim que o tivermos, vamos usar um peso total aqui para criar o nosso bar. Este vai ser o nosso grupo de busca vai ter 48 pixels de altura. E, hum, vai ser 300 39. Esta é sexualmente a frente e a cor vai ser branca, e nós vamos usar o mesmo raio de placa quatro para este. Então agora vamos seguir uma linha. Acho que este aqui está alinhado em cima do cabelo. Este aqui estava um pouco acima. A cor desses ícones. Deixe-me primeiro a cor da Heidi para estes ícones Waas, verde médio, que é o nosso, uh vamos usar esta cor. 43615 e. Esta é a nossa cor verde média. Então vamos adicionar esta cor 12 um guia de estilo. Este é o esquadrão médio cremoso. Oops. Acho que escolhi todos eles. Então vamos selecionar um deles. Selecione esta cor espera esperanças. Agora vamos ter um verde médio para que você possa ver, às vezes, todos eu menos nós. Este é o nosso verde médio. Isto é ... OK, ... OK, então este é o nosso logótipo. Esta é a nossa barra de busca aqui. Também podemos adicionar um efeito de traço em torno dele. Vai ser, hum, hum, assassinos locais, Lex usa descor. E nós vamos baixar a opacidade para 15% assim, então vocês podem ver que temos uma linha muito fraca. Ou aqui, vamos ampliar e mostrar o que esse efeito está realmente fazendo. Então você pode ver que isso é realmente o que está acontecendo aqui. Então vamos alinhar isto. Reboque estas linhas aqui assim, e este vai ser o nosso tal bar. Vamos usar um pouco de imposto no seu cabelo. D hum, tal Ressie B espera receita como esta. Isso não vai ser tudo em maiúsculas, então vai ser como ele é digitado. Este caso é realmente uma receita como esta? Isso vai acreditar que você é um grande regular. 16 porcos, 2%. Então este vai realmente ser o nosso texto. Então, Então, vamos mudar a cor do dedo do pé outra coisa porque não vai ser muito, hum, brilhante ou aqui, talvez algo assim. Então você pode ver que eu estou usando a mesma cor. Só trocando alguns Hughes ou coisas assim. Estamos do meu agrado aqui, mas deve ser visível para o usuário. Então vamos criar um têxtil. Agora, este é o nosso verdadeiro Bic 16. E com isso, vou usar o que é seu propósito. Então, na verdade, é a nossa acção de botão a seguir. Então isso é, uh você pode vê-lo para que eu possa facilmente memorizá-lo. Que isso vai ser tributado para botões é o mesmo texto que usamos aqui para estes. Estes estavam aqui e também para isto aqui. Então, esta vai ser a nossa dívida fiscal. Vamos, uh, Jane este estilo e usar como ele é tipo. Então isso vai ser um pouco melhor para mim assim. Agora vamos adicionar esse ícone aqui. Então eu era tal ícone é o meu ícone de pesquisa, este. Então apenas caranguejo e arraste e solte aqui assim, assim. Só mude a cor que este aqui. E, hum, desculpe este aqui para não queremos que todas as cores tenham a mesma atenção. Então nós vamos usar, hum, você pode dizer que isso vai ser para cima. Essa cor e descoloração são as mesmas. Então vamos mudar para outra coisa. Permite-lhe a mesma cor que esta barra. Então eu vou selecionar e é como a mesma cor aqui, assim. Eu acho que nós selecionamos a cor Hong de qualquer maneira. Então é o Selectric daqui. Isto está a parecer bom. Vamos adicionar esta cor. Ótimo verde. Vamos chamá-lo de grande verde para que Zo Motor e ver o que está acontecendo. Olhando bem. Eu também posso deixá-lo um pouco entediado. Um pouco mais ou mais acinzentado. Talvez assim. Estou gostando mais dessa cor e vamos chamá-la de ótimo. Eu também vou usar o mesmo cinza aqui para que o interruptor para discretar isso está olhando melhor porque é azul, verde e verde. Tudo parecia verde, então eu fiz isso assim. Agora, esses assuntos estão concluídos, podemos agrupá-los facilmente, então vamos selecionar todos eles e comandar e controlar G para agrupar essa parte e por que estamos fazendo isso porque podemos facilmente criar um componente fora dele. Então isso vai ser espaçado a 13 pixels daqui. Então vamos fazer com que seja 14 15 16. E, da mesma forma, temos este. Este é também 16 a partir deste lado esquerdo. Então eu estou usando a chave de opção de arte para mim à distância, como você pode ver ou ouvir 16 à esquerda. Da mesma forma, temos este. Você pode abrir esse grupo e nós temos esse vetor dentro dele. Vamos excluí-lo porque não queremos complicar um ícones complicados. Então eu gosto mais assim. Então este é o nosso ícone. Vamos chamá-lo de ícone. Esta é a nossa barra de pesquisa. Esta é a nossa bunda de fundo para tal bar. E para toda essa barra, vamos criar um componente. Então comande ou controle R K Opção K. E este é o nosso componente. Mesma coisa. Vamos fazer controle de comando para replicá-lo, e vamos cortar isso e movê-lo para o nosso guia de estilo aqui. Então este é o nosso bar, então você pode ver que não estamos construindo nosso guia de estilo. Então, Oops. Então, uma vez que criamos isso, vamos voltar ao design principal e vamos criar essa navegação ou cabeça. Esta é a navegação que vamos criar. Agora vamos dar o pé, mandar um SMS De e vamos usar o Mees. O texto será. Não vai ser Rubik. Vamos separar isso e nós estamos indo toe usar jovem mina de e para 16 porcos é 5% e eu vou usar o alinhamento médio. Vai ajudar quando o alinharmos e isto vai ser vita a seguir, e o fundo por trás disso será este. Estamos aqui, então vou usar 64 pixels de largura e 32 pixels de altura. E vamos usar a fronteira Kanakaredes para antes que você possa ver que as refeições estão por trás deste retângulo. Então nós vamos movê-lo para cima e soltar a prancha fora deles. Você os move para o meio assim, então isso parece trazer para cima. Então eu estou mudando o retângulo da cidade parece um pouco menor, então eu vou torná-lo um pouco maior. Tudo de borda, nós estamos. Ok, então nós temos isso pronto Então vamos mudar a cor do dedo do pé este Phil, que vai ser a nossa cor verde primária, que é uma cor mais nítida para este. Então, na verdade, nossa cor verde primária é zero e 5956 Então esta é a nossa cor rainha primária, então você pode ver que isso é muito nítido. Isto é muito animado ou vivo Lee, seja lá o que você chama, esta é uma cor agradável. Então vamos agrupar isso, e vamos movê-lo para cá menos usar nossas diretrizes para alinhar o turno quatro de controle de assassinato . E acho que havia controle. Eu não tenho certeza qual era o atalho para Mac, mas eu vou listado para baixo. Então aqui nós temos isso assim. Agora você pode ver que este é o nosso grupo Mies. Ok, então este fundo vai ser móvel. Então nós estamos indo dedo do pé, removê-lo fora disso. Então vamos movê-lo para cima. E este fundo é que você pode ver que isso está fora deste grupo significa Então nós temos meios ativos, olhando em um vem em d e esta vai ser a nossa rua inativa. Então, no fundo, teremos o Stoute inativo, então o assassino inativo fora do texto será, uh, este aqui. Ok, esta é na verdade a nossa cor verde média para 3615 Então deixe-me mostrar-lhe o que eu realmente quero dizer inativo. Então vamos esconder isso ativo e vamos esconder esse fundo. Você pode ver que este é o nosso estado inativo. Agora, nós vamos apenas para replicar isso. Nós temos essa sobrecarga, estado ativo próximo e pescoço se vamos nos esconder e, hum, hum, lá está permitindo que eles melhorem. Oops. Certo, então vamos replicá-lo. Vamos primeiro usar algo como, Oops. Então, vamos folgar essas refeições e todas as opções. Vamos arrastá-lo assim. Nossa distância fora, tipo 33. 32. Oh, aqui. E vamos pressionar o dedo do pé. Vamos, Control de. Para replicar isso assim, então você pode ver que ele está realmente usando o mesmo espaço em replicá-lo assim. Então, primeiro vamos renomeá-lo. Agora, este vai ser Sellards e também para este estado inativo. Ele começou este. Então apenas o tempo realmente substituindo o texto, então nós vamos alinhá-los novamente. Maneira criaram todos estes e foram renomeados eles, uh, controle prático ou comando são salada. Transmita ele. Esta é uma tecla de atalho. Agora vamos movê-lo para fora desta tela porque queremos ter uma boa distância entre eles. Então agora eu vou usar distribuir espaçamento horizontal como este para que possamos ter algum menu como este. Vamos movê-lo um pouco. Aqui está parecendo muito largo. Então é assim 40 anos. Então eu vou ter uma distância de 40 entre eles. 56 algo assim. Vamos movê-lo um pouco. Ou aqui 26 26. E, na verdade, queremos ir para a minha unidade daqui. 123 123 e no três. Então todos eles têm a distância de 30 e seis dentro deles. Então agora, se quisermos mudar o fundo simplesmente temos que fazer é esconder o cozido ativo do que no estado inativo e mover o fundo para este assim. E como a sua salada, vamos usar o estado ativo e esconder o estado inativo. Então é assim que vamos movê-lo e qualquer anão em torno da idéia Ugarte. Então, na próxima lição, vamos preparar o resto da coisa porque está ficando muito longo. Eu não quero que isso seja realmente chato, então vamos passar para a próxima lição e criar o resto fora da tela. 42. Tela de casa - Design de aplicativos para móveis 2: nesta lição. Nós vamos criar a navegação inferior que vai estar na parte inferior deste aplicativo aqui neste ou aqui porque queremos ter navegação primeiro. Então vamos criar o conteúdo dentro dele. Então, para fazer isso, vamos usar um retângulo aqui. Este vai ser um retângulo para a navegação e vai ser o seu branco. Agora você pode ver por que eu estou usando branco porque ele vai ter algum contraste sobre este fundo. Este fundo não é branco puro. Tem cor esverdeada e terminá-lo nele. Assim que tivermos isso, vamos usar um fax aqui para ter uma sombra de armadilha. Mas desta vez a sombra ficará do lado oposto. Então nós vamos usar menos para, como, este sangue vai ser seis como este e nós vamos usar 10% algo como esta sombra muito sutil. E você também pode ter uma sombra da mesma cor. Que vai ser isto. Vamos usar essa cor de fundo e vamos amplificá-la assim aqui. Então esta é a cor de fundo que estavam usando. E isto é, hum, 100%. Então você vai usar 15%. Vamos usar 20% assim. Próximo zoom. E, uh, onde estão estes? Na verdade, este vai ser o teu cabelo. Ok, então aqui está a nossa navegação inferior. Reduza o zoom em Hyde. O Kruger é assim. Então esta vai ser a nossa navegação inferior. Na verdade, são 60 fotos que devem ser 60 pixels. É por isso que estava acontecendo. Então mude o nosso Não, na verdade, isso está correto. Agora ele está olhando lido. De qualquer forma, sou muito grande Zil Perfect. Então tento ser o mais perfeito possível. Agora vamos agarrar, e este vai ser o nosso PG de navegação, por isso vai ser estático. Então vamos arrastar e soltar todos os nossos ícones em seus estados. Então esta vai ser a nossa casa em mim e ícone para o primeiro item de navegação esperança casa. Então temos um maior aqui. Isto é 20 por 21. Este é 28 por 30. Então vamos usar 21 por 20. Então desculpe 21 cabelos para que você possa ver ou ouvir zoom em porque nós queremos ser já perfeito por aqui. Esta é a nossa linha vazia de casa. Normal. E isso vai ser ativo em casa assim. Então, sentes a diferença? Alguma coisa se movendo? Não. Então isso é perfeito. Então vamos para este vetor e mudar a cor do traçado. Rebocar este verde porque esta vai ser a nossa cor normal. E esta vai ser a nossa ativa, então a cor ativa será realmente descoberta. Isso significa colapso. Vamos adicionar descolorir o dedo do pé sobre estilos também. Então este é o nosso creme primário. Este é o nosso verde primário. Se quiser arranjá-los, vai contactá-los. Deixa-me mostrar-te. Mas agora está tudo bem. Então clique aqui fora. Ser primário Vamos movê-lo para cima assim. E médio verde e grande cinza verde, branco Facebook, Verde escuro estará no topo assim. Isto parece melhor. E agora vou selecionar meu quadro de arte. Esta vai ser a minha casa activa, e eu vou usar esta cor. Sim, então agora estou neste estágio, vou esconder o estado normal. Isto vai estar ativo em casa e vamos mover os dois para dentro. Agora vamos alinhá-lo no meio deste aqui, e vamos fazer o mesmo para todos os outros ícones. Você pode ter a idéia de que dentro de casa temos que escadas para casa, casa ativa normal. Devem ter o mesmo tamanho. Portanto, se você ocultar ou mostrar um e o outro, eles não devem piscar ou mudar de tamanho ou forma ou sua posição. Então este é realmente o meio. Você pode ver o ponto norte aqui. Assim que chegarmos em casa aqui, eu vou pisar, acelerar e trazer outros dois ícones aqui rapidamente. - Agora vamos alinhar estes. Então temos estes três itens de navegação e vamos alinhar estes. Então, primeiro, vamos selecionar todos eles. Estou segurando a tecla Command Controller, e vamos usar isso arrumado. Então isso parece bom. Então é só organizar este no meio, e agora vamos mudar as escadas. Então essas configurações inativas escadas tão ativas que vamos nos esconder assim. Temos três escadas aqui. Agora, se você quiser ter alguma abordagem Mawr, hum, hum, relistar, você também pode usar esta opacidade aqui para que possamos ter algo como 80% em 90% como este . E também podemos ter algo aqui como isto. 90% sobre isso está parecendo um pouco menor. Então esta casa vamos aumentar seu tamanho seleciona uso, mudar assim. Isto parece muito melhor, porque isso eu porque estamos parecendo maiores. E este parecia um pouco menor. Então agora vamos tentar alinhá-los assim. Então, Oops. Então vamos alinhá-los na parte inferior. Estes são bons, uh, 19 no topo. Então vamos ter 18 e 18. Vamos movê-los um pouco mais para cima assim. Então isso está ótimo. Vamos manter 13. Ok, então nosso menu de navegação na parte inferior está completo. Podemos ver que temos um estado inativo e temos um estado ativo. O estado ativo é um verde brilhante, muito afiado, azul esverdeado e inativo é um pouco verde maçante, que está em nosso esquema de cores. É chamado de cor verde média. Então você também pode adicionar o peso do traçado fora do seu s, que é ícones como este. Se você quiser ter um ícone muito fino, ícones como esse, por exemplo, eu quero ter um pixel. Mas assim, ou talvez 1.5, isso parece melhor. 1.5 parece bom. Acho que nossa navegação inferior está completa. Podemos facilmente mudá-lo e encomendá-lo. E mais uma coisa é que você também pode limpar Ah, um componente para este. Então, comando G e este é o nosso fundo. Eu tenho. E, hum isso mesmo. Clique e crie componente. Há muitas maneiras que você pode criar um componente e nós vamos replicá-lo e controlar e controlar E e controlar o Comando X para copiar este, e nós vamos movê-lo neste quadro. Então também, você pode alterar o fundo da cor do quadro para ser como, Oops. Então nós vamos mudar o quadro, cor, cor, fundo, sentir cor para ser algo como grande. Assim, podemos facilmente ver outros componentes em cima dele. Então este é o nosso você pode dizer mau Ah, você pode dizer navegações. Nossos itens médios que estarão presentes em cada tela, como tal barra, nosso logotipo está de volta uma linha, voltando para a tela, e então nós temos este. Então, agora na próxima lição, vamos criar o conteúdo do meio, as imagens e todas essas coisas, então vamos passar para a próxima escuta. 43. Tela de casa - Design de aplicativos para dispositivos de Mobile 3: neste vídeo, vamos criar esta receita em destaque fora do nosso aplicativo e vamos começar. Vamos usar um currículo nosso ajuste. E agora estamos indo para o pé. Crie um retângulo aqui e vamos criar um retângulo e será do tamanho desta barra aqui. Então será 339 e a altura será 216. Então, primeiro temos isto. Vamos usar o raio da borda de quatro e isso realmente vai ser o contêiner fora da imagem. Então isso vai ser mascarar um monte de coisas. Então este vai ser mais o nosso contentor da mesquita. Então vamos pegar a imagem e arrastá-la até aqui. Então nós vamos para as nossas imagens, e, hum, a imagem que vamos usar é esta ou esta. Então vamos arrastar e soltar em cima deste para ter algo assim, como comprar os dois, e usar mesquita. E vamos deixar esta imagem dentro deste enorme zoom para fora. Então este é o limite da imagem. Vamos manter a tecla Shift uma opção dedo do pé. Mova para onde gostaríamos de tê-lo assim. Ok, então isso parece marcado. - Não. Criamos esta caixa principal aqui. Agora vamos ter algum efeito excessivo sobre esta imagem porque queremos colocar algum texto aqui. Então o que vamos fazer é criar um ângulo indireto aqui no topo desta imagem, o mesmo tamanho fora da imagem de uma cabeça, e vamos mover este retângulo. Você pode ver que este é o retângulo, e nós vamos movê-lo para dentro deste grupo mascarado e chamá-lo excessivamente. Assim que tivermos sobreposição, vamos usar uma insulina Grady linear, seu ingrediente. E se nós vamos usar vital aqui e preto aqui, Ok, então nós vamos ter algo como isso, e nós vamos mudar a direção um pouco como este, assim, e nós vamos para usar multiplicar aqui para que você possa ver este olhar grande um fato. Então, Então, coisa dos homens é que também podemos mudar onde queremos que seja. Por exemplo, eu quero que esta cor branca fique aqui assim, e eu quero adicionar um pouco um pouco cria cor aqui assim, e isso está ótimo. Então esta vai ser a nossa sobreposição, que vai nos ajudar a ter algum texto sobre isso nesta seção aqui. Então este é o nosso grupo de massa porque tudo estará dentro disso. Então vamos continuar adicionando coisas neste grupo de mesquitas. Agora, vamos criar uma forma simples aqui, que vai ser a nossa etiqueta de receita em destaque aqui, então você pode ver que esta é a nossa forma de fator de forma. Vamos dar o dedo do pé, colorir laranja. E o valor desta cor laranja é um desenvolvimento 93. Então este é o meu segundo regular principal. Isto é cor laranja, e vamos adicioná-lo ao preenchimento. Então vamos primeiro adicionar em outros estilos doente, laranja irritado. Esta é a nossa segunda laranja. Então vamos removê-lo e adicionado ao preenchimento aqui esta cor. Então temos essa barra, e se quisermos aumentar a altura, podemos usar 20 anos ou aqui assim, também podemos encurtá-la e movê-la assim. Então vamos chamá-lo de Dag e vamos ampliar e colocar nossa sobrecarga de texto. D vai ser destaque assim. E vai ser o Agente Romanoff. Não é verdade. Grande Yantra. O Homem Suficiente vai ter 14 anos. Vai ser 10% porque queremos muito espaço nesta secção ou aqui. E vamos movê-lo assim. Vamos fazer com que seja 24. E o próximo uso branco, que vai ser este branco, este branco azulado aqui e próximo uso, hum, 12 ovos daqui. Então eu queria estar alinhado na mesma área como esta pilha aqui. Então vamos usar nossos governantes. Este imposto, este texto deve ser uma linha com a mesma mentira quase aqui. Ou talvez por aqui, assim. Vamos manter os meios aqui porque é um botão, então não precisamos do dedo do pé. Estejam muito preocupados com isso. Isto é apenas um texto. Então vamos alinhar assim. Ok, então a seguir é ah Di faz isso? Este será um grande grande 24 2% branco. Vamos ver qual é a distância de abaixo 7 12 Também para este controle em destaque, Camargue E. E vamos movê-lo mais perto deste porque é um item de texto. Não queremos nos preocupar com isso. É muito perto do fundo. Então temos 317 cabelos textuais, que vai ser, hum você pode usar seu dedão 14 317. Isto vai ser novamente branco, e vamos usar o ícone do amor aqui. E, uh, vamos ver. Onde é que está? É este aqui. Vamos usar uma versão menor 16 porcos Ilves porque não queremos que seja muito grande que ela seja branca aqui. Então eu acho que no meu designer real usado cavalheiro de aqui como este. Então isso está olhando eu acho que isso parece bom, mas você também pode usar através do dedo grande. Rebic taxed está parecendo melhor para mim. Esta é em alemão de normal. Você também pode usar o meio, se quiser. Oh, isso vai olhar para trás escrevendo agora Aqui está um mergulho de design Se você tem algum item que é menor e um é maior e eles estão na mesma linha, você tem que alinhar o fundo fora deles para que você possa ver que vamos usar o alinhamento inferior como este. Mas você pode ver agora que eles estão olhando ah, muito abaixo disso. Então, o que precisamos fazer aqui é pegar uma linha como esta e vamos alinhar coisas que assim. Como isso. Como este. Como este. Muito bem, tão difícil vai estar alinhado com isto porque não é texto. Você não poderia ter algo assim. Então vamos esconder as linhas. O turno é agora. Você pode ver que isso está parecendo muito melhor agora. Há uma coisa que não adicionamos aqui, que é sombra. Então aqui está a nossa etiqueta em destaque. Vamos renomear o título deles. Este é, uh, Icahn duro. Então todos estes eu vou movê-los para dentro deste grupo mastro assim. Você pode mantê-los no dedo do pé. Isso não é um problema, mas sim para isso. Dag, eu acho que eu queria estar dentro desta área idiota da mesquita porque eu queria ser cortada aqui. Se está se estendendo para fora desta fronteira. Agora estamos indo dedo do pé adiciona sombra para este grupo. Então eu sou. O que eu vou fazer é adicionar a sombra a este grupo de mesquitas em vez ter no retângulo. Então vamos adicionar uma sombra aqui, e desta vez vamos usar 20%. Vamos ter uma sombra. Seis pixels. Sangue vai ser 12 assim. E, hum, isso é mais Aproxime-se um pouco. Sangue será 10. Vamos usar o dobro de valor para isso. Por quê? Então este é um truque muito bom, idiota. E sempre tenta dobrar este borrão. E vamos adicionar um pouco mais de cor do seu cabelo. Vamos usar descolorir e usar 30% para este. É usado 50%. 65. Bem, parece melhor. Ok, então, na verdade, eu estou tentando usar a mesma cor verde dos sonhos que temos em nosso fundo e tentar usar uma sombra mais escura fora dela. Seleção de 70% e eu estou indo toe movê-lo mais de um como este e que ela era 50%. Então eu vou usar para seis a cor verde estrela 40%. Então esta vai ser a minha configuração final. E se eu diminuir o zoom, você pode ver que isso está ótimo. Agora a próxima parte é muito simples. Vamos usar o mesmo cabelo elementar, que é vamos agrupar isso primeiro. Então vamos cortá-la. Vamos lá, G e vamos chamar de grande descanso. Veja, seja. E vamos comandar e controlar T para criar outro. E agora vamos ter uma tela menor, uma versão menor desta. E vamos remover este destaque aqui para o veado ser movido e eu diria que tudo vai parecer. E se nós, hum isso é tentar torná-lo um pouco menor assim. Agora você pode ver que há um problema que estamos tendo isso esmagado. Icahn está aqui. Então, para corrigir isso, vamos clicar duas vezes sobre este e vamos ter Jane, essas restrições. Então isso vai ser o fundo direito. E para este grupo, você pode ver que é uma habilidade que estava indo com o tamanho fixo, então não vamos tentar escalá-lo. Você pode ver que ele está tentando ficar na mesma área. Não está esmagando ou mudando sua forma. Não, vamos usar isso assim. Não, temos nossa seção menor. Nós estamos aqui. Vamos ampliar e corrigir alguns dos problemas ou aqui. Então este é realmente o título vai ser no fundo como cardo aqui. Isto vai estar dentro da imagem e terá automatizado. Vamos usar isso automatizar e saber. Você pode ver que está consertado para este. Você pode ver que estamos indo para o turno de controle de turno de grupo G e isso está realmente acontecendo devido a este contato clipe. Então, temos um quadro e o conteúdo do script exatamente tendo esse problema. Então, vamos movê-lo para cá. Mais água deles assim. Isto está parecendo melhor. Vamos ver quanto espaço temos aqui e entre eles. Cinco. Então agora é. Ouviu isso? Então nós temos seis agora, então vamos mover um porcos para cá. Este coração vai ser seis porcos. É 10 picaretas é que eles têm pequena placa deles. Maravilha 34 no três. Ok, então este local está procurando criar. Então agora temos isso. Certo, então vamos onde está esse título? Então o título também vai ser corrigido esta erva daninha fora dele. Este título será carne fria e o tamanho quatro será 16. E será o John. Trauma ao vivo e cor será este verde médio. Agora vamos criar um têxtil, que já temos. Mas desta vez vai ser... - Não. 16 suínos, parágrafo doente assim ou texto normal. Então este é realmente de um texto normal. Então este vai ser o nosso título. Ou se também pudermos usar algo como ... um título pequeno como este. Bankoff Normal será bom. Assim que tivermos isso, podemos replicá-lo, então só precisamos replicá-lo. E agora vamos renomeá-lo pequeno para um C B apenas replicado. Temos uma distância do comando D replicado, e será apreciado assim. 14 deve estar dentro disso. Então, temos esta grande seção aqui. Então o que podemos fazer aqui é, uh nós também podemos fazer mais uma coisa. Então, se você quiser criar um componente, nosso controle todos os casos antes de fazer um componente, você tem que ter certeza de que tudo é perfeito. E você fez certo, porque será difícil para você ver e mudar tudo por aqui. Então controle tudo K, esta é a nossa pequena receita. Vou replicá-lo. Vamos, a receita pequena. Vou movê-lo para cá. Para os meus quadris. Ao meu estilo. Guia, estamos aqui assim. Não, vou voltar ao meu projeto principal. E aqui está o meu projeto principal. Vamos diminuir o zoom e ver o que temos aqui. Então essa distância é um pouco demais para mim. Então eu vou para o guia de estilo e fiz algumas mudanças ou aqui e eu vou folgar os dois fora e movê-los um pouco para cá. Isto parece melhor. Agora vamos voltar e está parecendo melhor aqui. Mais uma coisa. Se quiser mudar a imagem aqui, faremos isso mais tarde. Então vamos replicar essa opção de arte. Estou segurando a chave Arden Option. 14 porcos doentes. Vou passar 12 pixels entre eles. A distância, vamos, de dedo do pé. Mande-o ser copiado aqui. Agora, nós temos três pequenas receitas, e nós também podemos adicionar atacados aqui. Então, vamos sob o título em 30 minutos. Então este é o nosso título, e este é um Rubik 14. E queríamos ser um grande 16 aqui. Na verdade, queríamos ser grandes porque é um título. Então este é realmente este estilo não Big 16, mas na seção de texto sobre texto de ação. Então este é realmente o estilo, e teremos mais espaço a partir daqui. Então vamos usar tarty dois aqui e pisamos todos eles. E usaremos quase 12 daqui. Isto está parecendo melhor. E agora o que você tem que fazer é selecionar todos eles de comando e controle, G. E este é o nosso pequeno, uh, pequeno. Então eu tenho lacunas. Caminhe em seção pequena. Esta é a nossa secção, na verdade. Então, agora estamos, se você olhar para aqui. Então, se selecionarmos todos esses três, podemos também ter essa opção ou sim, podemos James a distância entre eles assim. Também podemos mudá-lo, dedo do pé, o que parece um pouco menos para o meu melhor. Então agora vamos replicar este comando ou controlar D e movê-lo para baixo deste. Então teremos de novo 30 Bigs a partir daqui. E Jeanne tem cabeçalhos como este. E vamos diminuir o zoom. É como este. Nós vamos mudar o tamanho deste ou aqui, e você pode ver o tamanho deste fundo. Nunca a mesma coisa. Mas temos que mudar o tamanho deste fundo porque ele ficou para trás. Ok, então nós terminamos isso. Vamos selecionar isto. É Collab desmaiou. Estes e nós vamos selecionar esta navegação inferior. E nós vamos selecionar essa posição fixa ao escolarizar porque ela vai estar no topo e vai ser corrigida. Nunca o fiz. Queremos mudar isto. Então vamos tentar ver isso em um protótipo e vamos ver o que está acontecendo agora. Você pode ver que temos essa navegação na parte inferior. Então, se tentarmos ir para a escola, estamos ferrando dentro disso. Você pode ver que estamos rolando dentro disso. Então isso vai para Stace aqui. Se você quer ter algo no topo, você pode perder isso também. Mas agora, eu acho que isso é melhor ter essa navegação universal na parte inferior. Você pode ver agora que a única coisa que resta é que você tem que mudar essas imagens, o que é um pedaço de bolo para você. Agora, o que nós vamos fazer é mudar todas as imagens para essas receitas, e nós também vamos mudar rapidamente os títulos inferiores aqui. Então eu vou mostrar a vocês como mudar a imagem. Vamos clicar duas vezes e ir a este grupo de mesquitas e clicar nesta imagem ou aqui. E eu encontrei um truque muito bom que se você arrastar e soltar sua imagem nesta imagem, sentir que vai ser fritado muito facilmente. Então ele vai preenchê-lo em um bom espaço. Então deixe-me mostrar quando demonstrar o que eu realmente quero dizer agora. Então vamos arrastar esta imagem e deixá-la aqui. Então, se eu tentar deixá-lo aqui, você pode ver que isso vai acontecer. Imagery, tamanho e tudo está indo para o pé Vá para cá e eles são a melhor coisa. Nossa melhor coisa que você pode fazer aqui é apenas arrastar o título e soltá-lo nesta imagem. Agora você pode ver que isso está parecendo melhor. Não foi isso que aconteceu da última vez. Da mesma forma, para este, vamos folgar esta imagem. Esse grupo de massa. E se você quiser direcionar isso como a imagem você pode segurar a tecla de controle ou comando e ir para este fim isso, selecione esta imagem e nós vamos voltar e selecionar outra imagem. Vamos slacked em um presente. Então eu vou soltá-lo neste campo de imagem e você pode ver que isso é melhor. Isso é mais fácil para mim se você ainda quiser ajustá-lo. Você pode folgar esta imagem. Vá esta imagem, preencha em goto cortar e você pode colocar a imagem, por exemplo. Quero colocar esta seção. Eu quero torná-lo maior no turno, um, assim, e pressionar cruz assim. Então esta é outra maneira se você quiser personalizá-lo. Mas agora eu estou eu quero rapidamente colocar essas imagens. Quero mudar esses números. Quero mudar estes impostos aqui. Da mesma forma, para este, vamos fazer o mesmo truque, e vamos para esta imagem ou aqui. Este é o arquivo de imagem. Esta é a imagem livre, mais baixo aqui. Vamos arrastar e soltar tudo o que temos nesta imagem preenchida, e isso coloca-o de forma muito boa para mim. Acho que esta é uma ótima localização. Então, se eu quiser largar e mudá-lo, vou mudá-lo assim. Isto parece melhor para isto. Menos de 30 minutos será verde escuro, não usando preto aqui. Isto é, na verdade, são pretos. Então isso é tudo para esta tela. Concluímos com sucesso esta tela, e vamos ver nosso protótipo na tela e ver como ele se parece. Temos teste nos dedos, poucas coisas, por exemplo, o topo aqui. Ok, agora você pode ver que este é o nosso salto local, e está logo atrás desta parte de topo bem aqui. Então eu queria estar aqui nesta seção porque nós temos que cuidar disso em nosso projeto primeiro que eu costumava colocar. Eu coloquei aqui, então foi, você sabe, ficando por esta seção. Então eu mudei para cá. Então é assim que vamos usar e projetar a tela. Os outros próximos três telas, eles são apenas você pode ver apenas muito semelhante a este. Temos tudo melhor. Só precisamos do dedo do pé. Certifique-se de que esta navegação de parada vai se mover. E também o de baixo, se tivermos dedo do pé. Então esta vai ser a próxima sessão. Acho que estas lições são muito longas. Mas você tem que ficar comigo. Você tem que construí-lo, e você tem que aprender e ver como eu realmente faço isso. Então vamos passar para a próxima lição. 44. Salde de tela home: nesta lição. Vamos criar as próximas telas de combustível e podem ver que estamos aqui. Aqui temos. Sellards merece saudável, então estes são quase os mesmos. A única exceção é que estes a barra de menu aqui está realmente se movendo do dedo ativo em ativo. E esse fundo está se movendo por aqui. Então nós estamos indo dedo, usar isso e apenas mudar através de fora do imposto. Isto é o mesmo. Então eu vou realmente pular isso muito rápido. Ou talvez eu vá pular essa seção. Vou me concentrar no topo, porque tudo é igual. Só estamos mudando as imagens, os valores dessa, isso é tudo. Se temos, Se você tem alguma pergunta você sempre pode me perguntar e isso vai resolver o seu problema se você tiver. Se encontrares algum problema, tudo é igual. Só estavam mudando texto e imagens. Esta receita de parada e navegação. Vou explicar nesta lição. Então vamos começar. E o que vamos fazer é replicar esta tela, e a primeira coisa que vamos fazer é mover para esta área aqui, Skip. Ok, então isso é ativo, inativo. E primeiro, o que vamos fazer é remover os inativos e ir para o estado inativo, porque agora as refeições se foram. Queremos um terreno ruim. Toby se mudou para saladas aqui. E nós também vamos mudar o seu rico, porque agora ele está parecendo um pouco menor porque saladas é uma palavra grande. Então isso vai ser aqui assim. Certo, então vendedores para vendedores, temos estado ativo. Um inativo vai ser escondido. Então é assim que vai se mover. Hum, então agora nós vamos fazer o mesmo. Vamos mudar todas essas imagens e tudo mais. A loja de impostos aqui rapidamente. E isso é tudo. Eu normalmente tento esconder minha navegação inferior uma vez que você pode bloqueá-lo ou você pode escondê-lo dedo do pé facilmente, manipular esses itens. Então eu estou indo para o pé. Principalmente esconde assim. Se algo assim acontece, é porque temos citado toe colheita para que você possa ir para preencher, e então você pode novamente ir para cortar para colocá-lo onde você queria estar. Então isso está acontecendo. Na verdade, eu especifiquei Grob Ah, no meu, hum, golpe anterior McCandless ou estou entediado aqui. Então isso está acontecendo comigo, então não precisa se preocupar com isso. Você pode consertar isso. Então, se eu for para isso, eu posso usar Phil e então eu posso selecionar qualquer imagem daqui. Talvez este e eu vou deixar cair aqui assim, e então eu posso ir cortar e movê-lo por aí assim. Então, agora você pode ver esta tela também é concluída o segundo ao lado de também são os mesmos. Então não vou repetir. mesmos passos de design novamente, novamente. Então eu vou criá-los por conta própria, e eu vou pular essas lições porque isso é a mesma coisa que vamos fazer nas próximas duas telas. Então, uma vez que eu tenha concluído, todas essas telas se encontrariam em seguida, e nós vamos realmente usar nossas ferramentas de prototipagem para protótipo essas quatro e cinco skins. Então vamos passar para a próxima lição. 45. Tela de receitas saudáveis - Design de aplicativos para dispositivos de Mobile Design: Então agora eu estou criando, na verdade, a última dessas quatro telas, que é saudável agora aqui é uma parte complicada. É por isso que parei aqui e comecei a gravar. Agora você pode ver aqui que temos este fundo. Então, se tentarmos movê-lo aqui agora, realmente saudável vai se mover dentro da tela em vez de aqui. Então, uh, quando temos que fazer algo assim, nós temos que realmente mover toda essa navegação. Então vamos usar esta escola, levá-los para fora. Então temos toda essa navegação com o fundo. Vá lá, G, este é o outro top que eles têm. Certo, então o que temos que fazer é mover isso na verdade para a esquerda. Então isso realmente vai se mover assim, então os meios vão sair. E agora vamos mudar as estatísticas. Então isso vai ser inativo. Este fundo vai mover o dedo do pé saudável. E, uh, agora será um poço fora do saudável, e os ricos serão. Eu acho que isso é bom e, uh bem, é saudável. Ok, então o estado ativo inativo vai ser escondido e, hum, próximo movê-lo para o meio. Esperanças. Então nós realmente queremos mover este fundo para o meio disso. Ok, então isso parece bom. Mudamos tudo para cá, e isto vai ser assim. O resto é o mesmo. Eu vou substituir todas as imagens e eu vou encontrá-lo na próxima lição onde nós vamos estar realmente animando estes e realmente tentando toe protótipo esta seção Nós estamos aqui. 46. Protótipo na navegação no Figma: Agora você pode ver que criamos nossa força, essas telas principais e esta tela de introdução ou login. E estamos em uma posição que podemos adicionar alguns protótipos aqui. Agora você pode ver todas essas quatro telas. São 940 exilados. Deixei um pouco de espaço no fundo. Então, se você olhar para ele aqui Então, na verdade, eu deixei o espaço porque esta navegação e todo o conteúdo de fundo vai se mover . Assim que movermos esta página para cima, isto vai ocupar o seu lugar aqui. Então vai ser aqui assim, então não, então não, você pode ver que isso é isso. É por isso que deixei algum espaço no fundo. Certo, então agora vamos ligar essas telas, e vamos passar para este protótipo aqui. E a primeira coisa é que esta vai ser a nossa tela principal. Então vamos agarrá-lo a partir daqui, e vamos ligá-lo a este para que você possa ver este botão play. Isto é isto mostra que esta vai ser a primeira tela agora Nós também podemos adicionar alguma coisa aqui. Por exemplo, agrupe todos esses comandos G e vamos chamá-lo de Logan Group. E nós também podemos vincular isso a este e na torneira nós nunca vamos entender isso significa significa e não vai ser instantâneo. Nós vamos usar inteligente, animado, animado, e nós vamos usar facilidade de entrada e facilidade para fora por 400 milissegundos. Então este vai ser o fato de que vamos usar de forma semelhante para este. Ok, então uma coisa que eles têm que mencionar é que sempre que você tentar usar qualquer ícone, haverá uma área alvo de sucesso. Para isso eu gon área hit significa que temos que projetar algo no fundo, que vai ser na área capaz que é acessível ao dedo. Então, se você tem uma área muito pequena capaz ou atingir o alvo, seu dedo não vai tocar este ícone facilmente. Então use um verdadeiro continue tocando isso, e não funcionará. Então o que nós vamos fazer é, hum, vamos entrar neste grupo. Vamos criar um retângulo aqui assim. Eu realmente odeio essa, hum, funcionalidade que eu quero um Simon em um grupo. Ele deve criar este retângulo dentro desse grupo em vez de lê-lo no topo. Então eu vou arrastá-lo para esta seta esquerda e para o ângulo da seita, ele vai ser, uh, idéia úmida para este erro deixou um. Basta ir para o design e apenas Jack este Injectar este conteúdo clipe agora, a área do passo está realmente indo toe ser transparente. 0% de transparência, porque vamos usá-lo apenas para prototipagem. Assim que tivermos a mídia esfaqueada e queremos, você sabe, baseá-la em todos os outros grupos também. Então eu vou fazer o mesmo por este. Então eu vou ter uma seção de tabulação aqui. Tocá-lo ainda para este, Do e eu vou Teoh, use alguns DeBlieux como este. Uh, vamos usar algo assim e vamos movê-lo para dentro. Este funil Isto também é em tribunal app. Sim, e vamos mudar o conteúdo do clipe. Estou fora disso, se você tiver. Então você tem que verificar se há um quadro em torno de seu ícone e você tem este conteúdo clipe isso vai ser uma dor na sua cabeça. Então, hum, área Tab vai ser transparente, então eu vou mudar a transparência para 0%. Então nós temos ícones de funil e seta aqui, e nós vamos folgar o Kamar e ver ambos fora deles. E nós estamos indo, hum, biest eles ou aqui assim. Então vamos, tipo, embarcar fora deles, diluí-los. E eu estou indo para esperanças não gostar deste tempo baseado que estamos aqui, eles vão ser baseados no lugar tão menos próximo para liderar estes em segundos como este comando, nós seu controle v, para colá-los de forma semelhante para este. Estamos fazendo isso porque não fizemos esses componentes. Se tivéssemos feito esses componentes, tínhamos que adicionar na seção de componentes. Mas eu acho que esse tipo de outros realmente vai funcionar de qualquer maneira. Então aqui nós os temos. Agora vamos ligar essas seções de volta, então vamos para o protótipo e abrir isso e selecionar a facada Índia e vamos ligá-la de volta. Uh, isso vai navegar para, e nós não vamos usar animação inteligente, mas nós vamos usar, hum, sair ou ele vai ser destruído. Então esta tela vai se mover assim, e isso vai voltar de forma semelhante para esta outra vez, vamos fazer a mesma coisa. Configurações que já são as mesmas. Então temos saco vinculado e temos ligado este log no reboque. Este D é para esta tela principal. Ok, então vamos testar este. Ok? Então nós temos a tela para esfaqueá-lo, e você pode ver o efeito Yum xyz subindo. Isto é realmente inteligente. qualquer minuto você pode ver se movendo e emitindo assim. Agora, a próxima coisa que vamos fazer é adicionar áreas capazes para tudo isso. Então o que eu tenho que fazer é eu tenho que adicionar ah área de aba área adaptável em todos estes. Então acho que deveríamos ter criado isso desde o início. Mas, Mas, é assim que eu queria mostrar que se você não criar o alvo da facada, o que na verdade muito fora, e designers perdem sempre que dão aulas. Então este vai ser alvo da torneira. E, hum, isso vai ser 0% o que isso significa. Então temos o mesmo tempo que duplicado vai ser quatro Sellards como este no mesmo. Sim. Então temos “Vamos lá D”. Nós vamos para desertos nesta seção Nós estamos aqui. Então vamos voltar a fazer o mesmo por este aqui. Então estes são os corredores de torneira para todos estes. Então isso vai ser usado em nosso protótipo. Estes são os alvos dos dedos. Então, se seus dedos se você tem este passo alvo dedos muito pequenos vão perder este Stargate, e ele vai ter alguns problemas. Então é assim que eu estou tentando mostrar como você está indo para fazer a experiência do usuário ou melhorar a usabilidade fora do aplicativo? Não. Vou adicionar todos estes alvos de torneira em todos estes ou aqui. Agora, eu criei todos os alvos de toque. Por quê? Eu não fiz componente porque eu tenho que mover tudo isso aqui e o que eles são Então eu só queria mostrar a vocês como criar esses alvos de toque e por que eles são necessários para prototipagem. Então agora vamos passar para esta seção de protótipos ou aqui. E para isso significa que isso vai ser refeições para os vendedores. Você pode ver agora o alvo da equipe. Vamos movê-lo para saladas aqui. E vai ser, uh, uh, inteligente qualquer mero. E vai ser fácil entrar e sair. Então estas são as mesmas configurações que estavam indo para usar para cada off cada um destes. Então este vai se mover, então isso merece isso. Saudável é ir dedo do pé para o último à mão. Próximo. Zoom para que você possa facilmente ver que da mesma forma, temos este Vendedores Desculpe significa e ele vai voltar para mim anos. Sobremesas A sobremesa vai para o deserto. Saudável vai se curvar Saudável da mesma forma toda a paz. Agora você pode ver que eu os conectei. Agora vamos testar isso e ver como esse menu de navegação realmente funciona e parece , então vamos começar e ver o que podemos preferir. Eu tenho com Sigma. Vamos dar algum tempo ao Senhor, está levando muito tempo para diminuir o mesmo. Então vamos em frente e ver nosso protótipo sobrecarga. Então, algumas das imagens não estão carregando, mas você pode ver o efeito sobrecarga agora para GMA está realmente operando seu serviço. É por isso que estamos tendo essa lentidão lenta nesta, hum, esta animação e este protótipo, espero que você não se importe, mas é assim que vamos criar este, uh, ou aqui. Da mesma forma, podemos clicar nisso e voltar ou cabelo saudável sua escola de duas refeições saudáveis Desser , Sellards e meios. Então é assim que você realmente protótipo e vincula suas telas? Certifique-se de que as posições fora deste texto e tudo é o mesmo porque você pode ver aqui . Se eu tentar clicar aqui, parece que está se movendo. Algumas falhas estão lá em protótipos de massa de figo ou não precisa ser muito, porque você tem que mostrar aos seus desenvolvedores que é assim que vai parecer e há controles padrão e programação que vão facilitar este movimento. Então eu espero que você tenha gostado disso até isso. Espero que tenha aprendido muito sobre figo, mãe, vamos criar as próximas telas nas próximas lições. Então vamos passar para a próxima lição. 47. Design de aplicativos de nova receita: Agora, nesses poucos vídeos, vamos criar essas telas de busca 123 e quatro. Então, na verdade, neste verde nós selecionamos para fora dessas seleções, então eu vou ficar com apenas um este. Vou mostrar-lhe a técnica, e você pode aplicá-la a tantos. Se isso acontecer, você quer o dedo cortado aqui. Então nós temos Ah, esta tela com essas reservas são mostradas do que nós temos. Três telas eram filtros e as opções de pesquisa avançada são assim sempre que alguém clica na pesquisa, essas telas aparecerão. Então vamos começar e começar a projetar essas telas de filtro de pesquisa. Agora, vamos voltar ao nosso arquivo real, e a primeira coisa que sempre vamos fazer é replicar isso. Então vamos replicar isso saudável e vamos renomeá-lo dedo do pé. Eu sinto que eles são tudo o que você pode chamar de tal. Então este vai ser o nosso primeiro item. E, hum, então podemos pegar algumas coisas aqui. Por exemplo, não precisamos disso aqui, então vamos deletar isso do que esse dedo, e a partir desses nós vamos não precisamos dessas pequenas receitas. Podemos precisar deste imposto aqui, então vou mantê-lo aqui assim. Acho que não precisamos usar isso. Talvez precisemos de algo assim, mas agora, acho que é importante apagarmos. Ok, então aqui temos um rumo, e vamos ligar nossa grade Lior, e eu vou alinhá-la à esquerda. Isso é manter a distância do dedo do pé. Hum, 48 é bom. Próximo. Habilitar nossos governantes. Este é o trabalho, na verdade. Então, ok, então eu acho que 40. Parece ótimo. Vamos esconder tudo. no turno quatro controlado ou controle G, se você estiver em um Mac, e aqui temos nosso Paul, você é assim, eu acho que ele deve estar alinhado aqui para que as pessoas não fiquem muito piscando ou algo assim. Por isso, vou passar por aqui assim. Certo, então primeiro vamos mudar o nome para terra morta. Então temos um plano de dieta. As opções estavam aqui. Não, vamos criar diferentes opções de plano para isso. Vamos usar uma técnica que vai ajudá-lo a acelerar seu trabalho e vamos começar com texto lá. Por aqui. O gado morreu. Vamos usar isso e eu vou colorir para assassinos locais. E eu vou usar este branco mesmo f ou você pode usar um pouco mais de lutador aqui como este. Não, a técnica mais simples é você ir para o pé. Adicione uma mudança de quadro, além de um Agora você pode ver aqui temos um quadro, então vamos chamá-lo de opção. E uma vez que nós já fizemos o quadro, nós podemos adicionar a cor de preenchimento aqui, e que vai ser nove e cinco. Então esta vai ser uma ótima cor, então nós não achamos que ela está ativa. Portanto, é um estado normal. Então vamos adicionar um pouco de redondeza a ele. Vamos agir de 1 a 6 e à esquerda e à direita mordendo. Eu vou com 16. Algo assim. E de cima e de baixo. Vou passar por mais de 12. Vamos usar 13 algo assim. Então isso está ótimo. Temos uma caixa muito agradável que vai expandir com o nosso texto. Então, se você se lembra que já usamos ordenadamente fora antes. Esta é, na verdade, a bebida ordenada. Agora vou replicar isto. Nós não vamos batê-lo em outro recipiente, então vamos replicado por estão pressionando a tecla de opção arte. E vamos ter outro, que é comprar um novo indiciado. Vamos criar outra opção de desenhar tudo arrastar para criar um novo. Estou a manter a distância da 12 entre estes dois elementos. Então, temos quatro opções aqui. Vamos agrupá-los juntos. Vamos, G. Então este é o nosso grupo morto aqui, então eu vou movê-lo para dentro desta pequena seção porque nós já tivemos este grupo. Certo, a partir daqui, temos muito espaço, então não queremos que seja muito. Ok, então mais um truque eu vou te mostrar, então deixe-me te mostrar o turno de controle 4. Ok, então se você ampliar, você pode ver que estes não estão alinhados corretamente. E mais uma coisa é, se você tem cantos arredondados como este formato oval, você tem que mantê-los um pouco mais de um a partir da fronteira, não é? Se você quiser mantê-los na fronteira assim, como este 15. Só vai ser 12. Isto vai ser julgado. Ok, então eu vou fazer este um escolhido como este. Ou talvez eu vá movê-lo para dentro um pouco porque temos cantos arredondados aqui . Vai parecer um pouco diferente. Oh, você pode ver um pouco. Na verdade, é um problema visual que sempre que você vê algo assim, não é. Não parecerá alinhado. Então este é um truque simples que se você tem um monte de itens arredondados como este, você tem que mover seu texto um pouco no dedo direito, alinhá-lo visualmente na linha. Então, nave controlada quatro. Isto parece um pouco melhor. Até você pode movê-lo. Mais dois pixels neste parece ótimo. Morreu plano. Ok, então nós temos este grupo, apenas nós vamos replicar este grupo e criar abaixo grupo aqui na parte inferior. Ok, então agora é 54. Eu estou indo dedo do pé, movê-lo mais para baixo 56 e descansar. Você já sabe. Só estou repetindo a mesma coisa. O que eu fiz aqui. Ok, então isso parece bom. Agora temos que reduzir a altura deste quadro de arte. Mas é um pouco demais. Não precisamos muito disso. Então, aqui estamos nós. Então esta é a linha de chegada para esta tela. Mais um truque está aqui porque se você quiser mudar a altura é a distância entre esses itens você pode folgar isso. Pegue isso e você pode aumentar ou diminuir a distância entre eles. Então este é o 13. E se eu não puder fazer isso daqui, posso usar algo daqui. 12. Eu queria ter 12 anos e da mesma forma aqui. Eu queria ter 12 anos. Então é assim que você faz isso rapidamente. Estas são as poucas características que estão realmente brilhando na Fig Meyer. Então eu espero que você tenha gostado desta lição sobre a próxima. Vamos fazer o estado de seleção, e eu vou te dizer como vamos fazer isso em um protótipo mais nos próximos. Vamos e vamos passar para a próxima lição 48. Animação de seleção de filtros de pesquisa: Agora vamos replicar esta tela e vamos para o próximo estado, que vai ser o estágio de seleção. Então, eu vou usar o dedo do pé zoom 90% ao meu gosto. Este parece bom. Agora vou clicar e segurar minha tecla de arte e opção para arrastá-la e replicar esta tela aqui. Então isso vai ser sobre tal para e aqui nós vamos ter alguns estados de seleção por aqui. Assim que alguém tocar tudo aqui, haverá um item de busca aqui. Então, isto é o que vamos fazer nesta tela? Uma coisa que esquecemos o que aqui é que precisamos mudar essa receita e vamos usar uma porta aqui, pesquisar duh ou selecionar opções. Vamos chamar isso agora, alguém clique nele. Então nós vamos para este valor, morreu uma opção, e nós estamos indo toe replicado isso pelo comando E. Então nós temos outro, e vamos chamá-lo de opção. Vamos chamá-lo de valor de opção. E vamos chamar-lhe opção, uh, normal. E vamos chamar essa opção ok para o estado ativo. Vamos usar a cor que tínhamos, que é verde muito nítido, que é a nossa cor primária. Este zero e 5956 Então este é um esquema de cores. Nós já decidimos. Estas são as nossas cores primárias na tela. Um e eu realmente amo e apreciar esta cor. Isso é muito legal, garota. Ok, então nós temos este estado seletor, mas nós também queremos um ícone ou ajuda. E mais uma coisa é a mesma coisa vai ser adicionado sobrecarga. Então o que vamos fazer é trazer o ícone até aqui, arrastado eu trouxe até aqui e criei um para nós mesmos. Então, a primeira coisa é, vamos precisar de uma elipse aqui, que é “hold shift”. E eu queria o Toby 16 por 16. Vamos fazer 16 por 16 e será da mesma cor. Este aqui, a tela, e terá um derrame de um porco doente, e será branco. Ok, então eu vou te dizer por que eu sou o futuro Dwight, porque ele vai separá-lo deste passado sobre ele. Também podemos ter um pouco maior, como 18 por 18. Isto é, isto parece bom. Ok, então nós temos este, e este parece criar. Agora só precisamos trazer o que eu vim aqui, então vamos trazer o daikon. Ok, agora, aqui estão os ícones que já selecionamos. Existem dois ícones que têm o marcado como este. Você pode ver este e este aqui. Então, eu vou com este. Vou arrastá-lo para o meu sigma e vamos rapidamente mudar algumas coisas ou aqui. Por exemplo. Só precisamos deste cheque. Mark, nós não precisamos que estas linhas estão aqui, então eu só preciso desta. Então eu vou arrastar para fora deste grupo, e eu vou movê-lo para dentro deste, assim, nós vamos usar uma cor branca. Desculpe-me este, e você fica um pouco mais branco. Vamos adicionar este dedo branco cor mais branco, excluído, mais leve. Amplie usando teclas de comando mais, e nós vamos folgar isso e vamos torná-lo um pouco menor porque é muito, muito grande. Assuma aqui. Então nós acho que precisamos apenas, um, como este aqui. Isto é bom. Ok, isso parece ótimo. Desculpem a borda da mesma cor como esta. Mais escritor, está bem? Borda E essa caixa de seleção deve ter a mesma cor. Ok, então eu acho que nós temos nosso direcionado selecionado. Agora vamos agrupá-lo juntos porque temos coisas separadas para trabalhar aqui e ali. Então estas são as nossas duas elipses. Esta é OK, então esta é uma pequena seção. Isto é alergia. Então este é die Pan di. Opção de grupo planejada virgem. Ok, então aqui temos a opção ativa e opção normal. Então nós vamos mover nossos dois ícones logo acima deste ativo. Nós não vamos movê-lo para dentro dele porque ele vai aplicar as mesmas coisas aqui. As configurações aqui. Então nós estamos indo toe, selecione todos estes comandos G, e esta vai ser a nossa opção. Estudante ativo. Então esta é a nossa opção ativa. Esta é outra opção. Normal. Então, sempre que alguém clica aqui, ou talvez aqui, isso vai dar o pé. Certo, agora vamos adicionar algo. Estamos aqui, e a primeira coisa que vamos fazer é esconder isso e vamos fazer outro e é tão triste retângulo aqui. E vamos usar as mesmas configurações como esta. Ou talvez possamos usar apenas o texto ou aqui e chamá-lo de dieta de valor. E, hum, nós vamos adicionar Shift A que está indo para a camada Adauto para ele. Vamos usar 12 e 11. E vamos usar 36 aqui em algum particular, que será a nossa cor azul, que já adicionamos. 36 aqui em algum particular, que será a nossa cor azul, Um. F. Four d 96 Agora vamos mudar a cor do dedo do pé do texto algo branco, que vai ser um mais vital aqui. Vamos colocá-lo aqui e vê-lo porque ele se encaixa. Não, é um pouco maior, então vamos ter um pouco menos. Então 10 está parecendo bem. Vamos ampliar e ver se temos espaços iguais uma parte superior e inferior algo como isto. Vamos diminuir o zoom e ver um pouco mais pequeno. Este, este vai funcionar. Sim, ok, então on-line é a configuração, então nós temos um valor de ponto morto aqui, que já foi adicionado, e vamos ver se os lados do mesmo tipo. Ok, então isso é o mesmo para eu não posso pensar 11 mas um texto de ação. Então este é o texto de conexão 11. Ok, então isso é bom. Faça-o no meio. Ok, então uma vez que este é selecionado, este vai assim. E, uh, nós vamos criar um ícone aqui. Ícone de cruz, É usar esta mudança. Vamos usar uma linha reta e vamos usar menos 45 algo assim, e nós estamos indo toe ter tampado. Toby arredondado. Ah, um pouco maior. Quem vai ser o tamanho? E nós vamos comandar a replicar isso e nós estamos indo para o pé. Mova para 45 graus assim. Vamos só fazer isso. Certo, então acho que isso parece marcado. Nós já atravessamos. Eu ligo, estamos indo para o pé. Agrupe-os e chame de cruz ou x. Eu sou o próximo. Movê-lo aqui parece um pouco menor, então vamos mudar a sua pele um pouco. 13. Isto parece melhor antes disso. Longe disso que ela tinha 14 anos ou aqui. Sapatos, você sabe, à frente. 16. Ok, então 16 é na verdade o tamanho para este. Então, estou usando altura. Altura vai ser 15. E digamos que você 16 16 parece um pouco maior. 15.5. Então eu vou usar um tamanho como este, e deve ser, vamos movê-lo para dentro. Isto é assim por? Eu acho que não podemos movê-lo porque ele é realmente um exemplo. Então, ou precisamos quebrar essa instância. Temos que quebrá-lo. Então vamos mantê-lo assim e mudar a cor grande da mesma forma, esta mesma cor. Certo, então não temos isso ou talvez possamos ter isso. Acho que isto parece bom. Ambas as ações são bastante separadas. Então, temos um estado de seleção pronto para agora. O truque é, sempre que você quiser dedo do pé qualquer coisa minuto na figo, ma ou qualquer um do aplicativo proto condução comprado fora desses estados deve ser o mesmo. Então você pode ver ou ouvir. Ouvir? Isto é diferente. Temos opções diferentes. Opção, opção, opção, opção. E aqui temos. Temos coisas diferentes, então deve ser a mesma coisa. Então o que eu vou fazer é nós vamos gerar isso replicando este. Então eu vou acreditar nisso. Replicar este porque temos temos precisamos de todos esses estados ativos para se quisermos qualquer meio e vamos neste estado. Então, isto vai ser uma busca uma. E neste estado, esta pólio, vamos nomear, deve ser a mesma coisa. Então, se você tem um quadro que deve ser enquadrado um aqui dedo do pé. Então eu vou movê-lo para baixo assim para aqui, e vai ser C 0%. Portanto, vai ser a transparência deve ser 0%. Ok, então nós temos escondido aqui, e nós estamos indo para o pé. Use a busca. Selecione a opção. Toby presente. Por aqui, ele vai ser ativo da mesma forma aqui, nós temos que esconder alguma coisa. Opção ativa. Vai ser 0%. Vamos primeiro movê-lo para baixo. Então eu queria deslizar para cima assim. Então eu vou movê-lo para baixo para aqui, e eu vou usar 0%. Então, se você entende isso, eu realmente tenho, eu estou tentando esconder esses estados. E quando nos mudamos para este dedo do pé inimigo. Este, este estado ativo, nós vamos apenas mostrá-los bem Da mesma forma, para este ícone de cruz. Nós vamos movê-lo para aqui assim em pode ser aqui, aqui e se mover. Faça 0%. Então, sempre que alguém tentar clicar aqui, ele vai entrar no estado. Então, sempre que alguém tentar o dedo do pé, escolha nossa tentativa de ativar isso. Ele vai entrar nesse estado e cada item vai se mostrar lenta e gradualmente. Então este é realmente o truque por trás disso. Da mesma forma, por aqui estamos indo para o pé. Mostre-o. Mas vamos usar opacidade aqui. Isso é escondido usando opacidade como esta. Ok, então vamos tentar qualquer feito eles e tentar conectá-los. Vamos fazer o protótipo e eu vou pisar. Vá por aqui. E se alguém OK, então nós vamos para aqui. Se alguém tentar clicar no toque neste, ele vai para este e nós vamos usar Smart Enemy. Está dentro para fora. Nenhuma rolagem fica fora de que está frio. Vamos começar com isso. Vamos também conectar algumas dessas barras aqui a essa área. Então, vamos nos mudar para este. Inteligente. Qualquer mero. Ok, então este, mesma forma, este também, este. Ok, então toda a barra de pesquisa lá corretamente para este aqui. Vamos tocar nosso protótipo e ver o que pegamos ainda. Ok, então aqui temos é o nosso cardápio de carne animado. Então, se clicarmos nesta receita, ele vai para você ver, isso aparece assim. Não podemos voltar agora porque ele vai voltar para este que temos dedo do pé. Está bem. Então, uma vez que estamos nesta tela, deixe-me mostrar a vocês o que fizemos até agora. Então, clique aqui, veja a qualquer missão aqui e deixe-me conectar isso para que possamos repetir novamente e novamente. Certo, então aqui temos essa cruz e onde fica o outro lado? Atravessar. Então isso é realmente eu não gosto disso em mãe rigorosa, porque o meu nome. E então, quando eu dormi isso, eu deveria estar lá dentro, com o dedo do pé desta camada aqui. Então este é um ícone cruzado e eu vou adicionar um, toques que 80 aqui. Então esta vai ser a minha conta? Sim, para este ícone de cruz. O que está acontecendo? Eu quero ter um emaranhado que vai ser a opinião deles para este. É um ícone de cruz. Vamos chamar de profundidade. Sim, eu estou indo para 0% de opacidade, e ele vai voltar. Então, no protótipo, eu estou indo para o pé. Mova isso e isso vai voltar para este. E vamos jogar isso de novo. - Não. Vê o efeito aqui? Vês como este amigo a tua dieta desliza junto com este? Então é assim que você cria um belo protótipo imediato na figo. Espero que tenha aprendido esta lição. Vamos passar para a próxima lição onde vamos mostrar a busca. Tais reservas. Espero que você tenha gostado deste vídeo, e eu sei que esses vídeos são muito longos, mas você tem que continuar assistindo para aprender algo novo 49. Criando e de protótipos de buscas: Agora criamos a busca, qualquer missão e protótipo. Agora vamos passar para a próxima tela, que vai ser os resultados da pesquisa. Então vamos chamá-lo de tais reservas e você pode ver ou ouvir. Nós vamos ter algum status aqui como nós encontramos essas muitas reservas que vai apagar isso a seguir. Diluir isto. Então, vou ficar com isto porque preciso de o mostrar. Cinco reservas telefónicas. Então eu vou manter esta mesma seção superior aqui, e nós vamos mudar a cor para alguns grandes como este porque nós não queremos que ele seja muito destacado aqui. E agora vamos criar uma sobrecarga de retângulo. Então retângulo vai ser do mesmo tamanho que esta barra. Aqui é 339 339 e vamos manter a altura 24 e vamos deitar-nos assim . Vai estar a 20 pixels longe das reservas de stop, e vamos ter alguns cantos arredondados, quatro excretos completos. Isso é habilitar o nosso Então é um pouco fora fora fora da seção Fallar aqui. Ok, então isso parece marcado. Ok, então, não, este é o nosso ponto de partida. Então eu vou esconder meu controle de comando fora da classe Shift 4 e controle G. Eu acho que para usuários de Mac, eu vou usar cor branca. controle de comando fora da classe Shift 4 e controle G. Eu acho que para usuários de Mac, Então agora você pode ver por que eu usei este branco porque parece branco criar neste fundo pálido e final. Então isso é um truque. Eu queria mostrar-lhe que se você tentar usar algum fundo muito claro colorido ou muito leve em equipe, sua cor branca vai brilhar sobre ele. Então agora vamos adicionar um pouco de sombra, este aqui. Então vamos fazer os efeitos do dedo do pé. Sombra e sangue serão três e cinco. Qualquer um será um. Porque não queremos que seja muito longe. E a cor com 363636 e a opacidade será de 10%. Você pode ver que é muito sutil. Sombreado. Retomar em. Você pode ver que isso é uma sombra muito, muito clara, e parece realmente ótimo. É muito perto desta camada, e isso parece ótimo. Agora vamos adicionar uma imagem aqui à esquerda e à direita, teremos algumas informações, como o show do leite ou algo assim. Então, primeiro nós estamos indo para o pé. Esta vai ser a nossa Dana. E agora vamos adicionar outro contêiner dentro deste. Então, será aqui assim. Isto vai conter a nossa imagem. Não. O que queremos fazer é que queremos que este contentor funcione como a nossa mesquita para tudo isto. Então nós vamos replicar este controle de comando D e nós vamos esvaziar este contêiner uma mesquita. Temos sido para renomeá-lo, conter uma mesquita no fundo, e nós estamos indo dedão dormente. Todos os melhores jogadores que queremos dentro dele e vamos usar esta mesquita ou aqui. Agora você pode ver todos esses líderes. Eles não podem escapar deste tamanho. Então, se eu tentar redimensioná-lo, você pode ver que ele sempre vai ficar aqui neste. Mais uma coisa é que acho que a nossa sombra está perdida aqui. Então vamos tirar isso disso, e vamos adicioná-lo ao nosso grupo de mesquitas. Então vamos adicionar o compartilhado aqui. A de 3 66 e vamos usar 10% dela aqui. Então isso parece funcionar. Isto parece bom. Então nós temos este próximo contêiner de imagem de chamador, e nós vamos arrastar e soltar sobre a imagem dentro deste. Vamos usar isto e preencher isto com imagem aqui, como esta imagem e expor a imagem. E estas são as imagens. Eles esperam este. Ok, então isso está bom. Isto parece bom. Ótima. Certo, então precisamos ter alguma informação ou aqui. Então, no jantar de Michigan, temos a imagem dentro dele. Então temos este contentor. Este vai ser o recipiente branco completo. Vamos chamar de “Continuar a Luz”. E depois continuamos mesquita, que está mascarando tudo. Ok, então agora vamos adicionar algo aqui, como chute de leite. Este vai ser o nosso título. Ok, então nós queremos ter uma boa separação desta imagem. Vamos movê-lo para dentro. Este grupo perdido 2120 é bom a partir do topo. Desculpe-me 12. Então teremos algo mais como 5 36 As pessoas adoram. Nós também teremos revisão aqui, então vamos usar 251 comentários e estrelas. Então vamos usar uma forma de estrela aqui, criar uma mudança ou mudança de estrela. Vou usar outro ângulo, tipo 45. Isto parece marcado. E eu vou usar uma cor laranja aqui como esta. Um pouco mais brilhante pareceria melhor. Como se este tamanho fosse 12 do próximo ano. Isto parece bom. Não só precisamos replicar isso. Vamos, De. Vamos, D. Agora, eu vou usar alguns dos cavalheiros porque a maioria dessas seleções você pode ver aqui se você for para cá. Este aqui, este tem árabe. Vou usar em alguns de 16. Da mesma forma, aqui, vou usar o seu morango de 16 anos. E a cor será a mesma. Como este. Um pouco criar. Da mesma forma, para este, vou usá-lo e cavalheiro. E vamos agrupar tudo o que está bem para este, não vamos usar este preto, mas temos um preto verde. Então vamos usar este de forma semelhante, para este. Não queremos que seja muito brilhante. Vamos talvez possamos usar esta cor primária verde porque as avaliações são muito Você pode ver mentindo fora de qualquer aplicativo As pessoas gostam de lê-los. Então isso está quase pronto para diminuir o zoom e ver como são diferentes distâncias. Este, uh, este parece um pouco menor, então eu vou aumentar o tamanho expresso e segurar o turno. Ok, então este parece melhor agora. A linha de enfermeiras deixou locais. OK, então aqui temos a distância até ela usou isso. Mova-os um pouco para cima, porque é muito perto da fronteira aqui. Certo, assim que criarmos esse grupo de mesquitas, esse é o nosso assim que criarmos esse grupo de mesquitas, esse é o nossoresultado. Ou talvez possamos cartão pequeno. Podemos chamar um cartão pequeno. Agora, vamos replicar este. Se você quiser criar um componente, você também pode fazer isso. Então eu vou mudar algumas das coisas aqui e ali, e então eu vou movê-lo. Vamos fazer disto um componente. Controle de Comando. Dissuadido. Replicar. Estou usando. Vou mover este componente Theis, este componente mestre para o nosso guia de estilo. Então vamos Harrod ou aqui assim. Agora vamos replicar e mudar as imagens e os impostos. Então, eu vou dar o pé. Não vou entrar em detalhes. Isto vai ser Skip. Vou pular muito rápido. - Não , a tela está pronta. Você pode ver por aqui. Eu mudei todos os itens diferentes aqui, e eu deixei algum espaço aqui no fundo. Então, sempre que estudamos, temos espaço para essa navegação inferior, ou aqui. Então agora vamos ligar esses itens aqui. Então, uma vez que use assim e clique na pesquisa, ele deve continuar. Esta busca é um discurso. Então vamos fazer isso. Então vamos selecionar este ícone, e também precisamos adicionar algum retângulo aqui para ter a área ativa do toque como esta. E vai ser isso vai ser perto deste bar. Apanha um DEA, lixa-os juntos no fim de semana. Se não quisermos um grupo, podemos deixá-la como esta ideia de passo para coisas como esta. E então vamos usar a opacidade para 0%. E uma vez que o protótipo do dedo do pé dormia o mesmo Esta aba 80 aqui e vai movê-lo. Então este está em qualquer feito. Então vamos tentar ver o que conseguimos. Ainda assim. Então toda a sua taxa de dieta Em seguida, clique aqui e aqui temos nossos resultados. Agora, se você quer qualquer feito isso merece, essa é uma história diferente. Temos que usar as mesmas reservas que você pode ver. Ok, então isso é um pequeno problema. Nós estamos aqui. Temos muito espaço no fundo, por causa das suas coisas por aqui. Então deixe-me mostrar o que realmente acontece. Então, sempre que você tiver algo assim, você precisa ter conteúdo do clipe. E para esta imagem, queremos o Phil residente, vamos fazer a colheita. Você pode ver que este limite está fora desta área. Então, sempre que você tem isso, mas esse tipo de limite, isso vai dar mais espaço na parte inferior. Então vamos usar colheita e chamada. Ele vai corrigir isso e também você pode ver aqui o que está acontecendo. Então fundo BG é um pouco maior. Este é outro problema. Portanto, certifique-se de que suas camadas não estão ficando fora deste recipiente para que se qualquer camada está fora deste recipiente, ele está indo dedo do pé. Te dou umas dores de cabeça assim. Ok, então antes de ir para este aqui, nós precisamos animar estes para então nós vamos selecionar todos eles. Vamos lá, vê? E nós vamos baseá-los aqui. Bom dia, V. Agora vamos movê-los um pouco, Doan e, uh, nós também vamos mudar as distâncias entre eles assim? Não, vamos usar o mesmo truque. 0%. 0%. 0%. Este vai ser 0% para este vai ser 0%. Então temos tudo isso? Não, vamos tentar tocar de novo e ver o que conseguimos. Então, aqui temos. Então, se clicarmos aqui, você pode ver que vem de cima de baixo que é jogado novamente. Ok. Diz-lhe que estas são as acções possíveis. Então é assim que você faz essas animações tipo fora usando prototipagem. Então eu espero que você tenha gostado desta lição se você tiver alguma dúvida, alguma sugestão? Certifica-te de que me dizes sempre. Vamos passar para a próxima lição. 50. Design de tela de receita, a sua receita: nos próximos vídeos, vamos criar estes ingredientes de receita única e profissão de receita única, estas duas telas e esta sobreposição. E esses dois eu vou pular perfil e configurações e este aqui é quase semelhante a esses desertos aqui. Então eu vou pular isso e eu vou deixar para vocês e vocês vão fazer isso. Você já viu isso. Eu estou indo toe Incluir todos esses todos esses links de aplicativos para que você possa visualizá-los e você pode criar o seu próprio como sua tarefa. Isto vai sobrepor. E essas duas únicas receitas que eu vou terminar porque estas são todas essas telas eles vão terminar todas as técnicas que eu vou mostrar para vocês dentro de Sigma Onda Thies. Este será um repetitivamente que eu acho que eu realmente não gosto. Dedo, faça isso agora. Então vamos começar com uma única receita ingredientes e então eu vou toe voltar para você e vai ver suas atribuições e o que você fez e você criou Não vamos começar e começar a enviar a tela de receita única. Nós vamos voltar do jeito que estávamos antes. E eu acho que precisamos de algo aqui, como este saladas, e eu vou replicar isso. Vamos replicar merece desta vez. Então eu vou replicar este e vamos ampliar e eu vou chamá-lo de solteiro. Oops. O que aconteceu? Solteiro. Isso seria bom. Então, a primeira coisa é que não precisamos disso no topo. Além disso, a nossa imagem, vai correr. Também não precisamos deste. E isto vai ficar aqui da mesma forma. Isto vai ficar aqui da mesma forma. Uh, isso está indo para o pé. Vai-te embora. E agora você vai movê-lo para cima assim, e nós vamos expandi-lo pressionando Shift. Vamos ver como a perfeição se expande. Ok, então este é o Look marcado. Agora, não precisamos dos cantos arredondados aqui, então vamos entrar nesta mesquita. Vamos usar zero. Então temos esquinas. Esta flecha vai ser branca agora, e não, precisamos ampliar esta imagem. Então, o que vamos fazer é ver este grupo de mesquitas, este retângulo aqui, na verdade, na verdade, e nós estamos indo dedão, arrastá-lo para o fundo assim. Então vamos criar um T 100, em seguida, altura ou ângulo de dissecção. Vamos redimensionar esta imagem ou aqui, assim. Mova-o para dentro. Vamos determinar a altura disto excessivamente, está bem? E então nós também vamos mover estes este título para aqui tão difícil. Eu vou em todos esses três no fundo aqui em algum lugar, e é o nosso Dag, o selo de veado. Também precisamos movê-lo para cá assim. Ok, então isso está feito. Mais uma coisa é que precisamos mudar demais agora porque queremos mostrar nossos ícones no topo. Então eu vou para esta sobreposição. Vá para esta sobreposição. Isto é, na verdade, linear. Então eu vou mover este cinza no topo para aqui. Agora, uh, em algum lugar aqui como este, por que ele vai ser nesta área lá como este torná-lo um pouco mais escuro como este, porque nós temos uma imagem muito grande. - Não. Ok, então agora eu acho que nossa flecha traseira é um grande visível agora, hum, ok. Então, se você quiser fazer um pouco mais pescoços. Vamos tentar usar um grande mais escuro aqui assim. Como este. Cabe a você. Cabe a você. O que você quer fazer aqui? Ok, então eu gosto assim. Agora eu vou adicionar mais ícones quando sua parte eu vou executar este coração que eu tenho se você não gostar deste fundo Então aqui está a minha parte. Eu invoco este e o meu ícone do coração ISS, este. Então eu vou caranguejo fora deles ex moveu-os para dentro. Jane Doe colorido branco como este lá certamente ganhou mais grade linhas grade e movê-los para a direita. A arte vai acabar. Vamos movê-lo para cá e mais assim. Este é um bom controle. Nave quatro ou controle G para esconder isso. Agora nós fizemos a seção superior por aqui. Agora vamos passar para o resto fora do fundo, então vamos diluir este. Estas três esperanças que eu possa Night precisar deste assina. Vamos usá-lo como ingredientes. Você vai ter uma navegação aqui. Estamos aqui em algum lugar, então precisamos deste. Vamos diluir tudo o resto. Ok? Agora vamos desenhar algo aqui para mostrar as estatísticas disso. Então nós vamos ter algo aqui como este 48 que é usado 48 quatro. Vai ser branco. E aqui vamos mostrar alguns dos começos como em casa a qualquer minuto para quantas porções de pessoa e quantas quilocalorias esta receita é. Então vamos fazer isso. Vamos usar isto e mais um. Que foi a 1ª vez neste relógio. Vamos arrastar todos estes três para Sigma e vamos usar este relógio aqui . Este vai ser por aqui. Este vai ser por aqui. O resto da coisa é alinhamento e cores. Então o assassino será este. Isto é realmente verde médio. Nós não queremos que eles sejam muito destacados porque isso é apenas uma informação. Use uma porta. Nieto, clique nele de novo e de novo ou faça algo sobre eles. E acho que essas lojas também precisam ser assim. É um texto usado aqui. 30 significa 30 minutos que ela estava um espaçamento fora. Seis. Vamos usar o seu Ramana. Vamos despiscar porque precisamos de uma porta bem pequena ,tamanho 14. , E a cor será assim. Ou talvez assim. Como este. Ok, então a mesma cor do ícone e eu vou alinhá-lo assim. Quatro pessoas, quatro pessoas foram marcadas. Quatro pessoas e 1,5 quilo de calorias. Algo assim. Certifique-se de nomear esses ícones porque neste momento eu não vou nomeá-los. Isto é energia. Então não, eu vou apenas alinhá-los. E de acordo com este bar aqui e tentar ver o que parece melhor para mim. Você pode ver o que aqui? Aquela luta aqui é menos. Eu tenho que, você sabe, resolver esses problemas. A distância entre é quatro. Então deve ser seis. Isto é um pouco demais. Este é um para sete seis. Isso parece ótimo Próximo, permitindo que eles vejam Ok, isso parece melhor agora. Muito melhor. Nove. A partir daqui temos 13 selects. Faça isso, Dan. Em nenhum lugar aqui e também depois daqui Agora este corpo está quase pronto. Eu tenho um problema. Ou aqui temos muito espaço, então vou alinhar no meio usando meus olhos. Não estou a tentar ser perfeito por aqui. Então agora próximo nascimento esta barra de menu ingredientes aqui. Então eu vou usar você pode usar uma linha. Vamos usar uma linha por baixo. Mude para endireitar. Vamos fazer dois pixels. Vamos usar o maiúsculo B A cor redonda será esta cor azul. O que é isso, Bill? Não, não precisamos do Facebook Blue. O que? Precisamos do nosso azul roxo aqui. Acho que não adicionamos isso em nossas cores. Vamos usar isso e adicionado a outros estilos. Azul de segundo grau. Este é o nosso azul. Isto não é Facebook. Pista. Então aqui nós trocamos para o nosso azul primário, Este aqui. Ok, então isso vai ser um pouco mais perto. Quatro grandes longe disso, que deve ser 105 Ok, então isso parece ótimo. Agora precisamos de outro aqui, que vai ser Vamos mover isto para dentro deste grupo com este grupo. Então isto vai ser aqui dentro. Receita. Ok, então aqui temos dentro desta receita, uma pequena seção. Então é dentro, na verdade pequena seção. Uh, esta linha vai se mover, e, uh, uh, nós também precisamos de alguns estados por aqui. Então, comando, vamos mantê-lo assim. Nós só vamos mudar as cores e mover esta linha excluindo a vida. Linha em movimento. Agora vou replicar isto. Ok, agora, isso não vai ser destacado. Então vamos usar alguma outra cor como esta verde médio. Isto parece bom. Este ingredientes é realmente verde escuro, este aqui. Então, nosso menu também está pronto. Vamos ver quanto é a distância daqui. Está mantendo 36. Queremos ter um bom espaço em torno dele. Então o usuário não tem nem dificuldade está pisando aqui nesta seção ou aqui. Agora, vamos listar os ingredientes aqui. Isto é muito fácil. Isto é apenas uma lista. Eu vou preparar o 1º 1 e descansar que você vai para nós vamos replicar. Então vamos começar. E nós vamos usar. Ou aqui 10 anos eu era peixe Salman Fish. Então nós vamos usar uma linha em um separado por aqui, e linha vai ser descolorir. Ou talvez essa descoloração. Por isso, queremos ser muito leves. Não queremos que seja muito proeminente aqui, porque isto é apenas um separador. Então vamos usar o comum off. E eu estou indo para Pete Dexter na cor para ser algo assim. Vou separar os papéis de então algo assim. Então vamos usar o mesmo Vamos ter a opacidade off 80% porque isso é apenas separado ou 50% este olhar melhor. Não quero que seja muito proeminente. E o que eu estava procurando? Eu estava procurando por este acessório aqui. Nós realmente queremos usar o mesmo ou c e nós vamos colocá-lo aqui. Oops. Ou aqui. Vamos lá, TV. Então isso vai ser ou ouvir algo assim. Então, sempre que o usuário tocar aqui, ele vai ser ativado. Então temos, Por exemplo, temos este item preparado ou temos isso conosco. Em seguida, use um pouco mais assim. Próximo. Agrupe-os agora daqui até lá. Mark Control G, esta é a nossa receita. Descanse C B. Então isso acabou. Item de receita que também pode criar se você quiser criar um componente, você pode criar um componente. E isso seria útil e, uh, uh, está se movendo um pouco para cima. 49. Vamos ter 40 barbas. Grande distância entre estes e nós realmente replicamos isso. Vamos criar isto. Vamos lá, Controle D. Vamos, X. Você vai mudar para o guia de estilo aqui. Oops. Como este. Se você quiser alterar a configuração, por exemplo, se você quiser movê-los para um grupo novamente, eu posso chamá-lo de ícone e você quer movê-lo para aqui em destruição na parte inferior e à direita, Você pode consertá-los. Da mesma forma para este, eu vou corrigi-lo para a esquerda e para baixo. Então, isso é com você. Eu não vou entrar nesses muitos detalhes de design porque eu já te ensinei. Agora vamos apenas replicar isto como esta manhã D dd joelho de e D. Então temos uma lista de todos estes itens. Isso é que eu vou selecionar todos eles e eu estou indo para o pé. O que é isto? Vamos apagar estes. Isso está vazio para hinos? Eles são selecionados todos eles. Oops. Vamos trancar este fundo. Havia ele está me dando algumas dores de cabeça. Além disso, este fundo eu movi fechadura. Então eu quero selecionar apenas estes. Agora vou usar este. Então vamos melhorar um pouco mais. Quero mais espaço, Dean. 20 ou talvez mais de 20. Parece ser 24. Ok, então eu acho que 24 parece melhor. Então, não vamos apenas mudar estes decks aqui. E mais uma coisa é que eu vou aumentar a altura deste e também o fundo . Então eu fui para desbloquear o fundo é o fundo é o número do saco. É uma batida. Ele o redimensiona assim. Então eu vou desonestos trancá-lo. Precisamos de um botão ou cabelo que diga vamos começar a cozinhar algo assim. Então, vamos usar o nosso botão padrão que escola para o nosso guia de estilo. Então, quando tentarmos o dedo do pé, mudar o esconderijo deste, uh, este quadro de arte, você pode ver alguns desses ícones. Eles foram confusos. Agora, esses problemas ocorrem quando temos a escala definida. Então não tente o dedo do pé sempre que tiver um pouco. Algum ícone aqui. Não tente usar a balança, mas o que isso vai ser problema. Então na próxima escola de volta que isso realmente aconteceu. Certo, então aqui temos eles de volta. Vejamos, quais são as mudanças? Ok, então uma coisa que você tem que notar é quando você está tentando dedo do pé, se você selecionar, este item vai ouvir este ícone clique duas vezes nele. Você pode ver se nós se estamos tentando usar direita e inferior, o fundo está realmente acontecendo com este. Então é este suposto dedo do pé neste fundo aqui, você pode ver a linha caindo. Então, se eu tentar mudar de cima e de baixo, ele vai para o pé. Fique aqui. Então eu acho que devemos parar e acertar em vez de usar para que ele não vá para baixo, para direita e para cima. Então, isto é melhor. Você pode ver que este está parando no centro e este é deixado. Não queremos que seja no fundo. Queríamos estar nos movendo com o topo. Então, vamos movê-lo agora. Com sucesso e não vai cair assim. E essa é a Jane. Isto vamos criar um mas ninguém aqui. Vamos arrastar o mesmo botão com o ícone, mas desta vez não precisamos do ícone. Então o que vamos fazer é ir para esta é a instância que estamos indo para desvincular a instância. Então, porque precisamos de outro botão com sem o ícone para que possamos clicar com o botão direito sobre este e vamos usar instância de Dat Agora, uma vez que a instância foi detectada, vamos remover este Ikonomou aqui e para este texto, Vamos movê-lo para dentro no meio. Este vai ser texto alinhado no meio, e nós vamos renomeá-lo pernas. Comece a cozinhar. Certo, agora é um botão azul. Não queremos que seja azul do Facebook. Queríamos Toby nossa cor verde, que é nosso verde primário. Não, nós adicionamos mais cor. Não, vamos clicar duas vezes e ir para este plano de fundo. Mas e em vez de ter a cor simples, podemos ter um radiante linear. Então eu estou indo para ir com realmente ingrediente e nós estamos indo dedo do pé tem algo assim da esquerda para a direita. E nós vamos usar o mesmo galera aqui quase o mesmo um pouco. No lado mais leve. Você pode ver ou ouvir esta aparência criar. Agora você pode ver isso tem sombra mais escura de um lado e água mais clara e mais nítida no lado direito. Então aqui temos o segundo botão, e agora o que podemos fazer é criar facilmente outra instância ou outra. Você pode ver primário, mas então este vai ser outro componente. Então este é o nosso componente principal. Vamos chamá-lo de Burton. Um simples comando de controle e. Vou mover meu componente Marcia para o meu estilo. Pipa aqui. Então o Então aqui temos dois tipos de fingimento que você pode ver lado a lado. Um é este botão com Icahn. Em segundo lugar, mas no ícone escuro. Então vamos escola de volta ou principal projetado. Vamos alinhá-lo no meio assim, como no meio. Veja se isso está no meio de eu acho que isso. Oops. Vamos, G próximo, G próximo, chame-os de itens de receita. Isto vai estar na porta do meio. O que aconteceu? Selecione tudo isso, Margie, e eles estarão dentro de um grupo. Faça-os no meio Agora está no meio. Agora. O resto é que só você tem que mudar todos esses ícones. Então, neste aqui nós vamos esconder este fator e esta elipse ele vai ficar vazio . Então vamos usar Vied e teremos um pouco de palha que vai ser o oposto. Então vai ser melhor assim assim. Certo, então se tivermos algo vazio aqui, vamos usar algo assim. O resto é que eu só tenho que mudar toda essa maneira de sobrecarga de texto. Então eu ganhei o texto. Agora vamos testá-lo no protótipo aqui. Então eu vou ligar minhas sobremesas aqui. Esta imagem eu vou ligá-la para isso aqui. Então eles esperam isso e movê-lo para cá assim. Comece a qualquer minuto inteligente e casado Easing está fora. Vamos passar para o nosso “Desculpe “, este. Não é um. Vamos jogar este Sellers significa e desertos. Então, sob tela do deserto, nós estamos indo toe klik Isso e você pode ver que este é o efeito. Isso é muito legal. Então temos que ligá-lo de volta. Então, se alguém clicar no botão Voltar em vez de ir até aqui, ele vai voltar para saladas. A tela do homem. Oops. O que está acontecendo? Este. Vamos diluir isto. Então isso vai voltar para as sobremesas como esta? Verifica isto. Veja isso merece voltar. Oops. Então voltar é um pouco diferente. Inteligente e emir. Vamos ver o que está acontecendo em Cletus voltando dos 80 anos aqui. Precisamos selecionar a facada 80, na verdade. E isso vai voltar para o deserto, não seguir em frente. Mas vamos navegar até Smart. Qualquer mérito está em sua saída. O que é o 2º 1? Então aqui temos um. E se selecionarmos o 2º 1, queremos excluí-lo. É mais deletar. É tudo o que precisamos. Certo, então esse é um fato que eu estava procurando. Você pode ver se nós rolamos para baixo neste aqui. Você pode ver que temos este botão. Vamos começar a cozinhar. Muito agradável. Cruel. Ok, então isso vai acabar com esta lição. Vamos criar mais uma preparação de tela, que é quase semelhante a esta. Um monte de Urgh repetitivo no novo. O próximo será demais, então vamos para a próxima lição. 51. Prototyping de tela de receita: Neste vídeo, vamos criar a próxima rainha, que vai ser os preparativos. Então vamos replicar a partir, mas replicar esta replicando esta. Então vamos replicar isto e vamos mover este dedo para cá. Então esta linha móvel vai ser movida para cá. Troca tamanho toe 100 102. Você disse que este parece bom. Vamos mudar isso, Sculler Toe este. Oops. Este mais escuro e disse que isso vai ser neste estado. Então já temos Jane, isso. Agora vamos avançar nesta área. Nosso aqui. Então vamos apagar tudo aqui, exceto o de cima. E agora vamos chamar um ao invés de um grupo. Vamos chamar de passos de operações. Então este é o nosso primeiro passo. Então eu vou chamá-lo de passo um, e nós vamos, certo? Clique e faça, agit. Desjetado. Instância. Então passo um caminho pode precisar desta linha. Isso é diluir este deleite. Isso eu posso fazer. Eu só precisava deste. Certo, agora, o que vamos fazer é que temos um retângulo de água aqui. que será novamente de cor branca. Estes são os nossos passos. Então isso vai ser branco, cor branca, branca, e vai ser o fundo deste Passo 1. Estamos aqui neste grupo. Isto é, na verdade, uma moldura. Então tente usar quadros quando você quiser ter um pouco mais de controle sobre restrições, essas restrições. Então esta vai ser a nossa sobrecarga tributada dentro dela. Então, queremos que seja destacado. E queremos usar uma correção. Estranho assim, algo assim. Então temos essa largura fixa. Isso vai ser capaz parágrafo idéias duras. O que é isto? Estes. Passo um. Ok, então não estamos preocupados com a altura e arrancou este aqui. Trocar suas alturas, uh, para que haja mudança de grupo do dedo do pé porque ele está se comportando muito diferente. Agora temos os suspiros do grupo. Isso é movê-lo para cá. Força tentou corrigir tudo que você avisou, em seguida, converter para quadro porque nós quadro está realmente tentando dedo do pé usar sua própria altura e britânicos para que não precisamos disso. Então este vai ser o nosso parágrafo. Então, agora vou usar isto. Ok, então este vai ser o meu primeiro 1 Então eu vou usar o arredondamento de quatro. Hum, ok. S 4 está bom, e então vamos usar um ícone aqui. Antes disso, nós vamos limpar um emaranhado aqui. E o que vamos fazer é que isto vai estar por aí também. Isto vai ser zero. Isto vai acontecer antes, e isto vai ser Oops. Tão arrependido. Isto vai ser zero dedo do pé. Então, na verdade, eu tento criar os mesmos ângulos aqui. Então aqui temos dois. Aqui temos quatro, que não é igual a este, uh, branco ou aqui. Então agora vamos usar o nosso Calero laranja aqui. Vamos fazer um pouco de cor mais clara. Então vamos adicioná-lo em laranja claro de milho. E agora você vai ter polígono, que vai ser o nosso botão de jogo. Vamos girar o dedo do pé. 90 graus. Oops. 45 graus. O que está acontecendo? Menos 90. Vitória. Vamos usar um grande raio de venda que ela tinha esta cor esverdeada. Lex, reduza o exercício também. 16. Ok, então isso parece quadrado. Então, sempre que algum usuário clica aqui. Ele ou ela vai ver este passo em um vídeo. Então vídeo com Bob para cima e eles vão ver este passo. Então isso está quase completo agora eu acho que devemos convertê-lo em frame. E nós vamos remover este grupo. Vamos ao grupo da ONU isto. Agora temos um fundo. Quando isso temos polígono retangular, Isso vai ser um ícone. Vamos movê-lo para dentro desta moldura. E este ícone vai estar à esquerda, no fundo, à esquerda na garrafa. Isto vai ser para a esquerda e para cima. Ok, o ciclone vai estar bem no fundo. Isto vai ficar no topo e é tudo o que precisamos. Ok, então mais uma coisa é que nós precisamos adicionar camada de ataques aqui para o título. Então, para o título, vamos usar o primeiro passo, tirar o ovo. Então este vai ser o nosso rumo mau. E para isso vamos usar, hum desculpar o mesmo forte morrer feroz e vamos usar a cor que vai ser nosso verde. Desculpe-me este. Então esta vai ser a nossa cor verde mais nítida. Então este vai ser o primeiro passo, se quisermos. Também podemos usar este. Isto não vai ser um problema para nós. Então vamos usar isso para diminuir o zoom. E este é o nosso passo principal. Então agora vamos repetir isso. Vamos agrupá-los juntos, e vamos repetir isto. Este é o nosso passo passo e vamos replicar isso e movê-lo para baixo assim. Precisamos de um chá no mínimo 16. Vamos fazer 20. Vamos lá, De. Vamos, D. Então agora vou usar apenas três passos que usaram estes três passos. Não, vamos mudar o seu tamanho. Podemos ver que isso está indo muito bem porque é um quadro e já temos objeto de restrições aqui. Da mesma forma, para este irá trocar o tamanho da mesma forma novamente. Podemos folgar este passo de preparação e vamos movê-lo assim. Então estes são os nossos poucos passos. Vamos mover este rompimento para cá. E desta vez precisamos de algo com um ícone. Isto aqui, vamos apagar isto. Não ouvimos 48 para o ar na distância entre estes para o ícone, vamos mudá-lo. Selecione as camadas escolares. próximo Icahn sela este. Ok, então para este truque de ícones, eu tenho que mostrar que se você quiser adicionar um ícone aqui, você não pode adicionar um ícone como este. Você não pode arrastar e soltar uma Nikon, por exemplo. Por exemplo, este dentro deste não é assim. Ele não vai deixar você adicionar. Eu tento a sua instância. Então, em vez disso, e indo para aqui, nós vamos para Guia de Testes o componente Mestre de carga. Vamos adicionar outro ícone. Deixa-me mostrar-te o truque. Então vamos adicionar esse ícone aqui. Então nós temos nosso ícone que você pode ver. Não, está dentro deste. E, hum, nós vamos mudar sua cor muito larga. Ela era mais branca, e vamos escondê-lo aqui. Então, sempre que quisermos arrastar algo, deixe-me mostrar como vamos usá-lo. Então nós temos este botão agora e simplesmente vamos esconder este ícone e mostrar o ciclo. Então isso é tudo o que precisamos fazer. Então deixe-me ver se podemos alinhá-lo corretamente, porque não está no meio. Ok, então agora está no meio. Ok, então essa porta da escola significa design e troca fazer, e eu vou mudar sua cor dois. Ok, então mais uma coisa, vamos adicionar este botão BGN, e vamos adicioná-lo aos nossos estilos de cores. Este vai ser um Grady int muito verde. Certo, então não temos nada bom. E aqui, assim que tivermos o nosso ingrediente, vamos folgar este fundo, e vamos mudar para o grande Radiant. Isso é tudo o que precisamos fazer aqui. Então foi assim que resolvemos isso? Vamos tentar o dedo do pé. Esse é o sapato do dedo do pé, nossa navegação inferior aqui. Ok, então vamos torná-lo um pouco menor assim. Também este fundo mais cedo? Não, para este, precisamos de uma mídia de profundidade que vai estar aqui. Duas áreas, na verdade. O que? Isto? Este na verificação. É este. Então, isto vai ser uma facada preparada. E isso vai ser ingrediente. Sim. Então eu vou apenas escondê-los por 0%. E agora vamos fazer o protótipo e simplesmente vamos usar algo assim. Arrastar e soltar nunca ficar muito esperto. E ele fez. E a partir daqui, nós também precisamos tirar ambos esses, hum, Lears a maioria dessas camadas aqui também. Algo como isto. Então, vamos mover isto para cá. Desculpem este para voltar. Então agora vamos testar o nosso protótipo. Vamos ver o que fizemos aqui. Ok? Isso está bom, e nós podemos descer e clicar aqui, e ele vai para a nossa revisão pop-up, que vamos fazer na próxima lição. Então temos ingredientes e preparação. Agora, se você quiser mostrar a progressão e movê-los para cima, movendo-os para cima você quer mostrar a qualquer missão que você tem que fazer a mesma coisa que você tem dedo selecionar todos estes, e isso é agrupar eles controle. Vamos lá. G X chamou-lhes passos. Nós estamos indo para o pé. Vamos lá, vê? E nós vamos deitá-los aqui. Então aqui nós os temos assim. E dentro deste grupo, vamos avançar, movê-los para a cidade, posições Jayna. E agora vamos esconder isso. Então você vai usar 0% para a opacidade. Vamos ver o que está acontecendo aqui. Você pode ver quando eles saem assim, você também pode abrandar a animação ou aqui. Então, se você quiser abrandar a animação do movimento aqui, você pode selecionar isso e nós temos 300 milissegundos que podemos usar por 50 muitos segundos. Da mesma forma, para este, podemos usar 3 50 Veja, qual é o efeito agora? Você pode ver que fica melhor quando temos, uh, esse tipo de configurações. Então estes vêm muito bem assim. Então isso termina sobre este prototipagem em tudo isso, eu vou criar mais uma tela que vai ser excessivamente e resto das telas e aplicativo principal. Você vai projetar para mim e me mostrar o que você pegou. Então vamos passar para a próxima lição e onde nós estamos indo toe projetar nosso sobre a tela, e eu vou mostrar a vocês como toe usar esta sobreposição pop-up e figo MMA 52. Revisão de transições de sobreposição: nesta lição. Nós vamos criar esta tela excessivamente em figo MMA e onde eu vou mostrar-lhe como toe pop up esta sobreposição e escondê-la quando alguém enviar comentários. Então, vamos voltar para onde partimos. Esta é a seção onde saímos e agora você vai criar uma tela de sobreposição ou aqui , que vai ser uma luta. Então nós estamos indo dedo do pé, criar um novo quadro e será o nosso próprio tamanho. Vai ser. Será 328 pixel vied porque queríamos dentro disso. Então deixa-me mostrar-te. Então, se eu dragão você pode ver aqui você pode ver que ele vai estar dentro deste recipiente. Então vamos usar 330 e a altura será 400 70. Isto é justo e você pode ver estimativa e queríamos ser cantos arredondados. Então eu vou usar quatro aqui. Você pode usar aumentar mais, por exemplo, por exemplo, como este que vai funcionar também. Além disso, se você quiser dedo do pé, adicione um pouco de sombra, é com você. Mas agora vou usar um texto aqui. Entrar como, hum, lama. Ok, então o assassino que vamos usar vai ganhar este. Então esta vai ser uma cor de link que eu já estou logado do topo. Vou ter 30 da esquerda. Vou ter 20 a menos. Mantenha-o apontado. Algo como isto. Então movendo-se para baixo. Vamos ter uma classificação selecionada, então vamos mostrar ao usuário alguns desvanecimento muitos aqui. Vamos usar o botão de ação. E a cor será este preto escuro e esverdeado separando-se. E vamos usar a mesma, uh, uh, esta Starwood aqui que ela era a estrela. Vamos basear isso aqui. A classificação de estrelas. E agora, na verdade, navios de guerra usuários Electric. Então vamos aumentar seu tamanho. Ali está trancá-lo. Vamos usar a habilidade aqui. E acho que este é bom. Acho que também podemos aumentar a distância entre eles assim. Então eu vou selecionar a tecla Shift pressionada, e eu vou usar isso. Distribuir espaçamento horizontal, espaçamento horizontal. Então isto é isto, parece melhor. Queremos ter alguma separação entre eles para que os usuários possam facilmente conseguir saber disso, no entanto. Afrouxar esta leitura. Então vamos ter 14 entre estes. Desculpe isso de novo, e eu vou usar a revisão correta, e então nós vamos ter caixa de texto aqui neste livro didático. Ela era que vai montar a sua crítica. Há um mentiroso todos eles à esquerda, como este. Ok, então eu vou reduzir a altura deste aqui porque nós também precisamos de um fardo. Estavam aqui, então eu vou usar de novo. Quatro existem. Desculpe-me isto ou aqui. O pior. Vamos usar avistamentos inversos aqui. Vamos adicionar um pouco de derrame. Vai ser isto. É usado uma cor mais clara como esta. Isto parece melhor. Agora precisamos de um mas e vamos para os ativos, e vamos usar mais simples botão aqui, e vamos mudar de tamanho. Certo, então precisamos colocar esse botão no nosso de guiade estilo e ver o que está acontecendo aqui. Isto é no meio. Uh, oi. Fora de palavra. E, hum, ele vai ficar no centro e no fundo. Então vamos ver agora, jaqueta agora no design. Está bem. Então, só olhando. Está bem. Então só precisamos mudar a cor do perdão aqui. Vamos com as nossas esperanças. Uh, então nós vamos para ir com a nossa cor sólida que vai ser sobre esta cor azulada. Então, vou usar este desta vez. Então eu queria estar mais perto disso. E nós temos Nós queremos ter algum espaço no fundo. Você também pode aumentar esse quadro com força. Isto vai ser o nosso excesso de lábios. Então deixe-me mostrar o que está acontecendo aqui. Então isso é que você pode ver que isso está definido para escala. Queríamos estar à esquerda e ao topo. Não queremos que a habilidade inchaço vá movê-los agora. E isto parece creta. Agora, algum espaçamento vertical. Ok, então isso é bom. 30. Este é o 21. Isso vai ser 20 atrasada para D. Então nós temos isso, uh, projetado. Esta vai ser a nossa sobreposição. E este texto vai ser apresentado. Enviar uma avaliação? Não, na tela. Quando alguém tenta clicar sobre isso pronto para comer agora, Botão. Vamos mostrar-lhes isto excessivamente. Então, uma vez que eles terminaram tudo, eles prepararam o prato. Queremos que deixem uma crítica aqui. Então, para fazer isso, vamos ligar isso, mas até tão cedo. Então vamos para o protótipo e isso em breve. E nós vamos ligar esse fardo a isso e na torneira. Nós não vamos nos dedar. Nunca vamos fazer. Mas vamos usar isso aberto demais. Então, nesta seção ou aqui, isso vai ser demais. Isto é sobreposição. Estamos tentando usar o dedo do pé e há opções como o centro dob esquerda. Vamos usá-la no centro inferior. Vamos usar este centro inferior e nós vamos usar mover dentro e ele vai mover-se para dentro de baixo como este. Em seguida, use 400 milissegundos e vamos limpar isso em nosso aplicativo. Este é o fardo. Então, se eu pressionei pronto para comer, você pode ver ou ouvir. Isto vai ser um livro pobre como este, mas precisamos de um fundo. Então, Então, nesta seleção, estamos aqui. Então aqui está a nossa injecção esta interacção. Queremos que ele feche ao clicar no lado de fora. Nós estamos indo dedo também adicionar atrás excessivamente. Então eu queria ter 50% e vamos ver o que acontece agora. Então este é o efeito real. Então, se clicarmos fora Então agora se clicarmos neste botão, você pode ver que é assim que ele aparece como é assim que ele cai para baixo. Então também você pode clicar, Você pode usar o botão de enviar e você pode vinculá-lo de volta Esta tela principal que obrigado Seria algo assim Ou talvez começar a ir algo novo, algo assim. Então você nunca pode obter tudo o que você pode navegar de volta para esta tela. Cabe a você. Então vamos testá-lo agora. E se clicarmos aqui, tudo bem. Então você precisa ver que ele está indo para o pé. Volte para trás. Ele vai se mudar agora, e será que Will está em suas tomadas. O uso está fora. Então não sei por que está me dando um idiota quando ele volta. Inteligente e imagem encontrada em anos está fora, entrar, sair na verdade, então ele vai se mudar. Estou usando “mudança”. É por isso que está fazendo esse idiota. Ok, isso é que é quadrado. Então ele está se movendo muito rapidamente. Isso é bom. Então eu acho que isso vai acabar nossa jornada com este aplicativo. Deixei algumas telas porque acho que foi um trabalho reparador. Eu queria te mostrar isso excessivamente como ele sai mangueira, mexam-se. Ele se move em como fazemos a qualquer missão fora desta seleção aqui valor morreu. Como? Mostramos esses resultados e todas essas coisas diferentes. Espero que tenham gostado desta lição. Se você tem alguma sugestão que você quer aprender alguma coisa comigo, você sempre pode me perguntar. Você pode entrar em contato comigo. Estou aberto a perguntas. Não se esqueça de me fazer perguntas. Sempre que você for atingido. Estou aqui por você. Vamos seguir em frente e aprender algo novo. 53. Aplicativo de gravação de design: Agora você aprendeu tudo o que eu mostrei a você como eu projetei todo esse aplicativo. Agora é a sua hora de criar qualquer aplicativo. Você pode limpar o aplicativo de receitas se quiser, ou você pode criar qualquer aplicativo sua própria idéia. Não estou te limitando. Então crie um aplicativo com pelo menos 6 a 7 telas. Pelo menos seis telas que vão fazer a transição. Eles têm alguns efeitos de transição. Eles têm alguns efeitos de movimento, aparecendo efeitos. Eles têm algumas sobreposições que sai com algum tempo eso criar isso. Então eu vou mostrar a vocês pelo menos esta tela de login. Então temos esse Minsk lá dentro. Temos algumas transições e, em seguida, alguma tela com algum movimento dedo do pé outra tela, que é um único objeto ou arquivo único ou registro único. Seja lá o que você chama, então temos os construtores de busca alguma coisa. Quero que crie algo assim. Você pode ver esse efeito se movendo, se movendo. Então eu quero que você crie algum efeito como este. Além disso, telas se movendo para cima. Registre suas descobertas são receita encontrada ou seus registros telefone qualquer coisa. Aparecendo um por um de Bordeaux e de baixo. Então esta é a tarefa que eu quero de você. Então comece a ler agora. Pelo menos seis telas. Se você quiser aumentar as telas, estou limitando o número de telas. Estou lhe dando os últimos números porque acho que o tempo não deve ser desperdiçado. Se você está criando, se você está, você pode ter. Se você tem um monte de tempo e você quer criar como, 10 telas, vá em frente. Eu não tenho nenhum problema, mas seis telas, pelo menos para que eu possa fazer transições diferentes. Como você se move de um esquema para outro e você usou o toque de sua área alvo, que é uma experiência de usuário muito importante. Ponto sobre usabilidade Ponto de vista. Um monte de designers que não usam essa área urbana de torneira, por isso vai perder sucesso a maior parte do tempo. Então esta é a sua missão. Criar um AP completo 6 para 7 telas ou 10 telas, o que você quer ter, e me mostrar todas as transições, como tudo funciona em torno deste aplicativo. Eu adoraria ver suas ideias que estou lendo para sua tarefa, então comece a criá-la agora. 54. Agradecimentos e o que está na próxima: Agora, muito obrigado por estar comigo ao longo de todo esse tempo e aprender junto comigo, espero que você tenha aprendido algo útil. Se você é incapaz de entender algo ou tem algumas perguntas, você sempre pode entrar em contato comigo através desta plataforma. Você sempre pode entrar em contato comigo através do meu site. Então você empolgado.com. Você pode entrar em contato comigo, você pode me enviar um e-mail. Você pode se juntar a mim nas redes sociais e me fazer perguntas ou qualquer coisa, quaisquer perguntas que você tenha sobre design de experiência de usuário, design de interface de usuário ou freelancing em geral. Então del então vamos vê-lo dentro de outro curso. Não confira minhas outras aulas e cursos sobre design, sobre tipografia, layout design, esquemas de cores e todas essas coisas diferentes. Tentando deixar uma crítica honesta, escreva alguns comentários sobre o que você aprendeu dentro deste curso. Tilden, vejo você em breve dentro de outra classe ou curso. Até lá, cuide-se e tchau.