Aprenda design: uma introdução à Figma

1. Introdução: Oi. Bem-vindo ao curso de introdução Two Sigma. E neste curso vamos aprender algumas das noções básicas de design usando o software baseado em nuvem gratuito chamado Figment. Meu nome é Nina. Tommy, sou seu instrutor para este curso. Sou designer há mais de 10 anos, trabalhando em vários projetos, tanto móveis como web para clientes e starups que trabalharam para saber se você está interessado em aprender design. E esta é sua primeira vez projetando ou você está projetando há algum tempo. E agora você quer aprender figo, MMA, este curso é exatamente para você. Neste curso, vamos aprender por que inventas uma ferramenta tão poderosa e como pode ajudar você e seus projetos de design . Vamos em frente e começar com isso. Ao enviar, vamos passar por algumas das barras de ferramentas às quais você tem acesso e as propriedades, painéis e painéis de camadas onde você pode organizar seu projeto. Então vamos passar para realmente usar algumas de nossas ferramentas moldadas para criar formas. Um Zwolle aprendeu a manipular e combinar formas juntas também. Então, se você está pronto para começar a aprender sigma, em seguida, saltar para a direita e eu vou vê-lo neste curso 2. O que é Figma?: Então, o que é estigma? Finger é um software de design baseado na Web que super fácil de usar. É totalmente gratuito de uso, e é ótimo para equipes e colaborações de tudo, desde poder trabalhar juntos no mesmo ambiente, como o Google Sheets e Google dogs até poder deixar comentários para seus colegas, hum, ou até mesmo entrar e ver no que eles estão trabalhando. Então, uma vez que você tenha um projeto de design acabado, é super fácil vê-lo ao vivo em ação. Seja no seu dispositivo móvel, seu dispositivo Web, e é super fácil de compartilhar com os clientes e realmente fazê-los entrar e experimentá-lo também . E, novamente, é baseado em nuvem. Portanto, você não precisa se preocupar em salvar seu projeto constantemente ou instalar outro software porque você tem fácil acesso a ele na Web do seu navegador favorito. Então você realmente começa com Sigma. Você só vai para descobrir ponto com na próxima lição, nós vamos passar por se inscrever para 3. Assinatura: para colocar Sigma cabeça em cima para figg meu ponto com. E se você já tiver alguma contagem, você pode realmente fazer login a partir daqui. Se você não fizer isso, você pode realmente ir em frente e se inscrever a partir daqui. Vá em frente, preencha as informações da sua conta e clique em criar contas que vão perguntar qual é o seu nome e que tipo de trabalho você faz? Então, vamos escolher design e, em seguida, criar contas para que possa levar algum tempo para chegar a esta página, então apenas dê algum tempo. Mas uma vez que você está aqui, esta é essencialmente apenas uma página de boas-vindas. Se você quiser iniciar um projeto com a equipe, é aqui que você pode realmente dar um nome à sua equipe. Se não, você pode realmente ir à mão e clicar. Faça isso mais tarde, que é o que vamos fazer. Legal. Não vai te dar um tutorial rápido de todo o mapa da figa, mas nós vamos realmente rever esta turnê nós mesmos na próxima lição. Por enquanto, vou fechar, mas sinta-se à vontade para passar por isso também, se quiser. Então agora estamos inscritos para o MMA de figo, e estamos prontos para aprender o básico 4. Noções básicas: Então, uma vez que nos inscrevemos para figo MMA ele. Nós já nos colocamos em um arquivo iniciado aqui, mas vamos realmente voltar para a página principal do músculo de figo. Podemos rever o básico e então vamos em frente e criar um novo projeto também. Então vamos subir aqui. Aqui é onde você vê sua opção de menu. Vá em frente e pressione-o e, em seguida, vá em frente e clique na primeira opção de volta aos arquivos. Legal. Então isso vai nos levar para a página principal de Sigma. Hum, eu vejo aqui, ele me deu um tutorial que se você já tem um arquivo de esboço que você pode realmente importar partir daqui, hum, este é um dos recursos super legais que vai cobrir em uma lição futura. Por enquanto, vou em frente e fechar a janela aqui, mas sinta medo de passar por aquele pequeno tutorial na página principal também. Vamos rever as mesmas coisas aqui também. Então as primeiras coisas primeiro no lado esquerdo. Aqui, você verá seu nome aqui em cima, suas informações de conta para que você possa realmente entrar aqui e alterar sua conta. E quatro, se você quiser, há uma pequena barra de pesquisa aqui onde você pode procurar por projetos que você criou. Você verá o seu recente seguido aqui, onde você pode navegar por todos os arquivos que você começou. Uh, plugins é algo super legal que vai passar em uma lição futura também. Essencialmente ajuda a tornar seu processo de design mais fácil. Há rascunhos, que é essencialmente onde você pode começar um novo projeto daqui e abaixo. É a tua equipa. Então, se você está trabalhando com uma equipe ou várias equipes ou vários clientes, você pode definitivamente começar equipes e você verá todas as suas equipes listadas, bem como os projetos que você tem para eles aqui. Inicialmente, você pode notar que a FIG deve criar uma equipe para você. Ah, com o primeiro projeto, que foi onde começamos. Você pode começar novas equipes a partir daqui, e nós estaremos fazendo isso também em seções futuras, apenas para ver como você pode realmente trabalhar com equipes em figo MMA no lado direito. Aqui você tem o botão de importação, que ajuda você a trazer novamente arquivos como PNG J Peg e até mesmo arquivos de esboço que você já trabalhou antes para Fichman realmente convertido em um arquivo de figment. A partir daqui, você pode criar um novo arquivo de figment, que é onde você pode realmente começar a projetar seus projetos. Claro que sim. No centro aqui temos todas as palavras iniciadas arquivos figg minha ala para dar-lhe alguns arquivos para revisar o básico prototipagem e enquadramento de fio. Você é mais do que bem-vindo para passar por isso, mas ao longo deste curso, vamos rever praticamente tudo o que você precisa saber sobre a invenção. Se alguma vez te encontrares preso em alguma coisa, tens sempre uma opção de ajuda aqui em baixo. recurso de Acela é que você pode se referir ao eso que inclui, você sabe, se eles são fóruns comunitários de centro de ajuda, tutoriais e mesmo se você quiser passar pelo tutorial no início, você sempre pode fazer isso clicando em redefinir ao embarcar. Tenha em mente, você sempre tem a opção de enviar a pergunta também para mim Ah, onde eu ou um dos outros alunos irá ajudá-lo também. Então vamos fazer uma pausa muito rápida aqui, e na próxima lição, vamos realmente começar nosso primeiro projeto e entrar em mais detalhes. Lá 5. Criando novos arquivos: há algumas maneiras de iniciar um novo arquivo. Você pode ir em frente e pressionar o ícone de adição aqui em seus rascunhos ou aqui em cima, ou se você quiser iniciar uma nova falha em um projeto específico. Você também pode fazer isso aqui. Mas para o propósito desta lição, vamos apenas criar um novo projeto em nossa pasta Rascunhos, que é essencialmente onde você vai criar a maioria de seus arquivos a partir de Vamos em frente e clique no ícone de adição aqui. E como você pode ver, estamos em um novo arquivo aqui e eu posso ver que este arquivo, chamado intitulado, pertence à pasta rascunho também. partir daqui, à esquerda, verá o nosso painel de camadas. Vamos ver nossa barra de ferramentas principal na parte superior, e vamos ver o painel de propriedades abaixo aqui na próxima seção irá passar por cima de cada opção que você tem em sua barra de ferramentas, bem como seu leer e painel Propriedades. Mas por enquanto, vamos em frente e na verdade Neymar arquivo simplesmente ir para aqui onde diz intitulado e clique sobre ele, e nós vamos apenas nomear este nosso primeiro arquivo pressione enter e aí você está. Você também tem acesso ao histórico de versões daqui à medida que fazemos alterações em nosso arquivo, figment manterá várias versões para nós no caso de cometermos um erro ou no caso precisarmos voltar e ver o que fizemos antes. Vamos rever isso em detalhes nas próximas seções. Tenha em mente que, à medida que você fizer alterações, fig mo salvará automaticamente seu trabalho. E então não há realmente necessidade de pressionar salvar. E se você tentar fazer isso, ele só mencionará esse número. Na verdade, auto salva seu trabalho, Então isso é muito legal e muito útil. Eu quero rever algumas das opções de menu que você tem aqui, então nós clicamos neste ícone aqui. Você tem acesso às suas opções de menu. Já sabemos o que esse pessoal faz. Só nos levaria de volta à tela principal. Você pode procurar por coisas aqui, e você também pode criar novos arquivos a partir daqui. Coloque imagens. Você também pode salvar seu arquivo de figment em algum lugar em suas pastas em sua máquina local. Humanidade, guarde tudo até agora em uma história de versão que novamente vai passar por cima. Você pode exportar a partir daqui e adicionar um painel. Sim, acesso a algumas das opções comuns, como Undue Redux Copy Paste também estará usando muitas dessas ferramentas em nosso futuro. Lições de vista. Você tem acesso a pixel e grade de layout, que será usado em nossos projetos futuros. Você tem acesso a algumas de suas opções de zoom. Você pode escolher o que mostrar e ocultar em termos de painéis à esquerda e à direita. Vamos definitivamente passar por cima das outras opções à medida que começamos a projetar. Uma coisa que eu quero mencionar é que se você está mais confortável tendo figo MMA como um aplicativo de desktop, você também tem a opção aqui com Get that stop up. Isso já está instalado na minha máquina. Não vou salvá-lo, mas sinta-se à vontade para fazê-lo. Se você fizer isso, você deseja continuar na área de trabalho, que é o que eu vou fazer. Tenha em mente que quase tudo vai ser o mesmo entre o clima na área de trabalho cima. Então, se você quiser continuar no aplicativo Web, por todos os meios, você pode fazê-lo 6. Importação do esboço: Então, na última lição, eu mencionei que ele também pode importar arquivos do esboço. Isso é super útil no caso de você já ter iniciado um projeto com esboço que você deseja mover para figo MMA. Então, como um exemplo aqui eu tenho um arquivo de esboço que permite dizer, Agora eu quero passar para a fig mo. A maneira mais fácil de fazê-lo É um ir em frente e secar seu arquivo de esboço diretamente no aplicativo MMA figo . A partir daqui, ele começará a importar os arquivos, e isso pode levar algum tempo. Uma vez feito, você verá que diz Seguir importante com sucesso. Rápido feito. Eu posso ir em frente e clicar duas vezes para abri-lo. E como você pode ver, tudo parece muito bom aqui, exceto que há algumas fontes ausentes neste projeto. Então, para o seu projeto, você pode precisar ir em frente e renunciar alguns dos fundos ou baixá-los em sua máquina, e vamos ver como baixar fontes e fazê-los funcionar com o produto. Web up nas futuras lições também, se você esboçar antes você vai notar que muitos dos elementos foram convertidos em elementos MMA figo que é ótimo. Lembre-se de que é sempre melhor revisar suas placas de arte ou suas molduras para garantir que tudo foi importado com sucesso. 7. A barra de ferramentas principal: Então, nesta seção, vamos explorar as ferramentas que temos acesso na fig. MMA, se você ainda não fez isso da última seção, vá em frente e crie um novo arquivo. Mas indo para rascunho e pressionando este sinal de mais aqui. Se você continuar, vá em frente e abra seu primeiro arquivo que acabamos de criar na última seção. E esta lição vamos passar por tudo o que temos acesso aqui no topo ou na barra de ferramentas principal Sigma. A primeira coisa é a opção de menu que você tem acesso a partir daqui. Então aqui estou eu, executando o desktop de invenção. E como você deve notar, minhas muitas opções agora estão aparecendo aqui em vez de ir para a direita. Você tem a sua ferramenta mover também é que você clicar. Você tem acesso a uma escala para a ferramenta de movimentação é a ferramenta que você vai ser principalmente em como ele permite mover objetos ao redor e rapidamente redimensioná-los. A escala para, como o nome pode sugerir, é ótimo para redimensionar seus objetos. Em seguida, temos acesso a quadros. Os quadros são essencialmente o que nos ajuda a organizar nosso design e vamos revisá-lo e futuras lições ao lado dele. Temos formas. Assim, a partir daqui podemos criar formas como retângulos, linhas, setas Elegir diz estrela polígono, e podemos até colocar imagens daqui bem ao lado dela. Temos o lápis, que nos ajuda a criar formas mais personalizadas. Daqui. Você também tem acesso ao lápis para então temos texto para simplesmente um projeto de textura. Temos uma ferramenta manual que nos ajuda a percorrer o nosso projeto sem editar algo de forma excelente . Temos um banquinho comum. Assim, para trabalhar com várias pessoas é uma ótima maneira de se comunicar e deixar comentários para eles dentro de seus projetos, onde quer que você esteja e seu projeto, você sempre pode voltar para a ferramenta principal de movimento aqui pressionando escape em seu teclado ou V no meio. Aqui temos mais acesso às nossas opções de arquivo. Agora esses ícones de avatar representam pessoas dentro do meu projeto. Então este sou eu e, em seguida, os outros também eu porque eu tenho o projeto aberto em ambos desktop e web. Se eu for ao meu aplicativo da Web e fechá-lo, você verá que agora sou só eu aqui. Isso será mais útil quando você estiver trabalhando com equipes. Você também tem a opção de compartilhamento aqui, o que ajuda você a compartilhar seu arquivo com outras pessoas e conceder-lhes certas permissões. Vamos rever isso mais detalhadamente mais tarde. A última coisa que temos aqui presente. Então isso é ótimo quando estamos trabalhando com clientes ou você quer mostrar à nossa equipe o que construímos A última opção aqui. temos acesso ao zoom, Tambémtemos acesso ao zoom, o que ajuda a ampliar e reduzir nossos arquivos. O meio aqui é onde nossos campi. Então, todos os seus projetos vão para aqui, e na próxima lição vamos rever o nosso painel de propriedades. 8. Painel de propriedades: Então, na última lição aqui, passamos por cima de nossa barra de ferramentas principal, que vamos usar muito em nossos projetos no lado direito. Aqui, você notará que há o painel de propriedades. Então, agora, porque não temos nada selecionado em nossa tela, só podemos alterar a cor de fundo do nosso campus aqui. Eu vou ir em frente e desfazer isso pressionando Command Z, ou se você estiver em um PC, ele será o controle Z. Você também tem acesso a opções de exportação, que irá passar nas seções posteriores. Agora, este painel de propriedades mudará dependendo do que você selecionou em seu campus. Então, para o propósito desta lição, vamos em frente e criar um retângulo clicando no retângulo para aqui. Vamos em frente e desenhar um retângulo aqui. Como você pode ver, minhas opções no lado direito agora mudaram. Tenha acesso à posição do meu retângulo dentro do campus. Então esse é o X e o Y. Eu também posso ver a largura e a altura do meu retângulo aqui, e eu posso realmente mudá-lo daqui também. Mas ele está clicando nele e arrastando para a direita para aumentá-lo ou para a esquerda para diminuí-lo. Eu tenho acesso a opções de rotação aqui, e se você quiser especificar um número específico, você sempre pode pular aqui e colocar um número. Vou desfazer isso. E você também tem acesso ao ano do raio da fronteira, que muda a forma como os cantos dos retângulos estão aqui embaixo. Posso editar o preenchimento desses retângulos. Posso mudar a cor, se quiser. Posso adicionar um acidente vascular cerebral a ele, e posso aumentar o tamanho do acidente vascular cerebral aqui. Posso escolher se deve estar no centro, no interior do retângulo ou no exterior. Então vou deixar lá fora. Aqui em baixo, você tem acesso a alguns efeitos, como Sombra suspensa diz Você pode ver aqui que é adicionada uma pequena sombra sob um retângulo, que irá passar sobre como adicioná-lo mais tarde. Enviar opções de efeitos. Você tem acesso a mais efeitos que descobrirão mais tarde e, por fim, você pode exportar o retângulo aqui indo aqui e clicando em Exportar. O formato padrão é PNG, mas você pode ir em frente e alterá-lo. Jay Peak, SPG pdf aqui também. Vamos rever a exportação e mais detalhes mais tarde também. Agora vamos em frente e selecionar texto e ir em frente e basta clicar em sua tela aqui e está vestido apertado, algo aleatório. Vamos clicar de distância. Agora tenho uma mensagem aqui. Como você vê, você pode notar que agora minhas opções aqui mudaram, e eu ainda tenho acesso a minha posição e suspiros aqui. Mas agora, como você pode ver aqui em baixo, eu tenho uma opção de texto onde eu posso definir a fonte do meu texto. Posso mudar o peso da fonte, torná-la negrito ou torná-la. Então eu posso mudar o tamanho da fonte a partir daqui, bem algumas opções de texto mais detalhadas aqui, que vamos passar em futuras lições. 9. O painel de camadas: Então agora vamos explorar o painel de camadas à esquerda aqui. Você vai usar muito este painel porque ele armazena todos os seus elementos em seu projeto. Diz que pode ver que posso aceder a este texto daqui e às minhas camadas. Eu tenho acesso a este retângulo aqui. Se eu seguir em frente e segurar Ault, eu posso realmente ir em frente e arrastar para longe outro retângulo e realmente duplicar isso a partir daqui e agora eu tenho dois retângulos. Como você pode ver, uma coisa a observar aqui é que quando seu objeto no painel de letras é maior do que outro objeto, ele será apresentado em cima desse objeto. Então, isso cria uma hierarquia de exibição. Então, só para mostrar um exemplo, eu vou para este segundo retângulo aqui, mudar o preenchimento para azul. E agora, se eu for em frente e colocar isso aqui, você vai notar que ele vai para cima do retângulo vermelho aqui porque este está no topo do painel de camadas. Se eu mover para baixo agora, você vê que o ângulo direito vermelho vai para cima do azul. Se eu fizer a mesma coisa com o meu texto aqui, traga-o aqui. Não perceba que agora está no topo do retângulo vermelho porque está no topo das camadas. Se eu mover todo o caminho para baixo, ou mesmo apenas um para baixo será bloqueado pelos outros objetos aqui. Você também tem acesso a recursos a partir daqui, mas vai passar em futuras lições. E você tem ISIS decretou várias páginas para o seu arquivo aqui também, que irá cobrir com mais detalhes também. 10. Frames: Então, o que é uma moldura? E figo? Os quadros MMA são essencialmente uma forma de nos ajudar a organizar nossos objetos dentro do nosso projeto. Então, se você tiver várias telas para, vejamos, um aplicativo móvel em que estamos trabalhando, cada quadro representará cada página dentro desse aplicativo. Então, se eu quiser colocar esses objetos em um quadro, eu posso fazê-lo subindo aqui. Onde está a moldura dele? Ou outra opção é pressionada a tecla F no teclado. E agora, se eu for em frente e drogar um quadro em torno desses objetos, ele criará um quadro que podemos ver tem esse fundo branco agora e agora. Esses objetos foram adicionados automaticamente ao meu quadro um. Então, para o primeiro quadro aqui, eu criei um quadro com um tamanho aleatório. Mas se você quiser obter algumas opções para alguns tamanhos para seus quadros, quando você ir em frente e criar um novo quadro ou pressionar F, você verá no painel direito das opções para tamanhos de telefone aqui, como o iPhone 11 Pro Max Google Pixel Opções impressionantes Tablet Aqui desktop. Se você estiver trabalhando no aplicativo Web ou desktop, observe o papel e as mídias sociais, o que é super útil. Então, por que não vamos para a parte superior do telefone aqui e criamos uma moldura para o iPhone 11 pro aqui? Como você pode ver, Sigma insere automaticamente um quadro em seu projeto. Com esse tamanho específico do dispositivo, você pode duplicar quadros selecionando um e pressionando o comando D. Se você estiver em um Mac ou controlar se você é todas as janelas ou, alternativamente, você pode segurar Ault e selecionar um livre e arrastar até uma nova posição na tela. Então agora eu tenho três quadros aqui. Vou usar o pergaminho de comando para ir em frente e ampliar uma onça. Uma coisa realmente precisa é que você pode usar ferramentas de alinhamento para alinhar seus quadros. Então, digamos que seus quadros estejam desalinhados e você queira tê-los uniformemente espaçados. Vá em frente e selecione todos eles apenas arrastando aqui. E então se você for para o canto inferior direito aqui, há uma pequena opção. E se você pressionar isso, vamos em frente e dar-nos até mesmo espaçamento entre todos os quadros aqui. Agora, se você quiser que todos os quadros também sejam alinhados verticalmente, você pode subir aqui e então ir em frente e encontrar este alinhamento de centros verticais. E agora, como podem ver, todos foram bem organizados verticalmente também. Uma coisa precisa sobre os quadros é que você pode ir em frente e copiar e colar elementos dentro deles dentro da mesma posição. Então, como exemplo, vamos criar um texto aqui. Vamos cozinhar agora. Se você se manter velho aqui, você pode ver onde seu objeto está dentro do seu quadro para que eu possa ver que é 53 picaretas é do topo 41 da esquerda, 2 38 da direita e 7 17 da parte inferior. Se você quiser que todos os seus amigos tenham este texto, vá em frente e copie-o pressionando o comando. Veja ou vá editar a cópia. Vá para o seu novo quadro e simplesmente colado pressionando o comando V e automaticamente ele vai pagar Sente-se dentro dessa mesma posição. Vou desfazer aqueles que são super úteis. Vamos em frente e excluir este ano de texto, e então vamos explorar algumas das opções de layout e grade de pixels também 11. Grids e guias: agora, se você trabalha com outras ferramentas de design antes que você provavelmente usou grades, se você não tem é totalmente bom. Grits essencialmente nos ajudam a manter todos os objetos dentro do nosso quadro organizados e distribuídos adequadamente para criar uma grade dentro do seu quadro. Vá em frente e selecionado e, em seguida, o painel de propriedades. Aqui você verá uma grade de layout de opção. Vá em frente e adicione um pressionando o sinal de mais aqui e agora. Como você pode ver, um ter um grande dentro do meu quadro. Há algumas opções em termos de sua grade de layout. Podemos alterar essas opções clicando neste pequeno ícone de grade aqui. Agora, eu estou usando uma grade regular, mas você também pode criar Colin Words, que são muito comentários e aplicações Web, então eu poderia fazer uma contagem de 12 e agora ter um grande de 12 colunas uniformemente espaçados. Você pode alterar a cor da sua grade ou a capacidade aqui, então, por exemplo, podemos configurá-la para 5% aqui e agora é um pouco mais leve, então torna mais fácil ver seus objetos dentro do seu quadro. Você pode alterar o tipo para uma grade central se quiser adicionar espaçamento à direita e à esquerda. Ou você pode fazer algo como se tivesse deixado a linha ou escrever uma linha para sua grade. A opção de estiramento. Normalmente, as linhas são ótimas uniformemente em todo o quadro. Você também pode adicionar uma margem aqui, como 20. E essa é outra maneira de adicionar espaçamento à esquerda e à direita e fazer, digamos, uma margem maior e usar isso como tipo de guias para o nosso projeto. Você também pode editar a opção de calha aqui para que você possa ter maior calha aqui ou menor . Então sinta-se livre para brincar com isso. Realmente encontrar uma grade ideal para o seu projeto. Se você estiver trabalhando verticalmente, você também pode usar uma grade de linha, e isso ajudará você a distribuir seus itens ao longo do acesso vertical para a opção principal boa . Aqui. Você também pode escolher o tamanho, então se eu escolher um, eu amplio. Eu posso ver que eu tenho uma grade de pixels um por um dentro do meu quadro. Você pode ter várias grades apenas pressionando o ícone de adição aqui na atribuição e nova grade, como, digamos, chamar a aderência. Então agora eu tenho ambos a grade de dois pontos e uma grade de pixel em altura e un escondê-los ou ir em frente e simplesmente removê-los do quadro a partir daqui também. Outra opção para organizar seus objetos dentro de seu quadro emite o que é chamado de régua. Aqui você pode usar shift nosso para mostrá-lo e ocultá-lo, ou você também pode alterná-lo de ver mostrar réguas. Uma coisa legal sobre a régua é que ele pode usá-lo para adicionar guias ao seu quadro, passando por cima dele e apenas clicando e arrastando para longe e criando guias dentro de seus quadros enquanto você passava o mouse sobre um guia. Você também pode usar o Ault para ver exatamente quanto espaço você está trabalhando aqui. A mesma coisa vale para um guia horizontal aqui para remover guias de seu quadro, vá em frente e basta clicar e arrastá-lo de volta para sua régua e duas vezes se livrar deles. E é assim que você usa grades e guias dentro de seus quadros. 12. Criando formas: Então isso não funciona. Vamos explorar formas um pouco mais. Eu fui em frente e apaguei todos os quadros. Meu inimigo, eu só tenho que manter simples para criar uma forma novamente. Podemos ir para aqui onde temos nossas ferramentas de forma e temos uma variedade de formas, de um retângulo para linha para seta para elipses estrela polígono e podemos até colocar imagens daqui. Isso é super útil, e vamos rever isso e lições futuras. Mas, por enquanto, vamos rever algumas das formas comuns que você estará desenhando em figo MMA em primeiro lugar , uma ferramenta de retângulo. Você vai usar muito isso para criar retângulos e seus arquivos. Você pode simplesmente ir em frente e desenhar um retângulo onde quiser. Agora, uma coisa que eu quero notar é que se você quiser criar um quadrado para que você queira criar um retângulo com lados iguais, você pode manter a tecla shift pressionada enquanto você está secando sua forma e Dow irá restringir proporções uma coisa que eu quero notar é que se você quiser criar um quadrado para que você queira criar um retângulo com lados iguais, você pode manter a tecla shift pressionada enquanto você está secando sua forma e Dow irá restringir proporções largura e altura. Então é a mesma coisa. Agora mesmo. Eu tenho um quadrado de 300 pixels de largura e 300 pixels de altura. Vamos clicar e criar um círculo também indo para a ferramenta “vamos” e novamente, vou segurar o novamente, “shift” para criar um círculo perfeito e criar a minha forma aqui. Eu só vou deixar ir. Se você não obter o tamanho exato que deseja aqui novamente, você sempre pode ir ao painel de propriedades aqui e dar-lhe o tamanho exato desejado. Então, se eu fizer isso 300 pixels que você vê automaticamente, ele também irá definir a altura de 300. E isso porque este pequeno ícone de proporção restrita está ligado. Se você desligar isso e alterar a largura e a altura, ele mudará de forma independente, e não mudará o outro para adicionar alguns estilos à sua forma, basta ir para a forma que você deseja dar ao estilo, também. E daqui você pode fazer coisas como mudar o preenchimento de sua forma de um golpe, e isso é exatamente o que vamos fazer. Então vamos primeiro mudar o preenchimento deste quadrado indo para este pequeno ícone de cor sobre ouvir clicando nele. E é assim que nós ainda nosso pequeno seletor de cores agradável aqui a partir daqui você pode ir em frente e mudar a cor para a cor que você gosta. Eu vou fazer um belo azul aqui se você quiser adicionar ingrediente em vez de apenas uma cor sólida . Você pode fazer isso de aparecer mudando seu sólido para qualquer linear um rádio e pescador ou diamante Grady INTs, mas o mais comumente usado como um Grady linear. E aqui Então é isso que eu vou estar fazendo se você notar que a primeira cor re escolhido está à esquerda agora, que está no topo do Grady aqui na cor inferior. Ele está definido atualmente em zero passo iti, o que significa que ele não está realmente aparecendo na tela. Então, se você quiser ir em frente e trazer isso todo o caminho para cima e eu vou apenas mover isso para talvez um bom roxo apenas para demonstrar ingredientes, aí está. Se você quiser mudar os lados, você pode fazer isso movendo esses círculos para cá. Você pode definir sua classificação para começar no meio de sua forma, ou você pode fazer um bom ângulo radiante como então sinta-se livre para brincar com ele até que você obter o Grady em você gosta, vamos apenas clicar escapar aqui para voltar aqui. Nenhuma coisa realmente legal sobre o estigma é que você pode ir em frente e adicionar cantos arredondados realmente facilmente para fazê-lo. Vá em frente e selecione-o. Vá para este pequeno círculo e o canto não importa qual canto e vá em frente e puxe. E enquanto você está clicando nele e que irá criar cantos arredondados agradáveis para a sua forma, eu vou desfazer isso pressionando Comando Z. Se você quiser adicionar um raio de borda para apenas um lado, você pode fazê-lo mantendo o velho ou a opção que ele no teclado e arrastando nesse canto. Então agora você vê, você só tem um canto arredondado em um dos cantos, e seus outros cantos estão em raio de canto zero. Você pode mudar tudo isso selecionando a forma aqui e indo para a direita aqui. Vemos agora ter um raio de canto misturado. E assim a partir daqui, você também pode fazer alguns ajustes também. Então, se você quiser apenas definir para zero, ele vai voltar ao normal. Se um em um raio de canto fora 20 para o topo. Eu posso fazer isso. Ele também pode desativar esses cantos independentes para voltar a ter apenas um raio de canto que você também pode definir a partir daqui. Legal. Vamos adicionar um passeio aqui é longo para a nossa forma. Como você pode ver inicialmente, o curso é muito leve, então você pode ir em frente e apenas aumentar esse número. Vai fazer 20 a partir daqui. Você pode ir em frente e mudar a cor. Eu realmente não precisa de coisa sobre modelos de figo que você pode copiar estilos entre formas muito facilmente. E para fazer isso, vá em frente e selecione a forma da qual você deseja copiar o estilo e, em seguida, vá para editar , vá para baixo para copiar propriedades. Alternativamente, você pode manter pressionado o comando de opção. Veja, vá para a forma que você deseja aplicá-lo e, em seguida, comando de opção V. Isso lhe daria o novo estilo nesta nova forma novamente, você controla essas ferramentas de editar copiar e colar propriedades aqui. Legal. Então agora temos duas formas com os mesmos estilos. É importante mencionar que você tem controle total sobre suas formas, Então, se você quiser tomar a sua forma e manipulado de qualquer forma, você pode fazê-lo clicando duas vezes nele. E uma vez que você vê este pequeno padrão aqui, isso significa que você está dentro da forma e você pode fazer coisas como estender a borda aqui e você pode fazer isso para qualquer borda que você quiser. E se você quiser em torno de uma de suas bordas, você pode fazê-lo mantendo o comando ou o controle nas janelas e arrastando-o para longe. Você pode ajustar sua curvatura usando essas ferramentas aqui também. Então vá em frente e experimente um pouco. Se quiser, notará que meu derrame também está sendo manipulado com minha forma. Se você quiser separar esses dois componentes um do outro para que você possa fazer a forma sem tomar o traço ou tratar o traço de uma maneira diferente, há realmente necessidade disso. estigma tem, e vamos marcar isso primeiro. Vamos clicar feito aqui, então terminamos de manipular com a forma enquanto você tem sua forma selecionada. Vá para objetos, encontre contorno, traçado. Lembre-se de que essas muitas opções podem estar aqui se você estiver usando o aplicativo Web depois de selecionar o traçado de contorno no meu painel de camadas. Eu posso ver que agora eu tenho dois retângulos diferentes, um formas, um é para o traçado e outro é para a forma real. E eu posso demonstrar isso puxando a forma e agora você verá que eles estão completamente separados. Então, se eu ordenar Z para desfazer isso ali, então agora se eu manipular minha forma aqui, ele vai fazer isso sem afetar o passeio aqui. Vou desfazer tudo isso pressionando o comando Z várias vezes. Eu só vou desfazer até eu ter essa forma aqui, que parece um ícone de preço, que é muito legal. 13. Ferramenta de caneta e lápis: e na última lição nós exploramos formas e começamos a criar alguns barbeadores e manipulá-los também. Agora vamos aprender sobre a ferramenta de caneta, que é aqui em cima. Você pode selecioná-lo apenas subindo aqui ou pressionando p no seu teclado. O lápis dá a você viver mais liberdade em termos de criação de suas formas. Depois de selecioná-lo, você pode realmente ir em frente e clicar em qualquer lugar na tela. E isso irá criar um ponto e dar-lhe outro ponto ocorreu na tela. Então, por que não vamos em frente e tentamos criar? Pode ser uma forma semelhante, mas usando a ferramenta caneta. Então, vamos clicar aqui agora, enquanto você tem sua ferramenta de caneta, você pode segurar Shift para que seu próximo ponto se encaixe para, um, você sabe, 90 graus, 45 graus ou ah, ângulo zero graus aqui, modo que torna isso um pouco mais fácil. E como você pode ver aqui, ele simplesmente se encaixa automaticamente. Eles estão me dizendo que eu estou no mesmo ponto, então agora eu posso apenas me afastar. Vamos criar outro ponto aqui, e então se você realmente ir para o primeiro ponto, vai em frente e fechar sua forma para você. Então agora temos uma forma agradável que criamos com nossa ferramenta de caneta. A qualquer momento, você pode pressionar a tecla de escape para sair desse mental. E agora temos a nossa forma. Se você terminar de editar sua forma e quiser voltar e adicionar mais pontos lá, basta ir em frente e dobrar rapidamente nela e adicionar mais pontos a ela, você pode simplesmente voltar para a parede da ferramenta de caneta. Você está dentro da forma. Então o que, estamos, em um ponto por aqui? Segure os 45 graus de novo aqui antes de sair da minha forma. Rollem aqui dentro. Vou mostrar-te a ferramenta do balde de tinta. Você pode selecionar a ferramenta balde de pintura de aparecer, e ele vai essencialmente deixar-nos preencher apenas partes do nosso objeto, se você quiser. Quando formos para a cor de preenchimento aqui e mudamos para, talvez uma cor azulada agradável. Aqui novamente, a ferramenta balde de tinta nos permite adicionar cor a apenas uma determinada porção da forma aqui. Algumas coisas legais que você pode fazer também, enquanto você está dentro do lápis novamente de qualquer borda. Se você segurar o comando, você pode ir em frente e adicionar em torno de sua borda a ele, assim como fizemos quando estávamos dentro de nossa forma. Quando um comando que voltar aqui, você também pode acessar a ferramenta Ben de aparecer e que fará exatamente a mesma coisa. Então sinta-se livre para experimentar isso aqui quando você terminar, clique feito ou a fuga ele E como você pode ver por padrão, minha ferramenta de caneta me dá um passeio aqui como se você quisesse editar esse traço. Você pode subir aqui de novo. Outra maneira de alterar a espessura do traçado é que você pode simplesmente passar o mouse aqui e clicar e arrastar no próprio ícone. E isso vai aumentar à medida que eu for para a direita e diminuir à medida que eu for para a esquerda. Então vamos aumentar. Dizem que são seis aqui, vou mudar a cor do dedo do pé branco. Então agora você percebe que o meio da minha forma não tem, Phil, Phil, Se você quiser adicionar uma sensação a esta seção também, você pode clicar duas vezes aqui novamente, ir para a ferramenta balde de tinta e fazer a mesma coisa aqui e, em seguida, usar chave de escape para sair de lá. Agora você vai notar que meu traço tem bordas muito duras, então se você quiser contornar as bordas do seu traçado, selecione sua forma. Aqui, vá para onde você tem seu derrame. Clique em três pontos aqui e então vá em frente e mude a junta aqui para arredondar. E isso só girará ou derrame um pouco. Aqui está, se eu ampliar agora, não é tão áspero. É arredondado, agradável e suave também. Você ainda tem acesso a sua opção de raio de canto aqui, então sinta-se livre para brincar com isso para obter o nous arredondado que você quer. E então essa é outra maneira de criar formas mais complexas. Agora vou te mostrar algo que você pode fazer com um lápis também. Hum, se você clicar duas vezes em sua forma novamente e então ir para o lápis aparecer, vamos em frente e zoom neste canto aqui para que possamos realmente criar um bom preço, esse tipo de ícone. Então, o que? O Penta foi selecionado. Vá em frente e adicione um ponto. Eu só estou segurando o turno aqui novamente para alinhar as coisas corretamente. E então em outro ponto, vamos fechá-lo. Agora temos um belo círculo lá dentro. Agora vamos para a ferramenta balde de tinta agora, já que já temos um preenchimento dentro daqui e queremos realmente removê-lo para criar um tipo de buraco. Então agora nós podemos realmente criar um buraco aqui em são moldadas apenas pressionando a ferramenta balde de tinta . Ele vai realmente ir em frente e remover o preenchimento lá e realmente criou um buraco para nossa forma aqui. Então, agora, se eu diminuir o zoom, ele está no comando Scroll. Você percebe que eu tenho uma boa forma aqui com um buraco no meio, então logo abaixo da nossa ferramenta de caneta. Se eu ir em frente e clicar aqui e clicar lápis, eu vou obter um tipo mais livre de fluir ferramenta de caneta, e nós não teremos o lápis para selecionado. Eu posso criar ainda mais livre fluindo tipo de formas aqui, ou linhas aqui, eu sou figura, vai tentar torná-lo agradável e suave e redondo, bem se sentir livre para brincar com isso também. Eu vou apenas ir em frente e apagar facilidade a partir daqui. Então, aí está. Essa é a sua caneta e lápis em figo MMA 14. Formas personalizadas com operações booleanas: Então, se você cair ao longo até agora Ah, nós criamos várias formas aqui. Até usamos uma ferramenta de caneta para criar uma forma mais avançada. E isto. Ouve, quero mostrar-te uma coisa que precisas, chamada “Operações Booleanas”. Eu sei que parece um pouco avançado, mas na verdade é muito simples, e pode ser muito útil quando você está criando formas. Então, quando você tiver vários objetos selecionados Então, por exemplo, eu vou em frente e selecionar essas duas formas aqui. Você pode fazer isso clicando em uma forma e, em seguida, rolar segurando, deslocamento, clicando em outra forma. Então agora eu selecionei os dois. Agora você vai notar que um pequeno ícone vai aparecer aqui chamado Boolean Groups. Se eu clicar nele, você tem quatro opções. Você tem uma união, subtrai, intersecta, exclui. Vamos ver cada um desses. Então, no final desta lição, você saberá exatamente o que eles fazem. Mas antes de fazermos isso, vamos em frente e aproximá-lo. Isso parece bom. Então agora temos duas formas separadas aqui que acabamos de colocar um em cima do outro. Então, novamente, eu vou selecionar ambos desta vez eu vou apenas secar através de ambos. Então agora eu posso ver que ambos são selecionados aqui, ir para grupos de bullying e uma seleção de sindicatos. Agora eu tenho uma única forma. Então, que seleção de união faz essencialmente pegar minhas duas formas e combiná-las em uma? Se você clicar duas vezes nele, você verá que você ainda tem acesso a ambas as formas Aqui. É para que eu possa ir em frente e movê-los em torno e então ir em frente e pressionar escape. E estas duas formas essencialmente, agora unidas. Então eu vou apenas comandar z monte vezes até voltarmos a ter duas formas . E então agora vamos tentar, subtrair seleção, subtrair seleção permite que você remova essa parte da forma da outra forma que você selecionou. Então, como você pode ver, esta parte dos lábios agora é removida desta forma que nós criamos antes e novamente, eu posso pular aqui, clicar duas vezes sobre se eu mover meus lábios, você pode ver que agora eu posso manipular minha nova forma aqui. Então agora novamente, vou pressionar comandos que um monte de vezes até eu trazê-lo de volta para aqui onde eu tenho que moldar, selecionou a seleção Intersect. Vamos em frente e manter o que estiver no meio. Então, qualquer parte da forma que se sobreponha entre estas duas formas, que acontece a ser esta parte aqui, será mantida e todo o resto será removido. E se eu voltar, por último, temos a seleção de exclusão. Essencialmente, isso vai fazer o oposto e remover a parte que essas formas estão sobrepostas e manter todo o resto. Por último, temos uma seleção achatada. Como eu mencionei, se você for em frente e dobrar rápido para aqui, você ainda tem acesso para emitir suas formas, e você pode ir em frente e movê-los ao redor como quiser. Mas sempre que você terminar de editar e tiver certeza de que deseja manter a forma como ela é, você pode usar a seleção divertida para realmente torná-la combinada, e isso agora realmente funcionará como uma única forma. Vamos desfazer tudo isso, e vou arrastar as formas um do outro agora. Legal. Então, esses são seus grupos de boliche. Vou fazer-te um pequeno exercício. Agora, eu quero que você vá em frente e tente recriar algo assim onde você tem um pequeno buraco no meio desta forma aqui, semelhante ao que temos aqui usando essas duas formas e usando um grupo booleano. Se você quiser pular, este exercício irá passar sobre como fazê-lo na próxima lição também. 15. Solução de exercícios de operação Boolean: Então, a última lição aprendemos grupos de bullying e então eu faço um pequeno exercício para tentar recriar essa forma. Então nós vamos apenas ir em frente e fazer isso aqui uma ondinha então novamente para entrar em vigor assim, queremos usar a seleção de exclusões em nossos grupos de bullying para remover o círculo desta parte da forma que temos aqui. Então, antes de fazer isso, vamos em frente e selecionar essas duas formas ano apenas arrastando através de ambos. Eu só vou para a direita aqui e onde é um derrame. Eu só vou mudar este 22 5 Caso contrário, se ele excluir esta forma daqui, ele vai criar um buraco gigantesco aqui porque o golpe será muito alto. Então agora é como o círculo aqui. Traga-o para onde queremos criar o nosso todo e o outro formato. Vou redimensionar isso usando o Shift para manter um círculo perfeito. Vamos fazer 28 por 28 outra primavera. Venha aqui para onde parece que está centrado. Então, uma vez que o tenhamos aqui, eu vou realmente trazer a forma aqui em cima, e a razão pela qual eu faço isso é porque eu quero manter o estilo desta forma, caso contrário ele vai estragar nosso estilo para a forma aqui. Então vamos em frente e agora selecione esses dois e você vai notar que você vai ver um esboço para toda a direita abaixo, a menos que fazer grupos bullying e, em seguida, excluir a seleção. E agora temos um belo buraco feito dessa forma ali. Então essa é outra maneira de manipular sua forma e obter algo semelhante usando grupos de bullying . 16. Ferramentas de alinhamento: Legal. Então, nesta lição, vamos rever algumas das ferramentas de alinhamento a que eles têm acesso aqui. Então eu criei um quadro com um monte de retângulos neles. Agora estão por todo o lado. Um deles está saindo do quadro aqui. Então, a fim de tirar proveito de nossas ferramentas de alinhamento, vamos em frente e selecionar todos os retângulos que eles irão. Queremos aplicar certas propriedades de alinhamento para, tipo, ir até aqui. E então eu vou até aqui e explorar algumas das diferentes opções que eu tenho. Primeiro, vou explorar uma linha à esquerda. Isso vai pegar todos os meus objetos que eu tenho aqui e alinhá-los ao objeto mais esquerdo que eu tenho. Então agora você vê, eles estão todos forrados no lado esquerdo. Agora, se eu desfazer isso em uma linha para o centro, eles vão tentar encontrar o centro de todas as formas que estão aqui. E, em seguida, uma linha direitos vai realmente fazer a mesma coisa está mentindo esquerda, exceto que tudo vai para a direita. Você tem um top linha que vai levar tudo e alinhá-los para o topo um centro de linha vai fazer a mesma coisa, mas dentro do centro dessas sombras. Da mesma forma, temos uma linha inferior. Lembre-se, todas essas mudanças de alinhamento estão acontecendo dentro dessa caixa delimitadora externa, que está anexando todos os objetos que estou alinhando agora. A partir daqui, você pode ver que eu tenho acesso a coisas como arrumar, distribuir espaçamento vertical e distribuir espaçamento horizontal, que são super legais. Vamos começar com arrumar tudo. Ele tentará criar um espaçamento uniforme entre todas as formas aqui. Então agora você pode ver que há uniformemente espaçados. Eu posso realmente controlar isso indo aqui para o meio, onde há uma pequena linha rosa e eu vou em frente e arrasto para a esquerda se eu quiser menos espaçamento entre eles ou para a direita se eu quiser mais espaçamento entre eles. Então isso é super legal. Eu só vou mover alguns dos meus itens ao redor agora e agora, se eu selecioná-los aqui usando o espaçamento vertical distribuir quando você selecionar essa opção , ele vai tentar pegar todos os objetos que você tem dentro desta caixa delimitadora e tentar distribuí-los verticalmente e mesma idéia para o espaçamento horizontal. Então agora ele foi em frente e tentar espaçar tudo uniformemente, horizontalmente. Então, se você ligeira ambas as opções juntos, ele realmente vai tentar perceber todos os seus objetos dentro dessa caixa de uma forma horizontal e vertical agradável . Então você pode realmente usar aqueles quando você tem vários elementos que precisam de distribuição adequada. Definitivamente usaremos muito ferramentas de alinhamento em nosso próximo projeto. 17. O que vem a seguir?: Tudo bem, então isso conclui nossa introdução ao Fig Mahir. Eu sei que foi muito curto e breve tipo, é claro, e esse foi realmente o objetivo de te familiarizar com apenas o básico por enquanto. Mas você pode ir em muitas direções do ano. Então, o que vem a seguir para você? Bem, se você está olhando para fazer design gráfico, então, é claro, você pode aproveitar esta oportunidade para ir em frente e saltar para figo MMA, brincar com mais das ferramentas que você tem acesso para criar mais formas e talvez até tentar recriar alguns dos projetos que você vê online que você gosta. Ah, usando figo MMA. E na próxima semana, aqui no compartilhamento de habilidades, eu vou estar compartilhando um curso sobre como você pode realmente construir uma simulação móvel completa usando dinheiro falso . Mas, enquanto isso, você pode definitivamente ir em frente e encontrar inspiração on-line para si mesmo. Bem aqui. Só tenho o Pinterest aberto. Procurei inspirações de aplicativos móveis. Então sinta-se livre para pesquisar que no Pinterest para obter algumas idéias de celular que eu projetei. Se isso é algo de interesse, você ou você pode fazer web, é completamente até você. Há também um outro grande site, padrões de carvão ponto com, que soletrar como este e que também lhe dá algumas idéias para bom tipo de você I inspirações que você pode tomar e aplicar aos seus próprios projetos. Eu encorajo que você pegue algumas idéias daqui ou de outro lugar e vá em frente para figo MMA e tente recriar aqueles com as ferramentas de forma que aprendemos neste curso. Você pode até experimentar com a opção de texto aqui também, mas novamente, vamos através da criação de uma marcação móvel completa no próximo curso aqui sobre compartilhamento de habilidades. Seja qual for o projeto em que você estava trabalhando, você definitivamente pode enviá-lo para mim para feedback. Seja qual for o projeto em que você estava trabalhando, Ou mesmo se você tiver perguntas, você pode ir em frente e me enviar um e-mail. Meu e-mail é o quão inteligente no Gmail Dot com. Você pode até mesmo ir em frente e clicar neste pequeno botão compartilhar em seus projetos de figment e admitir o seu projeto, e eu vou deixar comentários diretamente em seus projetos de figment também. Eu gostaria muito que você também me diga como você encontrou este curso. Se você achou útil, Hum, seria incrível se você deixou o comentário para ele também e sem dizer, espero que você tenha aprendido algo neste cavalo e ansioso para vê-lo na próxima semana em nosso curso de design móvel .