3 plugins do Figma para deixar seu design mais acessível

Há um tempo já o Figma liberou o uso de plugins feitos pela comunidade. As possibilidades são infinitas agora para ganharmos mais produtividade e eficiência em nosso cotidiano com a ferramenta.

Claro que mesmo sem plugins a ferramenta já nos ajuda bastante, principalmente para fazer protótipos, mas com os plugins podemos ir além e bem mais rápido.

Confira agora uma lista com plugins que nos ajudam a deixar nossos layouts mais inclusivos.

1 – Stark

Lembro de ter visto o Stark em um post de plugins para Sketch. Quando o Figma liberou plugins foi o primeiro que instalei.

O que ele resolve? Sabe quando temos que procurar alguma ferramenta externa para checar se a contraste de um texto com um background está ok? Ele já é essa ferramenta no próprio Figma. No exemplo abaixo escolhi o verde #2FBF71 com o texto branco puro #FFF.

Algo que o pessoal recomenda é em vez de um texto claro com fundo escuro, fazer justamente o contrário. Importante: o Stark hoje buga se você chegar nessa cor de fundo usando opacidade. Ele vai entender que a cor é a que está ali em fill mesmo se tiver 0% de opacidade.

2 – Color Blind

Se você viu o post Pare de preguiça e deixe seus designs mais acessíveis lembra que um ponto para nos preocuparmos é como pessoas com algum tipo de daltonismo visualizam nossos produtos.

Antigamente eu printava minha artboard do Figma no Photoshop e lá ligava o modo Color Blindness (View > Proof Setup > Color Blindness) para ter uma noção.

Com o plugin Color Blind, basta selecionar a artboard ou elemento que ele gera isso de uma forma rápida e prática.

3 – Able

Esse é uma mistura do Stark com o Color Blind. Além de trazer informações sobre a porcentagem de pessoas que possuem cada tipo de color blindness, ainda permite inverter a cor do texto com a cor do fundo para um teste rápido.

O que achou dos plugins? Como você lida com essas questões com seu stack de design atual? Faltou algum nessa lista? Escreve aí nos comentários!