Extract for Brackets by Adobe

Conheça o Extract, da Adobe. Esse serviço mostra, direto de um PSD, o código CSS dos elementos selecionados.

por Diego Eis 24/12/2014 ~ 2 min. / 291 palavras

Eu sei que você deve ser um cara apaixonado pelo Sublime, eu também sou. Mas quando algo legal está sendo feito por outras pessoas, nós temos que considerar. O meu segundo editor preferido, o Brackets, tem e vai ter algumas features sensacionais. Uma dessas features você já deve conhecer que é o PSD Lens, que ainda está em desenvolvimento. Mas outra feature que pode ser usada JÁ é o Extract for Brackets do serviço Creative Cloud da Adobe.

Como a Adobe ainda ajuda a comunidade, ela consegue fazer coisas maravilhosas como o projeto Creative Cloud Extract. A ideia é: você sobe um PSD para o Extract, ele abre o PSD em uma interface direto do seu browser. Você clica nos elementos e o serviço te passa o código CSS… O código é bastante enxuto. Sou bastante contra coisas que fazem códigos front-end de forma automática, mas esse está indo no caminho certo e como é apenas código CSS e ele não escreve no seu projeto, você tem alto nível de controle. Ele ainda consegue extrair os assets de uma determinada Layer. Sensacional. Quer saber o mais legal? Você pode usar o serviço sem precisar do Brackets. Mesmo assim, tem que ter uma conta no Creative Cloud.

Com o Extract a gente consegue explorar um PSD e ter as seguintes informações:

  • Copiar textos e CSS
  • Conseguir informações de a cor, gradientes e font
  • Medir distâncias entre os elementos
  • Salvar imagens otimizadas prontas para produção

Fiz alguns testes aqui e realmente é uma mão na roda, principalmente para tirar pequenas dúvidas sobre quanto é o valor do border-radius de um determinado elemento ou qual exatamente as dimensões de um botão.

Vale a pena conferir.

Leia mais: