Noções iniciais de Figma — aprenda o básico rapidamente | Gary Shikhelman | Skillshare
Menu
Pesquisar

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Noções iniciais de Figma — aprenda o básico rapidamente

teacher avatar Gary Shikhelman, Learning is fun

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Introdução

      0:50

    • 2.

      Por que figma

      1:03

    • 3.

      Primeiros passos

      1:32

    • 4.

      Ferramentas

      3:49

    • 5.

      Wireframe

      4:09

    • 6.

      Design (Alta fidelidade)

      19:27

    • 7.

      Criação de protótipos

      6:44

    • 8.

      Sistema de design

      5:52

    • 9.

      Plugins ?

      2:40

    • 10.

      Considerações finais

      0:54

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

3.966

Estudantes

26

Projetos

Sobre este curso

Permita que você tenha com a conceitos básicos do Figma. Escute você ao ensinar pacientemente enquanto vos mosta. Vamos começar fazendo uma conta de figma e aprender algumas ferramentas básicas. Vou mostrar como fazer um design de fio e protótipo. Estou confiante de que vamos se divertir neste curso curto. Vamos a nossa ação

Conheça seu professor

Teacher Profile Image

Gary Shikhelman

Learning is fun

Professor
Level: Beginner

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução: Olá. Meu nome é Gary, e estou em Los Angeles, Califórnia. Eu sou um U X você I designer e bem-vindo ao meu curso de figura. Big era uma ferramenta muito poderosa, principalmente porque você pode projetar nele e você também pode fazer protótipos de vida nele. Além disso, é algo que vive diretamente no seu navegador da Web. Então você não está confiando em nenhum software. Você não precisa necessariamente instalar nada em nenhum computador. Neste curso. Onde vamos fazer é eu vou mostrar a vocês como usar algumas das ferramentas básicas e como eu meio que trabalho com elas. E depois disso, eu vou criar um quadro de arame apenas com uma tela, e a partir desse quadro de arame, eu vou criar um design de alta fidelidade usando algumas dessas ferramentas. E então, a partir desse design de alta fidelidade, nós também vamos fazer um protótipo. Assim, você poderia aprender todo o pacote muito, muito rapidamente. Eu projetei especificamente este curso para alguém apenas tentando molhar seus pés e apenas realmente começando em figura. Como iniciante, sei que vai fazer um ótimo trabalho passando pouco tempo comigo. Vamos revestir 2. Por que figma: algumas das principais razões pelas quais figments um programa tão bom é. Basicamente, é como eu mencionei antes. É puramente baseado em navegador. Você literalmente pode simplesmente abri-lo em, ah, ah, navegador moderno e apenas começar a projetar longe. É um programa muito leve e não requer que muito recurso é do seu computador , então você pode ter computador mais antigo e tudo ainda deve funcionar. figura fina permite que vários designers trabalhem no mesmo documento exato ao mesmo tempo, que significa que eu poderia estar trabalhando neste documento em Los Angeles, e outra pessoa poderia estar trabalhando exatamente no mesmo documento em Israel, e poderíamos estar ambos modificando coisas simultaneamente. Ele funciona muito rápido e suave, e apenas com um pouco de esforço, é muito fácil de aprender. As entregas também são muito simples. Depois de terminar com o arquivo, há um pequeno botão de compartilhamento. Basta clicar nisso e obter um link, e você pode simplesmente enviar isso para desenvolvedores ou outros tomadores de decisão, onde qualquer outra pessoa e costumava ver isso e coisas tipo de ser salvo semelhante ao Dropbox Google Drive apenas diretamente na nuvem. Eu quero mencionar que o software é completamente livre para indivíduos, e eu acho que todos realmente deveriam estar usando essa coisa e realmente tirar proveito dela. No próximo vídeo, vou mostrar-lhe como começar na Fig. MMA e também usar algumas das ferramentas básicas. 3. Primeiros passos: neste vídeo, eu vou mostrar rapidamente como começar no MMA figo. Então eu estou aqui no Igman Dot com. É aí que você quer ir para criar sua primeira conta, e praticamente você pode ver que eles têm, você sabe alguns vídeos, coisas diferentes, tipo de explicar e descrever que tipo de eles podem fazer e o que eles fazem. Tem um vídeo muito bonito. Eu recomendo verificar isso quando você tem uma chance, mas a primeira coisa que você quer fazer é ir para a inscrição SETI eo clique direito superior que e praticamente aqui você colocar seu e-mail, colocar sua senha e apenas criar seu primeiro conta e apenas tipo de seguir os passos. Depois de criar sua conta, você seguirá alguns passos e você vai chegar a esta tela básica para a maior parte da tela estará vazia e não terá muitos arquivos. Por agora, praticamente você pode ver aqui no canto superior esquerdo, você vai começar. Você terá sua conta, que terá suas informações básicas em seu perfil, e então você tem ah, pesquisa. Você pode procurar por faltas para Beginning estará vazio, mas eventualmente você terá muitos arquivos lá, e isso mostrará arquivos recentes de arquivos diferentes. Europan recentemente aqui mostrando diferentes plugins que você pode instalar, e eu vou falar sobre isso um pouco mais tarde. É muito útil aqui. Você tem rascunho vários segue em que você trabalhou, e este será o seu primeiro projeto, que quer fazer é apenas bater arquivo novo, e você tem uma nova tela onde você pode começar. E se você quiser voltar para o seu objetivo neste pequeno ícone de hambúrguer e você apenas voltar para os arquivos e você voltar, você verá que seu novo arquivo foi gerado. Se você tem que pegar o pai, você pode basicamente pegar esses arquivos de captura e importá-los para este navegador diretamente em torno desta área e convertê-los em arquivos de figura para você é muito, muito útil e também para lembrá-lo que somos navegador baseado, então isso é muito, muito poderoso 4. Ferramentas: Agora deixe-me mostrar-lhe algumas ferramentas e painéis neste programa incrível. Então, em primeiro lugar, eu mudei esse nome. Você não pode realmente alterar este nome para qualquer coisa que você deseja, basta clicar com o botão direito e ir para renomear. E você poderia apenas chamar o acompanhamento de qualquer coisa. E eu só estou chamando de nosso primeiro arquivo. Então eu estou apenas clicando e entrando no arquivo que fizemos mais cedo e aqui, começando do lado esquerdo, este seria o lugar onde todas as camadas existirão. No lado superior esquerdo, temos diferentes. Agora temos este menu que tem diferentes opções, que podemos fazer coisas diferentes. Mas normalmente começo fazendo uma moldura nessa moldura. Você pode ver aqui no lado direito que você pode ter diferentes quadros com os quais você está trabalhando. Digamos que você esteja trabalhando com um iPhone 11 pro, então você pode clicar nisso. E agora acabamos de criar aquele quadro de arte criativo para você. Aquela moldura. E basicamente, quando você cria seu amigo, você pode ver aqui no lado esquerdo aquelas que seriam suas camadas para que você possa criar várias coisas que vivem nas camadas como eu estou apenas criando essas caixas aleatórias e você poderia ver que enquanto eu estou criando as caixas, as camadas são criadas no lado esquerdo. Se eu quiser escalar a caixa, posso segurar o turno e segurar o lado direito inferior. E eu só estou me mudando e ele está dimensionando em proporção. Ou se eu quiser mudar o tamanho da caixa, eu posso movê-lo para cima e para baixo, esquerda e direita, e eles vão mudar no topo aqui. Além disso, eu posso há lábios aerodinâmicos de linha, estrela de polígono e você pode colocar imagens assim como vamos apenas fazer um para um exemplo para que eu possa fazer como uma linha e eu poderia apenas criar linhas. Eu quero se eu quiser ter apenas quero criar linhas para o meu projeto. Se eu quiser usar uma armação de arame ou algo assim, posso criar linhas. Outra maneira de fazer isso é apenas fazer com atalhos. Eu posso apenas acertar L. E então quando eu bater L, ele me permite criar Ah, essa linha e novamente me deixa criar essa linha. E falando de atalhos, eu posso ir aqui no lado inferior direito e bater o ponto de interrogação e aqui, atalhos de teclado e literalmente eu posso ver todos os atalhos que existem dentro deste aplicativo, que são muito, muito útil e faz meu trabalho fluir mais rápido. Então, por exemplo, um dos atalhos importantes que ele usou é o seu espaço. Então eu tinha espaço. Ele faz o lenço, que, se você usou loja de fotos ou ilustrador qualquer outro programa de design, isso é como um padrão bonito. Outro atalhos que é muito popular que eu gosto de usar é fazer o período de comando, que esconde o menu. Então eu estou apertando o comando, ponto final, e você pode ver aqui o lado esquerdo e o lado direito e o topo todos ficam escondidos. Então, se eu só estou ampliado, eu fiz o comando mais e eu estou ampliando e eu estou dirigindo comando menos e ampliando outra coisa importante que eu gosto. Então eu sou um grande fã do tipo de modo escuro, e este aplicativo não tem realmente modo escuro, mas um pequeno truque de distância em torno dele. Então eu estou aqui e eu tenho o quadro selecionado agora, e se eu não escolher o quadro, eu apenas saio correndo e apenas clicando no campus. Nada selecionado notou o lado direito. Diz fundo. Ele cinco e cinco ou 5 35 55 e eu posso apenas clicar que e clicar em qualquer cor que eu quiser no fundo muda para a minha cor de preferência e tipicamente gostaria de mudar a cor para a cor mais escura, que tipo de emula o modo escuro. E este lado direito é meio dinâmico. Então, o que quer que você escolha, digamos que escolha esta caixa e você pode ver que a caixa está selecionada. Posso ter várias informações para o tipo de caixa do local onde está localizado. Posso adicionar efeitos que não podem traçar. Digamos que eu quero ter um derrame na caixa. Você percebe que estou adicionando um traçado ou posso adicionar uma sombra e afetar isso de qualquer maneira . Mas é meio contextual de dinâmica, dependendo do item que eu escolher, esse lado muda uma dica rápida em outra coisa. Eu gosto de fazer. Eu tenho este quadro selecionado e eu estou vindo aqui no raio do canto, e eu gosto de mudar isso para como algo ao redor, como um 40 algo assim, em um tipo de emula como um dispositivo móvel pode parecer, e se você quer exportar algo que eu Digamos que estes são ícones ou imagens ou você quer esperar todo o arquivo. Você simplesmente escolhe o item que você quer exportar para fora e você apenas ir aqui para exportação, exportação, e você pode apenas exportar para fora qual sempre formatar você um. 5. Wireframe: Agora eu vou mostrar rapidamente como eu lidar com o processo de enquadramento de arame. Então eu trouxe o esboço apenas alguns minutos atrás e você literalmente pode arrastar imagens ou qualquer outra coisa por escrito para descobrir que você literalmente apenas arrastá-lo de sua área de trabalho ou de onde quer que ele esteja localizado. E neste APP, a demonstração será praticamente um aplicativo de contato, praticamente uma versão avançada de um aplicativo de contato. Então eu vou começar batendo em um que vai me abrir minhas molduras aqui. Vou bater no meu telefone 11 pro, que cria este quadro indo para entrar aqui e mudar o arame de reboque porque é o que estamos prestes a fazer. Então, em meus quadros de arame são geralmente como trabalhar com esta cor azul. Então eu estou vindo aqui no Phil e eu estou mudando o hexadecimal para a cor decimal para essa cor. Você pode entrar aqui e escolher qualquer cor que você quiser, mas normalmente quando eu faço molduras de água, eu gosto que eles sejam azuis porque então ele tem essa sensação de planta. E eu estou usando os esboços uma referência que eu estou tocando Oh, no meu teclado, que é um atalho para a ferramenta de lábios deles. E lá eu só fiz nos lábios. Eu posso clicar, faz 100 por 100 ou eu posso apenas arrastar assim e apenas fazer o tamanho que eu quiser. Então eu vou fazer 70 por 70 e então eu vou bater Shift X, que inverte o primeiro plano em segundo plano. E então eu não vou lá e eu estou mudando para branco puro que eu estou batendo chá no meu teclado para criar, para escolher o texto e eu estou batendo. E eu só estou digitando o nome porque isso vai ser o nome das pessoas aqui em cima. Estou mudando a cor. Eu estou chegando aqui e a cor no campo e escolhendo branco para ter essa cor branca . Estou tendo ambos selecionados por segurando o turno e escolhendo o nome e escolhendo isso para que você possa vê-la no lado esquerdo e as camadas estão sendo selecionadas. Eu também poderia escolhê-los mantendo-o aqui e segurando o turno. E agora ambos são selecionados que eu estou segurando comandando acertando G. Então faz um grupo se eu segurar a opção ao mesmo tempo. Ao clicar no item. Ele duplica o item, e eu posso apenas ter uma duplicata rápida dele. E se eu estiver segurando shift uma opção ao mesmo tempo, eu estou me movendo e você pode ver aqui que eu estou me movendo em uma certa quantidade de pixels. Então eu vou colocá-lo a 10 pixels de distância e eu vou deixar ir. Agora estou pressionando o comando D, que duplica minha última ação, que é muito, muito útil. Então eu posso fazer um monte desses círculos muito, muito rapidamente fazendo isso dessa maneira. Agora eu estou começando no meu teclado para apenas fazer uma linha muito, muito rápida e por padrão é preto. E eu só vou mudar esse dedo branco aqui do lado. Agora temos isto. Os brancos estavam indo muito bem. Agora vou assumir o presidente T. novamente. É só digitar contrato, e eu só estou vindo aqui na fonte e eu só estou fazendo o muito maior e eu estou fazendo branco. Então isso estaria lá. Na verdade, altere isso para contato porque será opção de retenção plural. Eu estou duplicando, e eu vou apenas torná-lo menor, talvez como 12 e eu vou colocar filtros aqui. Filtros. Eles serão o ícone de filtros não batendo nosso no meu teclado. E eu só estou fazendo essa caixa muito rápido. Estou apertando Shift X para inverter. Isso vai ser um atalho para que as pessoas possam percorrer o contato. Muito rápido para baixo segurando opção é apenas arrastando esse grupo que fizemos anteriormente realmente vai excluir este nome. E eu vou pegar o contato e duplicar isso e então fazer outro bem abaixo dele . E eu vou ligar. Só vou dizer o primeiro nome na parte de baixo. Ah, sem escolas. Ei, sobrenome o que estou fazendo. Você apenas copia colar, e eu vou torná-lo um pouco menor. Alguns já estão chegando e mudando em 22 como um 12. Algo assim. E estes não têm de ser perfeitos. Não há alinhamento ou nada disso necessário. Isto é literalmente muito, muito rápido. Porque esta é apenas a armação de arame. Como eu tenho todos os três itens selecionados, eu estou apertando o comando. Nossa, outro grupo. Agora eu estou apenas segurando a opção e duplicando aquele grupo que nós acabamos de fazer um comando não bater d para duplicar a ação. Nós apenas fizemos. Estamos quase terminando com esta armação de arame. Agora vou pegar o filtro e copiar isso também. E eu vou mudar isso para adicionar direito, porque nós vamos ter adicionar Eu estou apertando tudo no meu teclado para fazer um pequeno círculo muito rápido e apertando o comando X para apenas inverter esse círculo. E isso vai ser apenas um ícone de anúncio rápido vai ficar lá flutuado. E muito rapidamente, isso é alto. Crie quadros de arame. No próximo vídeo, mostrarei como transformo esse quadro de arame em um design de alta fidelidade. Vejo-te lá. 6. Design (Alta fidelidade): No último vídeo, criamos este quadro de arame a partir do esboço. E neste vídeo, vou mostrar como criar um design de alta fidelidade. Filho, você vai bater em um e criar outro iPhone pro exibido a propósito Em vez de fazer isso , nós também poderíamos apenas manter a opção poderia apenas copiar esta coisa. Copie nossos amigos. Nós, que é outro. Isso é outra coisa que podemos fazer. Mas eu só vou criar este quadro por enquanto. E o que eu vou fazer é selecionar meu quadro de arame e meu quadro regular que eu acabei de fazer este novo e eu vou ouvir Go ouvir o raio do canto e eu vou bater 40 lá. Então isso faz com que esses cantos legais que eu gosto de trabalhar assim. Meio que vou mover isso um pouco desse jeito. E eu vou chamar o design da tela que eu vou bater estão no meu teclado e eu estou apenas criando esta caixa e colocá-lo no lado e notar como ele se encaixou nas bordas quando eu colocá-lo todo o caminho para as bordas em 375 E esta caixa precisa ser de 75 por 225 que eu poderia entrar aqui também. Então eu vou entrar para 25 se eu apertar esta caixa e se eu clicar duas vezes sobre ela, eu posso realmente vir para o lado aqui e eu posso clicar nestes cantos e eu realmente, como, como, quebrar esta caixa ao redor e fazer o que eu quiser. Então, sabendo que eu estou segurando o turno, apenas movendo a caixa para cima para perceber como está mudando para cerca de 183 bem ali. Então eu só estou fazendo isso. Eu só vou mudar o nome deste item no topo por padrão. Chama-se Rectangle também, também, e eu vou chamá-lo de Ah, contato rápido BG para antecedentes. Quero saber, transformar este item em um Grady. E assim, por padrão, vemos aqui que há uma cor de campo e se eu escolher esse sentimento, se eu for sob sólido e for linear, eu posso criar um Grady int, e basicamente eu posso ter. Eu posso escolher a cor de cima aqui, e ela era outra cor na parte inferior. Mudando a transparência da bebida para 100% e você pode ver aqui há um bom nosso desvanecimento e você pode mover o Grady e ao redor dependendo de qual direção você deseja que ele desapareça. E eu meio que quero tê-lo de todo o caminho do lado, do lado esquerdo para o lado direito, todo o caminho até a borda. Este é o meu lado esquerdo, e este é o meu lado direito. E o lado esquerdo vai ter este nega cor azul, que é algo assim, e o lado direito vai ter este tipo de cor azulada mais púrpura. Agora eu quero mudar o fundo da tela de branco para esta outra cor azul. E você poderia basicamente clicar nisso e simplesmente realmente, sabe, escolher e você poderia querer, mas eu vou com essa cor. Então eu vou abrir o Splash bem rápido. Eu quero encontrar uma pessoa para mostrar como fazer perfis muito rapidamente para que eu pudesse tirar esta foto, por exemplo. Eu poderia fazer cópia, e eu poderia apenas colá-lo direito dentro Então agora temos essa foto lá dentro, e ela está neste quadro automaticamente. Isso é esperança, não falar comigo, apenas tipo de trabalho em figo MMA. Então eu sou apenas como ajustar isso, e ele está automaticamente mantendo tudo neste belo quadro. Então eu vou entrar aqui. Lembramos que estes eram 70 por 70. Vou entrar aqui, mas vai acontecer por volta dos 70. Então eu sei que vai ser algo assim em torno desta área. E eu posso mudar o raio do canto do porteiro para, tipo , 100 vezes, vou pegar este imposto e vir aqui e apenas colar. E agora temos esse texto com nome. Eu ia mudar a fonte aqui. By the way, Figment vem com um monte de fontes pré-carregadas do Google, o que é incrível. E também carrega muitos dos fundos do seu sistema. E há mais. Há outras maneiras de carregar mais fundos, mas só para você saber que há um monte de fundos, mas afastando-se das fontes por enquanto, digamos que queremos tornar isso em uma maneira dinâmica para ter um monte de perfis diferentes, o que é muito, muito legal. Eu poderia mudar isso para a imagem do nome do perfil. Vamos criar isso em um componente. Estou apenas escolhendo o item que estou chegando aqui e clicando neste botão de criar componente . Agora você pode ver que este é um componente e você pode ver no lado que ele tem um ícone diferente. Estou duplicando o componente de fazer mais algumas instâncias dos componentes porque estes três são instâncias deste componente. O que eu poderia fazer. Eu posso chegar a este componente e eu posso tudo o que eu mudei para esse componente, como por algum tipo de efeito, ou torná-lo transparente, que você pode vir aqui e fazer o item, digamos, 50% transparente. Eu só estou mudando para fazer um 50% transparente, e todos os três itens também estão se tornando 50% transparentes, e eles também têm esse efeito sobre eles. Mas se eu for para cada item individualmente e eu quero mudar isso para, digamos, 100% aquele, digamos 5% este. Posso tocá-los individualmente, então pode parecer um pouco confuso por enquanto, mas prometo que é uma coisa muito poderosa. À medida que avançarmos um pouco mais, você verá como é legal. Então eu estou apenas pressionando desfazer o comando Z para voltar um pouco no tempo, então eu simplesmente não entendo isso e agora este item ainda é um componente. E o que eu vou fazer é ir um pouco no futuro e trazer mais algumas imagens de perfil . Então eu fui em frente um pouco para economizar algum tempo e importado em mais algumas imagens e criei e converti cada uma delas em uma imagem de perfil componente. 123 e assim por diante. Porque agora nós criamos esses componentes. Eu poderia vir aqui ao lado das camadas é um pequeno ícone que diz Ativos. Eu posso clicar nisso e você pode ver aqui que nós temos nossos componentes ao lado. Eu poderia vir aqui e arrastar esses componentes para fora. E como dissemos antes, se eu entrar no mestre, esses ar, apenas todos os casos da queixa que vêm para o mestre e eu mudar como eu estou batendo agora para mudar um transparente para que você possa ver eles Tudo mudou. Então, quando você tem um pequeno aplicativo realmente grande com centenas de telas, você apenas literalmente alterar um desses componentes e atualizações em todos os lugares. Muito, muito legal. Estou excluindo estes fora da tela ao voltar para as camadas e também o que você deseja fazer para a organização. Estou batendo um para criar um novo porto. E eu estou apenas batendo o são pobres como que por padrão é chamar um quadro um. E eu vou mudá-lo de gordo que tem que dizer imagens de perfil. Então agora eu quero ir para os ativos. Você podia ver quando eu bati em imagens de perfil. Agora é meio que organiza. Então, quando eu tiver um monte de mais componentes ou organizá-los bem para você, as coisas não estarão em todo lugar. Então vamos pegar um desses perfis agora e colocá-lo aqui. Pegue o texto que fizemos antes. Basta colocá-lo aqui. Outra coisa que podemos fazer é que poderíamos realmente componentes dentro de outros componentes. Eu estou escolhendo ambos os itens, e eu estou indo para componente e apenas pressionando criar. Então agora temos um item lá que é um componente, e um que é apenas texto duplicando este item e trazendo-o para baixo. Vamos tirar isso daqui. Então isso foi 80 para baixo e 20 para a esquerda, então você pode ver que eu estou segurando a opção para que eu possa medir isso. Então eu estou apenas segurando a opção de subir em segundo lugar. Veja, é um de cima e 20 da esquerda, e eu acho que eu tenho esse nome um pouco baixo demais. Então vamos voltar aqui e mover isso um pouco e você pode ver que nos mudamos . Bem, eu estou segurando a opção e apenas duplicando esse perfil. 10 pixels de distância, sem bater no Comando D e apenas copiou mais perfis múltiplos. Então agora o que eu poderia fazer aqui é que eu posso realmente clicar duas vezes dentro de lá, e ele pode vir aqui onde ele diz instância, e eu posso mudar de porque nós criamos esses componentes organizados para vir aqui. O padrão é perfil. Imagem um. Agora estou clicando na imagem do perfil para escolher essa outra vez, escolhendo o perfil Imagem três e assim por diante. Então em diante faz um exemplo com os nomes que eu posso entrar aqui e colocar nomes diferentes e diferentes. Se eu mudar este nome para digamos, como as fontes para como um preto ou algo assim, você pode ver o seu todo ou como um vermelho. Você pode ver isso mais fácil Então todos eles mudaram para ler e estes todos mudam diretamente porque eu estou mudando o componente principal que eu vou fazer agora e apenas apagar estes fora daqui. Então agora você entende como isso funciona. E eu vou entrar aqui e mudar todos esses nomes. Também quero ter uma situação onde sobrenomes ar selecionado. Deixe-me mostrar-lhe o que quero dizer com isso. Eu sei que na armação do fio, eu vou apenas duplicar o círculo e torná-lo menor. Vou dar um zoom em um pouco e calçar o círculo, e na verdade eu vou vir aqui no Phil, escolhê-lo. E se eu acertar esse conta-gotas, eu posso deixar cair essa cor. Estou selecionando essa cor e seja qual for a cor que eu escolher, ela a coloca nesse círculo. Então agora eu estou batendo no social deles. Algo chamado lápis. O Ivan já te mostrou isso? Então ele veio aqui, o pentagrama, e basicamente eu quero apenas fazer uma verificação muito rápida. Estou apenas clicando, clicando e clicando. E eu fiz uma pequena verificação rápida. Isso é muito, muito rápido só para mostrar o que quero dizer. Então esta é apenas uma situação em que algo é selecionado e esqueceu de fazer isso no processo de enquadramento de fios, mas eu queria que você visse como fazer isso. Agora queremos fazer uma versão alta Fidelity disso. Então, vamos tentar vir até aqui e eu apenas copiar esse pequeno círculo e eu estou colando. Na verdade, é 28 por 28 Dimensão sábia. Eu vou vir aqui e mudá-lo para 23 por 23. Muito bom que eu estou indo para vir aqui no lado e aperte esta pequena tecla menos para excluir o traço completamente. E eu vou escolher este item novamente, e eu vou apenas escolher branco apenas branco puro. Vou colocá-lo em cima aqui no componente e notar aqui como ele coloca em todos os outros também. Vamos colocar isso aqui embaixo. Você pode ver como está acontecendo em tempo real. Eu vou ampliar um pouco e escolher um pequeno círculo, e eu vou apenas adicionar um pouco de sombra. Então aqui eu vou fazer efeito, e isso só coloca uma pequena sombra. Eu poderia vir aqui na sombra e meio que ajustado para ter um pouco mais sutil. É 25% por padrão. Eu só estou mudando para 10% que eu vou voltar para aquele pequeno cheque que fizemos aqui. E eu vou voltar aqui e colocá-lo e apenas colá-lo. E quando vale a pena colocá-lo naquele lugar, você não pode realmente vê-lo. E eu vou mudar esse cheque de, tipo, tipo, um dedo branco como uma cor mais escura para que pudéssemos vê-lo, e eu vou colocá-lo um pouco para baixo. Então é meio que mais linha. Vou ampliar um pouco mais. Normalmente crio meus ícones em um programa chamado Illustrator. Mas embora figuras muito, muito boa ferramenta para fazer ícones em também, muito poderoso vai fazer alguns pequenos ajustes aqui, mover isso para baixo. Você está vindo? O traço realmente mudou o peso do traçado de um para um para um faz um pouco mais gordo , e eu poderia apenas fazer mais alguns ajustes e eu não quero que os cantos sejam vendidos afiadamente. Então eu venho aqui e bati este lado pequeno e depois onde ele diz “nenhum”. Sob este menu, eu bati duas rondas e notei como eu fiz isso redondo. Não é agradável e limpo. Funciona melhor com o design dele. E eu estou saindo e você pode ver lá que todos eles selecionaram. Então, por padrão, eu vou vir aqui e calçar aquela pequena seta, eu vou zoom para trás e novamente, eu vou vir e selecionar ambos os itens e eu vou enquanto eles são selecionados, eu estou apertando o comando G. Por isso, vou agrupá-los. E só estou mudando esse nome para checar. Estou escolhendo o cheque de novo, e eu estou vindo aqui onde o cheque está e eu estou acertando este globo ocular, que desliga e liga. Então eu estou desativando por padrão. Assim, eles estão todos desligados por padrão. Vou mover esse componente de volta para cá. Mesmo que eu tenha desligado no componente principal. Veja, eles estão todos esses ar desligados. Você pode ver aqui, aqui, aqui, eles estão todos acabados por padrão. Mas vamos dizer que eu quero ligar este, como a maneira que nós temos em nosso exemplo em nosso quadro de arame, alguns vindo aqui escolhendo este. E eu só estou ligando essa. Então é uma maneira dinâmica de controlar essas coisas é muito, muito poderoso. Antes que me esqueça, deixa-me mostrar-te este outro truque. Estou segurando o turno, apenas selecionando esses itens de imagem do perfil, e eu estou apenas agrupando eles. Agora tenho um grupo e acabei de ligar para ele. Só vou chamar este grupo de contatos muito rápidos porque eles são todos igual espaço para o programa é inteligente o suficiente para detectar isso. Posso movê-los igualmente no espaço. Gosto que estejam longe de 10 pixels um do outro. Mas eu só queria mostrar à escola ter em mente a razão pela qual nós fomos em frente e criamos esses componentes também, é para que possamos fazer esses pequenos truques rápidos. Sem eles serem componentes, não seríamos capazes de realizar algumas das coisas. Então eu vou apenas adicionar um pequeno contato rápido aqui. Então agora vamos ter os contatos de trabalho, que serão 20 pixels do topo e 20 pixels da esquerda. Agora são 42. Estou segurando a opção e estou movendo minhas setas. Então eu estou vendo todos esses alinhamentos, o que é realmente útil para mim e praticamente da mesma forma que acabamos de fazer essa verificação. Mark, eu criei este ícone de filtro também, só para poupar tempo. E eu vou ter que 25 do topo, que é isso que é. E vai ser 85 do lado. Vou agrupar estes e pressionar o comando G que vou chamar de topo dos contactos . Agora, eu vou voltar para o topo aqui onde estávamos mais cedo. Vamos pegar um desses perfis e movê-lo para baixo ao lado da nossa referência. Então temos um primeiro nome no topo aqui. Basta colocá-lo aqui. Primeiro nome no topo, último nome na parte inferior. Então seria algo por lá. Colocará o primeiro nome no topo aqui. Irá copiar essa duplicata que irá colocar o sobrenome. Eu quero fazer isso divertido muito, muito grande, na verdade. Então eu vou mudar isso para 50 e torná-lo um pouco mais pesado. Isso é um médio perfeito. Vamos tirar o nome e manter apenas a palavra primeiro. Mova isso um pouco para cima. Muito bom para medir tudo, e eu vou realmente escolher isso e eu vou bater cinco do meu teclado. Então altere a capacidade para 50% e altere as fontes para cerca de 20. Coloque um pouco mais baixo, e eu ambos serão selecionados e aperte o comando Geo grupo. Há cerca de sete pixels de distância. Poderíamos fazer cerca de cinco que esses números não são exatamente precisos porque estes vivem em caixas que adicionam pixels extras. Mas é bom ter as coisas bem alinhadas em geral. Agora, eu vou escolher a nossa instância do componente que fizemos anteriormente e escolher este grupo também, e eu vou fazer outro componente nisso. Então agora temos um componentes de contatos regulares. Então vamos realmente tomar isso em um ano para que possamos ter todos os nossos componentes em um só lugar e nós podemos ter nossas instâncias desses incômodos vai deixar isso aqui e dos componentes sete. Vou chamar-lhe listas de perfis só para manter as coisas organizadas. Vou pegar na lista de perfis do componente e colocá-la aqui. 20 pixels do lado e 20 e deve ser 20 imagens do topo. Muito agradável. Vou pegar essa instância e colocá-lo a cerca de 20 pixels do topo. E eu vou apertar o comando D como fizemos antes para duplicar nossa ação. E eu mostrei mais cedo como podemos vir aqui e você pode ir para o perfil. Podemos mudar isso de lado e mudar para outras imagens, se quiser. Na verdade, há outra maneira de fazer isso um pouco mais visual. Deixe-me mostrar-lhe isso bem rápido agora, para que eu possa vir aqui pelo lado ativo. E se eu quiser que essa imagem substitua essa imagem, eu posso escolher a imagem. Traga-o para fora. Eu poderia apenas levá-lo para onde eu quiser deixá-lo. Quando eu poderia escolher a imagem e eu poderia segurar opção e comando e notar como essa caixa está virando roxo e literalmente apenas substitui essa imagem. Então é literalmente aquele substituto. Vou em frente e fazer isso com o resto das imagens muito rapidamente. Então da mesma maneira pode vir aqui e mudar os nomes como fizemos antes. Vou colocar Bob Smith. Vou mudar todos os outros nomes muito rapidamente. Então eu fui em frente e adicionei todos os outros nomes, primeiro nome e sobrenome. E eu também criador botões R ab semelhantes a como fizemos a marca de seleção apenas para economizar um pouco tempo. E isso deve ter 20 pixels da direita e 20 pixels da parte inferior. Esse Grady, a propósito, é exatamente o mesmo ótimo. a propósito, E esse é um? Então ambos são apenas o ingrediente exato, uma maneira rápida de duplicar um Grady. E posso mostrar-vos um exemplo. Então eu estou apenas criando esta caixa para que eu possa ir para este grande clique com o botão direito sobre ele, ir para copiar colar, e apenas fazer propriedades de cópia que eu poderia vir aqui e apenas colar propriedades e uma cópia do verde. E foi assim que eu meio que fiz aquele ingrediente checando aqui. A última parte é esta pequena barra que sobrou. Este é apenas um atalho rápido para que as pessoas possam percorrer muito rapidamente. Então eu vou criar uma caixa muito rápido, que vai ser 28 em largura e 494 e altura. Vou adicionar um raio de canto. Digamos apenas 100 e são cerca de cinco pixels do lado. Então eu só estou colocando esse olhar. Eu estou apenas segurando a opção e me mostrando sete pixels aqui e então eu estou me movendo, e agora nós sabemos que é cinco pixels e deve ser 215 dos tops na opção segurando e pressionando para cima e para baixo para ajustar isso e movê-lo e poderia ver que ele está mudando números e eu estou mantendo um a 15 do topo. Então, novamente, estou copiando aquele Grady int. Eu estou escolhendo o item clicando com o botão direito nele, indo e provando o radiante e notar quando eu colado o Grande e também bagunçou meu raio de canto e eu poderia apenas ir lá e mudá-lo novamente. Mas ao invés de fazer isso, deixe-me mostrar outra maneira, uma maneira melhor de fazer isso. Então, em vez de escolher propriedades e apenas selecionar todas elas, você poderia apenas escolher uma individual para que eu pudesse vir aqui de lado, notar minhas setas aqui do lado, e eu estou meio que clicando aqui. E estou apenas pressionando o comando. Vir até aqui e dirigir o Comando V. E isso é apenas uma maneira de não copiar todas as propriedades apenas para copiar propriedades individuais. E este bar parece parecer dominante demais para os meus gostos em apenas escolhê-lo e colocá-lo para baixo para 10%. Eu também poderia apenas fazer isso batendo em um. E agora olhando para isso pensando melhor, eu realmente não quero ter aquela tia-avó lá no bar. Eu só quero te mostrar como se faz. E então eu vou apenas selecioná-lo, e eu vou para o preenchido e excluí-lo, excluí-lo e, em seguida, pressione. Além disso, Então eu excluí a sensação de que nós só temos essa grande cor e eu quero fazer essa cor azul em vez disso. E eu também vou bater tende a apenas ter que um 10%. Eu quero adicionar algumas letras aqui, então eu só estou vindo aqui e escolhendo esse nome e copiando nelas, vindo aqui, batendo nessa coisa, e então eu estou apenas batendo em pasta. Então agora nós temos este texto e eu estou apenas recebendo um bater a curva bater ser não voltar batendo, Veja, retornar batendo D e eu vou pular para frente um pouco e apenas adicionar o resto deles. Agora temos o resto das cartas colocando isso aqui. Então eu estou fazendo um torto de propósito novamente porque eu quero mostrar a você os tempos mais quentes. Então eu estou escolhendo ambas as camadas, esta camada e esta camada, e então eu realmente vou diminuir o zoom. Podias ver um pouco melhor. Eu vou vir aqui e delineador da esquerda para a direita, e eu me alinho de cima para baixo. E se você gosta desta fonte um pouco pesada, na verdade. Então vamos mudar isso para uma versão mais leve. Acho que é um pouco mais forte. Este é Wells um pouco pesado, então eu vou voltar. imagem geral do arquivo também tem um pouco de uma versão mais leve do mesmo fundo. Senti que aquele era um pouco pesado demais. Muito agradável. Vamos nos mudar para cá e tudo parece bem, mas estou feliz com isso. Estou feliz com o jeito que acabou antes desses vídeos acabarem. Eu também só queria mencionar que você notou House desfazendo um monte de passos e tipo de volta na história e apertando Command Z e praticamente eu só queria mencionar que este aplicativo tudo é tipo de salvo na nuvem, para que você possa realmente desfazer para sempre. Praticamente, eu acho, hum, eu acredito na conta gratuita que você não conseguiu fazer por 30 dias e você ainda pode voltar. Então toda a sua história e tudo é salvo, o que é tão poderoso. E eu acho que a versão paga. Eu acho que você poderia literalmente voltar para a história para sempre. Mas apenas algo, algo para tomar nota. No próximo vídeo, mostrarei como fazer um protótipo realista onde as coisas estão realmente se movendo e animando. 7. Criação de protótipos: Em nosso último vídeo, eu mostrei como criar este design de alta fidelidade, usando esta armação de arame como referência. E neste vídeo, eu vou mostrar a vocês como criar um protótipo bem interessante muito rapidamente E quando eu digo protótipo, o que eu quero dizer com isso é meio que ir. É uma espécie de mostrar, Ah, pequena animação de coisas de casa pareceria indo indo de uma tela para outra. Você sempre pode ter telas diferentes que você está mostrando para seus clientes ou alguns tomadores de decisão ou desenvolvedores em geral. Mas você quer mostrar também o que, como as coisas seriam, como as coisas ficariam quando elas estão indo de tela para tela e como as coisas podem se sentir quando você está animando. E este é um bom exemplo para mostrar como conseguir isso. Então eu fui em frente e criei esta tela de perfil aqui apenas para avançar um pouco, e o que eu vou fazer agora é aqui no lado esquerdo, você tem design, protótipo e código. Eu vou clicar no Protótipo, e quando clicamos no protótipo, nós realmente chegar a algumas novas seleções aqui no lado direito. E se eu clicar nesta pequena seção. Se eu clicar nesta seção, eu recebo este pequeno ponto e eu poderia apenas escolhê-lo e eu posso ir para telas diferentes . Então, isso significa que quando eu clicar nesta seção, ele vai me levar para esta próxima tela, e eu poderia mostrar-lhe um exemplo rápido de que o que seria parecido para que eu pudesse vir aqui onde é um protótipo é há um pequeno botão de jogo que eu poderia apertar jogar e ele abre uma nova tela, e minha tela gera a razão de um carregado nesse iPhone. Se eu clicar lá fora, não estou clicando no quadro. Eu estou cozinhando lá fora na tela e um rápido lá fora eu poderia ver aqui. Há informações diferentes nele diz aqui Dispositivo, este é o iPhone 11 pro, e você pode ter modelos. Você pode ter diferentes, ter o ouro escolhido. Então, quando eu aperto Play, eu tenho este dispositivo, que é muito, muito bom. Então, lembrando que criamos essa ação, vamos de uma tela para outra. Então, se eu clicar em qualquer lugar fora se eu clicar aqui, você pode ver aqui que este tem um link que nós criamos anteriormente. Se eu clicar neste link que nos leva para aquela tela, que nos permite saltar rapidamente de tela para tela em um ambiente de prototipagem. Agora, se eu chegar a este botão de voltar e clicar aqui e mover esta seta para cá agora vamos ter uma ação para voltar. Então agora você poderia vir aqui, eu poderia clicar na parte de trás, e agora ele está levando de volta para as telas anteriores. Agora estamos indo. Estamos indo de tela em tela voltando para trás que eu estou escolhendo isso, eu posso ir e voltar. Então, se você tem um monte de telas diferentes, você pode mostrar todo o seu fluxo algo que é muito legal que existe. Dentro da invenção é algo chamado inimigo automático. Então, quando você carrega de tela em tela, você pode realmente ter coisas tipo de auto animado. Deixe-me mostrar um exemplo o que eu quero dizer com essa causa faz seu protótipo parecer muito melhor e hiper realista. Eu vou descer aqui e clicar nesta seta. Eu vou vir aqui de lado e você pode ver aqui que há algo por padrão. Geralmente vai dizer instantâneo e eu vou vir aqui e mudar isso de instantâneo para animar inteligente. Vou voltar a esta tela e quando tivemos a flecha aqui, vou mudar isso de instantâneo para inteligente, animar também. E eu vou. E com o auto animado habilitado, deixe-me mostrar-lhe um exemplo de como você pode fazer alguns realmente bastante Imation muito rapidamente. Então eu apenas copiei e colei este botão de anúncio que criamos anteriormente. E você pode ver aqui que o título dele é chamado Ad On e deste lado. Também é chamado de Então, enquanto as camadas de ar nomearem exatamente a mesma camada, o sistema vai saber como animar e deixe-me mostrar como isso funciona. Eu vou vir aqui e pressionar praga e e quando eu bater de volta, você pode ver que isso jogar bolinhos. É animação automática para isso para o posicionamento de onde ele está localizado naquela tela. Então eu estou indo e voltando dentro das telas, e você poderia ver como é auto animando. Então, em um exemplo da vida real, deixe-me apenas excluir essa tela de lá. Em um exemplo da vida real, eu poderia pegar algo como esta tela e colocá-lo nesta tela um pouco para baixo e talvez movê-lo para fora do quadro e, em seguida, pegar este botão play, talvez eu vou colocá-lo para trás na camada mais alta tecla. Vou colocar isso atrás daqueles quadros. Algo assim. Vou movê-lo para o lado. Então é do lado direito e você pode ver aqui que eu vou vir aqui e tocar essa coisa para mostrar o que está acontecendo. E você pode ver rapidamente como essas animações estão afetando nossas telas. Enquanto saltamos para frente e para trás em um protótipo, você pode ver que o administrador está vindo para a esquerda e para a direita, e esta barra na parte inferior está chegando para cima e para baixo. Então eu vou voltar ao nosso projeto, e eu vou escolher essas seções em um grupo eles eu vou trazê-los para fora desta tela . Vou tirar isso da nossa moldura e voltar aqui e brincar. Eu estou batendo no nosso link e ele está caindo e as coisas estão apenas tipo de animação automática. E com este link no topo, esse é um protótipo de compartilhamento que eu posso clicar nele, e eu poderia vir aqui e dizer, Copiar Link e eu poderia literalmente enviar esse link para qualquer um, seja um desenvolvedor ou decisão criador ou alguém da sua equipe que você precisa. Você precisa deles para verificar este design para lhe dar algum feedback. Você pode enviar-lhes este link, e eles poderiam simplesmente abri-lo diretamente no navegador. E baseado no que eles pensam, eles poderiam vir aqui de lado e tem um pão aqui no canto superior esquerdo. Adicione comentários. Eles podem acertar isso, e você pode realmente vir. Venha no seu protótipo e comece a atuar. Adicionando comentários. Eles poderiam dizer alguma coisa. Eu gosto deste post, e então quando você vem para o seu design, você pode ocultar os comentários e você pode revelar os comentários e você é capaz de realmente vê-los . E quando você receber todos os comentários de pessoas diferentes, você pode voltar para o seu quadro, e quando você clicar em comentários que você pode ver aqui no lado, você receberá todos os seus comentários aqui, e então você pode basta passar por eles e tipo de responder de volta aos comentários e fazer algumas mudanças conforme necessário. Neste vídeo, eu mostrei como criar Ah, protótipo e saltar de tela em tela. E também lhe mostrei como compartilhar seu documento e como deixar comentários e como fazer com que as pessoas deixem comentários para você e para que você tipo de ver onde esses comentários estão. No próximo vídeo, vou mostrar-lhe como ter tipo de preparar um mini sistema de design. 8. Sistema de design: no último vídeo, eu mostrei a você como criar Ah, protótipo e tipo de como compartilhar seu protótipo com outras pessoas e como as pessoas podem deixar seus comentários. E eu posso olhar para esses comentários. E neste vídeo, eu vou mostrar a vocês como começar seu sistema de design. Um sistema de design pode ficar muito grande, mas vou mostrar-lhe os primeiros passos de começar a criar um. Então eu fui em frente e peguei alguns dos elementos que tínhamos da nossa tela e criei alguns desses elementos neste único quadro. E basicamente, vamos começar com as cores em nosso sistema de design. Isso é uma coisa boa para começar. Então, observe aqui no fundo aqui do lado, nós realmente não temos nada ainda, então se eu vir aqui e escolher essa cor aqui, este círculo, eu poderia vir aqui do lado e notar onde as palavras devem sentir. Há um pequeno ícone com quatro pontos que é um estilo. Eu posso bater esse estilo e então eu posso vir aqui e bater Plus e o que isso faz isso me permite tipo de nomear esta cor para o meu estilo. Então eu estou chamando um primário esta cor por ano, eu estou dizendo cria estilo. Então agora nós criamos o estilo notado que estava lá, e agora ele está lá. E se eu sair dessa e eu apenas bater em cima da cannabis, lembre-se, lembre-se, nós costumávamos ter um piscar de olhos. Costumava haver nada lá. E agora temos estilos locais e ele tem aqui diz primário. Então, agora que temos, quando criamos alguns elementos, eu poderia vir aqui e realmente selecionar os vários elementos e vir aqui de lado e escolher isso e então calçar esta cor. E agora nós afetamos com base na cor que selecionamos anteriormente, e então eu sempre poderia editar essa cor primária para outra cor para que eu pudesse vir aqui e tocar neste ícone. Venha aqui e eu posso mudar isso para outra cor. E veja como isso está afetando em todos os lugares onde esse estilo foi aplicado, o que pode ser extremamente, extremamente poderoso. Quando você tem tantas telas, algo em, faça isso e volte para a nossa cor original. Vou apagar as telas que fizemos antes. Voltarei aqui e continuarei com nosso sistema de design. Estou selecionando o círculo de novo. Eu estou vindo aqui para onde o Phil e eu estou clicando nesses ícones e eu estou clicando em mais longo que selecionado. São as cores brancas. Só estou chamando que o branco cria estilo. Agora, nós acabamos de criar essas coisas. Então agora temos que vir aqui e olhar, temos primário, e então temos branco. Deixe-me fazer isso mais uma na sua frente. Eu vou escolher disco radiante o radiante específico que temos vindo aqui e bater este ícone com os quatro pontos novamente e que eu estou vindo para isso mais, em seguida, bater o mais , tocando isso e, em seguida, dando neblina um título, chamando ingrediente e criando esse estilo que eu estou voltando aqui batendo tela e você pode ver aqui. Agora temos o Grady em grande estilo. Vou mostrar-te como aplicar o estilo a alguns dos nossos elementos existentes a partir do turno de espera . E eu estou escolhendo este elemento que temos um grande e então eu estou escolhendo este elemento e eu estou escolhendo este elemento mantendo o deslocamento, eles podem selecionar vários elementos. Deixe-me aplicar aquele radiante que acabamos de criar a esses três itens. Então eu escolho o pequeno ícone lá e eu estou apenas escolhendo este radiante agora. Você não viu nenhuma diferença porque nós já tínhamos essa classificação. Mas agora que ele é aplicado como um estilo, eu poderia vir aqui da tela e você pode ver aqui que onde é ótimo e quando eu estou escolhendo tela e eu posso bater este pequeno ícone e eu posso escolher propriedades e que eu posso mudar isso e observe como isso está afetando aqui, aqui e aqui ao mesmo tempo, está afetando todos eles para que você possa ver que eles foram aplicados, eles são e quão poderoso isso pode ser. Deixe-me mostrar-lhe alguns exemplos de como você poderia fazer a mesma idéia com tipografia também. Então, vamos vir até aqui. E ela era o primeiro nome, e quando eu vou para texto, eu posso clicar neste ícone aqui para criar um novo estilo e eu estou batendo. Além disso, e eu poderia chamar isso de talvez algo como Hum. Uma vez que é uma cópia tão grande, normalmente você quer chamar a picada de algo descritivo, mas para fins de demonstração, eu estou apenas mostrando para você dessa forma para eles batendo criar estilo. E agora temos um H. Então, agora, quando você vai aqui e você olha para o seu estilo aqui do lado, você pode ver que há um H. Então eu poderia vir aqui e aplicar isso ao nosso componente que fizemos antes. Ao aplicá-lo a este componente, ele afetará todas as instâncias desses componentes. Você não tem que ir a cada coisa. Então eu vou clicar nesta tipografia palavras como primeiro eu vou vir aqui e eu vou adicionar e tudo que eu faço é apenas apertar o H um e agora ele foi aplicado. Então você pode ver agora quando eu bati Bob, você pode ver que cada um foi aplicado. Mas fazer a mesma coisa com o sobrenome até mudou até 50% do jeito que fizemos isso . E eu vou vir aqui para texto e apertar aquele pequeno ícone e apertar um plus bem ao lado dele e apenas chamar este H dois por agora aviso. O H um é capital em H dois está em capital. Quer dizer, eu posso mudar isso. Apenas venha aqui, é aquela pequena edição. E eu poderia vir aqui no topo e mudar isso para um “H “maiúsculo também. Você sempre pode mudar esses nomes conforme necessário. Então agora eu estou indo para vir aqui para o nosso componente para o nosso sobrenome. Vou escolher isso. E então eu vou vir aqui e escolher um pequeno ícone. Vou escolher o H dois agora. Você pode ver isso quando chegarmos ao nosso arquivo. Quando eu acertei o sobrenome, agora temos um h para ouvir. Voe até ele. Ou se eu acertar o sobrenome aqui, você pode ver que o H dois foi aplicado a ele. Então isso foi apenas uma demonstração rápida de como você pode começar a criar seu sistema de design e como isso é poderoso. No próximo vídeo, vou mostrar como funcionam plugins e como você pode instalá-los. 9. Plugins ?: no último vídeo, eu mostrei a você como começar em seu sistema de design ao longo de um ano. E neste vídeo eu vou mostrar a vocês como instalar plugins e quais plugins são mesmo . Então plugins são praticamente muitos APS de software dentro do Big My próprio, e você pode chegar a ele apenas vindo aqui e clicando com o botão direito e indo em plugins e avisos diz aqui, gerenciar plugins. Não instalamos nenhum plugue do mágico. Mostrar-lhe rapidamente como fazer isso. Então eu estou vindo aqui para o lado superior esquerdo. Estou a clicar no ícone do hambúrguer e estou a voltar para os ficheiros que podem ver aqui. Nosso primeiro outono foi atualizado com base em todo o trabalho que fizemos, e aqui está ela a palavra plugins? Então eu estou clicando no link plugins, e há plugins diferentes que você pode escolher, e eu vou mostrar especificamente um, e ao bater suas sobrancelhas, todos os plugins, ele leva você para a seção onde todos os plugins existem, e há uma pesquisa aqui no topo, certo, e você pode tipo de digitar o que você está procurando alguns, especificamente procurando por um que eu quero mostrar a você chamado Splash A imagem que usamos mais cedo com o perfil de alguns vídeos atrás. Quero mostrar-lhe como podemos chegar a isso diretamente a partir do aplicativo. Então eu vou clicar neste plug in e há um pequeno botão de chamada à ação de instalação que eu poderia clicar. Vou clicar nisso e vou instalar a tomada. Agora que temos o plug in instalado, vou voltar para o nosso arquivo indo aqui para o First Project, e vou clicar no nosso arquivo e voltar nele e ampliar dentro dele. E aqui eu posso, clique com o botão direito do mouse como fizemos anteriormente e ir plugins e aviso. Agora temos cinzas de unspool. Então eu estou clicando na seleção de splash da ONU e agora nós estamos recebendo a seleção in splash aqui. Mesmo dentro da Fig. MMA. Lembre-se mais cedo quando eu fui para o navegador alguns vídeos de volta e eu digitei pessoalmente, eu poderia vir aqui e digitar pessoalmente novamente, e eu estou recebendo imagens diretamente dentro. Acho que a minha própria nota aqui com base na palavra-chave que colocamos, estamos recebendo pessoas diferentes para que eu possa colocar. Isso é uma casa. Agora vamos comprar casas ou qualquer outra coisa que você invente? Então eu vou voltar e bater sido pessoa novamente, e eu posso apenas clicar na imagem que eu selecionei e apenas importar para escrever em Fig MMA e eu poderia fazer em meus ajustes da mesma maneira como se eu teria ido para, ah navegador Web para obter essa imagem e, em seguida, para fechar o plugue. E eu só, você sabe, posso acertar o pequeno X e fechá-lo. Plug-ins são muito legais e poderosos, e eu sugiro verificar diferentes, e você pode realmente, realmente melhorar seu fluxo de trabalho usando-os. 10. Considerações finais: Espero que tenha tido algum bom conhecimento de fazer este curso. Aprendemos algumas ferramentas básicas e Sigma, e a partir disso aprendemos a uma armação de arame. E então, a partir do enquadramento do fio, aprendemos a fazer Ah, design de alta fidelidade. E com esse design de alta fidelidade, aprendemos a fazer micro interações e a fazer protótipos na vida real. Agora é hora de eu lhe dar alguns trabalhos de casa. E quando eu era criança, eu odiava muito dever de casa. Mas isso é apenas parte do processo. É importante fazer essas coisas para que possamos realmente praticar e ficar bons em nosso ofício. Então, realmente, você pode apenas pegar o design que eu fiz? Tipo de usar isso como referência? E também certifique-se de criar um quadro de arame que eu fiz, e também criar um design a partir desse quadro de arame e, em seguida, experimentar alguns com alguns dos prototipagem e equipe. Se você pode começar a animar com base em como eu lhe mostrei algumas instruções antes, por favor, não se esqueça de compartilhar seu progresso comigo, pois espero que você faça um bom trabalho e boa sorte para você. Você mais tarde