Você conhece o Figma? Veja 5 motivos para usar essa ferramenta agora! • Designerd
Você conhece o Figma? Veja 5 motivos para usar essa ferramenta agora!
por Éricles Batista 30 de janeiro de 2020, 14:21
Já pensou em utilizar um software que resolve grande parte das demandas de criação de layout, possui um gerenciamento de estilos simples e ainda por cima é colaborativo?
Eu quero falar neste artigo sobre o Figma, um software que contribui com a minha experiência com User interface design. E tudo o que vou te falar a seguir são dores que fazem parte do dia-a-dia de muitos designers .
Aliás, sei que você pode estar criando uma objeção neste exato momento, mas peço para que me dê uma chance de explicar meu ponto e traga soluções para alguns problemas. Recomendo que leia o artigo e assista ao vídeo para complementar a comunicação.
Figma é um software de prototipagem colaborativa. Mas não se assuste com o termo, prototipagem diz respeito ao que todo designer faz: criação de produtos em fase de teste para validar hipóteses.
E o Figma chega ao mercado para apresentar soluções inovadoras para os problemas mais comuns na criação de protótipo: colaboração e facilidade.
Além de performar muito bem como software de prototipagem, o Figma também trabalha com formato para publicações nas redes sociais (o que eu faço atualmente) e como ferramenta de feedback.
Lembrando que este artigo não é um jabá, mas uma recomendação para melhorar seu fluxo de trabalho. E agora, vou te falar 5 razões para baixar o Figma e ter essa experiência você mesmo:
É possível criar estilos para textos e cores no Figma. "Mas Éricles, o que significa isso?"
Imagine que você configura determinadas características para um tipo específico e atribui essas características a algum texto no seu layout. Agora pense que a partir dessa configuração é possível modificar todos de uma só vez.
Em outras palavras, estou me referindo à capacidade de guardar um estilo chamado "título principal" e aplicar em vários desdobramentos daquele layout.
Óbvio e evidente que ferramentas como o Illustrator também trabalham com isso, mas o Figma possui uma peculiaridade.
É possível fazer agrupamento desses estilos, tanto de texto como de cor. Você consegue fazer a separação de tudo aqui que é "título" e tudo o que é "parágrafo" ou "botão".
O mesmo acontece com as cores, que podem facilmente ser alteradas a partir de uma definição de estilo, mas também agrupadas, como por exemplo: cor/primária/padrão, cor/primária/brilho.
2 – Auto-layout
O auto-layout é uma funcionalidade relativamente nova (levando em consideração a data de publicação deste artigo), mas com certeza chegou para inovar.
Essa funcionalidade é sobre espaçamento e distribuição de objetos. Para ficar um pouco mais claro, quero envolver um problema muito comum na hora de desenvolver um layout.
Vamos supor que você fez uma lista horizontal, e para essa lista você define uma distância de 30px entre cada elemento (por exemplo, um texto), você concorda comigo que se a quantidade de palavras muda, você precisa rever manualmente o espaçamento entre os elementos?
O auto-layout foca exatamente nisso! Como nome diz, o layout é adaptado automaticamente. Ele leva em consideração as distâncias entre os elementos e espaçamentos internos horizontais e verticais. Isto é, não importa o tamanho dos elementos, o espaçamento se mantém.
https://www.designerd.com.br/wp-content/uploads/2020/01/auto-layout-botao.mp4
"Ah, Éricles, mas por que eu vou me preocupar com 5,6,7px de diferença?" Deixa eu te falar, meu jovem, você pode não ligar para isso, mas seu leitor liga, e o cérebro dele é muito perspicaz em perceber desalinhamentos.
https://www.designerd.com.br/wp-content/uploads/2020/01/auto-layout-texto.mp4
Se quiser trabalhar o máximo de eficiência do Design em um layout, com certeza trabalhará em harmonia com o cérebro e percepção do seu leitor.
Sei que a criação de componentes não é exclusiva do Figma (assim como as razões 1, 4 e 5), mas quero levantar como um argumento e explicar um pouco mais.
Componentes são elementos que possuem um vínculo de características com outros elementos subordinados.
A definição fica mais clara na prática, pode acreditar.
https://www.designerd.com.br/wp-content/uploads/2020/01/componentes.mp4
Se criamos um conjunto de elementos, como por exemplo "título+parágrafo+imagem", podemos replicá-lo algumas vezes no desdobramento do nosso layout. Caso seja necessário fazer alterações, concorda comigo que seria mega-cansativo fazer uma por uma?
Os componentes são úteis para isso, definir um componente master para que todas suas "instâncias" sejam subordinadas a ele. Isto é, as alterações feitas no componente master, afetam diretamente às instâncias.
4 – Plugin
É possível, através do Figma, a instalação de plugins que agilizam e tornam mais fluido o nosso workflow. Existe uma infinidade de plugins na plataforma, mas quero trazer 3 em especial que vão deixar tudo o que estou falando mais claro.
Recomendo que assista ao vídeo para complementar o que estou falando, acredito que muita coisa dele deixe esse conteúdo mais compreensível.
É um modelo de texto de marcação que nos ajuda a delinear o formato de uma peça sem necessariamente ter o conteúdo que a compõe.
https://www.designerd.com.br/wp-content/uploads/2020/01/lorem-ipsum.mp4
O plugin Lorem Ipsum nos dá um grande controle sobre o número de palavras, parágrafos ou sentenças que queremos incluir, além de fazer esse processo em todos os blocos de texto selecionados.
Já falei do site Unsplash por aqui. Se você não o conhece, é um banco de imagens gratuito, mas dessa vez como plugin em um software colaborativo.
Dê apenas um clique e abra a biblioteca desse software para adicionar imagens direto no seu arquivo.
https://www.designerd.com.br/wp-content/uploads/2020/01/unsplash.mp4
E por fim, o plugin que mais me encanta (junto ao isometric) que é o Vectary 3D. Nele é possível adicionar mockups 3D, na posição de sua escolha e com imagens de sua definição, ao seu projeto. Os modelos desbloqueados são excelentes e devem suprir a maioria das suas demandas.
https://www.designerd.com.br/wp-content/uploads/2020/01/vectary-3d.mp4
5 – Gratuito
Finalmente, chegamos a quinta razão para você utilizar o Figma agora mesmo. Ele é gratuito!
Conheça a ferramenta clicando nesse link e não esqueça de deixar seu feedback sobre sua experiência na área do comentários.