Eu encontrei um script que faz exatamente isso (gera CSS e HTML para as camadas e oferece uma opção de exportar esses valores em%) e corta o trabalho para o web-dev pela metade para o Photoshop. Agora, estou curioso para saber se alguém encontrou um plugin ou pode me indicar um recurso nativo como o do aplicativo Sketch. A ausência disso está tornando minha transição para o Sketch realmente dolorosa. Ou, sendo novo no Sketch, estou perdendo algo ideologicamente diferente sobre a maneira como o Sketch funciona com CSS e HTML.

Talvez essa não seja a resposta que você está procurando, mas acho melhor do que entregar estilos medíocres e gerados automaticamente aos engenheiros.

Marcação seletiva

Tenho certeza que você descobriu o grabber CSS do menu de contexto do Sketch. Você pode selecionar quantos objetos quiser e obterá o CSS na sua área de transferência mais rapidamente do que pode colá-lo.

Não há seletores, é claro, são apenas notas de CSS. Cada bloco é chamado por um comentário anterior usando o nome da camada, assim:

/* Rectangle 1: */
background: #C7C1B5;

/* Rectangle 1 Copy: */
background: #F5E618;

/* Rectangle 1 Copy 2: */
background: #FFFFFF;

Anotação de arquivo

O Sketch Measure é um plug-in que gera vários níveis de anotação de acordo com suas especificações. Há um vídeo de demonstração aqui . A idéia básica é anotar os números importantes e deixar que o desenvolvedor escreva seu próprio código.

Além da anotação

Você também pode tentar ferramentas como estas, sozinhas ou em combinação:

• Zeplin cria uma versão independente e compartilhável do seu design do Sketch para a inspeção do seu desenvolvedor, retirando as especificações sob demanda.
• O Marvel é uma ferramenta de prototipagem que importa arquivos de Sketch. Nada se comunica como um protótipo interativo!

Gerador de HTML experimental

Eu nunca usei isso, e está claramente nos estágios iniciais de desenvolvimento, mas o plug-in Blade parece promissor.

O Blade é um plug-in do Sketch 3 para gerar automaticamente HTML. Ele irá gerar a tag <div> para o grupo, a tag <p> para o texto, etc.

Veja os links a seguir http://blog.mengto.com/the-best-hidden-features-in-sketch/

Siga o blog de Meng To para se manter atualizado com tutoriais, dicas e até truques interessantes sobre Sketch. http://blog.mengto.com/ https://designcode.io/