Existe um recurso ou plug-in "gerar CSS / HTML" no aplicativo Sketch

13

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.

css html sketch-app plugin Rakhilya Lála Ibildayeva
fonte

Respostas:

11

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.

Homens de contexto Copiar Atributos CSS

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.

Plug-in Medida de esboço

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.

insira a descrição da imagem aqui

roupas comuns
fonte
1
Melhorei a Lâmina Leia-me com uma visão geral da arquitetura / guia para que outros possam ter uma melhor chance trabalhando nisso para melhorar ainda mais isso ... github.com/kristianmandrup/blade
2
Lançamos o Protoship UIPad que faz exatamente isso. É um gerador de código para o Sketch que converte os designs do Sketch em componentes HTML, CSS, SASS e React. Ele usa o BEM para CSS e usa margens, preenchimentos, flutuadores e caixas flexíveis em vez de posicionamento absoluto. protoship.io/tools/uipad.html .
Jasim
"Lançamos" é enganador - a Protoship é uma lista de espera há um ano, e ainda é.
Chris Moschini
1

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/

Kiodour
fonte
Olá Kiodour, você poderia explicar um pouco mais o que encontraremos por trás do link que você fornece e por que ele responde à pergunta? Dessa forma, sua resposta ainda será valiosa caso o link seja interrompido posteriormente. A podridão do link é a principal razão pela qual realmente não gostamos de respostas somente de link aqui. Obrigado pelo seu esforço e continue contribuindo!
AndrewH 5/05