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!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *