Figma: o iniciante absoluto no Pro Class criando um aplicativo

1. 0000 Figma Intro: Hoje vou te ensinar tudo o que você precisa saber sobre Figma. Começaremos do zero, criando uma conta e conhecendo a estrutura da Figma. Durante todo o curso, trabalharemos em um projeto real para criar um aplicativo de rastreamento de humor desde o primeiro toque até o design final. Ao configurar um wireframe e o Figma, você aprenderá sobre todos os conceitos básicos como configurar molduras, adicionar formas, texto e cores. Em seguida, daremos vida ao wireframe e configuraremos nosso design de interface de usuário. Durante o curso, mostrarei todos os recursos incrivelmente poderosos do Figma , como o uso de estilos Figma para cores e topografia. Como adicionar e usar grades. E aprenderemos sobre a importância do uso de componentes e as variações essenciais para qualquer designer de UX UI. Mostrarei como usar restrições para testar seu design em diferentes tamanhos de tela. Conheceremos a poderosa seção da comunidade Figma. Quando terminarmos, garantiremos que nosso design brilhe em qualquer apresentação. Para finalizar o curso, mostrarei como criar uma biblioteca de equipe e compartilhar seus arquivos com outros designers e desenvolvedores. Em menos de 2 horas do seu tempo, você descobrirá tudo sobre o Figma de que precisa para realizar qualquer projeto. Vamos começar. Esta aula é ideal para você. Se você é um iniciante ou está mudando de qualquer outro software de design. Este é um curso da Moody Learning dot io. 2. NOVA VERSÃO DISPONÍVEL!: Muito obrigado por fazer este curso. Eu só quero que você saiba que acabei de publicar uma nova versão deste curso. Então, se você pular para o meu perfil, vá para Christine Valor ou você também pode simplesmente pesquisar Moon Learning E aqui você pode ver todos os meus cursos. E se você for até o final, geralmente verá os novos cursos que acabei de lançar. E se você clicar nele, poderá começar imediatamente com o material mais recente e as atualizações mais recentes do novo curso. Levei em consideração todos os seus ótimos comentários e comentários adoráveis que recebi nos últimos dois anos com o curso antigo. Então eu mudei um pouco e agora são mais palestras pequenas Algo que você realmente gostou nos outros cursos ao vivo profundos. Isso significa que você pode entrar em diferentes assuntos mais rapidamente. E vem com um arquivo de exercícios, para que você possa trabalhar comigo em tudo o que vê na tela. Eu adicionei um pouco mais de profundidade a assuntos como prototipagem. E, claro, abordaremos todos os lançamentos mais recentes do novo curso, como as variáveis Figma 3. 0101 o que é Figma? Quem é a codificação?: O que é Figma? Em poucas palavras, Figma é um software de design de interface de usuário, também chamado de software de design de interface do usuário. Na Figma, você pode criar wireframes interativos, configurar designs de interface de usuário muito avançados e também criar protótipos impressionantes. O melhor é que a Figma funciona tanto no Mac quanto no PC. Você pode usá-lo em um navegador ou por meio de um aplicativo. A Figma oferece todas as ferramentas para configurar um design para web ou aplicativo. Coisas como componentes de trabalho, configuração de estilos e uso restrições para design responsivo. É realmente a soma de seus recursos incríveis que tornam a Figma tão especial e, portanto, a líder da indústria. É baseado em nuvem, o que o torna a escolha ideal para colaborar com outros designers ou compartilhar seu design com desenvolvedores. Agora, na maior parte do tempo eu ouço a pergunta, então espere, se eu projetei um site na Figma, como é que ele sai da Figma online? Como se torna um site real? Figma faz isso? Bem, desculpe, mas não. Figma oferece todas as ferramentas para configurar um site de tal forma que os desenvolvedores possam trazê-lo vivo com código. A Figma oferece ótimas ferramentas, por exemplo, a ferramenta Inspecionar onde você pode ver trechos CSS. Mas isso não é suficiente para construir um site completo da Figma. Você realmente precisa de um desenvolvedor qualificado. Você também pode usar uma ferramenta como Webflow para um site realmente simples e usar o Figma como base para configurar seu design e planejá-lo. Pense nisso como nos velhos tempos, projetando um livreto, você usaria algo como o InDesign ou outro software. Este software imprimiu seu livreto? Claro que não aconteceu. É exatamente o mesmo aqui. 4. Projeto do curso 0102 - o que vamos criar: Bem-vindo aos seus primeiros passos na Figma. Gostaria de apresentá-lo ao projeto em que estaremos trabalhando durante este curso, pois aprenderemos tudo em exemplos reais. Você não precisa de nenhum conhecimento prévio, pois começaremos em zero e nos inscreveremos para uma conta gratuita da Figma. Durante a primeira metade do curso, reconstruiremos um Wireframe desenhado à mão, onde quer que eu apresentarei todos os conceitos básicos da Figma. Durante a segunda parte, transformamos nosso wireframe em um design de interface do usuário. Vamos abordar todos os aspectos e recursos que a Figma tem para oferecer. Na parte final, vou te ensinar como compartilhar arquivos com designers e programadores. Deixe-me dar uma visão geral do ponto de partida do nosso projeto. Aqui está o Wireframe desenhado à mão que estaremos trabalhando. Estaremos construindo um aplicativo de rastreamento de humor. Vamos passar por isso rapidamente. Nossas telas contêm um cabeçalho que, em alguns casos, como nossa tela inicial, também possui uma visão geral semanal. Também temos uma barra de abas na parte inferior da tela, que funciona como uma navegação, permitindo-nos pular para diferentes áreas do nosso aplicativo. Nossa casa está configurada para hoje e contém diferentes botões de humor, nos quais posso escolher e clicar em um. O que eu escolher será adicionado como um clima para essa data em particular. Também posso ver que na minha visão geral das datas aqui, os humores passados são mostrados. Eu provavelmente preciso de algum código de cor ou padrão para identificá-los no meu design. Há também uma página de visão geral completa do calendário que posso acessar ou tinha uma barra de guias ou o cabeçalho. O terceiro ponto de navegação é um blog que contém um conjunto de artigos. Se eu clicar em um, chego à página de detalhes do artigo. Ótimo, vamos configurá-lo na Figma e eu prometo você aprenderá todos os itens essenciais que você precisa saber para enfrentar qualquer projeto no futuro. Preparei um arquivo Figma com todos os materiais de trabalho que você pode baixar. Depois de instalarmos o Figma, falarei mais sobre como obter esses materiais e como fazer upload de arquivos Figma. 5. 0103 como obter figma - processo de registro: Obter Figma é super fácil. Tudo o que você precisa fazer é ir para figma.com e, em seguida, pressionar este botão “Inscrever-se”, digitar seu e-mail, escolher uma senha e clicar em “Criar conta”. Você receberá algumas informações básicas, como o nome que você gostaria de usar, a área em que você está trabalhando e se quiser entrar na lista de discussão. Clique em “Criar conta” e verifique seu e-mail. É isso, feito. Assim que você verificar seu e-mail, você será levado a esta tela de boas-vindas. Se você quiser, você pode criar uma equipe agora, vou chamar essa lua. Você será perguntado se gostaria de convidar outras pessoas, vou pular isso por enquanto. Em seguida, você será solicitado a escolher o plano. Não vou falar sobre preços, pois isso muda de tempos em tempos, então consulte o site da Figma para obter mais informações. Para começar, basta ir com a versão gratuita por enquanto, você sempre pode atualizar mais tarde. Figma perguntará se você gostaria de criar um arquivo de design ou um quadro branco com o FigJam. Se você não tiver certeza, basta pular esta etapa, você pode criar qualquer um deles a qualquer momento mais tarde. A diferença entre os dois é que o quadro branco que você usaria para planejar, discutir e fazer brainstorming. Se você estiver pronto para configurar um wireframe ou design, escolha o arquivo de design. Vou pular isso por enquanto, e começar sozinho. 6. Estrutura de trabalho 0104 Figma: Vamos dar uma olhada no espaço de trabalho Figma. Agora estou usando um aplicativo para desktop, mas será praticamente o mesmo se você estiver no navegador. No meio da tela, você vê todos os arquivos mais recentes. Se você o projetou como eu, então a Figma se instala em arquivos e modelos básicos para você brincar. No lado esquerdo, você vê suas equipes. Criamos uma equipe chamada Moon quando nos inscrevemos. Deixe-me dar uma visão geral da hierarquia de arquivos Figma. Primeiro, temos equipes. Eles podem ser para o seu próprio trabalho ou para colaboração. Dentro do Teams, temos projetos que você pode usar para agrupar arquivos em diferentes projetos dentro de uma equipe. No plano gratuito, você recebe atualmente um projeto gratuito. Dentro de um projeto, agora você pode ter vários arquivos, arquivos FigJam ou arquivos de design. Esses arquivos são onde você faria o trabalho real. Você pode estruturá-los ainda mais em páginas. Vamos voltar para a coisa real. Aqui temos nossa equipe. Se você quiser excluí-lo, editar ou renomear, você pode fazê-lo clicando com o botão direito do mouse. Em seguida, temos nosso arquivo de projeto. Você também pode criar mais projetos dependendo do plano em que você está. Dentro do meu projeto, agora posso adicionar arquivos. Posso adicionar arquivos FigJam, que são mais para brainstorming, ou posso adicionar arquivos de design reais, que é o que farei agora. Isso abre uma guia. Posso nomear o arquivo clicando duas vezes no nome. Agora eu poderia estruturar esse arquivo ainda mais adicionando páginas. Atualmente, tenho uma página. Eu poderia adicionar mais clicando no botão mais e, claro, posso nomeá-los clicando duas vezes. Se você quiser voltar para casa ou para seu espaço de trabalho geral, clique no ícone da pequena casa no canto superior esquerdo. Agora você pode ver o novo arquivo que criamos dentro de nossa equipe e projetos. Agora eu poderia criar quantos arquivos eu precisasse aqui. Observe como tocar em estado aberto para que eu possa pular para frente e para trás. Acima de suas equipes, você também vê arquivos recentes em que acabou de trabalhar, bem como rascunhos. Se você quiser brincar ou toda a hierarquia de arquivos parece um pouco avassaladora para começar, basta criar seu primeiro arquivo de design aqui em rascunhos. Mais tarde, você pode arrastar e soltar arquivos entre equipes e rascunhos. No menu do lado esquerdo, você também encontra acesso às seções da comunidade onde você pode explorar milhares de modelos, widgets e plugins pela comunidade Figma. Vamos ver isso durante nosso projeto com mais detalhes. Você também pode convidar outras pessoas a qualquer momento e dar-lhes direitos de visualização ou edição. Você também pode ver quem está em sua equipe e o plano em que você está atualmente, bem como os arquivos disponíveis que acompanham esse plano. Caso você queira atualizar, você também pode fazer isso aqui. 7. 0105 Figma no aplicativo de navegador contra o de Figma: Você pode trabalhar com Figma de duas maneiras. Você pode trabalhar diretamente no navegador, que é o que você está vendo aqui, ou você pode baixar o aplicativo. Para baixar o aplicativo, acesse figma.com/downloads. Em seguida, você pode escolher entre a versão Mac e o Windows. É muito importante saber que, mesmo que você trabalhe no aplicativo para desktop, a Figma permanece baseada na nuvem. Isso significa que todos os seus arquivos serão armazenados na nuvem e não localmente no seu computador. Portanto, você sempre precisa acesso à internet para trabalhar em seus arquivos Figma. Você pode exportar e armazenar um arquivo Figma localmente. Mas isso é algo que você só deve fazer em uma emergência. Como se você precisasse terminar um projeto e souber que não terá acesso à internet. Isso pode causar obstáculos à colaboração com sua equipe. Portanto, é sempre melhor deixar tudo na nuvem como se pretendia ser. Além do aplicativo para desktop, você pode estar interessado no Figma mirror para visualizar seus designs em seu celular ou tablet. Caso você não consiga usar o aplicativo para desktop e usaremos apenas a versão do navegador, recomendo vivamente baixar o instalador de fontes. Isso lhe dará acesso a todas as fontes locais. Isso, no entanto, não será necessário ao usar o aplicativo. 8. 0106 como configurar primeiros quadros: Vamos começar no nosso arquivo de design Figma. Essa área cinza que você vê aqui é chamada de tela. Pense nisso como a superfície de uma mesa em que você está trabalhando. Além disso, você adicionará seus designs como folhas de papel. Na Figma, essas folhas são chamadas de quadros. Você pode adicionar imagens, textos e formas aos seus quadros para configurar seu design. Para criar um quadro, você pode escolher uma ferramenta de quadro na barra de ferramentas ou simplesmente pressionar F para abrir o menu do quadro no lado direito. Na Figma, todos os tamanhos de tela comuns já estão configurados para você na forma de quadros. Escolherei um iPhone X para meus designs móveis para começar. Caso você não esteja atrás de um quadro de tamanho de tela específico , você também pode desenhar seu quadro à mão. Depois que a ferramenta de quadro é ativada, duas coisas aconteceram. Figma adicionou o quadro ao seu Canvas e você também pode ver o quadro no painel de camadas laterais esquerdas. A barra lateral à esquerda é basicamente um espelho de cada elemento que você terá em sua tela. À medida que adicionaremos mais e mais elementos por toda parte, você poderá ver todos eles representados aqui também. Você pode renomear seus wireframes diretamente aqui no painel de camadas do lado esquerdo ou clicando duas vezes no pequeno nome acima do quadro na tela. Vamos renomeá-lo para wireframe/home. Observe que estou usando uma barra direta. Esta é a convenção de nomenclatura em Figma e basicamente cria uma categoria para quadros. Isso é muito útil ao exportar e organizar seus quadros mais tarde. Ao contrário das placas de arte tradicionais, você pode aninhar quadros um no outro em Figma. Isso permite que você crie layouts mais complexos. 9. 0107 atalhos úteis Pan, Zoom e mais: Quero mostrar alguns comandos úteis que acelerarão seu fluxo de trabalho, mesmo que você esteja no início da Figma. Figma tem muitos ótimos atalhos e ajudantes. Você encontrará todos eles se navegar pelo menu à esquerda para atalhos. Tudo o que você já usou está marcado em azul, e os que você ainda não usou são cinza. Por enquanto, vou mostrar os mais essenciais para a navegação. Para deslocar, basta manter pressionada a barra de espaço e se movimentar com o mouse. Para aumentar e diminuir o zoom, pressione “Mais” e “Menos”. Muito importante para ver seu trabalho em 100% pressione “Command 0". Você pode alternar entre uma visão geral de todos os seus quadros e a seleção específica alternando com Shift 1 ou Shift 2. Para mostrar e ocultar a interface do usuário, basta pressionar “Command full stop” e obviamente, o comando todo-poderoso definido para desfazer qualquer coisa que você acabou de fazer. Você conhecerá mais atalhos à medida que avançamos. Basta lembrar que você pode procurar todos eles no menu de atalho, que, claro, também tem um atalho, Shift, Control e ponto de interrogação. Isso também será útil se você estiver usando um PC enquanto estou trabalhando em um Mac, e você só verá os atalhos do Mac com a saída automática do teclado na tela, que às vezes pode diferir ligeiramente. 10. 0108 como adicionar formas a um quadro: Vamos começar a transformar nosso quadro em um wireframe real adicionando algum conteúdo. Em um wireframe, nos apegamos a formas simples, como retângulos e círculos. Encontramos todos eles no menu de formas na parte superior. Basta clicar no ícone e selecionar o que você está procurando. Observe como ao lado da forma você pode ver o atalho. Eu poderia apenas pressionar R para retângulo ou O para um círculo. Segure Shift enquanto desenha e sua forma será dimensionada uniformemente. Quando a forma é selecionada, você pode ver as dimensões na bolha abaixo dela. Você verá as mesmas dimensões no painel Propriedades do lado direito. Aqui, no painel Propriedades, você também pode ajustar o tamanho manualmente. Basta digitar o número que você está atrás. Você também pode usar essa caixa para fazer cálculos. O clipe ao lado das medidas, bloqueia ou abre as dimensões. Você pode escolher se deseja dimensionar toda a forma ou apenas um lado, experimente. Você também pode girar a forma adicionando um ângulo ou simplesmente selecionando a forma. Aproxime-se com o cursor da borda até ver o pequeno símbolo de rotação aparecendo. Para alterar o raio do canto da sua forma, selecione a forma e, em seguida, chegue muito perto até ver os pontos aparecendo. Segure o mouse e arraste para dentro. Ou use o painel Propriedades. Você pode arredondar todos os cantos uma só vez ou selecionar cantos específicos antecipadamente. 11. Duplicando 0109: Ótimo. Agora que sabemos desenhar formas, vamos configurar nosso primeiro layout básico do wireframe. Começaremos com nossa tela inicial. Estou pressionando R para meu atalho para selecionar uma ferramenta de retângulo, e vamos desenhar o cabeçalho e o rodapé. Em um wireframe, os tamanhos exatos não são tão importantes quanto no design final, então vou ajustá-los manualmente ao meu gosto. Agora vou desenhar os quatro círculos que serão meus botões de humor. Eu apertei O para a ferramenta circular e desenhei meu primeiro círculo. Como eu quero que todos eles tenham o mesmo tamanho, simplesmente copiarei o primeiro botão. Existem várias maneiras de fazer isso. Você pode pressionar Command, ou Windows, isso será Control, e C para copiar e Command ou novamente Control e V para colar. Você também pode arrastar uma cópia da forma original mantendo pressionada a tecla Option e Shift, e com o mouse, pressione e arraste uma cópia. Eu poderia fazer isso para todos os outros círculos ou simplesmente pressionar Command, ou no Windows, Control e D. Isso os duplicará exatamente com a mesma distância que o primeiro. 12. 0110 desenho em Figma: Vamos adicionar os rostos aos nossos botões de humor. Vou desenhar os olhos adicionando círculos. Falarei mais sobre cor mais tarde. Por enquanto, para tornar os olhos visíveis, selecione-os e, em seguida, vá para Preencher no painel Propriedades do lado direito, e onde você adicionaria o valor da cor, basta escrever “cinza”. Este é um pequeno truque se você precisar de uma cor rápida. Para desenhar um nariz, preciso de um golpe, então escolho a ferramenta de linha ou simplesmente pressiono L e mantenho pressionado Shift para obter uma linha reta. Para a boca, vou escolher a ferramenta Caneta, você também pode usar o atalho P. Se você definir um primeiro e segundo ponto e segurar a tecla do mouse para baixo, você pode curvar as linhas. Além de uma ferramenta Caneta, você também pode usar uma ferramenta Lápis. Você pode desenhar à mão livre, o que requer um pouco de prática ao usar um mouse. Mas se você estiver acostumado com um trackpad ou caneta, você pode obter resultados incríveis. Quando terminar de desenhar, basta pressionar Escape para sair do modo de desenho. Se você selecionar qualquer uma das formas, agora poderá alterar sua aparência com o painel Propriedades do lado direito. Você pode alterar a cor, o tamanho do traçado e você pode até escolher outro tipo de traçado e cantos redondos. Uma vez que eu goste do meu rosto, vou simplesmente duplicá-lo todos os outros botões e ajustar o humor. 13. 0111 como criar grupos: Atualmente, todas as camadas são colocadas próximas umas das outras no mesmo nível de hierarquia. Você pode agrupar camadas juntas para criar mais estrutura e facilitar o manuseio do seu design. Basta selecionar as camadas que você deseja pertencer a um grupo. Você pode fazer isso mantendo Shift pressionado e clicando neles um por um, ou mantendo Shift e o botão do mouse pressionados e, em seguida, desenhe uma área de seleção. Em seguida, pressione Command ou no Windows, Control, G para agrupá-los. Você também pode aninhar grupos dentro de grupos. Por exemplo, se eu transformar cada desses botões em um grupo, depois selecionar todos os botões, poderei agrupá-los novamente. Agora, terei um grupo de botões e, dentro dele, tenho quatro grupos de botões únicos. Agora posso mover o grupo como um todo, e também posso duplicar todo o grupo e colá-lo em outro lugar. Você ainda pode editar elementos dentro do grupo, clicando duas vezes até chegar ao elemento desejado ou segure Comando ou Controle e clique para selecionar. Observe que tudo o que adicionamos ao quadro está representado no painel de camadas. Os grupos são mostrados como pequenos retângulos pontilhados. Quando você clica neles, você pode ver o conteúdo dentro e também pode mover elementos para dentro e para fora de grupos. Clique duas vezes para renomear. Vou nomear meu grupo, Grupo Círculo, e os grupos dos círculos únicos dentro, Circle. 14. 0112 como adicionar e estilando texto: Agora queremos adicionar algum texto ao nosso wireframe. Selecione a ferramenta Texto ou simplesmente pressione “T” e clique em “Wireframe” para começar a digitar ou desenhar uma caixa de texto. No lado direito no painel Propriedades, agora você verá as propriedades do texto. manuseio da topografia é um tópico bastante grande no design da interface do usuário. Por enquanto, só vou lhe dar uma visão geral rápida do painel de propriedades. Vamos explorar esse tópico ainda mais quando nos sentirmos confortáveis em Figma. No menu suspenso, você pode escolher um tipo de letra. Se você estiver trabalhando com um aplicativo para desktop Figma, verá todas as fontes locais e todas as fontes do Google automaticamente. Recomendo que você use o aplicativo sempre que possível. Se você estiver trabalhando no navegador, certifique-se de instalar o instalador de fontes Figma, que você encontra em figma.com/downloads. Você também poderá ver todas as fontes locais. Se você quiser a fonte do Google, certifique-se de baixá-la e instalá-la em sua máquina. Estou trabalhando no aplicativo, então vou usar uma das minhas fontes favoritas do Google chamada Poppins. Na lista suspensa abaixo, posso escolher o peso da fonte. Ao lado dele, encontro um tamanho de fonte e definirei isso como 24 , pois este é o meu texto principal por enquanto. Altura da linha e espaçamento entre letras por enquanto, deixarei na configuração padrão. Isso é algo que vamos retocar mais tarde em nosso design de interface do usuário. Mais abaixo, posso optar por alinhar o texto à esquerda, à direita ou ao centro e vou enviar para meus textos por enquanto. Também podemos definir o comportamento de largura e altura de nossos livros didáticos. Se você escolher largura automática, isso significará que a caixa de texto é exatamente o tamanho do texto. Em seguida, temos altura automática, o que significa que temos uma largura definida e, à medida que adicionamos texto, ela se classificará abaixo de acordo. Usaremos isso muito quando se trata de nosso design de interface do usuário, pois respeita a altura da nossa linha. O que será crucial então. Também temos tamanho fixo, o que é para ser honesto, algo que raramente uso. Em mais, você pode ajustar coisas como subjacentes ou maiúsculas. Vou definir meu texto, para sentar bem no meio aqui. Também adicionarei os textos que tenho aqui no meu cabeçalho. Isso é sublinhado, pois será clicável mais tarde. 15. 0113 alinhamento de posicionamento e nude: Você pode posicionar elementos dentro do quadro simplesmente arrastando-os. Você verá que a Figma cria guias para ajudá-lo a alinhar qualquer elemento com o resto. Para adicionar mais detalhes ao seu posicionamento selecione um objeto ou um grupo de objetos e mantenha-se pressionado enquanto passa o mouse sobre a borda do quadro ou qualquer outro objeto. Você verá a distância exata entre esses objetos. Isso é super útil e realmente algo que você precisará o tempo todo. Você também pode mover os objetos selecionados com o teclado, setas para a esquerda, para a direita, para cima e para baixo enquanto as distâncias estiverem ativas. Se você manter o shift pressionado, ele salta em distâncias maiores. Isso é chamado de empurrão. Por padrão, seu empurrão está definido como 10. Eu defini o meu para passos de oito. Basta procurar o valor do empurrão no menu do espaço de trabalho e você pode ajustá-lo. Você também pode selecionar várias formas alinhadas usando a ferramenta alinhar no painel de propriedades. Se você selecionar um grupo de objetos semelhantes, Figma oferecerá a você arrumá-los. Você pode até definir o espaço entre os elementos com o menu ou manualmente. 16. 0114 Como alterar traçados e enchimentos de cores: Todas as formas têm uma propriedade de preenchimento e traçado. Por padrão, nossas camadas são preenchidas com um cinza claro e nossa tipografia é preta. Isso funciona muito bem para wireframe. Você poderia ter adaptado as cores. Selecione uma forma e, no painel de propriedades do lado direito, clique em “Preenchimento de cores”. Agora você pode escolher uma cor usando a roda de cores ou usar o olho para escolher uma cor. Isso é realmente útil se você quiser escolher uma cor de uma imagem, por exemplo ou se você já tiver um código hexadecimal, você pode simplesmente adicioná-lo. RGB também funcionaria. Além da cor sólida, você pode aplicar outros preenchimentos como gradientes e também preencher formas com imagens. Você pode revogar um preenchimento clicando no símbolo do botão menos ao lado dele. Você pode adicionar um traçado aplicando a mesma técnica com a opção traçado. O curso também pode ser ajustado em espessura. Se clicarmos nos três pontos, você poderá obter mais opções, como traços pontilhados. As propriedades também podem ser copiadas e coladas entre objetos. Clique com o botão direito do mouse no elemento, selecione o estilo “Copiar propriedades” e cole em outro. Ou use o Comando Alt C e Alt Command V. Observe que isso só copia o estilo e não a forma. 17. 0115 como criar estilos no Figma: Os estilos permitem salvar e reaplicar propriedades. Dessa forma, arquivos grandes podem ser atualizados em um instante. Estilos podem ser criados para cores, texto, grades e efeitos como sombras. Para o nosso wireframe, usaremos diferentes tons de cinza que eu quero transformar em um estilo, bem como um título e um texto padrão. Vamos primeiro configurar nossos estilos de cores. Para criar os estilos de cores, desenho formas e preenchê-las com as cores desejadas. Escolha a primeira cor, clique no menu Estilos no painel Propriedades do lado direito e clique no ícone de adição e nomeie sua cor. Vamos fazer o mesmo com as outras cores. Observe como estou usando a convenção de nomenclatura de pigmentos novamente com uma barra. Isso criará automaticamente um wireframe de categoria e, em seguida, dentro dele minhas cores diferentes. Agora posso aplicar essas cores ao texto ou à forma em todo o meu design. Basta escolher o objeto e, no menu Estilos, aplicar o estilo de cor salvo. Você pode ver uma visão geral de seus estilos clicando na tela. Você sempre pode editar seus estilos. Em seguida, eles serão atualizados automaticamente em todo o seu design. Vamos fazer o mesmo pelo nosso texto. Escolhi um texto, clique no ícone “Estilos” nas minhas propriedades de texto e o salvei. Agora posso aplicá-lo em todo o meu design. Observe como são estilos, não importa onde você os cria. Eles não estão vinculados a nenhum objeto no seu Canvas de onde você os criou. Eles vivem de forma independente na seção de estilo. Farei um quadro separado para armazenar uma visão geral dos meus estilos. Por enquanto, vou deixá-lo ao lado meus wireframes enquanto ainda estiver me ajustando. Notei que cometi um erro. Este é, na verdade, um texto clicável sublinhado. Posso editar o estilo no menu Estilos de texto ou clicando em minha tela e vá para a visão geral dos estilos. Vou renomeá-lo para clicável. Ainda quero entender os textos. Copiarei um texto com esse estilo e, em seguida, desanexarei o estilo no menu Estilos de texto. Agora vou remover o sublinhado e salvá-lo novamente como meu texto padrão. Durante meu processo de trabalho, sempre posso adicionar ou alterar estilos. Há também outros estilos, como grades e efeitos, como sombras ou desfoques que você pode salvar. 18. 0116 Trabalho com componentes e Istances fazem em compo e substituições: Componentes são elementos de interface que podem ser reutilizados em todo o design. No meu wireframe, há elementos que são o mesmo layout, mas apenas possuem conteúdo diferente. Como os dias do meu calendário aqui e na minha barra de toque, os ícones tocáveis. Vamos transformá-los em componentes. Vamos começar com os dias do calendário. Primeiro, desenhe um quadro para a largura total do quadro de layout. Lembre-se, posso usar meu painel de propriedades para calcular. Vou dividir isso por 7 para obter um dia e, mais tarde, minha semana se encaixar perfeitamente na largura da tela. Agora vou adicionar um texto para o dia da semana e a data abaixo, bem como um círculo que indicará se no passado um clima já estava inserido. Vamos alinhá-los bem. Vamos também nos certificar de atribuir cores e têxteis. Em seguida, vou nomear o quadro. Agora, em vez de apenas copiar a data, vou transformá-la em um componente reutilizável. Certifique-se de que o quadro esteja selecionado. No menu superior, clique em “criar um componente”. Se o componente tiver sido criado com sucesso, você verá o contorno roxo , bem como o símbolo de diamante. No painel de camadas, você também verá a mudança na cor e no símbolo. Esse componente original que você criou é chamado de domínio ou componente mestre. Qualquer cópia dela é chamada de instância. Observe a diferença no menu de camadas. O componente principal tem uma forma de diamante preenchida e a instância tem uma forma de diamante vazia. Você encontra uma visão geral de todos os componentes criados no menu do ativo ao lado de suas Camadas. Você pode arrastar daqui para sua tela para criar uma instância ou também pode copiar diretamente o mestre ou qualquer instância para criar outra instância. Não importa qual maneira você usa, sempre estará vinculado apenas ao mestre original. Você pode ter apenas um mestre, mas muitas instâncias. Se eu alterar o layout do componente mestre, todas as instâncias também serão atualizadas. Observe como não consigo alterar a posição de um elemento na instância. Eu posso, no entanto, alterar o conteúdo, para que eu possa alterar o nome das datas. Não gosto do alinhamento e quero que o texto fique no meio, então vou consertar isso em um mestre e todas as instâncias seguirão. Observe que não mudei a cor em nenhuma das instâncias, portanto, se eu alterasse o mestre, todas elas seguirão. No entanto, posso adaptar a cor de uma instância. Em seguida, ele ainda seguiria todas as alterações de layout do mestre, mas manteria a chamada substituição para a cor. Isso é ótimo. Como no nosso exemplo, quero que a data atual se destaque um pouco. Quero remover os círculos para hoje e no futuro. Existem métodos mais avançados para fazer isso, mas por enquanto, vou apenas colori-los, na cor de fundo, o que funciona muito bem para um wireframe. Para resumir, seu componente é fixo e você não pode substituir em sua instância, tamanho, posição, rotações, restrições, hierarquia de camadas ou qualquer desenho que aponte nas posições de Bézier. Você pode substituir em suas instâncias, entanto, cor e preenchimentos, preenchimentos também podem ser preenchimento de imagem, texto em conteúdo e alinhamento, estilos, opacidade, efeitos como sombras ou desfoques, e você pode ativar e desativar a visibilidade. Se você quiser reverter para as configurações mestre originais, você pode fazer isso usando o menu suspenso no menu da instância e escolher “Redefinir todas as substituições”. Você também pode desanexar uma instância de um mestre aqui. Se você excluir acidentalmente seu mestre, também poderá restaurá-lo com qualquer instância que você já tenha feito. 19. 0118 páginas em Figma: Para editar nosso design, incluindo instâncias, sempre precisaríamos voltar ao componente principal. Poderíamos fazer isso selecionando uma instância e, no menu do lado direito, clique em “Ir para o componente principal”. Em seguida, saltaríamos de volta para o componente principal, não importa onde o colocassemos. No entanto, é muito mais limpo se você tirar todos os seus componentes mestres do design e armazená-los em um local separado. Isso também é muito importante para manter uma visão geral sobre a consistência em seu design. Agora, eu poderia manter meu mestre na mesma página ou até mesmo desenhar um quadro que chamo componentes e tenho uma visão geral aqui. No entanto, é uma boa prática manter seu design limpo e arrumado. Armazenaremos componentes mestres em sua própria seção. Para isso, criamos uma página separada que chamamos de Componentes e Estilos. Vamos renomear esta página que estamos trabalhando em Wireframes. Agora, selecione o componente mestre, clique com o botão direito do mouse e selecione Mover para páginas. Agora você pode enviá-lo para a página que você acabou de criar. Também enviarei meu quadro com os estilos ali. Isso me dará uma ótima visão geral de todos os elementos que estou usando. Quero criar mais alguns componentes como os ícones da barra de guias. Posso fazer isso no design e enviá-los para a minha página de componentes ou criá-los diretamente na página de componentes. Vou desenhar um retângulo 24 por 24 e arredondar os cantos. Em seguida, também adicionarei algum texto abaixo. Este é um rótulo, por isso pode ser bem pequeno. Vou adicionar outro estilo para isso. Também adicionarei o estilo à minha visão geral. Vamos nos certificar de que posso enviar em texto nossas linhas e criar um grupo. Vou renomear o grupo, verificar se ele está selecionado e convertê-lo em um componente. Agora vou copiá-lo, pular para o meu wireframe e colá-lo na barra de abas. Vamos alinhar as instâncias e renomear os rótulos para casa, calendário e blog. Agora, a cor do meu ícone é da mesma cor do plano de fundo. Quero voltar para meus componentes e mudar isso no mestre. Ótimo. Vamos dar uma olhada em nosso menu de ativos por um segundo. Os componentes são classificados automaticamente acordo com a página e em qual quadro você os colocaria. Em nosso exemplo, usamos a barra direta e isso criou uma boa subcategoria também. Isso será muito útil quando você tiver muitos componentes em um design maior. 20. 0119 como criar um fluxograma simples com um plug-in: Ótimo, então temos nosso wireframe doméstico terminado. Agora eu quero adicionar os outros wireframes. Vamos criar aqueles quatro pelos quais um clima será selecionado e apareceria para aquele dia. Agora posso desenhar novos quadros e copiar tudo o que preciso e desenhar o resto ou, como eles são muito semelhantes, vou simplesmente duplicar meu quadro inteiro. Agora vou mudar o texto e, a propósito, esse texto também pode ser seu próprio componente. Em seguida, selecionarei todas as fases que não seriam selecionadas na tela. Lembre-se de manter o comando ou Opção pressionado quando você foi para a seleção profunda dentro de um grupo. Agora quero mudar a transparência. Posso fazer isso no painel de propriedades ou simplesmente pressionar qualquer número. Dois, por exemplo, resultariam em 20% de capacidade. Farei o mesmo pelo resto das telas e, como você pode ver, já vale a pena que passamos algum tempo configurando nossa tela inicial bem. Também vou configurar alguns quadros para o meu calendário, bem como onde meu bloco estará mais tarde. Claro, certifique-se de nomeá-los. Agora quero indicar a conexão entre esses quadros. Simplesmente desenhar uma linha realmente não funcionaria porque os objetos estão dentro ou fora dos quadros. Vou usar um plugin. Volte para casa clicando no botão house no canto superior esquerdo e vá para a seção da comunidade. Quero configurar um fluxograma, então estou digitando fluxo e procurando plugins. Existem muitos ótimos, mas por enquanto, vou usar um conector de desenho. Clique em Instalar. Agora vamos voltar para o topo do nosso arquivo, que ainda está aberto. No menu e note que é o menu do navegador, agora escolho plugins e ativarei o que acabei de instalar. Você verá uma janela aparecendo que lhe dirá o que fazer e como usar o plugin. Queremos conectar o botão à nova tela. Então, selecionarei um botão que será clicado, mantenha pressionado Shift e selecionarei o destino. Feito. As áreas agora estão presas ao quadro. Se você mover o quadro, eles se moverão com ele. Este plugin específico também permite que você decida onde deseja conectar isso para encaixar nos quadros. Vamos conectar todos eles. Existem muitos plugins diferentes para fluxos e wireframes prontos. Sinta-se à vontade para explorar e descobrir o que é certo para você. Cada um dos erros cria uma camada na guia camadas. Você também pode agrupar todos eles e, em seguida, ativá-los e desativá-los. 21. Seção de comunidade Figma: Vamos configurar nossa tela de calendário. Agora, podemos configurar tudo à mão, ou podemos usar um pré-construído que outra pessoa fosse bom o suficiente para compartilhar conosco. Vamos para a seção da comunidade Figma. Vá para o ícone inicial e selecione comunidade. A seção da comunidade Figma é um espaço onde os criadores podem compartilhar seu trabalho Figma. Você pode pesquisar plugins, arquivos de design, wireframes, sistemas de wireframes, ilustração, ícones, tudo. Vamos pesquisar o calendário para nossos wireframes, e você verá uma variedade de arquivos aparecendo. Este aqui de Felipe Dolce parece perfeito. Clique nele e você receberá uma pré-visualização. Depois de carregado, você pode ver as diferentes páginas dentro do arquivo. Vamos duplicá-lo. Após um curto tempo de carregamento, você verá uma cópia idêntica do arquivo em sua conta Figma. Agora posso acessar todos os elementos. Vamos selecionar Calendário, pressionar o Comando C para copiar e vamos voltar para o topo com nosso arquivo de trabalho. Selecione o quadro certo e cole o calendário com o Command V. O contorno roxo me diz que esta é uma variante e o componente principal ainda está no arquivo original. Quero mudá-lo para minhas necessidades, então vou desanexá-lo. Agora posso fazer todas as mudanças que eu quero. Removerei os preenchimentos de fundo, os padrões e outros elementos que eu não quero. Vou configurar os têxteis e cor de acordo com minhas necessidades e posso redimensioná-lo. Vou transformar isso em um componente. Esse componente estará mais tarde na página do meu componente, então preencherei meu quadro com instâncias. Vamos organizar as instâncias e alterar os nomes do mês. Sim, eu teria que adaptar as datas para todos os meses, mas por enquanto, no wireframe, vou deixá-lo assim. Vou adicionar mais humores e marcar o dia com um círculo. Vamos também garantir que tenhamos alguns humores diferentes na semana atual. Como esta é basicamente a semana que aparecerá no topo na tela inicial. Agora, só preciso adaptar o cabeçalho e adicionar os diferentes dias da semana. Agora que tudo é do meu agrado, selecionarei o componente e o enviarei para a minha página do componente. Se eu pular para componentes, posso organizá-lo com o resto. 22. Nota: Antes de começarmos com layout automático: Recentemente, houve uma atualização no layout automático O menu parece um pouco diferente, mas possui os mesmos recursos, como espaçamento, preenchimento e direção entre linhas. No entanto, a opção de redimensionamento que antes era encontrada abaixo do menu Layout automático agora foi movida para o menu de quadros. Isso foi apenas uma mudança de posição. Ele ainda tem as mesmas opções e funciona exatamente da mesma forma. Você ainda pode seguir os tutoriais sobre redimensionamento. Apenas certifique-se de ativar as opções de redimensionamento a partir da nova posição aqui em cima. Também adicionei um vídeo de atualização ao final. Causa. Isso contém uma visão geral de todos os novos recursos de layout automático que, no entanto dizem mais respeito ao menu avançado. Se você é apenas um iniciante em Figma , não se preocupe muito com isso agora. Quando estiver pronto para se aprofundar um pouco mais no novo layout automático e no web design responsivo com o Figma, certifique-se de dar uma olhada na aula de mergulho profundo para design responsivo com o Figma que abrange esses tópicos aprofundados. 23. 0121 introdução do layout automático: O layout automático é uma propriedade que você pode adicionar a quadros e componentes. Ele ajuda você a criar designs que se adaptam a esse conteúdo. O layout automático é muito poderoso e pode ser usado para diferentes cenários. No entanto, é preciso um pouco de prática. Vou te mostrar o básico hoje. O exemplo mais simples e melhor para o layout automático é um botão. Digite algo e depois transforme-o em um quadro. Você pode fazer isso usando o atalho Command Alt e G. Você também pode simplesmente desenhar um quadro e escrever um texto dentro dele. Funcionará exatamente da mesma forma. Vou adicionar uma cor de fundo para que possamos vê-la melhor. Em seguida, selecione o layout automático no painel de propriedades do lado direito. Vamos adicionar um pouco de preenchimento. Você pode usar o menu de preenchimento de layouts automáticos para isso. Você pode adicionar um valor para todo o preenchimento ou clicar no pequeno quadrado e selecionar um valor para cima, esquerda, direita e inferior individualmente. Agora vamos arredondar os cantos. À medida que agora mudamos o conteúdo do padrão, tudo será dimensionado bem e ainda respeitará o preenchimento que definimos. Você pode transformar isso em componente e ter os botões perfeitos em todo o seu design. Isso parece muito simples, a magia acontece aqui no painel Propriedades do lado direito no menu de redimensionamento. Observe como tudo para o layout automático, bem como o conteúdo, está definido para invadir conteúdo. Se mudássemos isso, e digamos definir nosso contêiner externo para largura fixa e o interior para o contêiner completo, então teríamos um comportamento muito diferente. Observe também que o layout automático pode funcionar horizontal ou verticalmente. O que parece que algumas escolhas realmente se abrem e muitas possibilidades de comportamento. Pode se tornar bastante avassalador. Eu recomendo que você comece a usar o layout automático em elementos menores, como botões ou cartões simples. Então, pouco a pouco, trabalhe seu caminho para isso. Restrições e layout automático provavelmente são os assuntos mais difíceis da Figma. 24. 0122 Layout de forma aninhada - como criar um cartão Nested: A última parte do nosso wireframe que precisamos construir é a tela bloqueada. Isso basicamente consiste em um componente que é um cartão com um título de legenda de imagem, bem como algum texto de visualização. Começarei desenhando um quadro como o contêiner do cartão. Vou adicionar um pouco de margem para a esquerda e para a direita. Em seguida, adicionarei uma forma de retângulo, que será o espaço reservado para a imagem, bem como uma legenda, um título. Vou adicionar algum texto de espaço reservado que será minha pré-visualização. Vamos ter certeza de que ele é atribuído aos nossos estilos e alinhado bem. Agora posso transformar isso em um componente e reutilizá-lo. Mas meu título no texto de visualização pode nem sempre ter o mesmo tamanho. Minha caixa será muito longa ou muito curta. Não respeitará as distâncias. Vamos aplicar o layout automático ao nosso cartão. Se eu fizer o cartão inteiro em um layout automático, meu texto agora se adaptará, mas todo o meu preenchimento será perdido. Se eu aplicar o preenchimento de layout automático, ele o usaria em todo o conteúdo, incluindo minha imagem, que é o que eu não quero. No entanto, você pode aninhar o layout automático. Primeiro selecionarei todo o meu texto, agruparei e me certificarei de que ele está agrupado, caso contrário, não funcionará e depois o transformará em um layout automático dentro do meu layout automático. Agora posso adaptar o preenchimento de layout automático apenas para esta caixa separada. Mas observe como meu texto não se estende por toda a largura. Se eu digitar algo, ele não usa toda a caixa, eu não quero isso. O que preciso fazer é ajustar minhas configurações de redimensionamento e vou configurá-las para preencher o contêiner nesse caso. Agora ele usará todo o espaço disponível e ainda respeitará o preenchimento que defini. Se você está tendo problemas com isso, verifique se sua altura ainda está definida para o conteúdo dela. Verifique sempre se o texto, como tal, está definido como altura automática nas configurações de texto. Isso geralmente é a causa de qualquer erro se não estiver funcionando. Meu cartão está funcionando perfeitamente se eu mudar o conteúdo, mas quero mostrar um pouco mais ainda. Configurando meu contêiner para largura fixa e a altura para abraçar o conteúdo. Agora você pode redimensioná-lo melhor. Se você está tendo problemas para fazer isso funcionar. Certifique-se de verificar novamente as crianças dentro deste contêiner também têm a configuração correta. Ainda não terminamos com a mágica de layout automático. Vou transformar isso em componente, agora faremos instâncias que distribuirei dentro do meu quadro. Agora estou selecionando minhas instâncias, agrupo-as e as transformo em outro layout automático. Certifique-se de que todo o redimensionamento esteja definido da maneira que você quiser, e agora posso definir as distâncias entre eles, e posso alterar todo o conteúdo, e tudo se adapta perfeitamente. 25. 0123 finalizando nossa estrutura de arame: Agora, a única coisa que precisamos fazer é adicionar a única página de artigo ao nosso wireframe. De qualquer um dos meus códigos que criei anteriormente, vou selecionar a imagem, a legenda, o título e um texto de visualização e copiá-lo. Agora estou selecionando o quadro em que quero que o artigo individual seja exibido e nós o copiaremos aqui. Vou organizá-lo da maneira que eu quiser e colar meu texto aqui. Também vou me certificar de ajustar o cabeçalho de acordo. Na verdade, vou voltar para minha página de visão geral, onde quero adicionar os filtros ao cabeçalho. Em vez de apenas ampliar o cabeçalho, na verdade faz mais sentido criar uma seção separada que vou encaixar no meu cabeçalho principal. Criarei um quadro em que adiciono meus filtros e, em seguida, para mostrar o ativo, que é todos os artigos, vou apenas adicionar um traçado para o meu wireframe. Agora, o benefício de ter isso separado é que o cabeçalho pode ser um componente e, em seguida, eu apenas adiciono qualquer componente abaixo que eu queira estender o cabeçalho. Por exemplo, meus dias úteis que tenho no meu calendário também podem ser um anexo desse tipo. Vou mudar para erros para meu fluxo novamente e me certificar de que também tenho meus artigos vinculados. Observe que esta é uma versão realmente simplificada sobre um wireframe em fluxo aqui porque estamos realmente nos concentrando em aprender Figma neste curso. Normalmente, você adicionaria muito mais informações, como qual interação será, seria um clique, seria um golpe, o que aconteceu em caso de erro, que outras conexões poderiam estar acontecendo lá, o que acontece se eu voltar no tempo e assim por diante? Poderia parecer algo assim. Vamos também garantir que nosso componente na página de estilos tenha uma seção própria apenas para nossos wireframes e certifique-se de colocar tudo em seu próprio quadro. Se você estiver no painel de ativos, verá como ele foi bem ordenado para você. 26. 0124 Como organizar nosso arquivo para iniciar o design de UI Design: Terminamos nossos wireframes e começaremos a trabalhar no design da interface do usuário. Para isso, criarei uma nova página que chamarei de UI Design. Você pode ter wireframe e design em um arquivo, mas para projetos maiores, você também pode ter dois arquivos separados, isso depende de você. Se você estiver trabalhando no plano gratuito, também esteja ciente de que você tem um limite de arquivos que você pode ter, bem como páginas dentro de arquivos. Você também pode adicionar ícones aos capítulos, se quiser. Em um Mac, basta pressionar Control Command e a barra de espaço. Para o Windows, você precisa ativar o teclado táctil, clicar com o botão direito do mouse na barra de tarefas do Windows e clicar no botão Mostrar teclado Touch, você pode selecionar emojis. Também adicionarei alguma estrutura à minha página de visão geral de Componentes e Estilos. Novamente, você poderia ter tudo isso em arquivos separados, isso seria uma boa prática. Você pode configurar isso ao seu gosto. Normalmente, configuro uma seção para manipulação de arquivos, então tenho manchetes aqui, qualquer informação, qualquer coisa sobre um comportamento e quaisquer comentários que eu queira fazer no arquivo. Em seguida, terei minhas outras seções para wireframes e, mais tarde, meu design de interface do usuário. Também gosto de um sistema de semáforo para mostrar o estado de cada elemento. Qualquer informação adicional, mais tarde terei, como links ou membros da equipe, mais tarde também poderia colocar no sistema. É assim que minha organização parece, mas sinta-se totalmente livre para adaptar isso às suas necessidades. 27. 0125 quais tamanho de quadro devo usar?: Uma pergunta comum ao configurar projetos na Figma é qual tamanho de quadro devo usar? Geralmente, não há tamanho de quadro errado para iniciar seu design na Figma. Em um mundo perfeito, você deve tornar seu design responsivo e testado em diferentes tamanhos de tela de qualquer maneira. No entanto, você deve usar o mesmo tamanho mestre para todas as telas que você está projetando, como um ponto de partida inicial e referência que você e o resto da equipe concordaram. Existem vários aspectos que podem fazer você decidir sobre o tamanho da tela. Primeiro, você tem dados válidos, como o Google Analytics de um site anterior, que este é o tamanho de tela ou dispositivo mais popular entre seus usuários. Dois, você começa com o menor tamanho, pois é mais fácil escalar do que diminuir a escala. Essa é uma abordagem muito popular e isso também faz muito sentido porque, na maioria das vezes, seu código também será escrito dessa maneira. É chamado de primeira abordagem móvel. Três, você está usando o dispositivo ou o tamanho de tela mais popular usado no mercado no momento. mercado pode ser um mercado global ou um mercado-alvo, como na demografia ou no país. Você pode procurar esses números online. Há uma variedade de páginas que oferecem essas estatísticas. Quatro, você está usando o modelo mais recente que foi lançado. Por exemplo, se você estiver projetando um aplicativo iOS, usaria o tamanho da tela do dispositivo Apple mais recente no mercado. Figma geralmente os fornece automaticamente no menu Quadros. Isso se baseia no pressuposto de que o mercado naturalmente crescerá nisso, como vimos, por exemplo, com telas de telefone maiores e maiores nos últimos anos. Você, é claro, ainda testaria e se certifica de que seu design funciona bem em todos os outros tamanhos. Cinco, isso pode ser um pouco estranho, mas às vezes, especialmente em um pequeno projeto freelance, pode fazer sentido usar o dispositivo que você tem em mãos e usaria para apresentação e teste, por exemplo, o telefone que você usaria para mostrar seu protótipo. Obviamente, esse deve ser um tamanho padrão de mercado e relativamente atualizado. Os quadros sempre podem ser ajustados, mas é bom começar com o pé direito, então é melhor discutir com sua equipe e seus desenvolvedores para garantir que você esteja alinhado. 28. 0126 como configurar grades em Figma: Vamos adicionar uma grade ao nosso quadro. Para adicionar uma grade, selecione um quadro e clique no ícone de adição no painel de propriedades do lado direito em Grade de layout. Sua grade sempre terá as mesmas distâncias que você definiu em seu empurrão. No meu caso, isso é oito e, por padrão, você pode ter 10 aqui. Na maioria das vezes, não precisaremos de uma grade de fundo como essa, mas o que estamos procurando é uma grade de layout. Clique no ícone da grade e, no menu suspenso, escolha Colunas. Agora, podemos definir nossa grade. Com a contagem, você pode ajustar a quantidade de colunas. A cor e a opacidade aqui não são relevantes para o seu design, pois iremos ativá-la e desativá-la apenas para layout. Então você precisa digitar a seção. Centro significa que você tem um contêiner fixo segurando seu design composto de colunas e calhas de largura fixa. Quando você redimensionar, sua grade permanece no meio. A outra configuração que você precisará é esticar. Este é o que eu recomendaria usar para sua configuração móvel em geral. A grade se estenderá até a largura da tela e as colunas serão calculadas automaticamente. Ele ainda pode adicionar alguma calha e margem externa. Esquerda e direita, eles podem ser ignorados com segurança por enquanto. As grades são um tópico importante e complexo quando se trata lidar com web design responsivo. No entanto, para o design do nosso aplicativo, usaremos apenas uma grade como um contêiner principal e definiremos nossa margem automática. Você ainda pode adicionar mais colunas como duas ou quatro para dividir sua tela ainda mais, se isso for de ajuda para você. Você pode salvar a nota como um estilo, assim como cores e tipografia. Em grades de layout, clique no ícone de estilo, clique em mais e nomeie sua grade. Agora você pode aplicar esse estilo a qualquer outro quadro. Se você alterar o estilo da grade, isso será refletido em cada quadro em que for usado. Para alternar a visibilidade da grade, pressione Control G. 29. 0127 estilos de cores e convenções de nomes: Vamos adicionar as cores para o nosso design de interface do usuário. Olhando para trás para a minha armação de arame, quero que os botões sejam algum sistema de semáforo estendido. Quero que sejam vermelhos, laranja, azul e verde. Também vou adicionar um pouco de cinza escuro para meus textos e uma cor de fundo suave. Vamos voltar para nossa seção de componentes e estilo e configurar alguns estilos de cores. Primeiro vou configurar as cores para o meu humor. Vou desenhar quatro círculos e preenchê-los com vermelho, laranja, azul e verde. Você pode escolher cores adicionando um código hexadecimal, escolher a partir da visão geral de cores ou também escolhê-las de uma imagem com seu seletor de cores. Em seguida, configurarei minha nova escolha da mesma maneira. Terei um cinza escuro, quase preto e mais claro, uma base acinzentada clara, isso é apenas para o meu fundo adicionar um pouco mais dinâmico e um branco simples. Agora vou salvá-los como estilos e nomeá-los. Note, não estou nomeando-os de vermelho, laranja, azul e assim por diante, mas vou nomeá-los por sua função. Em alguns designs, essa pode ser uma cor de destaque. Nesse caso, esse é o clima que estou me referindo, tão triste, tão bom e ótimo. Para minhas cores de fundo e texto, vou nomeá-las neutras e adicionar uma cor, 800.700.200 e 0. Agora você pode se perguntar por que eu fiz isso. Isso ocorre porque se eu mudei a cor durante o processo de design, não preciso renomear. Os números estão lá para deixar espaço suficiente. Entre 200 e 700, por exemplo, eu poderia adicionar muitos tons sem estragar minha nomeação. Você também pode usar 10,20 e 30. Basta tentar evitar 1,2,3, pois não lhe dá espaço no meio. Se eu clicar no plano de fundo da tela, agora posso ver todos os meus novos estilos de cores. No entanto, não usei uma convenção de nomenclatura de barra para criar uma categoria. Ainda posso fazer isso aqui. Se eu selecionar todas as cores que eu quero, agrupe-as , isso criará uma seção que eu possa nomear. Posso agrupá-los ainda mais dentro desse grupo, e também posso mover cores entre grupos. 30. 0128 como configurar uma espécie de Typescale: Para o nosso design, a topografia precisará ser um pouco mais refinada do que para wireframe. É muito importante ter uma escala de tipo definido para criar hierarquia em seu design. Existem diferentes técnicas para abordar e conseguir isso. Como vou configurar um aplicativo para iOS aqui, vou usar algumas predefinições que a Apple me fornece no design da interface humana. No iOS, podemos usar algo chamado tipo dinâmico. Isso significa que cada um dos nossos têxteis corresponderia a um têxtil dinâmico. Você pode imaginar como se seu estilo vinculado a essa tag, basicamente. O benefício é que, posteriormente, o usuário pode alterar o tamanho do texto padrão, e tudo se adapta automaticamente. Você não precisa se preocupar com isso em seu design. Escolhi alguns dos estilos que quero usar e copiei todas as informações na minha folha de estilos Figma. Agora vou adicionar texto de amostra e estilizá-lo com os parâmetros fornecidos. Agora poderíamos usar as fontes de sistema incorporadas da Apple. Você pode vê-los e baixá-los no site do desenvolvedor da Apple ou usar sua própria fonte personalizada, que é o que farei. Depois de configurar todos os estilos que eu quero, vou nomeá-los de acordo com o nome do tipo dinâmico que escolhi, e os salvaremos como Estilos no meu arquivo Figma. Você também pode configurar sua própria escala de tipos se seu design precisar de mais flexibilidade. Em qualquer caso, não se esqueça de falar com seus desenvolvedores se houver algum requisito definido ou se eles estiverem usando um sistema específico. Caso você esteja projetando um site responsivo, precisará configurar uma escala de tipo responsivo de acordo com seus pontos de interrupção. Você começaria com um tamanho base para sua versão móvel e, em seguida, para cada ponto de interrupção, se necessário, adaptar a topografia. topografia responsiva para a web é um tópico bastante avançado e mais complexo e há um novo curso de aprendizado totalmente separado sobre isso. Neste exercício, não estamos construindo um site, mas um aplicativo. Vamos com nossos tamanhos iOS. A propósito, obviamente preparei tudo isso de antemão. Em um projeto novo e em execução, eu geralmente experimento diferentes tamanhos de fonte, wades, cores e assim por diante, no meu design de amostra, e uma vez que eu gosto, configurei todos os estilos. Muitas vezes eu ainda os mudo bastante durante o processo. Não se preocupe, vai demorar um pouco, e vai ser confuso no começo. Isso é absolutamente normal. Primeiro, criatividade, depois estrutura. 31. 0129 imagens em Figma: Ao usar imagens na Figma, geralmente é suficiente se você as usar em seu design. Você não precisa configurar uma seção de estilo próprio para imagens. No entanto, gosto de configurar uma planilha que descreva o estilo de imagem geral, bem como as dimensões que geralmente estou usando. Existem várias maneiras de adicionar uma imagem ao arquivo. Você pode importar uma imagem através do menu ou usar o atalho Shift Command ou Windows Control e K. Você também pode importar várias imagens. Selecione as imagens e você verá as imagens anexadas ao cursor com uma pequena bolha vermelha mostrando a quantidade da importação, bem como uma visualização da primeira imagem a ser colocada. Você pode soltá-los na tela. Você pode clicar e desenhar para adicioná-los em um tamanho específico ou soltá-los diretamente em qualquer forma. Você também pode simplesmente arrastar e soltar imagens em seu design ou copiá-las e colá-las. Figma suporta imagens estáticas , como JPEGs e PNGs, bem como GIFs animados. Você não verá a animação do seu GIF no modo de design, mas ela será mostrada posteriormente no modo de apresentação. Depois de ter suas imagens dentro da Figma, você pode alterá-las com uma ferramenta de edição de fotos. No entanto, é mais uma edição rápida, como exposição e contraste. Não é uma ferramenta de edição de fotos como o Photoshop. Você também pode escolher a forma como a imagem se comporta dentro da forma dada. Por padrão, as fotos preenchem qualquer forma. Isso significa que ele se expandirá por toda a largura. Escolher o ajuste garantirá que você veja toda a imagem. Isso pode, no entanto, causar espaços em branco. Com o corte, você pode cortar a área visível de acordo suas necessidades e também escolher qual parte da imagem é exibida. Tile criará o que você adivinhou, um azulejo. Isso é mais para padrões. A propósito, você também pode salvar imagens como um estilo de preenchimento ou traçado, como suas cores. 32. 0130 layouts responsivos com restrições: Queremos que nosso design seja flexível e responsivo para se adaptar a diferentes tamanhos de tela. É aqui que entram as restrições. Vamos ver como eles funcionam. Quero configurar o design da interface do usuário para minha tela inicial e copiei sobre o wireframe como referência. Quando eu o redimensiono, não acontece muita coisa. Vamos configurar nosso design de interface do usuário e vamos começar com uma barra de status, pois queremos que isso pareça o mais realista possível. Vou pular para a seção da comunidade e pesquisar a barra de status do iOS. Vou pegar um e copiá-lo para o meu arquivo. Agora observe como quando eu redimensiono essa barra, tudo fica em seu lugar. Quando clico na hora, você pode ver que pequenos traços azuis anexados à esquerda e à parte superior e no painel Propriedades, podemos ver as restrições definidas como superior e esquerda. Se clicarmos nos outros elementos do outro lado, podemos ver que o mesmo está definido à direita. Você pode alterar essa configuração clicando em um diagrama ou através do menu suspenso. Se eu pegar a bateria, movê-la para o centro e colocá-la no centro, ela ficaria bem no meio. Se eu fosse ajustado para escala, ele se estenderia com o quadro. No entanto, queremos que isso esteja respondendo ao nosso quadro pai, o quadro que representa nossa tela. Isso ainda não está acontecendo. O que precisamos fazer é pegar o quadro da barra de status em si e definir isso para dimensionar. Se agora o posicionarmos no quadro e redimensionar o quadro, podemos ver que ele se dimensiona bem. Há outra configuração chamada esquerda e direita, que é útil. A diferença entre esquerda e direita e escala é a seguinte. Se eu definir um elemento para dimensionar, ele será redimensionado como uma porcentagem das dimensões dos quadros. Se eu definir o mesmo elemento agora para esquerda e direita, ele manterá o tamanho da camada na posição em relação aos dois lados do quadro. Isso é muito mais útil se você quiser ter uma margem fixa ou amarrar um elemento a uma largura de coluna da sua grade. Vou desenhar outro quadro para o cabeçalho e copiarei meus links e os alterarei para meus novos textos e estilos de cores. Deixe-me também dar ao fundo uma leve tonalidade. Agora vou definir ou restrições para a criança, bem como elementos aparentes. Vou apenas adicionar um contêiner simples como meu rodapé também. Este eu quero ficar no fundo. Vou usar um pequeno truque agora. No painel Propriedades sob quadros, um pouco oculto, posso escolher qualquer outro tamanho de quadro, então vou pular para o menor iPhone disponível agora, que é o SE e eu vou redimensionar todo o quadro. Dessa forma, posso verificar realisticamente qualquer outro tamanho de dispositivo. Agora vou fazer todos eles em componentes e salvá-los na minha página de componentes. Quando eu as copio, talvez seja necessário reajustar a configuração do contêiner pai conforme ela é definida em um novo quadro. Observe que para que o painel de restrições apareça, você precisa de um quadro pai. layout automático também precisaria ser colocado em um grupo pai para estar funcionando. 33. 0131 operações booleanas em Figma: Agora vou criar botões de humor do nosso design. Farei isso do zero, pois quero encarar isso de forma um pouco diferente. Começo com um círculo e, a partir dos meus estilos no meu menu Preenchimento, escolhi uma cor para triste. Agora eu quero um pouco mais de profundidade. Vou duplicar o círculo logo em cima do círculo, e chamarei essa sombra de camada. Vou mudar a cor para uma escura e mudar a opacidade para 10. Lembre-se de que você pode usar apenas os números no teclado. Agora vou duplicá-lo novamente e movê-lo um pouco, então eu tenho uma sobreposição. Agora, selecionarei as duas camadas de sombra e, no menu Superior, selecionarei Subtrair seleção. Essas operações são chamadas de operações booleanas. Você pode escolher entre união para unir formas, subtraindo formas umas das outras, cruzando, o que o deixaria com apenas as partes sobrepostas, e excluir, que seria o inverso de se cruzam. Agora só preciso desenhar o rosto. Vou desenhar o olho esquerdo com dois círculos. Vou agrupá-los e chamá-lo de olho esquerdo. Agora vou duplicá-lo e criar um segundo olho, e vou chamar isso de olho direito. Agora vou adicionar uma boca. Em vez de desenhá-lo, vou apenas adicionar um círculo, preenchê-lo em uma cor escura para meus estilos e, em seguida, pressionar “Shift X”, que é o atalho para inverter cores. Agora eu clico duas vezes nele, o que me leva ao modo de edição, e excluirei um dos pontos de ancoragem para criar minha boca triste. Agora posso arredondar as bordas, ajustar o traçado, e vou nomeá-lo de boca. Nosso rosto está pronto. Agora selecione todo o rosto e agrupe-o e nomeie-o. Agora vou duplicá-lo mais três vezes e renomear as cópias. Agora vou me adaptar à cor e aos rostos dos diferentes botões. Meu amarelo, vou mudar a boca em um derrame e mover os olhos um pouco. O azul, torcendo a boca, depois reorganizando novamente o rosto. Meu verde, na verdade, estou conectando os caminhos para que eu possa criar uma boca de riso e depois me ajustar. Quando terminar, seleciono todos os botões e os transformei em um grupo. Agora vou copiar meu texto e ajustá-lo com minhas novas cores e estilos. Vou fazer mais um grupo com meu grupo de botões e meu texto e chamá-lo de conteúdo. Agora só preciso adicionar minhas restrições e garantir que elas funcionem bem em outros tamanhos. 34. 0132 componentes e variantes aninhadas: Agora criarei uma barra de guias e apresentarei um ótimo conceito chamado variância. Desta vez, vou entrar diretamente na minha seção Componente. Já criei um quadro para meu rodapé e agora quero adicionar os ícones. Copiei sobre uma casa, um calendário e um livro de um conjunto de ícones. Para obter ícones, você pode desenhá-los você mesmo, como acabamos de fazer com nossos botões de rosto, ou você pode usar ícones prontos. Se você pular para a seção da Comunidade Figma, você encontrará muito. Tente procurar algo como o ícone Material Design, que é bibliotecas prontas ou vá em frente e compre um bom conjunto de ícones, vale realmente o seu dinheiro. Eu pessoalmente gosto de usar este. Observe que os ícones são vetores, o que significa que eles podem ser dimensionados o quanto você quiser sem perder a qualidade. É muito importante que seus ícones estejam em formato vetorial e não em imagens. Eu nomeei meus ícones Ícone/Home/Inativo e depois Ícone/Calendário/Inativo no mesmo para o Blog. Agora vou selecionar esses ícones, fazer uma cópia e ajustar a cor para uma versão ativa. Em seguida, vou me certificar de alterar o inativo para ativo no nome. Agora vou selecionar todos eles e transformá-los em componentes. Certifique-se de que cada ícone seja seu próprio componente. Isso é realmente importante, caso contrário, não funcionará. Agora selecione todos eles e escolha combinar como variação no painel Propriedades. Agora você verá uma pequena linha roxa ao redor deles indicando que eles fazem parte de um conjunto de componentes. Se formos para o painel Ativos, podemos ver que apenas um ícone foi armazenado. Vamos retirá-lo como uma instância e colocá-lo em nossa barra de abas. Agora vamos duplicá-lo e posicioná-lo da maneira que queríamos. Nos lados direito do painel Property, agora você pode ver algumas suspensas para sua variação chamada Propriedade 1 e Propriedade 2. Com a Propriedade 1, posso alterar o tipo de ícone. Propriedade 2, deixe-me escolher entre inativo e ativo. Observe como isso foi criado devido à convenção de nomenclatura de barras que usamos. O primeiro nome cria o nome do grupo. Então temos que a Propriedade 1, que é onde anotamos o tipo de ícone. Então o terceiro é o estado, no nosso caso, ativo e inativo. Usando a convenção de nomenclatura de barras, você pode criar quantas propriedades precisar. Se eu selecionar o grupo de variantes, posso obter uma visão geral sobre nomes e distribuição e também posso alterar os nomes aqui. Você também pode adicionar variantes e propriedades a um grupo existente daqui. Você também pode alterar todas essas coisas no painel de camadas. Mas dê uma olhada, a nomeação da sua camada se adaptou automaticamente e foi alterada. Não mude isso de volta porque isso é muito importante para que ele funcione. No entanto, é muito mais tedioso adaptar sua variância aqui do que no seu painel de variância. Agora só vou adicionar minhas restrições à esquerda, à direita e no centro neste caso, e vou saltar de volta para o meu design. O melhor é agora que eu tenho um cone de componente com componentes aninhados dentro dele, que são variância. Posso copiar a mesma variante em todas as minhas telas diferentes. No entanto, posso simplesmente alternar para botões ativos para cada tela conforme necessário. Isso também será uma grande vantagem quando você começar a animar seus projetos mais tarde. 35. 0133 mais sobre as variantes criando uma barra de calendário: Vamos trazer o calendário mais vivo em nosso design e usar nossos novos estilos de humor como uma cor de fundo completa. Vou te dar uma pequena prévia do que estou procurando. Vou primeiro configurar os dias da semana, então eu desenho uma caixa de texto de largura total e adiciono algum texto. Vou estilizá-lo e dividi-lo por 7 para obter um dia da semana. Vou fazer isso em um componente e vou armazená-lo ao lado do meu quadro por enquanto enquanto estou trabalhando nisso. Agora, vou copiar as instâncias e configurar a semana inteira. Vamos copiá-lo e renomeá-lo. Agora vou desenhar um quadro para as datas, e vou dividir isso por 7 e dar-lhe uma altura de 45. Vamos adicionar nossa data. não vou transformar isso em um componente Ainda não vou transformar isso em um componente porque primeiro quero criar minha variância. Vou configurar o seguinte. Primeiro, vou configurar uma versão padrão. Então eu adiciono um com o círculo. Isso ocorre se apenas um dia for selecionado. Vou colorir o círculo com a cor do meu humor, e agora, criarei mais três variantes. Isso ocorre se vários dados forem selecionados. O primeiro, o começo mantém o círculo e terá um pequeno retângulo para o fundo. O segundo só segurará esse retângulo, e o último, terá novamente um círculo e um retângulo, mas agora apontando para a outra direção como uma extremidade de fechamento. Agora precisamos nomeá-los, e isso é importante porque aqui precisamos usar a convenção de nomenclatura correta para criar nosso conjunto de variâncias. Vamos nomeá-los, data, isso é o mesmo para todos eles, pois este é o nome do grupo. Então vamos ter uma barra, colocar humor, aqui vamos dizer ótimo triste ou assim por diante, quaisquer que sejam as cores. Então vamos ter uma barra e colocar a posição, então isso será nenhum, um único dia, começo, meio ou fim. Vamos nomear todos eles. Quando terminar a nomeação, vou copiar apenas o conjunto com as cores e vou fazer um para cada humor. Selecionarei todos eles e, a partir dos componentes, agora escolherei Criar conjunto de componentes. Isso é exatamente o mesmo que criar variância a partir do painel Propriedades do lado direito. Agora eu não mudei o nome do humor, que é minha propriedade 1. O que vou fazer é selecionar a variação para cada humor e mudar para o painel Propriedades do lado direito para minha variação e, a qualquer ano, vou ajustar nomes e humores mais antigos. Vamos experimentá-lo. Agora, no meu painel de ativos, vou tirar meu componente de data e vou configurar minha semana. Se eu escolher qualquer uma dessas variantes, posso estilizá-las bem com a ajuda do meu painel Componentes. Para o meu dia atual, eu só quero adicionar um círculo com um contorno. O que vou fazer é voltar para minha variante padrão, e vou adicionar um círculo, mas vou torná-lo invisível. Agora, na minha variante, posso substituí-lo e apenas adicionar um esboço. 36. 0134 mais restrições criando um calendário responsivo: Neste momento, nossa tela é ótima, mas se eu mudar o tamanho, o calendário ficará preso no canto superior esquerdo, pois essa é a configuração padrão. Vamos adicionar algumas restrições e torná-las responsivas. Nossos dias úteis são fáceis. Simplesmente escolhemos todo o grupo e o configuramos para dimensionar horizontalmente. Mas se fizermos o mesmo às nossas datas, isso não vai parecer certo. Agora, queremos que nossos números e os círculos sejam definidos para o centro em altura e largura. Eles são fixos, e somente o fundo colorido é o que queremos dimensionar. Selecionarei todas as minhas variantes e as definirei para centralizar em ambas as direções. Então eu escolho apenas a cor de fundo. Mantenha “Shift” pressionado para que você possa juntar várias seleções, e eu as configurarei para dimensionar. Vamos agora voltar para o nosso quadro e o grupo segurando as variantes e certificar-se de que ele está configurado para dimensionar. Agora é exatamente o que estamos procurando. Agora vamos criar nosso quadro de calendário. Vou copiar sobre meu wireframe como referência. Vou duplicar o quadro inicial e mudar um plano de fundo para meus dias de semana, pois eles ficarão presos ao cabeçalho. Vou me livrar dos meus botões Mood e certificar de ajustar o ícone da Barra de guias. Usarei minha semana do calendário para criar um mês, simplesmente duplicando-a. Usando variantes, posso configurar uma visão geral do humor passado e mudar tudo ao meu gosto em pouco tempo. Você entende a ideia. Vou avançar um pouco. Eu adicionei o nome do mês e agrupei tudo. Agora tenho um calendário personalizável totalmente responsivo. Fiz um pouco mais aqui e coloquei meu calendário em seu próprio quadro, e esse quadro eu defini para dimensionar e fixá-lo na parte inferior. Dessa forma, o mês atual e o último mês de agosto sempre estarão visíveis quando eu redimensionar. Se eu pular para a tela menor, você pode ver que os círculos se encaixam perfeitamente em uma fileira. Isso ocorre porque eu defini o tamanho fixo para 45, que calculei com o menor tamanho de tela com antecedência. É assim que escolhi configurar meu calendário. Você pode optar por um comportamento diferente. Por exemplo, ele pode ficar fixo no meio. Ou você pode até criar um resultado semelhante com layout automático. Agora vamos enviar nossas variantes apenas para nossa página de componentes e estilo, e terminamos. 37. Escalando 0135 no edifício Figma construindo as páginas: Queremos mostrar o que acontece quando pressiono cada um dos botões de humor, então precisamos de uma página para cada ação. Então vou duplicar minha tela inicial quatro vezes e quero tornar isso um pouco mais divertido do que nos meus wireframes. Eu quero que apenas um dos botões seja realmente grande e aumente a escala. Posso desagrupar conteúdo com Shift, Command e G. Então vou me livrar dos botões que não preciso mais. Agora pegamos o botão de humor que resta e queremos torná-lo realmente grande. Se eu o ampliasse, isso não dimensionaria os traços e o conteúdo. Então, usarei a ferramenta de escala que posso selecionar no menu ou simplesmente pressionar K. Agora posso ampliar o botão para o tamanho desejado e reposicioná-lo. Para manter o menu visível na frente do botão do rosto, você pode movê-lo para cima no painel de camadas ou simplesmente copiá-lo, excluí-lo e colá-lo de volta no quadro. Apenas certifique-se de que esteja no quadro. Para sair do modo de escala, basta pressionar Escape. Ótimo. Vamos fazer o mesmo com nossos outros botões e escalá-los e você verá que nosso design realmente começa a ganhar vida sem muito esforço. Agora vou editar um texto para cada um dos meus quadros de acordo com o humor e então acho que vou fazer alguns últimos ajustes no posicionamento. Deixe-me ver. Sim, acho que é assim que eu gosto e este é o meu botão de humor feito. 38. 0136 conteúdo de Clipping criando as páginas de revista: Agora, tudo o que falta é meu bloco na visão geral da revista e minha página de detalhes. Como já configurei meu layout automático de conteúdo para meu wireframe, simplesmente copiarei e depois voltarei para minha página de design. Aqui, criarei um novo quadro e vou adaptar um cabeçalho. Por enquanto, só vou adicionar bloco como título e vou me livrar de hoje. Vamos também definir o ícone do calendário para ativo em nossa barra de abas. Agora, vou colar no cartão que copiei anteriormente do meu wireframe no meu novo quadro de design. Como se trata de um componente wireframe, certifique-se de desanexá-lo. Agora vou fazer minhas alterações. Vou mudar a legenda, o título e o corpo do texto para meus estilos predefinidos em topografia e cor. Também vou me livrar do traço ao redor do meu cartão. Todo o preenchimento parece bom para mim. Agora, vou pegar este cartão e transformá-lo em um novo componente de design. Manterei uma instância aqui e enviarei o componente mestre para minha página de estilos e componentes. Ótimo. Agora eu posso duplicar a instância, e farei isso em um layout automático novamente, aninhando em cartões de layout automático dentro. Agora eu posso simplesmente copiar e colar os cartões, mas não os verei quando eles começam a ficar fora do quadro. Desativarei o campo de conteúdo do clipe no menu do quadro no lado direito. Agora sou capaz de editá-los ainda mais. Agora posso adaptar as manchetes dos meus cartões. Como eu tenho o layout automático definido, tudo se classificará bem. Agora, a única coisa que falta são nossas imagens. Vou importar várias imagens pressionando Shift Command e K. Agora só para soltá-las no campo. Você também pode selecionar Forma e, através do menu do filme, fazer upload de imagens uma a uma. Vou desligar o conteúdo do clipe e me certificar que a barra de abas esteja no topo dos meus cartões. Uma pequena nota lateral, lembre-se que colocamos algumas imagens em nossos estilos para trabalhar. Se você quiser usá-los, primeiro você precisaria exportá-los e então você pode inseri-los novamente como acabei de fazer. Para exportar, basta selecionar todas as imagens, pressionar Exportar no painel Propriedades do lado direito e exportá-las como JPEGs ou se você tiver transparências, PNGs. Para garantir que eles fiquem bem, em telas de alta resolução, escolha 2X ou mesmo 3X. Isso significa que eles serão exportados em dobro ou triplo do tamanho que você está vendo aqui agora. Isso é possível porque o original que eu carreguei também é maior, e a Figma armazena isso. Agora vou fazer o mesmo com minha página de artigo detalhada. Vou configurar um quadro, copiar o conteúdo do meu wireframe e simplesmente colá-lo aqui e ajustar o estilo e a imagem. Vamos nos certificar, como de costume , usar nossos estilos predefinidos e, em seguida, para as imagens, estou apenas carregando uma das minhas imagens de antes e adicionando o menu, e acabei. 39. 0137 modo de apresentação com elementos Scrollable e fixos: A visualização da apresentação nos permitirá visualizar nossos designs. Aqui, você também verá gifs animados, uma ação. Selecione um quadro e pressione o botão play no canto superior direito. Observe como isso abre uma guia separada. Você pode alternar entre o design e o modo de visualização. Você também pode adicionar uma moldura de dispositivo. Basta abrir a guia Protótipo e escolher o tamanho da tela em que você está trabalhando. Certifique-se de que o tamanho do dispositivo e o tamanho do quadro definido sejam iguais. Isso é muito importante. Você pode pular os quadros com os botões de seta do teclado. Agora, isso parece ótimo para todos os meus quadros que cabem exatamente dentro de um determinado tamanho de tela. Mas alguns deles têm conteúdo rolável, como a visão geral do meu artigo na página de detalhes. E esse conteúdo agora está oculto. Vamos voltar aos nossos designs novamente e selecionar uma moldura com o conteúdo que precisa ser rolável. Do lado direito, menu do painel de propriedades. Agora escolhemos a rolagem por excesso, a opção rolagem vertical. Voltando ao nosso protótipo, podemos ver que isso funciona muito bem. No entanto, agora tudo está engatinhando. Em seu arquivo de design. Selecione os elementos que você deseja que continuem falsos. E no meu caso, essas são as barras superiores e a barra inferior da guia. E depois pule para o protótipo. E em Posição, escolha fixo, permaneça no lugar. Você pode ver que agora tudo está corrigido, exceto meu conteúdo rolável. Através do mesmo menu. Você também pode escolher que os elementos só se tornem pegajosos quando chegarem ao topo na rolagem. Então, se fizermos isso, você pode ver que agora, se rolarmos a barra inferior, o que rola e depois ficarmos fixos na parte superior. Portanto, nada que queremos neste caso, mas é muito útil para outras configurações. 40. 0138 Espelho de figma - Visualizar seu dispositivo: Você também pode visualizar seus protótipos móveis em seu telefone físico, o que é algo que eu recomendo vivamente. Vá para a Apple ou Google Play Store e pesquise o Figma Mirror instale o aplicativo gratuito no seu dispositivo. Agora basta abrir o aplicativo e fazer login com um nome de usuário e senha. No aplicativo, você verá uma visão geral de todos os seus designs. Isso também pode estar vazio se você acabou de começar. Clique em “Espelho” e ele pedirá que você selecione quadro ou componentes. No seu arquivo Figma real, basta clicar em qualquer quadro. O quadro selecionado será exibido em seu dispositivo. Isso funciona em tempo real para que você possa pular por quadros diferentes, mas também se você fizer alterações em seu design, isso refletirá diretamente na tela. Mirror sempre usa 100% da largura, e é por isso que é tão importante que você verifique se o tamanho do quadro corresponde ao dispositivo real. Caso contrário, seu design será dimensionado e não será confiável. 41. 0139 como compartilhar arquivos com designers e desenvolvedores: Figma é especialmente incrível quando se trata de compartilhar arquivos e trabalhar com vários membros da equipe. Você pode convidar pessoas para todo o seu projeto ou compartilhar um único arquivo com outras pessoas. Ao compartilhar, você pode escolher entre convidar por e-mail ou por meio de um link. Você pode conceder direitos de visualização ou edição. direitos de edição basicamente darão à pessoa que você convidar o mesmo acesso e visualização do arquivo que você tem. Se você quiser convidar um colega designer ou redator para trabalhar em um design, então você precisa escolher Editar. Os direitos de visualização são mais limitados. No entanto, isso não é uma coisa ruim. Na verdade, é ideal para desenvolvimento de entrega ou compartilhamento projetos com não designers para evitar mudanças acidentais e avassaladoras. Você pode conceder quantas permissões de visualização para seus arquivos desejar sem nenhum custo extra. Vamos criar um link de visualização e vamos entrar apenas com direitos de visualização. Vemos apenas ferramentas para comentar e podemos nos movimentar , mas não trabalhar no arquivo. Os usuários convidados com o modo de visualização ainda podem ver todas as páginas e camadas. Eles podem alterar a visualização da apresentação. Se você configurar um protótipo, eles também poderão acessar isso. No modo de exibição, você também pode ver grades e réguas que você pode ter definido e também pode pressionar a tecla Alt para ver qualquer distância até um determinado objeto. Em vez do painel de propriedades, você verá o painel de inspeção que também inclui a função de exportação. Isso é essencial para desenvolvedores. Além disso, um resumo de seus estilos ainda aparecerá quando você clicar no fundo cinza da tela. Se você estiver trabalhando simultaneamente em um arquivo, verá o cursor do outro usuário e no canto superior direito da tela, você poderá ver todos que estão acessando esse arquivo no momento. Se você clicar no ícone, poderá seguir o movimento e a visualização da tela. 42. 0140 Painel de inspeção de Figma: Vamos dar uma olhada no painel Inspecionar. O painel Inspecionar nos mostra todos os detalhes de um elemento e é essencial para a comunicação com o desenvolvimento. Os desenvolvedores podem escolher se querem produzir em decisão CSS se quiserem desenvolver um site ou para aplicativos no iOS ou Android, você não precisa se preocupar com isso. Eles podem escolher isso sozinhos. Ao clicar em qualquer elemento, todas as informações são exibidas no painel Inspecionar. Observe também como todos os estilos são anotados como comentários, bem como seus nomes de grupos e camadas. No modo de visualização, todas as distâncias serão mostradas automaticamente sem precisar pressionar Alt. E você também pode ativar suas grades. A propósito, a guia Inspecionar também está sempre disponível em seu modo de edição, para que você possa dar uma olhada nisso a qualquer momento. 43. 0141 Recursos de exportação: Qualquer pessoa com acesso ao arquivo com permissão de visualização ou edição também pode exportar ativos. Isso é realmente importante para garantir imagens de boa qualidade em diferentes resoluções de tela durante a programação. Clique em uma imagem e vá para o painel Exportar. No modo de exibição, essa será uma guia própria. No modo de edição, isso estará no final do painel Propriedades. Clique no sinal de Plus e você receberá sua primeira exportação em 1x, que é o tamanho atual em que estamos projetando. Por padrão, você obtém um PNG, mas pode alterá-lo para um JPEG ou um SVG. JPEG sempre seria sua prioridade. Isso é para uma imagem padrão. Se sua imagem tiver transparência, vá para um PNG. Se você estiver exportando um ícone, logotipo ou desenho semelhante a um vetor, use SVG. Há também a opção para PDF, mas isso é mais se você quiser exportar, digamos que uma tela para uma apresentação ou algo assim, não é nada que você precise na programação. Agora, clique no sinal Mais novamente para adicionar uma segunda exportação. Observe como ele irá defini-lo direito para 2x e, em seguida, adicionará um sufixo de 2x. Isso significa que ele tem o dobro do tamanho do seu design atual, e isso é realmente importante para garantir uma imagem nítida em telas de retina. Você pode precisar de outra resolução maior ou diferente. Verifique com seus desenvolvedores. Depois de configurá-los, pressione “Exportar”. Uma pequena dica de antemão. Se você nomear suas imagens com uma barra direta como aqui imagens, o pôr do sol na barra, então a primeira será uma pasta criada e a última será o nome da imagem dentro desta pasta. Você também pode criar subpastas como essa. Isso é realmente ótimo e economizará muito arrastar e soltar. Se você exporta todas as imagens ou se isso é feito por sua equipe de desenvolvimento, você pode discutir diretamente em sua equipe. 44. Biblioteca de equipes 0142 Figma: Ao trabalhar em equipe, queremos que todos os membros da equipe tenham acesso aos mesmos estilos e componentes para manter nosso design consistente. Podemos publicar nossos estilos e componentes na chamada Team Library. Estilos de publicação estão atualmente disponíveis para planos gratuitos, mas para publicar componentes, você precisaria de um plano de página. Aqui tenho alguns estilos e componentes, vamos publicá-los na biblioteca. Navegue até a guia Ativos e , no lado direito, você verá um ícone de livro, que abrirá a janela Biblioteca de equipes. Se você já tiver outras bibliotecas compartilhadas em sua conta, você as verá aqui e poderá ativá-las com um tockle. Na parte superior, você verá o arquivo atual em que está e verá o botão Publicar. Se você não vir o botão Publicar, certifique-se de primeiro criar alguns estilos de componentes. Pressione Publicar e uma nova janela será aberta, solicitando que você adicione uma descrição. Isso é realmente útil se você fizer alterações mais tarde, então você deve anotar o que e por que está publicando. Figma, salvará uma versão para você após o arquivo que você publicou, que é chamado de controle de versão e significa que você pode saltar de volta no caso de um erro. É aconselhável publicar com mais frequência em pedaços menores e sempre adicionar uma descrição realmente sólida. Abaixo, você verá um resumo do componente e estilos novos ou foram alterados e serão publicados. Você pode selecionar todos eles ou apenas alguns. Quando estiver pronto, pressione Publicar. Muito bem. Você acabou de criar sua primeira biblioteca de equipes. Vamos abrir um novo arquivo vazio e nomeá-lo Website. Não há estilos e nem componentes aqui até agora. Agora volte para a guia Ativos e abra a Biblioteca novamente. Você verá uma lista de todos os projetos e arquivos que publicaram bibliotecas. Ative o arquivo que você acabou de criar e você verá todos os estilos e componentes disponíveis. Você também pode ativar várias bibliotecas. Algumas pessoas gostam de manter, por exemplo, sua tipografia em uma biblioteca, suas cores em uma biblioteca. Mas isso depende de você e sua equipe como você quer organizar isso. Assim que você criar um novo estilo ou componente, você será solicitado a atualizar a biblioteca. Depois de fazer isso, o resto da equipe também receberá uma solicitação para atualizar sua biblioteca e fazer as novas alterações. Depois de clicarem em Atualizar, eles verão as alterações dos executivos feitas e poderão decidir atualizar para a versão mais recente ou não. 45. 0143 como configurar uma miniatura: Ao compartilhar arquivos, é ótimo ter uma orientação à primeira vista sobre o que os arquivos estão contendo. As miniaturas são ótimas para isso. Pense neles como uma capa de livro. Por padrão, a Figma transformará a primeira página do seu design em uma miniatura, mas você também pode definir a sua própria. As dimensões da miniatura são 1.920 por 960. Eu configurei um quadro com essas dimensões e adicionei algumas informações sobre meu aplicativo. Eu também fiz um bom mock-up. Por este meio, eu simplesmente peguei um iPhone da seção da comunidade. Certifique-se de escolher uma que vem em camadas e, em seguida, você geralmente encontrará uma das camadas que contém uma imagem que você pode substituir pela sua. Você não pode substituí-lo por um quadro real. Precisa ser uma imagem. Simplesmente exportei meus quadros como JPEGs e, em seguida, os carregei novamente como uma imagem dentro da tela do meu iPhone. Como você pode ver, também fiz uma chamada tela inicial simplesmente montando minhas fases de humor e adicionei um logotipo para trazer o aplicativo mais vivo. Você pode incluir tudo o que quiser em sua miniatura. Também é um ótimo lugar para adicionar mais informações, como links para fontes ou bibliotecas externas. Definir este aplicativo como uma miniatura é muito fácil. Basta clicar com o botão direito do mouse no quadro e escolher “Definir uma miniatura”. Agora, à medida que voltamos para Início, podemos ver que nossa miniatura está definida como um título, e isso também será visível para qualquer outra pessoa que trabalhe em seu arquivo. 46. ATUALIZAÇÃO: Layout automático: O novo layout automático Figma foi atualizado e anunciado durante o conflito em maio de 2022. Algumas coisas permanecem as mesmas, algumas fetais e novas e excitantes, e algumas coisas simplesmente se movem e vêm com pequenos detalhes doces que você não deve perder. Dê-me cinco minutos do seu tempo e eu o atualizarei com tudo sobre o novo layout automático. Assim, você fica à frente do jogo e pode voltar ao trabalho. Vamos começar do início, aplicando o layout automático, pressionando a mesma tecla Shift a ou usando o menu. Nada mudou. No entanto, observe como as camadas agora se empilham na ordem mostrada no Canvas faz muito mais sentido. Obrigado por isso Figma, aquela velha ordem inversa realmente costumava me irritar. No entanto, a aparência do menu Auto Layout mudou. Vamos investigar. direção funciona exatamente da mesma forma que antes, e também o espaço entre elas. Você também pode definir o preenchimento horizontal e vertical mesma forma que costumávamos fazer antes. Se você quiser um preenchimento individual, basta clicar para abrir as opções para todos os sites. Bastante normal. Dica, segure Command e clique em qualquer campo de preenchimento. Agora você pode usar as notações comuns como faria em CSS ou simplesmente digitar um número para todos. A ferramenta de alinhamento simplesmente alterou posição do submenu para o menu principal. Caso contrário, permanece exatamente o mesmo. E contém alguns novos atalhos interessantes, que vou mostrar em breve. O novo controle do Canvas. Além do menu Auto Layout, agora você também tem um próprio controle Canvas. E isso é muito incrível. Portanto, se você passar o mouse sobre qualquer quadro de layout automático, verá as pequenas alças rosa aparecerem e poderá simplesmente arrastá-las para ajustá-las. Isso funciona para espaço entre e também para preenchimento. Isso vem com alguns atalhos muito bons. Então, deixe-me mostrar algumas dicas e truques. Se você segurar a tecla Shift enquanto arrasta, aumenta ou diminui um conjunto de valores de ajuste. Muito bom. Você também pode clicar duas vezes na alça para vincular o valor específico. Mantenha tudo pressionado ao ajustar o preenchimento e você obterá os mesmos valores para horizontal ou vertical. Se você segurar Shift e Alt enquanto arrasta, então todo o preenchimento será redimensionado igualmente. Novo espaçamento negativo. Ok, estou muito empolgada com essa. Agora você pode ter um espaçamento negativo entre os filhos do layout automático, o que significa que você pode empilhar elementos. Finalmente, se você clicar nos três pequenos pontos, qualquer menu de layout automático, você acessará as opções avançadas do menu de layout. E há algumas coisas novas e algumas coisas antigas aprimoradas. O modo de espaçamento é o mesmo velho, mas novo atalho. Então, assim como um layout automático anterior, por padrão, tudo está configurado para embalado. Embalado significa que o espaço entre seus elementos secundários está definido como um número fixo. Se você alterar isso para espaço entre, por outro lado, ele ocupará todo o espaço disponível e criará espaços iguais entre os elementos filhos diretos. Agora eu adoro esse recurso e o uso muito, mas é um pouco chato sempre acessar esses submenus. Há ótimos novos atalhos para alternar entre espaço compactado e espaço no novo layout automático. Basta selecionar a caixa de alinhamento e pressionar X para alternar entre o espaço entre o impacto. Ou clique na alça de controle do Canvas e simplesmente digite auto para configurá-la para espaço entre ou qualquer valor fixo para embalagem. Outro recurso totalmente novo que você encontra no menu de layout avançado é incluir a exclusão de traços. Isso será uma ótima ajuda para tornar os traços parte de seus componentes. Você também encontra no Layout automático avançado a alteração da ordem de empilhamento. Então, aqui você pode alterar a ordem se tiver elementos empilhados por meio de espaçamento negativo. Observe como isso não altera a ordem no menu Camadas. Além do empilhamento, você também pode sempre usar boas e antigas setas do teclado se quiser alterar a posição real de um filho de layout automático. E o último, novo e excelente auxiliar, é o alinhamento da linha de base do texto. Você precisa de pelo menos um elemento de texto para que isso funcione. Em seguida, você pode optar por alinhar no centro ou por meio da linha de base do texto. Outro ótimo atalho, selecione a caixa de alinhamento e pressione B para alternar o alinhamento da linha de base do texto. Posicionamento absoluto totalmente novo e incrível. Este é um salva-vidas total. Arraste primeiro um elemento para o quadro de layout automático e, em seguida, você terá a opção no menu de quadros para defini-lo como absoluto. Agora você pode arrastá-lo e posicioná-lo em qualquer lugar dentro do quadro de layout automático. E está realmente dentro do seu quadro de layout automático. Isso também significa que você pode definir restrições para o redimensionamento. Menu de redimensionamento. É o mesmo de sempre, mas foi movido e vem com ótimos novos atalhos. Fiquei um pouco chocado quando abri pela primeira vez um novo layout automático quando o menu Redimensionar havia desaparecido. Não é, só subiu para cá, dois quadros. Parece um pouco diferente, mas funciona exatamente da mesma forma que antes. Não temos mais a representação visual. Mas Figma adicionou alguns ótimos atalhos. Clique na linha superior ou inferior de uma moldura de layout automático para definir, para abraçar verticalmente. Clique no lado esquerdo ou direito de uma moldura de layout automático para monopolizar horizontalmente. E o mesmo funciona se você mantiver a tecla antiga pressionada enquanto clica para trocar para encher o recipiente. Então é isso. Tudo o que você precisa saber sobre um novo layout automático para começar. 47. Obrigaoa: Muito bem para terminar este curso. Sinta-se à vontade para entrar em contato conosco em moonlearning.io, estamos sempre interessados em ouvir seus comentários. Você também nos faria um grande favor, se você pudesse tirar um minuto e deixar um comentário aqui. Se você gosta deste curso , também certifique-se de dar uma olhada em nossos cursos adicionais. Na moonlearning.io, abordamos todos os assuntos desde os fundamentos do UX/UI Design até Figma e até alguns conceitos básicos de código. Certifique-se de visitar nosso site em moonlearning.io, onde você também pode se inscrever no nosso boletim informativo.