Treinamento Figma | Parte 01

depois né enfim para quem não conseguir entrar ou que porventura eh precise sair durante o treinamento Tá então vamos lá eh para quem não conhece o kipon ele faz parte dos nossos processos de treinamento e desenvolvimento aqui do time da gool então a gente sempre que possível a gente tá trazendo para vocês alguns temas né em formato de Treinamento palestras workshops para que vocês né estejam aí eh em contato com informações diferentes da área da tecnologia da Consultoria de uma maneira geral e o kipon Né o kipon tips específico ele vem com essa com essa

possibilidade né da gente trazer assim pequenas pílulas de conhecimento com o próprio time também trazendo aí conhecimentos emergentes para compartilhar com vocês né não de uma maneira que a gente certifique todo mundo em algo mas que pelo menos a gente coloque o conhecimento né em expansão que a gente compartilhe com o time e a gente consiga né instigar aí quem tem alguma curiosidade ou já conhece também um pouquinho sobre o tema para que a gente consiga expandir esse conhecimento dentro da própria goon Tá bom então hoje né a Gabi vai trazer para nós aí uma

introdução sobre figma que eu não vou me colocar na possibilidade de explicar porque eu não conheço do que se trata muito bem né só muito amplamente assim de forma bem breve que a Gabi me explicou eh e a ideia é que vocês peguem também esse conhecimento introdutório né E Se tiverem depois no final da da fala da Gabi tiverem dúvidas quiserem perguntar algo ou contribuir para quem já ouviu falar já conhece de figma é bem importante pra gente oxigenar também a fala e entender aí também quais são as necessidades de vocês tá bom esse treinamento

ele vai ser dividido em duas partes Então essa primeira que a gente vai fazer essa introdução e na semana que vem que eu Já encaminhei o convite para vocês algo mais prático também pra gente ver a ferramenta na prática então para eu não me alongar mais vou passar a palavra pra Gabi Gabi esteja à vontade A fala é sua e espero que vocês aproveitem o treinamento pessoal Então primeiramente boa tarde pessoal eh eh dando uma contextualizada mais ou menos referente ao assunto né A ideia é nessa primeira parte é passar alguns conceitos eh referente a

fazer algum protótipo de tela né a gente utiliza a ferramenta do figma eh explicar que não é simplesmente desenhar uma telinha bonitinha e apresentar pro cliente eh nada disso é vai muito além de uma simples telinha envolve conceitos né que eh que estão dentro do conceito ui o ex design então Eh essa ideia primeiramente é passar rapidamente aqui alguns eh alguns conceitos bem por cima mesmo para depois então no segundo momento é apresentar um pouco a ferramenta do do figma onde a gente eu vou mostrar aqui como eh utiliz algumas ferramentas e também eh para

a gente poder desenvolver duas telinhas ali de um de um possível protótipo Então primeiramente né explicando o que que é o ui e o ex né Eh o ui eles envolve ali a parte eh interface do usuário então é toda aquela parte visual de um site ou de um aplicativo eh o desenvolvedor eh ui ele vai puxar as informações que o profissional do do uex vai eh adquirir ali através de informações e Estudos né E com isso o ele vai conseguir desenvolver além de uma de uma tela também de um protótipo ele é possível desenvolver

ali é um sistema de cores uma tipografia eh imagens e inclusive um guia de estilos ali para para poder utilizar em outros projetos também o ui o u ele vai ser o estudo da experiência do usuário né então Eh o profissional do IX ele vai a partir de informações eh e ele vai vendo dores e as necessidades dos usuários eh e utilizando isso e ele vai obter ele vai oferecer eh soluções necessárias que estejam de acordo ali com a necessidade de do usuário né que estejam dentro ali das necessidades ergonômicas dentro do aplicativo ou de

um site eh principalmente pro o pessoal que tá mais na na moditec ouvi muito eh os termos al pooc protótipo o MVP né Eh às vezes eh às vezes é muito comum utilizar alguns deles mas nem sempre a gente sabe se realmente é uma é considerado uma poc ou ser é considerado um protótipo né então uma poc ela vai ser basicamente ela vai testar uma ideia né se eh vale a pena se é é justificável fazer um desenvolvimento referente a uma solução eh e ver também se ela tem um certo potencial né e o protótipo

ela vai testar eh como que a como que a ideia eh a ideia aparece de uma forma mais palpável para confirmar as suposições a partir da poc né e com e com o protótipo a ideia ela pode funcionar e aumentar a maturidade eh de uma solução né Eh temos aqui eh citando algum exemplo prático aqui na na moditec né é o ano passado teve um projetinho eh referente ali a thermofisher né que entrou Ness esses conceitos de poque protótipo eh inicialmente eh foi feito uma poc ali de uma de um postiv aplicativo não foi utilizado

figas mas foi utilizado uma outra plataforma low code né Eh onde inicialmente foi mostrado ali como funcionaria eh como ficaria a a tela ali do produto após né a confirmação ali do cliente de que tava tudo de acordo eh como a gente foi fe eh foi feito ali mesmo por eh mesmo que seja por low code eh teve meios ali para poder eh criar uma forma de autenticação eh ter uma eh uma interação ali com uma orquestração um botão a para poder fazer leitura de uma leitura de código de barras também aí isso já se

tornou um protótipo né um protótipo funcional no caso né onde ele vai ter alguma autenticação alguma interação de uma API interna ou externa E também temos o conceito piloto e MVP né o piloto ele vai testar se eh como que a solução ela vai se comportar em um ambiente real né para também verific eh verificar e até mesmo comprovar se ela ela merece ser ter um investimento né ou se ela pode ser escalada para um ambiente maior né e o MVP que seria o produto mínimo viável ela seria eh eh pegar essa ideia da solução

em um ambiente real né com mais informações e ter uma melhoria contínua né então no caso Eh vamos pegar por exemplo a TIM recentemente nesse ano eh a gente puxou ali o sutch do Sid paraas lojas da Tin né então inicialmente eh como que foi feito eh foi passado ali o aplicativo da TIM eh para uma loja em específica né para poder testar como é que iria se comportar a o aplicativo o backoffice ali que é o dashboard para depois de um momento ali após aprovação também da TIM ela foi passada para outras lojas né

foi disponibilizada para mais lojas ali da da Tin né E que já entra na parte de MVP Então vai ter mais informações vai ter mais dados ali e mais interações com outros usuários também e dentro do termo protótipo a gente vai ter protótipos de baixa e alta fidelidade né O protótipo de baixa fidelidade ele costuma ser muito utilizado para fases iniciais de projeto então é é utilizado ali para para validar uma ideia ver se que realmente o fluxo daquela solução realmente vai funcionar né Inclusive essa imagem é o melhor exemplo a melhor definição para um

protótipo de baixa fidelidade porque ele não tem muito detalhe Ele é bem simples feito no papel mesmo com papel e caneta ele vai ter por conta disso ele vai ter um baixo custo eh inclusive na minha faculdade é semestre semestre retr casado um um professor meu contou uma história né sobre eh que ali na faculdade eles iriam desenvolver um um projeto para um órgão público e eu não lembro agora que órgão que era né mas esse órgão E a equipe que ficaria acompanhando esse processo eles não tinham não eram bem uma equipe ali de desenvolvimento

não entendiam muito essa parte de novas tecnologias e o iex então Eh para facilitar o entendimento do cliente eles Aram para ir até o local né do e fisicamente eles fizeram O protótipo exatamente como tá aqui na na imagem eles fizeram com papel a caneta para poder e explicar direitinho como é que funcionaria o fluxo do da aplicação E além disso eles usaram Lego para poder explicar como é que iria ser a interação do usuário então ele é muito é muito utilizado para fazas iniciais né E principalmente quando o cliente não tem uma certa noção

de como ou alguma ideia de como o uma possível solução ali pro produto e o protótipo de autta fidelidade né ele vai ser mais ele vai ter uma preocupação maior em referente a aspectos visuais e funcionais né então ele vai ser muito parecido com o produto final que nem a gente tá vendo aqui na tela né então Eh nesse protótipo de aut fidelidade eh é muito utilizado para validar com o usuário até mesmo vender uma ideia ele vai proporcionar ali eh a interação com outros elementos do protótipo né no caso eh um botão se tocar

naquele botão para Que página que ele vai ou se ele vai executar alguma mensagem Alguma notificação então ele é o mais próximo possível do produto final mas ele não é o produto final e dentro da da parte de iox a gente tem um sistema de Grid um sistema de Grid ele tem um papel muito importante na na área quando você vai desenvolver um protótipo né inicialmente eh não é só desenhar uma telinha bonitinha e inserir os elementos ali na tela o sistema de grade de de Grid então ele vai auxiliar para poder estruturar o conteúdo

na página eh ele vai ajudar a ter uma melhor organização até mesmo para ver por exemplo eh se um campo ou uma parte do conteúdo tem uma maior prioridade aonde que ele vai se posicionar também é questão de espaçamentos é muito utilizado também o o sistema de coluna mas também tem o modular que eu utilizo costuma ser bem utilizado nas plataformas e-commerce e também no modelo hierárquico né que nesse caso é quando a gente por exemplo num num blog ou até mesmo numa página Web eh precisa ter algum destaque maior e um conteúdo em específico

do que nas outras né então muitas vezes é utilizado esse sistema hierárquico do que o sist tema de coluna por exemplo e também eh temos a parte de responsividade eh quando é criado ali uma página web não só uma página Web mas também um um aplicativo hoje em dia é muito usado esse conceito de responsividade e que é basicamente é ele deixar de forma mais otimizada ou proporcionar melhor experiência pro usuário Então a partir do determinado tamanho de tela ele vai se comportar de acordo com aquele com aquela tela ali então Eh por exemplo em

uma página Web ela vai se comportar de uma de uma forma e agora numa uma página Web para mobile ela vai se comportar de uma forma diferente eh antigamente bem antigamente mesmo eh não tinha muito essa parte de responsividade então quando a gente entrava em páginas eh páginas web e a gente queria minimizar o né minimizar a página a página ficava toda quebrada e abri um um scroll Zinho ali na na parte horizontal pra gente conseguir visualizar o restante do conteúdo isso pra experiência do usuário é muito ruim então foi criado eh esse conceito de

responsabilidade principalmente também por questões e de serem desenvolvidos com tempo eh telas menores né Então temos telas de tablets temos telas de celulares e hoje em dia as páginas e os aplicativos eles precisam se comportar eh de maneira adequada para cada tipo tipo de tela né então Eh se pegamos hoje em dia num celular um celular aí com tamanho razoável né e entrar numa página web e ter aquela quebra de de página onde você vai ter que ficar caçando o conteúdo com o com o dedo É vai ser uma experiência bem desagradável pro pro usuário

e aqui fazendo uma comparação com os eh com as páginas web de antigamente né Eu puxei eh da tela aqui do baixa aqui e o Facebook na na época em que ele não era nem nem aberto ao público né Na época ele era só para prodos de universidades a gente eh aqui a gente consegue perceber alguns conceitos que naquela época tinham que hoje em dia não existe mais eh por ser também início eh de site início também ali da na internet muitas coisas eh precisavam ser destacadas ter maior destaque do que outras né então era

utilizad cores mais fortes e ícones quando tinham eram com eram coloridos é qualquer Campo ali para você selecionar em um menu era com hiperlink gigante ali sublinhado eh e às vezes dependendo quando você acessar uma página Web que nem tem aqui no baix aqui as imagens simplesmente não carregavam então ficava esse quadrado aqui aleatório no campo e outras coisas também que a gente pode perceber que por exemplo vendo o do Facebook né o layout dele antigamente era esse hoje em dia um layout totalmente diferente mas a lógica por trás permanece a mesma então pra pessoa

poder entrar no Facebook ou ela vai precisar fazer um login e digitar senha ou ela vai precisar fazer um cadastro então a única coisa que mudou basicamente foi o layout deixou foi deixado um layout mais Eh mais limpo possível pro pro usuário hoje em dia mas com as mesmas funcionalidades e também comparação com hoje em dia né Eu até eh aproveitei para puxar uma tela de celular e uma tela de e de desktop que a gente pode perceber uma grande diferença né é diferente do sites de antigamente em onde tinham várias cores tudo chamava atenção

às vezes você não sabia eh o que você priorizava onde você começava a fazer a leitura do site hoje em dia não hoje em dia é o menor destaque possível pro usuário é apenas destacar algumas informações quando eu tiro utizado um ícone um ícone bem simples é com uma cor ali que seria a cor principal do do produto ou até mesmo da marca né e com os celulares também a gente percebeu a gente veio percebendo isso conforme foi passando o tempo né as telas as áreas de trabalho ali nos smartphones em comparação com hoje em

dia os ícones e os Box que ficam o os ícones dos aplicativos também mudaram bastante conforme o tempo e seria isso pessoal quis passar uma uma introdução bem rápida mesmo até para ter uma abertura maior de de dúvidas caso tenham né Principalmente pro pessoal de de jde a ideia inclusive de ter feito algo mais mais básico mais simples também foi principalmente pro pessoal de JD que veio de uma uma área praticamente eh diferente de novas tecnologias Né tava eh conversando com o Fabrício ele me explicou que essa parte de y x nem existe ali no

na parte de jde Então seria isso pessoal eh gostaria de saber se alguém tem alguma dúvida para para comentar e por favor gente não sejam tímidos tá obrigada obrigada Pablo Já tava achando até que eu tava falando sozinha é então pess você passou muito bem Gabi obrigada então Eh já que por enquanto o pessoal não tem nenhuma dúvida até para adiantar um pouco pra semana que vem eu vou mostrar um pouco aqui do figma já vou ensinar para vocês eh como utilizar né eu vou mostrar para vocês como abrir uma conta para daí semana que

vem na parte prática eh conforme eu for mostrando ali eh o uso do figma vocês estarem acompanhando no computador de vocês também deixa eu só entrar aqui no figma eu já compartilho novamente Então pessoal eh eu vou mostrar aqui um pouquinho como é que é a carinha do figma eh eu tô utilizando aqui o diretório da goom com a conta né então Eh quando vocês como vocês não têm uma conta ainda no figma eh e forem acessar né no site figma.com ela vai aparecer nessa nesse formatinho aqui pedindo como que é algumas opções aqui no

site até mostrando algumas coisas aqui também ensinando eh o figma ele não precisa instalar tem gente que usa instala ele para poder usar no desktop mas não tem necessidade inclusive aqui o pessoal da Go quando vai fazer algum protótipo no figma a gente utiliza tudo no formato web porque já eh já Facilita pra gente e já está de acordo com as nossas necessidades então aqui né quando vocês forem entrar no site do figma vai ter a opção de começar grátis então aqui a gente vai precisar criar uma conta com e-mail e senha dá para vocês

utilizarem a conta pessoal de vocês e sem precisar usar o o e-mail da gon até também para não ter alguns problemas depois o Pablo perguntou aqui no chat se esse seria o gratuito é como tá compartilhando daí não dá para ver as perguntas mas eu vou te sinalizando tá Ah beleza até ia pedir isso então o que eu tô usando da goom Ele tá em volto de um plano específica inclusive até por isso que a gente precisa usar essa conta aqui é do da conta ali com o domínio da da goon para caso a gente

não para se a gente usar por exemplo pegar o meu e-mail da G e criar uma alguma coisa aqui no figma ele pode acabar gerando algum custo no final ali do mês então para digamos assim centralizar os custos e já tá tudo ali De acordo com o que a gente precisa a gente utiliza a conta da própria goon mesmo mas vocês eh para poderem treinar em casa pode usar ali o o plano gratuito ele não tem problema ele já comporta as necessidades que a gente precisa uma coisa ou outra só que ele não vai ter

mas não vai ser não vai ser preciso fazer ali um pago então eh a gente vai criar um e-mail com uma senha criar conta ele vai mandar um e-mail na conta de eh um e-mail ali para para vocês para confirmar a criação de conta né E quando for confirmado Vocês já vão conseguir utilizar ele que daí ele vai gerar nessa numa página semelhante a essa como seria o primeiro será o primeiro acesso de vocês né não vai est cheio aqui de de protótipo de figma não vai estar aqui com com grupos específicos ele vai est

uma tela em branco e aqui a gente vocês vão conseguir utilizar aqui é criando um arquivo do zero na parte de design file que criando que ele vai criar uma página do zero com as ferramentas ali do figma aí eu queria ver se alguém já tem interesse em instalar o instalar não em criar conta no figma e se precisar de eh Se precisar de ajuda aproveitando esse tempo eu posso tá orientando aí quem precisar também ou senão eu posso passar aqui mais alguma mais algumas coisas aqui básicas referente ao figma para daí semana que vem

a gente já ir direto paraa prática acho que não tem mistério né criar aa acho que pode repetir ficou baixinho não eu a eu digo acho que não tem mistério criar conta é só entrar lá no figma e até pode associar o ao nosso Gmail que ele já vai direto e ele abre exatamente Uhum é Inclusive eu tenho uma conta pessoal quando Nas vezes que eu precisei utilizar o figma para fazer alguns projetos da faculdade também então é até até digo né ali ele facilita bastante e não precisa necessariamente usar um plano eh um plano

pago gratuito ele já tem as necessidades que a gente precisa Então eu vou mostrar aqui como é que a como é que é dentro de um projeto do fig né eu vou criar um aqui do zero a semana que vem eu vou pegar um Que Eu Já criei aqui dentro próprio pro treinamento então aqui dentro ele vai ter essas três barrinha de trabalho né essa daqui que vai ser aonde a gente vai adicionar algumas coisas né aqui vai ter a opção do mouse que é onde a gente vai poder clicar em algum elemento aqui dentro

algum componente e mover ele aqui na na tela inteira a gente pode dar um zoom aumentar o zoom também utilizando ali o o control segurando o control e mexendo com o scroll do mouse também aqui ele tem as opções de frame então é aqui é basicamente aqui que tudo começa né se a gente vai desenvolver um protótipo para um smartphone um protótipo para desktop é aqui que a gente começa a inserir então a gente escolhe por exemplo se queremos um por exemplo um smartphone que seja ali de uma resolução de um tamanho de umart de

um iPhone 14 15 pro Max aqui vai ter as formas que a gente vai poder trabalhar no figma Então a gente vai poder utilizar usar o retângulo clicando aqui né ou até mesmo ele já o figma ele já oferece as teclinha de atalho para você acessar mas não tem não tem necessidade de decorar só clicar aqui na Binha de na Binha de trabalho e já adicionar aqui um um elemento novo aqui tem uma ferramenta caneta que inclusive semana que vem eu vou mostrar aqui um pouco para vocês como mexer nela não é uma coisa muito

difícil a gente tem aqui a ferramenta de texto essa ferramenta de texto ela vai ser quase um um Word né que a gente adiciona aqui e a gente vai poder escrever qualquer coisa e aqui a gente tem a opção de plugins semana que vem eh no protótipo que eu vou est trabalhando com vocês eu vou utilizar alguns plugins então Eh eu vou até acho que deixar já passado para vocês o nome dos plugins aqui no no chat do treinamento para daí quando vocês tiverem um tempinho já poderem utilizar os plugins não é muito não é

nada de Não é nada não é um bicho de sete cabeças eu vou mostrar aqui mais ou menos a gente vai est usando o pexels o Brand Fit o fundation a gente não vai utilizar mas o material design a gente provavelmente vai utilizar e mais um material ele não é um plugin mas é um é um figma de uma comunidade que ali dentro ele vai ter ícones pra gente poder utilizar nas nossas telas né inclusive alguns ícones do Instagram estão lá inclusive né então para fazer uma aplicativo aplicativo para para smartphone por exemplo e aquele

aquele meio ali da comunidade ele já ajuda bastante então aqui para se a gente querer por exemplo adicionar o Plugin do pexels né a gente vai digitar o nome pexels ele vai carregar com o com o nome ele como ele já tá habilitada aqui no projeto do da G ele não não vou ter como executar ele né mas Digamos que seja por exemplo esse daqui ele vai ter essa opção de Run a gente vai clicar nele clicamos aqui no Run ele vai carregar um pouquinho e ele já vai abrir uma abinha aqui do lado com

a ferramenta e a ferramenta eu vou mostrar semana que vem não tem não vou precisar mostrar hoje não e também aqui a gente vai ter essa outra barrinha de fermenta do canto esquerdo aqui aqui a gente vai ter layers assets e page né as layers elas vão ser Onde por exemplo eu quero adicionar um alguns elementos aqui ele vai indicando por meio de camadas né então por exemplo esse quadrado e essa elipse que eu adicionei ele vai tá inserido dentro do frame iPhone 14 15 pro Max se eu adicionar um outro frame vamos pegar esse

outro aqui também e aqui fazer desenhar uma outra elipse ele já vai aparecer aqui junto aí se eu quiser eu também posso fazer isso aqui obviamente que ele sumiu porque ele não tá pertencendo a camada desse dessa telinha aqui mais a telinha aqui do lado ou ao mesmo tempo eu posso fazer isso aqui então eu posso mover sempre que eu quisesse caso aconteça de eu criar algum algum elemento sem querer ele para um acabar indo para um frame e não era aquele frame que eu queria aqui em assets a gente vai utilizar Quando criamos um

componente né semana que vem eu vou vou explicar mais mais por dentro aqui que é um componente dentro do figma né Eh vamos ter até um um lugarzinho específico ali pra gente deixar os componentes que formos criar quando a gente cria um componente no figma ele vai aparecer aqui né então eu quero criar um componente de Botão por exemplo eh você eh salva ele como componente aí você quer pesquisar ele sem ter que ir lá numa outra página por exemplo e puxar ele você vai aqui em assets ele vai tá aparecendo aqui o componente e

você só clica e arrasta pra telinha que você quer e a parte de page um que a gente consegue adicionar mais uma página caso precise né então normalmente o pessoal faz quando vai desenvolver um protótipo acaba desenvolvendo a uma página paraas telas do da solução e a outra página para caso tenha um um guia de estilo quando tem um componente também para facilitar até também para não ficar muito bagunçado né aqui a gente consegue e aumentar e diminuir o zoom mover aqui também mas é uma forma para não deixar o nosso campo aqui muito poluído

né deixar cada página cada um no seu quadrado digamos assim né deixar tudo organizadinho para não ficar bagunçado depois e aqui no canto no canto da direita que a gente vai ter as algumas funcionalidades aqui pra gente mexer com algum elemento ou algum componente né que semana que vem eu vou estar explicando mais mais detalhadamente aqui algumas coisas né mas aqui algumas coisas a gente já tem uma certa familiaridade né aqui no caso é alinhamento quando eu quero deixar um elemento mais Centralizado deixar ele num canto ou no out outro aqui como já dá para

perceber ele vai Aqui é onde ele vai ficar a cor armazenada do elemento ou até mesmo de uma de um elemento ali do tipo texto Então eu consigo alterar a cor dele como eu bem entender Deixa aí e tem outras opções né como efeitos stroke que ele vai dar meio que um um sombreado no no conteúdo também a parte de prototype a o o Prototype ele vai ser aonde que por exemplo a gente vai apresentar o protótipo de tela pro pro cliente e a gente quer que ele que a gente faça uma breve interação ali

no aplicativo então é o Prototype que tem essa função por exemplo eu quero Digamos que aqui tenha um um botão de login eu conecto esse botão com essa telinha aqui para quando a pessoa clicar ali no login ela simular ela fazendo uma autenticação e indo direto paraa página principal ali do aplicativo então com Prototype que a gente consegue conectar uma coisa a outra né E aqui ele vai abrir outras opções aqui de ferramenta também para ver como você vai querer e que seja seja o passado dessa tela para outra é basicamente quando a gente vai

criar um um slide ali no PowerPoint e daí temha por exemplo primeiro slide o segundo slide isso já acontece de forma automática né então quando a gente vai executar ali a apresentação a gente aperta um com o próprio Mouse ou com o o espaço ou a flechinha você clicando ele já vai paraa outra tela né ou às vezes aí hoje em dia pelo menos eu nunca eu não vi nunca mais né mas antigamente o pessoal tinha o costume de usar muitos efeitos no nas apresentações de PowerPoint né então colocava ali o texto do nada o

o título do projeto vinha de cima para baixo o subtítulo vinha da da esquerda paraa direita é é quase digamos assim o Prototype funciona quase dessa forma né aí basicamente seria isso pessoal alguém alguém aí tá tem alguma dúvida Alguém aí quer já é criar uma conta eí ficou com alguma dúvida eu queria saber sobre em ques momentos que a gente usa os plugins quais momentos Ah então os plugins eh no figma ele tem plugin para tudo que é tipo por exemplo aquele que eu citei do pexels ele é utilizado paraa imagem Então deixa eu

abrir ele aqui para para mostrar como que ele funciona esperar ele carregar aqui então o pexel ele tem essa carinha aqui então eu posso pesquisar qualquer coisa como se fosse um Google fotos né Vamos colocar aqui aqui um wallpaper por exemplo e aqui ele vai aparecer um monte de imagens eu posso simplesmente em uma que eu achar mais bonitinho por exemplo e ela vai aparecer aqui pra gente aí eh semana que vem eu vou mostrar como por exemplo eu quero eu quero colocar essa imagem que eu adicionei dentro desse quadradinho mas sem ter que ficar

editando ela e ficar até mesmo pixelada né Colocar ela dentro desse quadradinho para ela se comportar tá ali no no espaçamento que tem nesse quadrado tem também plugins para para ícones né deixo que seria por exemplo que normalmente Eu costumo usar é o material design e aqui ele vai ter um monte de de ícones que a gente pode utilizar pro nosso protótipo também a gente também pode pesquisar alguma coisa também referente tem um um plugin também agora eu não lembro o nome que eu acabei não colocando Ah não tem esse aqui ó esse mesmo que

eu ia comentar esse foundation color generator ele é eu utilizei ali para quando eu tava criando alguma coisa do do zero eu não sabia muito bem que cor utilizar né se por exemplo você quer utilizar no teu projeto uma cor só tons por exemplo esses tons de verde né a gente tem como criar ou quem tem normalmente a gente coloca aqui para criar uma paleta né então é utilizado pra gente ter uma base das cores que vamos poder usar que esteja de acordo ali com aquele verde né Por exemplo o principal é esse daqui que

tá em hexadecimal ele vai poder gerar essas outras opções aqui de cores tanto mais clara quanto mais escuras pra gente ir aproveitando sem sair da paleta sabe mas quando por exemplo num num projeto né que o cliente ele já tem uma identidade visual já tem uma paleta de cores pré-definidas a gente não precisa fazer isso até porque a gente precisa seguir o padrão do cliente né então não podemos eh por exemplo se o Tom ali é azul a gente não pode colocar um rosa ali aleatório no no no no no na nossa tela também né

legal obrigada nada Alguém tem mais alguma dúvida ent Vocês estão muito Quietinho eu tava achando o pessoal de JD me encher de perguntas nada que nada eh eu acho que todo mundo em algum momento já mexeu num num num Photoshop alguma coisa da vida ele é muito mais fácil ele eu até num momento eu já usei o figma eu tinha que editar uma imagem tinha o Photoshop na não tinha Photoshop instalado Eu gosto de brincar aí eu entrei no figma e fiz no figma porque ele é muito fácil né de mexer de é muito intuitivo

né botar uma imagem atrás uma imagem à frente até melhor do que o PowerPoint então eu usei eu sei que ele é para protótipos hip lá mas eu usei para poder fazer uma edição fazer uma uma uma montagem bonitinha de de imagens pela facilidade dele mesmo uhum inclusive o figma tem gente que utiliza ele para criar apresentação que nem por exemplo apresentação no ca apresentação no PowerPoint até por ele ser prático para poder utilizar e o figma eh ele eu não lembro Em que ano que foi que aconteceu isso mas o figma ele foi comprado

pela Adobe até porque a Adobe ela tinha uma outra ferramenta similar ao figma né o Adobe XD eu conheci uns anos atrás sobre essa ferramenta né basicamente o pessoal tava indo muito mais pro figma e tavam deixando de lado ali essa ferramenta da dob a dob resolveu falar assim não vou comprar eu vou comprar o figma né e teve algumas atualizações que a Adobe passou se não me engano uma das atualizações que não tinha no figma e tem agora é a parte de imagens que ali dentro a gente pode editar uma imagem também não que

nem é a mesma proef siencia ali por exemplo no photoshop mas a gente consegue melhorar o contraste é diminuir um pouco a o passade da imagem também dá para dentro do do figma também dá para criar diagrama né um fluxograma também que é a parte mais mais básica também isso n tem o Dev mold também pelo mas assim pra gente aqui no escritório a gente não chega a US utilizar ele não o Dev mode só para para explicar um pouco eh ele puxa algumas informações ali mais digamos assim mais para código né então por exemplo

a parte ali de estilização que é criado por exemplo contexto de margem aord de um botãozinho ali no Dev mode ele vai transformar isso meio queem uma parte de um CSS sabe isso isso o figma ele também eh auxilia muito também na parte do desenvol dos desenvolvedores né O u IX designer além dele se preocupar com o com ali as necessidades do cliente e deixar ali um criar um protótipo é que fique de acordo ali com o com o cliente queer que tenha uma boa interação uma interação uma boa experiência pro usuário a gente também

precisa se preocupar na parte dos desenvolvedores né porque a gente não pode eh simplesmente criar um monte de coisa ali na tela que vai ficar linda maravilhosa mas ali os os desenvolvedores não vai saber qual que é por exemplo o tamanho da fonte eh se não tiver bem estruturado ali no no figma a paleta de cores Inclusive tem opções ali no figma que eu vou mostrar semana que vem pra gente criar variáveis nessas variáveis a gente vai poder adicionar por exemplo cor Então em vez da gente ter que ficar procurando aquela cor específica toda hora

ou ficar digitando ali no na parte ali do código em ex decimal a gente simplesmente adiciona aquela variável e pronto ela já vai tá trazendo ali a cor certinha pra gente eh então o figel também auxilia muito esse lado também do do desenvolvedor né Eh tem um tem uma funcionalidade também que é um ali dentro do do stroke também deixa eu só mostrar aqui na na abinha aqui que ele cria um sombreado né dentro dele ele tem uma opção de Blur o Blur ele ajuda por exemplo eu quero colocar um um bonequinho aqui na tela

e eu quero colocar um sombreado dele para não aparecer que ele tá flutuando na tela então o Blur ajuda ajuda para isso a gente cria ali por exemplo um uma elipse ou um um elemento ali pequenininho adiciona um Blur nele para dar uma espécie de sombreado isso visualmente fica muito bonito né que daí vai parecer que os o bonequinho que tá ali ele não tá eh voando que ele tem uma superfície ali no qual ele tá que daí vai aparecer o sombreado ali com o Blur só que para nível de desenvolvimento quanto mais Blur tiver

uma aplicação eh mais Custoso vai ficar o site no caso mais tempo ele vai demorar para carregar e isso assim para quem mexe com desenvolvimento é horrível né não adianta nada também a gente fazer uma tela bonitinha ali que segue todos esses padrões o cliente adorar e chegar ali na hora do de desenvolver essa tela o site levar 5 segundos para carregar hoje em dia isso se não me engano a Google tem um tem um mérito uma métrica ali se não me engano se o site levar eh x segundos agora eu não lembro certeza quantos

segundos é levar tantos segundos ali o site já é considerado um site que não é muito bom porque ele vai demorar mais tempo para carregar então assim de nível de qualidade ali do Google quanto mais rápido o site carregar melhor é Então essas Nessas horas a gente também precisa pensar nisso também e alguém tem mais alguma coisa para comentar mais alguma dúvida aproveitando então já que ninguém ninguém quis arriscar entrando um pouco questão da da marca né a gente viu ali questão de e de site o antes e depois também né a gente vê hoje

em dia a questão da identidade visual da marca né Eh vamos assim não só entrando no mérito de site mas em aplicativo também com certeza vocês já devem ter usado usado ou visto pelo menos eh marcas concorrentes e que por muita coincidência utilizam as mesmas paletas de cores Um Bom exemplo é o food e o rap né são Ambos são aplicativos de delivery e ambos têm cores muito próximas ali né que é um tom de Vermelho e o que acontece e o que que acontece por exemplo nesse caso né duas concorrentes tendo cores similares basicamente

a a ideia de você desenvolver um produto um aplicativo um site para uma empresa é você destacar marca é ter uma identidade visual da marca então por exemplo se vamos pegar por exemplo a goom né uma empresa de consultoria se tiver uma outra empresa de consultoria que tenha também as mesmas paletas de cores o que que vai acontecer em vez de ambas ali eh estarem proporcionando a identidade da marca fazer ali a a propaganda da marca eh inconscientemente elas vão estar fazendo a propagand da marca rival então por exemplo ali no iFood eh até tava

comentando com eh com conversando com o Fabrício ontem ele comentou sobre isso né aí por exemplo a pessoa vai entrar no no iFood e entra no RP e mais tarde depois de ter entrado nas duas entra por exemplo no RP de volta ela vai estar lembrando do iFood então dá uma digamos assim tira um pouco o foco do do usuário né então hoje em dia tem muito dessa dessa preocupação visual principalmente de você desenvolver uma marca utilizar cores pontos ali que não faça lembrar de outras coisas que nem por exemplo eh eu fui desenvolver ali

um pelo menos um esboço na parte técnica pra semana que vem e utilizei um tom de azul eu inconscientemente o tom de azul que eu deixei Ali era praticamente a mesma cor da paleta da do Facebook então no final ali quando eu tinha colocado um um botãozinho ou outro ali com com esse tom de azul já deu a impressão já veio na minha cabeça o a página do Facebook para poder entrar ali com login ou fazer o cadastro então é muito importante também Nessas horas quando a gente vai criar uma uma uma identidade visual e

uma tipografia essa importância também de ver se não vai acabar tirando o foco do do usuário e lembrando até mesmo lembrando de uma concorrente isso eu já ouvi falar do do Miro o Miro eu não não mexi muito por cima mas eu já utilizei ele para criar diagrama e fazer meio uma espécie de um Bram Star num projeto da faculdade também ele é muito bom inclusive principalmente nessa parte de criar gráfico não de criar diagrama que é os componentes que ele tem ali é bem interessante é uma visualmente assim é bem bonito né não é

uma coisa muito muito muito engessada né Eu não sei se você conhece o o dry Pablo Eu normalmente utilizo mais o dry só que ele é muito digamos assim muito engessado Então eu acho que assim para uma coisa mais interativa mais que fique mais agradável pros olhos sem ter aquela formalidade né o Miro acho uma ideia bem interessante também e tem uma ferramenta inclusive comentando assim referente a protótipo de protótipo de baixo nível é muito interessante inclusive quando é início de projeto e o e por exemplo o cliente fica long oué mesmo tem essa parte

mais remot né que é forma de utiliz também caso precise criar um protótipo de baixa Fidelidade é utilizar o scw Ele é bem a carinha dele é bem interessante o Bell me passou aqui de um o link que ele criou né então ele vai ter os conceitos ali de deixa eu compartilhar aqui a tela de novo ele vai ter aquela carinha lá de que tá sendo feita feita na mão né Mas isso não vai ser algo feio é quase como um um charme assim do da ferramenta né então a gente consegue criar aquele exemplo aquela

imagem de exemplo que eu utilizei né para ferramenta de baixo de baixa fidelidade dá para utilizar aqui no Sky draw é algo bem basicão bem rápido né as linhas aqui elas não necessariamente vão ser retinha então é bem eh é bem específico essa ferramenta e ajuda bastante Nessas horas né quando a gente precisa entrar em em reunião com cliente definir algumas coisas ali de início de projeto para não sair já fazendo o figma né fazer aqui um um fluxo Zinho bem rápido da das telinhas o que ela vai ter Quantos botões vai ter se vai

ter página de cadastro seria uma forma também para poder mexer com isso sem precisar fazer na mão né É legal F com uma carinha de rascunho né como se tivesse isso exatamente legal mas esse eu não conheço eu não usei eu usava usei o Miro já E aí depois me falaram Ah não usa o Miro não usa o o figma Uhum mas assim eu não achei que o figma faz é para fluxograma não faz fluxograma tão legal como o Miro e o Miro também é gratuito né web então isso Exatamente exatamente é o scal draw

eu conheço essa semana que eu tava conversando com berdel referente a algumas coisas desse treinamento e ele comentou dessa ferramenta né e eu achei bem bem interessante até para trazer aí pro pro pessoal principalmente pessoal do JD mais funcional né caso precise criar um fluxo Zinho é uma ferramenta interessante também pro pro pessoal trabalhar então é isso pessoal eh novamente aí tem alguém mais tem alguma dúvida alguma coisa que queira comentar sen não acho que a gente pode encerrar Jenny esperar mais uns minutinhos para ver se o pessoal comenta mais alguma coisa mas acho que

é isso uhum pessoal tem vergonha de falar pois é e tem um tem um pessoalzinho exato e tem um pessoalzinho aí que eu vejo no escritório que gosta de conversar não sei porque por ser reunião o pessoal fica mais tímido acho que é isso então muito bom parabéns gostei bastante não entendo muito bem mas consegui entender então foi bom mesmo eh ai que bom principalmente para quem não não conhece assim entendeu ficar muito feliz mesmo Sim qu é fora da área né mas acho que é isso pessoal se alguém tiver alguma dúvida pode procurar a

gente ali que a gente passa pra Gabi daí tá se quiser conversar com a gente aqui daí também exatamente e obrigada aí o pessoal pelo pela atenção aí na apresentação pelas dúvidas também e comentários que fizer pelas participações também que tiveram fiquei mais mais calma aí com a com essa interação também e novamente né Caso vocês tenham alguma coisa para comentar alguma dúvida pode também procurar as meninas podem me procurar também no no teams para daí a gente trocar algumas ideias e do contrário a gente vai se ver semana que vem que eu vou mostrar

a parte mais técnica aí eu vou aí assim eh quem sabe vai fazer ao vivo Então vai ter uma horinha ali que eu vou simplesmente parar de compartilhar a tela e vou querer ver se o pessoal tá acompanhando boa é bom acho que é isso então gente eh qualquer coisa pode chamar a gente aí muito bem Gabri Parabéns Que legal obrigada tchau tchau gente tchau tchau pessoal bom trabalho parabéns tchau tchau obrigado