Extensões para designers podem ser fortes aliadas para ganhar mais agilidade no seu dia a dia profissional, ainda mais quando falamos de uma área tão rica e diversificada quanto a área de design.
Confira agora uma seleção de extensões do chrome para facilitar seu trabalho como designer.
Confira neste post:
1 – Window Resizer
Sabe quando você precisa ficar redimensionando um site para ver como ele fica em outros tamanhos?
Para quem não conhece o “toggle device toolbar” ou mesmo quer mais praticidade com essa tarefa, a extensão Window Resizer resolve isso para nós.
Dá para escolher um tamanho de janela pré-definido ou mesmo customizar o seu próprio.
![Window resizer mostrando opcoes de tamanhos como iPhone 6 ou laptop por exemplo](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_848,h_662/https://www.dicasux.com.br/wp-content/uploads/2019/08/window-resizer-extensao-chrome.png)
2 – Toybox
Normalmente quando não temos o layout de um site no nosso Figma ou Adobe XD, vamos lá no Chrome, tiramos print, colamos em um arquivo novo e vamos alterando a partir disso.
Ou mesmo alterando direto no Devtools, talvez alguns margins e paddings por exemplo, para ai sim tirar um print e mandar para o time de desenvolvimento.
Com a extensão Toybox você ganha eficiência nesse processo. É como se você estivesse usando um perfil de viewer no Figma, podendo além de ver as especificações, colocar comentários que façam sentido.
![](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_1024,h_705/https://www.dicasux.com.br/wp-content/uploads/2019/08/toybox-extensao-chrome-1024x705.png)
3 – ColorZilla
O Devtools é bom para pegar cores em sites, mas o processo para isso pode ser mais rápido com a extensão ColorZilla.
Uma coisa que gosto dela é que ela copia o hexadecimal da cor em um clique apenas, bem prático!
![Colorzila pegando a cor roxa em um site de livros. Pagina do livro bootstrap aberta](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_1024,h_595/https://www.dicasux.com.br/wp-content/uploads/2019/08/colorzilla-designer-extensao-1024x595.png)
4 – Fontface Ninja
Bem antigamente eu usava o What a Font para descobri qual tipografia a pessoa usou em algum site. Com a extensão Fontface Ninja descobrir a tipografia e suas especificações ficou muito mais rápido.
![Print mostrando a extensão fontninja mostrando qual fonte, tamanho e altura de linha que tem um titulo em um site.](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_1024,h_442/https://www.dicasux.com.br/wp-content/uploads/2019/08/fontninja-extensao-1024x442.png)
5 – Colorblinding
Já mostrei aqui como simular a visão de uma pessoa com daltonismo no seu layout, agora com a extensão Colorblinding podemos ganhar uma ajuda com isso diretamente no browser.
![Extensao simulando um daltonismo deixando site preto-e-branco](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_1024,h_595/https://www.dicasux.com.br/wp-content/uploads/2019/08/colorblinding-extensao-designer-acessibilidade-1024x595.png)
Qual extensão específica para facilitar nossa vida como designers que faltou aqui nessa lista? Escreve aí nos comentários qual e o problema que ela soluciona.
muito bacana!
obrigado maria! Confere depois o canal do Dicas UX que começamos! https://www.youtube.com/channel/UC31SXpB19NWVY–23aUuzCw