Transcrições
1. Introdução: Olá, obrigado por participar na maldade de Coursera durante
atualmente o designer de produtos líder em uma empresa de software com sede em Portland, Oregon. E eu estou realmente animado hoje nesta aula, vamos aprender algumas dicas e truques de produtividade e economia de tempo em Figma. Isso salvará muitas dores de cabeça e do futuro. Isso vai economizar seu tempo e provar seu equilíbrio de vida profissional e apenas torná-lo um designer melhor a longo prazo. Se você trabalha como designer, sabemos que às vezes você tem outros que você tem que entregar seu arquivo. Se isso é outro designer ou desenvolvimento. Figma tem uma ferramenta incrivelmente colaborativa. Assim, outros colegas de equipe com os quais você trabalha podem estar entrando
diretamente em seu arquivo e interagindo com seu trabalho de design. Essa é a beleza de Sigma. Você pode realmente ver os cursores de seus companheiros de equipe trabalhando lado a lado. É muito fácil deixar comentários e chamou as pessoas para fora e é solicitado feedback diretamente no Figma, É gratuito, é baseado em navegador, mas ainda é uma ferramenta de design incrivelmente poderosa e um monte de designers usá-lo em seu fluxo de trabalho diário. Mas se você fizer uma coisa em que você sabe que se você não tem um arquivo organizado e escrever não estava funcionando com produtividade no meu tipo de começo, então é muito mais difícil voltar atrás, corrigir esses problemas em vez de começar pensando em como você pode ser o designer mais produtivo, rápido e eficiente. Você pode ser desde o início quando você iniciar seu arquivo pela primeira vez. E vamos falar sobre isso neste curso. Vamos falar sobre como criar seu sistema de design, como criar uma biblioteca de design, cores, bibliotecas de texto. Também falaremos sobre alguns dos sigmas incríveis funcionalidades incorporadas em torno da produtividade, como o recurso de layout automático. E então falaremos sobre alguns comandos de teclado e atalhos que farão de você um designer tão grande, rápido e eficiente. E isso vai colocar você, até agora, eu tinha de muitos nos jogos. E se isso soa como um bom, é um bom ajuste para você. Eu recomendo que você fique por aqui e podemos começar.
2. Sistemas de design de construção: Ok, então primeiro vamos falar sobre a negociação de um sistema de design. Um sistema de design permite que você dimensione seus projetos rapidamente com a menor quantidade de esforço possível. Então, se formos para o Pinterest, você pode começar a ter uma idéia de como os sistemas de design se parecem. Você pode até começar a salvar isso. Se você é um fã do Pinterest. Você pode fazer uma coleção destes se você meio que quiser começar a brainstorming aqui eu próprio idéias de como você quer organizar seu sistema de design. Se você não sabe o que é um sistema de design ou alojamento, ou não trabalhou com um antes. Eles são realmente importantes porque permitem que você trabalhe com componentes e mantenha, eles mantêm seus arquivos de design o mais limpos possível e o mais eficiente possível enquanto você está trabalhando. Você não quer trabalhar com pedaços quebrados de um projeto. Porque digamos que se você tem uma atualização de marca e você tem que mudar a cor, digamos, Oh, neste exemplo no Pinterest, o guia de estilo de interface do usuário pobre ovo, dizer que houve uma mudança de marca onde eles tiveram que mudar essa cor roxa para um azul ou apenas uma cor totalmente diferente do que é mostrado aqui em todo o aplicativo. Eles usam essa cor em seu sistema de cores, como mostrado aqui. Uma cor muito comum em toda parte. E há muitas vezes em que uma empresa vai passar por uma mudança de marca e você terá que mudar os principais componentes de cor. Você não quer trabalhar com componentes quebrados individuais onde você teria que passar e alterar todos os componentes manualmente, não o que leva meses potencialmente. Portanto, é incrivelmente importante trabalhar em sistemas de design com uma biblioteca de design. Dessa forma, você pode fazer essas alterações em segundos, em vez de horas e horas. disso, torna mais fácil para qualquer designer que
entra em seu arquivo no futuro e precisa fazer atualizações também. Uma metodologia popular de design, biologia
do sistema como Atomic Design por Brad Frost. E eu vou realmente vincular este e-book gratuito que você pode ler ou encomendou o livro físico. Você pode ler mais sobre esta metodologia. E isso, eu vou vincular este artigo do Adobe XD também que vai em um pouco de profundidade sobre design atômico também. E a maneira como isso funciona é que temos átomos, moléculas, organismos, modelos e páginas, e sem contextos que podem parecer um pouco confusos, mas essencialmente, este é um bom exemplo que encontrei no Google do sistema projetado por uma empresa. Eu também construí o meu próprio, mas muitas das empresas com as quais eu trabalho, eu realmente não posso compartilhar o trabalho publicamente, então eu estou usando exemplos públicos em que eu me encontrei. Você pode continuar a encontrar seus próprios exemplos, bem como para obter idéias. Mas pelo que vemos aqui à esquerda, e à medida que avançamos mais e complexidade, temos os átomos, as moléculas, os organismos, os modelos e as páginas
à medida que avançamos. Além disso, parece um tipo,
um guia de estilo de texto e alguns exemplos de seu uso de visualização de dados ao longo. Por isso, é muito bom encontrar estes exemplos online e isso vai ajudar a dar-lhe ideias. Podemos começar a procurar na Figma. Se você não criou uma conta no Figma, basta acessar figma.com. Você pode fazer login ou se inscrever e você pode realmente trabalhar no navegador, ou você pode trabalhar diretamente no Figma. E isso é o que você verá aqui. Você vai ver se você baixar o aplicativo físico para o seu computador, você pode ir para a seção da comunidade aqui e procurar apenas digitar no sistema de design. E você verá um monte de kits de sistema de design inicial. E você pode literalmente começar a baixar estes. Este primeiro, o sistema de design amplificador por fragmento para 0.03 demo. Então parece que você poderia realmente comprar isso. Você pode duplicar todos esses recursos incríveis na comunidade Figma. Então esta é uma ótima maneira se é tão esmagadora, se você não conhece uma ferramenta de design muito bem. Mas se você for para a esquerda aqui nas páginas em Figma, e você pode fazer Command, barra invertida e ocultar a interface do usuário nas páginas à esquerda você pode ver todos esses componentes e começar a brincar com isso.
3. Ferramenta de layout automático Figma: Ok, então a seguir vamos falar sobre o layout automático da Figma. Esta é uma ferramenta incrível que você pode usar para fazer componentes dinâmicos super responsivos. Em Figma, ele vai economizar uma tonelada de tempo e dores de cabeça, e é incrível e cada designer definitivamente deve estar utilizando-o. Será uma economia de tempo. E apenas um dos melhores componentes e características como figma tem para oferecer. Então eles realmente, se você for para a seção da comunidade
e, e se você for para a primeira página agora, você pode descobrir que nos arquivos de tendência, figma realmente criou este guia realmente útil chamado Figma auto Layout playground. Se, por algum motivo, você não conseguir encontrar na primeira página, você pode procurar por esse título e localizá-lo. Então, se não sabemos Sigma e duplicar isso e ele vai
abrir automaticamente e salvo em seus rascunhos em sua área de projeto. Se você quiser voltar para ele e brincar com ele,
ele lhe dará alguns caminhos para que possamos escolher o ELL iniciante, se você nunca usou o layout automático, o que há de novo e auto-layout se você quiser apenas ver os novos recursos, alguns exemplos. Só para você fazer referência. Assim, você pode começar a construir seus próprios quadros de layout automático quando se sentir confortável. E, em seguida, alguns recursos também. Vou ligar este artigo. Se você quiser ler sobre mais sobre auto-layout, Vamos apenas ir com as opções iniciantes. Então, esta será uma boa visão geral para o que é layout automático e por que você deve usá-lo. E é um tutorial muito divertido para brincar também. O layout automático é essencialmente um recurso no Figma que permite criar quadros dinâmicos que respondem ao conteúdo. Então, se você já fez botão no Sketch ou Figma ou Adobe XD, e você acabou de criar um botão estático. Você sabe que você tem que mudar a largura
do botão para ajustar manualmente os textos que você está inserindo. Então, por exemplo, temos um botão estático aqui. Se nós apenas digitar, oops, eu sou um botão e eu amo auto-layout. Oh, não. Então não queremos isso. Queremos que este botão use, responda dinamicamente, redimensione dinamicamente para o que digitamos. Portanto, nosso primeiro passo é aplicar manualmente o layout automático. Você chegará ao painel lateral direito, clique em Layout automático. E, em seguida, automaticamente, podemos acrescentar, Eu amo leigos. E olhe para isso agora temos um botão de redimensionamento dinâmico. Mantém o estofamento consistente. E se criarmos um componente mestre deste, então seremos capazes de reutilizar este componente em todo o aplicativo ou site que estamos projetando. E todos os seus botões se adaptam automaticamente ao tipo, ao texto que você precisa usar dependendo cada fluxo de usuário e tela para o qual você está projetando. Outro exemplo de como alinhar vários elementos. Se selecionarmos e arrastarmos esses três componentes aqui. E, na verdade, podemos pressionar Shift a, e isso irá automaticamente teclado de layout automático de comando. E eu acho que os atalhos de teclado são
muito, muito úteis e ajudam você a ser muito eficiente. Mas isso só mostra que eles se realinharam um pouco. Nós também podemos selecionar estes, mudar um pouco realinhado como podemos alinhá-los verticalmente. Esta ferramenta no lado direito aqui permite que você escolha seu alinhamento. Então, para o alinhamento vertical, queremos, se quiséssemos centralizá-lo, também
podemos selecionar um desses componentes e realmente realmente facilmente alterar o layout e todo
o tamanho do quadro se adapta às alterações que você faz Aqui. E é tão fácil adicionar outros componentes, como se pudéssemos adicionar esse, mas podemos voltar a ele para este alinhamento. Se quisermos alinhados horizontalmente, podemos fazer isso aqui também. Então espere um minuto. Oh, você tem que selecionar o quadro inteiro. E então lá vamos nós. Portanto, há muito que você pode fazer com layout, e é muito mais rápido realinhar as coisas com layout automático aplicado. Isto mostra o ajuste do preenchimento de um botão. Esta segunda ferramenta. Então aqui, você pode realmente passar o mouse sobre essas peças e arrastar para ajustar o preenchimento automaticamente. E isso, isso adota todo o preenchimento. Você também pode aplicar preenchimento individual. Então, se eu quisesse como Toneladas de estofamento no topo e, em seguida, um pouco de preenchimento à direita, que se você quiser ser realmente nervoso e padrões de design como certeza, mas isso é apenas um exemplo de como você pode ter algumas instâncias são alguns elementos que você gostaria de algum preenchimento específico. Outro exemplo de preenchimento individual. Então, se você for para este espaçamento entre itens, você pode alterar. Se você tiver uma lista, você pode facilmente alterar a quantidade de espaço entre cada um. Esta é uma ferramenta muito útil também. Isso mostra como diferentes elementos que são definidos para redimensionar com as opções de redimensionamento. Então, se clicarmos em cada um deles, podemos realmente ver como o redimensionamento é ajustado para definir dois. Então, para estes verticais, estes preenchem verticais. Eles irão preencher todo o recipiente verticalmente. Este horizontal. Ele abraçará o recipiente horizontalmente, mas manterá essa quantidade de espaço. Então 32 pixels de preenchimento é muito, vai ficar consistente ano. E como isso parece que podemos redimensionar. E isso continua a se adaptar ao seu redimensionamento horizontal. E então, se redimensionarmos verticalmente, esses componentes verticais também adotarão. Então isso é realmente útil se você estiver trabalhando com quadros que estão segurando. Por exemplo, aqui, este é um ótimo exemplo. Essas mensagens de mídia social, eu estou segurando a opção e você pode realmente redimensionar ao mesmo tempo ambas as extremidades do quadro em que você está trabalhando. Ao invés de manter pressionada a opção do mouse, você pode fazer dois ao mesmo tempo. Então esse é um ótimo exemplo de onde o redimensionamento entra em jogo. Porque, como se eu desativasse Auto Layout, Auto-layout fora disso, ele não responde mais. Não está redimensionando dinamicamente. Este é um recurso mais recente que é realmente ótimo se você estiver trabalhando com componentes que você deseja ser responsivo, mas tem vários elementos dentro dele. E você quer dizer que essas peças respondem dinamicamente à largura do recipiente. Aqui está um exemplo do layout de distribuição do pacto. Então, basicamente você iria aqui e ele está mostrando embalado ou espaço entre embalado significa que eles permanecem embalados juntos como você expande a largura. Ou queríamos aquele espaço vertical entre se fôssemos mudar. Então, se você viu isso adotar essa mudança quando nós mudamos isso para embalar, espaço entre basicamente significa que você não precisa se
preocupar com o espaço entre o tempo que você tem seu conjunto de preenchimento. Então temos 16 pixels de preenchimento por toda parte. E então, à medida que esticarmos isso, esses elementos responderão. Os gatos gatinhos super fofos responderão. E então eles manterão a distância igual e limpa. E os 16 pixels de preenchimento nas laterais. O recurso de alinhamento
permitirá que você ajuste onde os elementos dentro de um recipiente ou flutuante. Uma peça incrível de magma que permite uma entrega realmente fácil para os desenvolvedores. É assim que interajo com meus colegas de equipe de desenvolvimento. Minha mão fora diretamente na Figma. Esta ferramenta Inspect permite que os desenvolvedores realmente agarrem as especificações de seus elementos de design realmente facilmente. E isso mostra um ótimo exemplo disso. No painel Inspecionar, você pode ver todas
as diferentes especificações e propriedades deste quadro de arte aqui. Assim, quando você clica em itens diferentes, você pode realmente ver. Então, por exemplo, basta clicar aqui como mostra o código para este plano de fundo, por exemplo. Mas se clicarmos aqui, podemos ver todas as propriedades neste quadro. E é muito fácil para seus desenvolvedores entrar e pegar essas especificações. Mas estamos no final aqui e temos esse pequeno desafio divertido com mais gás vertiginoso. Se formos nossas habilidades. Basicamente, o que estou pedindo é para interagir com este layout aqui. Então nossa primeira tarefa é,
se você clicar em uma imagem no Figma, você pode realmente selecionar imagens diretamente, conjunto de
silício de clicar e um monte de componentes aninhados. Se eu estiver passando o mouse sobre isso e eu clicar ou manter pressionado o Comando C, a imagem acabou de ser realçada. Em seguida, posso selecioná-lo automaticamente sem ter que clicar. Você deseja iniciar um componentes aninhados. Então, se fizermos o Comando D que, na verdade, apenas duplicou nossa imagem. Podemos layout automático habilitado. Podemos adicioná-lo aos terceiros posts e ver onde está colocado e adicioná-lo lá. Então ele nos pede para mover o quarto post para o topo. Então, vemos apenas três, mas com o layout automático habilitado, podemos expandir como vemos o quarto. Nós clicamos em todo esse componente. Então, esta peça de cartão de grupos aqui, vamos voltar para o topo. Agora podemos redimensionar nosso layout novamente, voltar para baixo. Agora ele está nos pedindo para mudar a largura do quadro do iPhone 11 para 750 pixels. Então, se clicarmos e depois clicar novamente, selecionamos o quadro inteiro. Então, se mudarmos a largura para 700150 pixels, tudo se estendeu. Então agora ele está nos pedindo para mudar a distribuição das linhas de estatísticas. Então, essas estatísticas de mídia social aqui, queremos selecioná-las. E então, se mudarmos isso para embalar, agora podemos ver toda a lista de funcionários. Então, sim, dê uma chance. É realmente fácil, guia direto. E então vamos falar sobre alguns outros comandos e atalhos de palavras-chave incríveis.
4. Atalhos básicos básicos essenciais: Então agora vamos falar sobre atalhos de teclado no Figma. Se você entrar em uma ilha de design, Figma, eu vou estar cobrindo atalhos de teclado do Mac porque é isso que eu uso. Você pode usar o Figma em um PC com Windows. Mas se você entrar no Figma e em um arquivo e clicar em Ajuda e Recursos no canto inferior direito, você pode realmente ir para o menu de atalhos de teclado. E todos eles estarão disponíveis para você e eles devem atualizar para irrelevantes para o seu sistema. Então, os atalhos de teclado essenciais que temos que realmente vai
acelerar o seu fluxo de trabalho e ser realmente útil em uma variedade de situações que este eu uso o tempo todo como
a barra invertida comando e que permite que você oculte os painéis de interface do usuário . Eu uso isso muito quando eu estou andando através de projetos com meus companheiros de equipe só porque ele permite que a tela não seja tão desordenada quando eu não estou trabalhando. Escolha a cor. Então este é o controle C. E o que isso faz é que agora temos a ferramenta conta-gotas. E se eu selecionar outro elemento, esta caixa cinza aqui, e eu fizer Controle C, eu posso mudar isso muito mais rápido do que ter que ir e manualmente e selecionar o ícone hexadecimal e mudar que o que a barra lateral, é muito mais rápido. E o, se houver algo que você deseja procurar, um menu ou um comando que já plugin, que vamos falar sobre plugins. Plugins também são ótimos para economizar tempo. Você pode pressionar a barra de comando, e isso permitirá que você veja diferentes itens do sistema ou plugins que você baixou que você pode acessar com mais facilidade.
5. Atalho de teclado profundo em disco: Essas ferramentas são bastante simples, delineadas em muitos desses elementos aqui. Então, se você brincar com esses elementos, as principais ferramentas de design na parte superior, na barra lateral superior. Você pode facilmente começar a ficar pendurado para esses atalhos mais desconhecidos que podem realmente ajudar a acelerar seu fluxo de trabalho. Se você quiser mudar entre os painéis aqui que você vê, pode ser um pouco demorado
descobrir onde você está tentando ir com os botões dispostos aqui. Existem atalhos de teclado que permitem alternar rapidamente entre eles. Então, se você quiser, se estivermos em ativos, se você estiver em um diferente, digamos que o painel Ativos ou os componentes do sistema de design estejam ativos e quiser navegar até o painel Camadas, pressione a Opção 1. E então você pode alternar facilmente de volta para o painel Ativos com a opção dois e o painel de design no lado direito. Aqui, essa é a opção a. E então o painel de prototipagem, que é onde você usaria para criar protótipos interativos. Ele pode realmente
unir peças em Figma e ter protótipos de vida junto com os desenhos, especificações, os componentes também. O painel protótipo é a opção nove. E se você inspecionar como desenvolvedor e quiser a opção de perspectiva da nuvem 0. Portanto, essas ferramentas podem ser realmente úteis se você estiver tentando navegar entre painéis rapidamente. Então nós temos algum texto realmente útil, atalhos de teclado. Este eu amo porque por um longo tempo eu não sabia que você poderia fazer listas e Figma. E eu pensei que era impossível. E eu estava tipo, “ O que você está brincando comigo, mas você não pode. Então, se você selecionar seus itens de lista, apenas essas linhas de texto, você pode pressionar Shift Command 7, 8, e você tem uma lista com marcadores. você também pode alterar rapidamente o alinhamento
desses itens com os comandos do teclado de alinhamento. Então, se você mais uma vez News opção comando e o, Eu acho que as letras correspondentes para cada alinhamento. Então, o Comando de Opção T os alinha ao centro. Opção Comando linhas L da esquerda, opção comando direita ou nossas linhas mem escrever uma opção Comando J alinha como justificado. Você também pode ajustar o tamanho da fonte, o peso da fonte, o espaçamento da fonte e a altura da linha. E você pode fazer isso usando os colchetes angulares. Assim, para o tamanho da fonte para esses itens da lista, se você pressionar o comando shift e, em seguida, o colchete angular esquerdo, encolhete, o colchete angular direito aumentará seu tamanho. E você pode ver que tamanho é esse aqui. E também podemos ajustar o peso da fonte fazendo Option Command, colchete angular. Mais cedo, aguarde a pasta esquerda para a direita, até que você tenha a quantidade máxima para essa fonte específica. O espaçamento entre letras é apenas a tecla de comando e os colchetes angulares dependendo de qual você usa. E, em seguida, a altura da linha é Shift Opção. E, em seguida, os suportes angulares. Mais uma vez, vamos ajustar a altura da linha. Então, há momentos em que você pode trabalhar com imagens e Figma. E há algumas transformações incríveis como atalhos que podemos usar ao trabalhar com imagens. Ou estes também se aplicam a outros elementos. Mas se você quiser inverter o alinhamento ou a direção desta imagem, por exemplo, se usarmos Shift H, podemos mudar a direção horizontal. Shift B irá girá-lo verticalmente. A ferramenta de corte, você realmente tem alguns recursos para editar uma imagem no Figma. Se ele pressionar Enter essa opção, vamos subir aqui. E você pode realmente cortar e alterar a exibição desta imagem aqui. Então, se você brincar com isso, você pode aprender e ver como eles mudam. Ver. Mas a ferramenta de corte, você pode mudar. Quanto disso você não é mostrado. Se você pressionar Shift que manterá as dimensões como a última palavra. E você também pode facilmente, se você pressionar Play, você também tem todos esses recursos para alterar a aparência real da imagem com essas alavancas de ajuste, você pode facilmente substituir a imagem clicando em Escolher. Imagine. Você poderá selecionar e carregar uma nova imagem do seu dispositivo. Se você pressionar Escape e, em seguida, apenas ver o surgimento como normal, você pode realmente facilmente alterar a opacidade de qualquer elemento gráfico. Como, vamos selecionar esses itens também. Se pressionarmos um, muda a opacidade para 10. Se pressionarmos F5, ele muda em 250, e se pressionarmos 100, ele muda para 100. Portanto, há algumas opções aqui se você está querendo mudar a opacidade. Digamos que estávamos trabalhando com isso. Imagine que queríamos isso para mim como uma imagem de herói de um site que estamos construindo. E então queríamos criar como uma sobreposição. E se quiséssemos clicar na sobreposição superior lá, você pressiona F5 e, em seguida, recorrente. E sobre ou algo assim, por exemplo. E se você entender o que estou dizendo, mas se apenas usando as teclas numéricas, você pode facilmente mudar essa opacidade. Então, se você estava trabalhando com sobreposições, essa é uma ferramenta realmente útil nesses casos. Os atalhos de teclado organizados são realmente úteis porque, caso contrário, se você quiser reorganizar suas camadas, você terá que ir manualmente para o item de menu Objeto aqui
e, em seguida, rolar para baixo para estes, esta lista de comandos. E é muito mais rápido para palavra-chave de usuário. Então, se ampliarmos e selecionarmos esse cara roxo aqui, e então queremos enviar a camada atrás dessa forma rosa maior aqui. Podemos pressionar o comando do colchete esquerdo, e isso vai enviar, agora, está escondido atrás deste quadrado rosa. E então se quisermos trazê-lo de volta, podemos pressionar Comando, colchete
direito se isso trouxer. Então isso traz a camada, apenas uma camada para frente ou para trás. E matiz. Veja sobre este painel aqui, no painel de camadas, você pode realmente assistir como se eu enviasse para trás, você pode vê-lo, basta navegar pelas camadas uma por uma. E então, se quisermos trazê-lo de volta, teríamos que pressionar todas essas vezes para dentro se quiséssemos
enviar a camada para a parte de trás o mais possível, em um clique nós apenas pressionaríamos os suportes laterais. Então eu só cliquei na tecla do colchete esquerdo. Se eu quisesse trazê-lo de volta ao topo, ouvi pressionar a direita. Agora, se eu mover esta camada para fora deste quadro, então ela desaparece e não é realmente visível mesmo que esteja no topo, ele está agora no topo de outro quadro. Então eu não vou ser capaz de vê-lo porque mesmo que eu estou pressionando para trazer para o topo o colchete direito do lado direito. Está na moldura errada. Assim que eu, se eu clicar em Comando Z, que é desfazer, ele fica visível Novamente porque está no quadro correto. Então isso é algo a ter em mente. Alguns acham que as camadas da orelha estão desaparecendo. Agora alguns atalhos de alinhamento que você pode usar. Se você usar as opções a e D, você pode alinhar à esquerda ou à direita muito facilmente com elas. E se você tiver a opção W ou S, você pode facilmente alterar o alinhamento superior e inferior. Alinhar centros é o alinhamento vertical ou horizontal. Então, se você opção H, ela irá alinhar horizontalmente a camada no centro. Se a opção B, ela será alinhada verticalmente no centro do quadro da prancheta ou do quadro no qual está localizada. E o Distribuir Espaçamento, se duplicarmos este retângulo aqui, podemos distribuir o espaçamento. Na verdade, precisamos dele. O que mais? Você deseja distribuir o espaçamento uniformemente entre um número de elementos. Você controlaria a opção H ou a opção de controle B. E isso irá alinhar esses itens cer, uma característica arrumada. Você também pode encontrar isso. Aqui, e você tem algumas opções lá. Mas se você quiser utilizar o atalho de teclado para
isso, é apenas a tecla Control Option e você pode tipo de ver como ele levou vários itens e apenas limpou a maneira como eles foram alinhados e torná-lo em uma lista organizada ou um arranjo organizado de elementos ao
invés de tê-los um pouco fora em sua organização. E de volta ao layout automático se quisermos adicionar o layout automático, mais
uma vez, esse comando de teclado é Shift a. E então isso apenas adicionou automaticamente o layout automático a esses componentes. E se quiséssemos removê-lo por qualquer motivo, seria Opção Shift a. Agora, não é mais um layout automático. A última coisa que vamos passar como a criação de componentes com atalhos de teclado, componentes vão fazer a maior parte de sua biblioteca de design em seu sistema de design. E da forma como estes são apresentados agora, estes não são componentes exceto a ONU. Você vê estes mostram roxo, os contornos que indicam que estes são um componente. E você pode ver aqui que este é um filho direto de um componente mestre. Então, se vamos clicar no componente mestre campo formulário, podemos realmente ver nossa lista de componentes de design e basicamente, a biblioteca de design muitos que compõe este arquivo de design. Então, por exemplo, se mudarmos um desses componentes, como Vamos mudar a cor do rótulo para ler. Veremos que a atualização ocorrer em
todo o lugar em que o rótulo no componente de entrada de texto titular lugar é usado. Veremos essa mudança ao longo do tempo. Então isso é apenas para enfatizar o quão importante é usar componentes em seu sistema dieline porque você odiaria
ter que mudar cada componente de entrada manualmente e criar um componente. Então, se quiséssemos fazer todo esse topo, esses três principais elementos ou componentes, ou apenas pressionar Option Command K. E agora isso está mostrando que ele é um componente. E gostaríamos apenas de pegar esse componente mestre e colocá-lo dentro do nosso sistema de design aqui na página de componentes, de modo que seja organizado. E depois podemos tirar uma cópia. Podemos tirar uma cópia daqui pressionando o Comando C, o atalho de teclado. Ou podemos realmente entrar em nosso painel de ativos e então podemos ver esse novo componente. É o mesmo. Então, se voltarmos e encontrarmos esse componente, podemos arrastá-lo e utilizá-lo aqui. E então agora vemos que este é um componente filho do componente mestre que acabamos de criar. Se você quiser separar isso como um componente para que você possa torná-lo um componente diferente que pode ser um estilo semelhante, mas talvez você precise criar um novo componente que utilize isso, alguns elementos de design diferentes. Você pode pressionar Option Command B, e isso irá transformar isso de volta em um contorno azul, que indica que ele não faz mais parte
do sistema de componentes que estávamos usando. Outra coisa, se você não quiser ter que ir manualmente para o painel de ativos. Você pode pressionar o comando de teclado Shift I e você pode obter apenas uma lista realmente útil de seus componentes que estão usando dentro de sua biblioteca de ativos e agarrá-los facilmente dessa maneira.
6. Componentes de Renaming em massa: Outro atalho que eu uso frequentemente como o recurso de renomeação em massa. Então, se você quiser, Digamos que temos quatro quadros, ou quadro 2, 3, 4, 5. E selecionamos todos os quadros. Podemos, podemos pressionar o Comando R, o comando RT, atalho, e então podemos renomeá-los para, digamos, arredondados senhor, golos. E podemos adicionar até mesmo um número, ascendente ou descendente. Então agora temos círculos arredondados, 1, 2, 3, 4. Então nós simplesmente renomeamos todos esses componentes sem ter que fazê-lo um por um. Você também pode, se
quiser selecionar um determinado número de componentes dentro de uma área geral, manter Command, Shift e arrastar. E, em seguida, que irá selecionar todos estes ou apenas, você pode clicar neles também. Então, se nós só quiséssemos renomear aqueles que eu acabei de clicar, então você pode fazer isso e, em seguida, pressionar a tecla Command R novamente. E então podemos adicionar a sequência numérica. E então ele só levou todos esses. Está fora de linha porque nós selecionamos aleatoriamente os elementos. Mas agora temos abc 1, 2, 3, 4, 5, 6. Portanto, é muito fácil renomear componentes rapidamente superam, em vez de tentar fazê-lo manualmente e número de seqüência ou triste ou algo assim, é muito mais rápido fazer isso.
7. Dica da ferramenta nudge: Vou falar sobre a ferramenta Nudge muito rapidamente. Então, se você já trabalhou em Figma e você, você usa suas teclas de seta, você pode empurrar um elemento por um pixel. E se você segurar Shift, você pode empurrá-lo por 10. Mas se você entrar no item de menu superior esquerdo aqui e com o logotipo, você pode ir para Preferências. E então, na parte inferior das preferências, você pode definir seu empurrá-lo para fora. Então, se você quisesse mover seu, seu grande empurrão em vez de dez, você poderia atualizar isso. E agora ele está movendo 120 pixels com o atalho de teclado correspondente que estou pressionando. E enquanto mantém o turno em uma direção que eu gostaria que ele fosse. Então eu acho que 10 funciona muito bem na maior parte. Mas se houvesse alguma razão para você querer mudar isso, é assim
que você pode fazê-lo.
8. Plugins Figma: Ok, Agora vamos falar sobre plugins que são incríveis. Há tantos plugins incríveis e Figma, se você vai para a seção da comunidade e você está indo para realmente encontrar tantos recursos. Então você pode encontrar o que é tendência. Você pode encontrar plugins. Thick jam é uma ferramenta de whiteboard online mais recente, que é muito divertido se você trabalha nesse ambiente remoto virtual, que muitos de nós fazem agora, você pode usar esses modelos para discutir juntos para fazer compras de trabalho com os clientes. É incrível. Você tem acesso a sistemas de design de melhores práticas. Figma fornece wireframes, ilustrações,
ícones, tipografia, design móvel, kits de interface do usuário
web design, qualquer
coisa que você poderia pensar como um tipo de Starter Kit ou modelo. Você tem acesso a tantos modelos projetados profissionalmente para
brincar com ou para construir ou, claro,
você sabe, nós não estamos copiando ou roubando o trabalho de ninguém, mas esses são alguns recursos úteis. E muitas vezes,
se eles são livres de royalties ou livres para usar ou licenciamento Creative Commons e você não precisa se preocupar com direitos autorais, então eles vão listar e eles vão dizer isso. Muitos desses são ferramentas de marketing, então eles podem desligar, ter um link que irá levá-lo para fora efedra para comprar um kit de wireframe inteiro, por exemplo. Mas de qualquer maneira, super ótimo para obter inspiração. E com plugins, há tantos milhares de plug-ins que são feitos para Figma que vai acelerar seu fluxo de trabalho e tornar sua vida mais fácil. Um que eu uso muito é criar muitos fluxos de usuários e meu trabalho. Então, se você clicar em um desses testes,
essas são palavras e clique em Shift ou mantenha a tecla Shift pressionada e clique no item Avançar. Você só vê que a seta é preenchida automaticamente para se conectar a esse fluxo. E você pode selecionar os elementos individuais, eu vou ligá-los juntos também. Então, se você estiver vinculando wireframes ou elementos para mostrar como é um fluxo de usuário. Isto é tão fácil. Você pode facilmente mudar a cor. Você pode alterar os terminais das setas para um estilo diferente. E você também pode, isso é dinâmico,
por isso, se você
arrastá-lo, ele irá mudar automaticamente o comprimento das setas para você. Outro plug-in que eu uso muitas vezes é o plugin Unsplash. Isso é muito útil se você criar, especialmente se você estiver recebendo as maquetes de alta fidelidade. Se você criar, se você precisava criar um perfil de usuário, por exemplo, e tiver esse círculo, tenha uma imagem de usuário no círculo. Se escrevemos em jovens adultos, podemos obter esta lista incrível ou esta incrível seleção de imagens do Unsplash, que são todas livres para usar, imagens
livres de royalties que os fotógrafos carregam conscientemente para permitir que as pessoas usar o seu trabalho sem direitos comerciais. Então você é capaz de
usá-los para direitos comerciais sem se preocupar com o problema de copywriting. Então, se selecionarmos essa imagem da maneira que ela está programada, ela sabe escalar isso para detectar qual o ponto focal da imagem. Assim, você ainda pode alterar o ponto focal, se você quiser ajustar isso clicando na seção de preenchimento e clicando na imagem e, em seguida, escolhendo cortar. Pode ajustar isso aqui. Então você pode, se você quiser que ele seja mais focado no rosto dela, você pode fazê-lo com essa ferramenta também. Outro plugin que é realmente útil se você usar a visualização de dados em tudo em seu trabalho muito. Depois, há ferramentas ou você pode inserir seus dados. E você pode ter automaticamente um gráfico de linhas, gráfico dispersão, pi de área de barras ou gráfico de donut criado para você sem ter que
construir manualmente um ou por um kit de interface do usuário com visualização de dados, se você está apenas procurando um tipo de gráfico, você pode inserir seus dados e automaticamente nele. E você pode ajustar isso conforme necessário para se adequar aos seus designs. Então esse último foi chamado de gráficos. Este plug-in para gráficos é chamado gráfico. Mas você pode ver todas as opções diferentes aqui. Este é realmente oferece uma versão pro, mas você pode usar dados aleatórios. Você pode importar uma tabela ou usar um arquivo JSON. Então isso é realmente incrível se você tem esses recursos disponíveis para inserir os dados. E então ele irá desenhar automaticamente um gráfico para você. Então, se selecionarmos este elemento aqui, e então vamos para nossos plugins e clique em gradientes de interface do usuário. Temos acesso a uma tonelada de gradientes pré-criados. E bons gradientes são, na verdade, uma espécie de habilidade. Você não quer que seja muito duro ou a transição para mim. Não é natural. Então, esta é uma ótima opção se você quiser apenas uma boa seleção de. Realmente belas pontas dos dedos de sidra gradiente sem ter que pensar muito
sobre isso ou gastar muito tempo recriando-os. Mais um plugin que eu vou passar sobre a opção para plugins é plugins de biblioteca de ícones. Então ícones Material Design. Material Design é o sistema de design e a diretriz de práticas recomendadas do Google. E eles têm apenas um enorme conjunto de ícones pré-fabricados. Você pode usar. Muitas pessoas gostam de projetar seus próprios ícones. Faço muito trabalho onde a interface não precisa ser criativa. Ele precisa ter uma interface mais profissional ou familiar. Então eu gosto de usar ícones pré-fabricados porque economiza muito tempo e design de material. Se você usar uma biblioteca de componentes para seu desenvolvimento que utilize as melhores práticas de design de material e sua diretriz de design. Então é realmente fácil nomear os componentes em seu sistema de design para corresponder a eles. Nas especificações do desenvolvedor em seus desenvolvedores saberão exatamente quais ícones usar e eles podem pegar as especificações para saber a cor,
o tamanho e, em seguida, o nome. Contanto que seja consistente com o bibliotecário, ícones Material Design, então será muito fácil de transferir, mas você pode simplesmente selecionar todos estes. E material. O design é de código aberto. Oh, isso é ótimo, e você não precisa se preocupar com isso. Quanto aos direitos autorais e coisas assim. Estamos tendo uma licença comercial. E há outras opções também. Há ícones simplificados é uma biblioteca de ícones enorme. E eles realmente têm uma opção pro para obter acesso ao arquivo SVG. Então, se ele carrega, mas eles têm uma enorme quantidade de categorias e sua biblioteca de ícones. Então você tem todas essas opções diferentes e é realmente fácil de navegar e classificar. Como se você, quero dizer, eles têm uma categoria de decoração de móveis, eles têm uma categoria para tudo. Então, eles são realmente elegantes e simplesmente muito legal e há tantas opções para escolher. Mas se você quiser um pouco mais de uma tendência próxima ou atualizada, eu acho. Tipo de conjunto único de ícones que eu acho que agilizar tem uma grande variedade. Você pode ter que, vale a pena se você estiver indo para usá-lo muito, É definitivamente vale a pena, mas você terá que pagar para obter esse acesso como um usuário premium. E você também precisa olhar para fora qual licença comercial você está usando e o número de usuários que você pode ter um pedido para usá-lo comercialmente. Então isso é algo para pensar também. Mas utilizar uma biblioteca de ícones como esta irá poupar-lhe uma tonelada de tempo e é divertido ir através e escolher estes ícones para fora. E então você pode realmente começar a pegar esses ícones aqui e criar esses componentes. E pesos aqui para começar a construir em cima do seu ícone Bibliotecário, seu sistema de design. E realmente facilmente alternar para frente e para trás entre componentes linhas. E a maneira como você alternar entre componentes. Mais um atalho rápido é se criarmos um componente mestre deste. E então se fizermos isso para este, este, se duplicarmos todos esses, agora
temos esses componentes filhos. E podemos facilmente alternar entre a instância desses componentes. Então aqui diz a ocorrência do ícone porque home solid, nós realmente vemos nossa lista de ícones que acabamos de criar, esses componentes filhos aparecendo neste seletor de instância. E podemos facilmente alterar qual instância selecionamos. Portanto, isso é extremamente útil. É bom certificar-se de que as convenções de nomenclatura são consistentes porque você está nomeando convenções enquanto determina como elas serão exibidas neste seletor de instância de troca. Então isso é algo a ter em mente também.
9. Seu projeto: Comunidade Figma: Tudo bem. Nós passamos por muitos atalhos hoje e muitos hacks de produtividade agora podemos começar o seu projeto de classe. Eu gostaria que você navegue até a seção da comunidade e Figma e encontre um modelo de kit de interface do usuário que você gostaria de jogar e vá em frente e baixe um. Então eu duplicei o kit de mesa de layout automático. Então este é um layout get que
permite que você crie tabelas dinâmicas responsivas realmente rapidamente. Há um monte destes disponíveis na seção da comunidade
Figma e download ou duplet kit de recursos. Então, se clicar em duplicar, ele vai criar um novo projeto para mim que é minha própria cópia e eu posso editar e mudar como eu quiser. E assim eles têm dicas e truques página aqui que mostra como usar o kit. Você pode trocar variância, você pode personalizar tudo com componentes para atender às necessidades da tabela que você está projetando. E aqui você tem seus têxteis, seu sistema de cores. Então, todos esses, você pode realmente encontrar esse sistema de cores aqui também nos estilos de cores. Então, isso permite que você altere dinamicamente esses. Se você seguir em frente e clicar em uma cor, você pode realmente editar essa cor em seu sistema de cores e ela vai mudar ao longo. E, em seguida, eles têm seus componentes básicos de interface do usuário que você pode alterar o estilo de. Estes são menos sobre ele também. E selecione um botão. E agora todos os botões de texto estão nesta cor cercada em vez do azul real. Então, há tanta coisa que você pode fazer nos recursos disponíveis na comunidade para Figma, Eu adoraria se você baixasse um kit de interface que fala com você. Há muitos divertidos. E se você começou a brincar com isso e criar algo, apenas criar algo e eu ler, tentar utilizar todos os atalhos que aprendemos. Se você quiser utilizar um kit de sistema de design e apenas tentando criar sua primeira página de destino. E você está, se você tem um projeto em que está trabalhando, mas você quer tentar aplicar alguns dos atalhos ou hacks de produtividade. Você carrega uma captura de tela e compartilha qual hack de produtividade ou um atalho que você aprende com este conjunto vai realmente ajudá-lo e
você está avançando como designer.
10. Obrigada!: Ei, bom trabalho completando este curso sobre dicas e truques de produtividade Figma. Estou muito feliz que você esteja investido em seu crescimento profissional e seu crescimento pessoal, melhorando seu fluxo de trabalho diário e investindo em sua educação, educação
contínua ou apenas aprendendo uma nova habilidade que você tem interessado em. E espero vê-lo nos meus próximos cursos. Por favor, inscreva-se e siga-me e você ficará atualizado sobre o próximo conteúdo que eu lançar. E se você tiver alguma entrada ou feedback sobre os tipos de conteúdo em torno do design e da indústria de design que você gostaria de saber mais sobre. Por favor, deixe-me saber, me
dê alguns comentários e eu posso tentar atender alguns cursos para o que está sendo solicitado. Obrigado mais uma vez.
Sarah Bannister, UX/UI Designer | Dog Enthusiast
