Se quisermos alterar o design de uma web já publicada, seja na produção ou no ambiente de desenvolvimento ou qualidade, teremos que começar a modificar seu CSS. Esse processo pode ser complicado, pois existem poucas ferramentas que permitem a edição de CSS em tempo real; portanto, se costuma gastar muito tempo fazendo as alterações corretas.
E a extensão que mostraremos se propõe a acelerar esse processo.
Se trata de Devsync, uma extensão do Google Chrome que, quando ativada, mostra um editor de CSS acima do site que estamos vendo. É possível fazer as alterações de cada elemento intuitivamente, pois o plug-in detecta corretamente cada zona e mostra as variáveis em caixas separadas, como se fosse o Photoshop.
Na apresentação, eles comentam o problema que existe hoje neste setor:
Ao criar sites, sempre brinquei com o estilo dos elementos através das ferramentas do navegador. Isso me permitiu ver rapidamente como seriam os estilos, sem mudar constantemente o contexto, mas eu ainda tinha que copiar essas edições para o meu editor e muitas vezes as perdia nesse processo.
Eu queria criar uma maneira de preservar essas edições e fazer isso de uma forma mais visual, para que meu design fosse baseado no que parece certo, em vez dos valores que continuavam mudando no meu editor até que parecesse decente.
Com esta ferramenta, que não é gratuita (pode ser comprada hoje por 39 euros), podemos projetar visualmente usando um editor semelhante ao Sketch/Figma, porém, que se encontra nas ferramentas de desenvolvimento do navegador. Após feitas as mudanças, a aplica em tempo real, através do editor.
Quem quiser, pode assistir uma demonstração no site do projeto .