Esse ano 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.

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.

Gif mostrando o Stark em ação com um botao verde e texto branco, indicando baixa contraste e falhando em todos niveis de acessibilidade da wcag

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.

Botao com fundo verde claro e texto verde escuro
Aqui usei o fundo em #DCF4E7 e o texto em #207B49.

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.

Gif mostrando o plugin 'color blind' em ação. Selecionado um botão vermelho e quando se roda o plugin é gerado várias versões simulando como daltonicos veem o botao

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.

Gif mostrando o able em ação.Na imagem se ve um botao com fundo vermelho com um mais verde. No plugim em si existe a opcao de se testar as cores com varios tipos de daltonismo.

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!

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

One Reply to “3 plugins do Figma para deixar seu design mais acessível”

Comments are closed.