Tem muita lista de plugins de Figma por aí. Se você usa Instagram deve ter visto dezenas de listas mencionando centenas de plugins diferentes. O que essa lista aqui tem de diferente? Ela é real.

Eu realmente uso esses plugins praticamente todo dia, coloquei-os em ordem de maior utilização. Claro que tem plugins maravilhosos por aí como os de mapa ou para puxar dados de planilha, mas essa lista tem plugins de uso diário.

E se você usa um todo dia e não está nessa lista, nos marque no Linkedin contando um pouco sobre o problema que ele resolve.

Photos

Sabe quando você está em busca de uma imagem para ilustrar um post ou fazer uma arte-conceito? Aí você abre provavelmente sites como o Pixabay ou o Unsplash, e vai caçando a foto perfeita.

Imagina fazer uma única busca e conseguir procurar em três serviços diferentes, pois é isso que o Photos nos permite.

print do plugin photos, busca feita por abacaxi, unsplash selecionado, varias fotos de abacaxis na tela

Iconify

Google > icone salvar. FlatIcon > icon search. TheNounProject > icon course.

Essa era a minha vida antes de descobrir o Iconify. Plugin que busca em uma base de 50mil (!) ícones entre bibliotecas como FontAwesome e Material Design. Claro que não substitui um NucleoApp ou IconFinder, mas as vezes você quer algo rápido para um wireframe.

print do plugin iconify, feita busca por video, nos resultados dezenas de icones remetendo a camera de video, player de video, etc. no meio alguns filtros por sets de icones como elegant e codicons

Contrast

Depois de testar alguns plugins focados em acessibilidade para o Figma, esse aqui foi o que mais gostei pela sua simplicidade. Não resolve todos os problemas de acessibilidade que nós projetamos mas é aquele tijolinho a mais que conta no final.

Basicamente o Contrast confere se um elemento está dando contraste suficiente de leitura de acordo com o fundo em que ele está. Não só um “acho que ficou bom”, mas calculando e dando resultados com base nas diretrizes de acessibilidade na web.

Design Lint

O Design Lint é ótimo para duas coisas: padronizar o layout com base nos padrões do projeto e evitar o dev team te xingar. 🙂

Imagine que a cor do seu logotipo é o roxo #4D0099, e sem querer você acaba escolhendo um tom de roxo bem próximo, mas diferente para uma aplicação que deveria ir exatamente a cor da marca.

Esse plugin detecta que você usou algo fora do seu guia de estilos do Figma e sugere a correção.

Padrão mantido!

print do design lint aberto mostrando alguns erros
Fonte: Design Lint Figma

Figma <-> HTML

O Figma <-> HTML (antigo HTML to Figma) quebra um galho danado quando você:

  1. não tem acesso fácil aos arquivos de design de um projeto para pegar cores e componentes
  2. não encontra o .sketch/.xd ou mesmo o arquivo do Figma de uma página que já está no ar
janela do plugin mostrando campos para digitar URL e o viewport size. Informacao sobre a extensao do chrome e do autor builder.io

Para usar, só digitar a URL do site (como na imagem acima) que você quer “puxar” e ele transforma tudo em Figma. Testando com o site da Musicdot, coloquei do lado esquerdo e do direito é o layout já “puxado” para o Figma direto do plugin. Repare que apesar de não ser perfeito, tudo editável!

plugin html to figma, print do figma mostrando camadas criadas a partir do plugin

Se quer ver em mais detalhes sobre o plugin sugiro dar uma lida neste post de como converter um site para layout dentro do Figma.

E repetindo o pedido ali do começo do post: faça um post no Linkedin comentando de algum plugin que você usa também quase que todo dia. Não esqueça de marcar o Dicas UX por lá.

Que tal receber dicas de UX direto no seu e-mail?

Receba a newsletter que eu escrevo pessoalmente, com práticas de usabilidade, insights do mercado de UX e dicas do Figma