Я нашел скрипт, который делает именно это (генерирует CSS и HTML для слоев и предлагает возможность экспортировать их в% значения) и сокращает работу для веб-разработчика в два раза для Photoshop. Теперь мне любопытно, сталкивался ли кто-нибудь с плагином или указал мне на нативную функцию, подобную той, которая есть в приложении Sketch. Отсутствие такого делает мой переход к Sketch действительно болезненным. Или, будучи новичком в Sketch, я просто упускаю что-то идеологически отличное в том, как Sketch работает с CSS и HTML.

Возможно, это не совсем тот ответ, который вы ищете, но я считаю, что это лучше, чем передавать посредственные, автоматически сгенерированные стили инженерам.

Выборочная разметка

Я уверен, что вы обнаружили контекстное меню Sketch CSS grabber. Вы можете выбрать столько объектов, сколько захотите, и вы получите CSS в своем буфере обмена быстрее, чем сможете его вставить.

Конечно, здесь нет селекторов, это просто CSS-заметки. Каждый блок вызывается предыдущим комментарием с использованием имени слоя, например:

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

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

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

Файловая аннотация

Sketch Measure - это плагин, который генерирует различные уровни комментариев в соответствии с вашими требованиями. Здесь есть демо-видео . Основная идея состоит в том, чтобы аннотировать важные числа и позволить разработчику написать свой собственный код.

Помимо аннотации

Вы также можете попробовать инструменты, подобные этим, по отдельности или в комбинации:

• Zeplin создает автономную, совместно используемую версию вашего проекта Sketch для проверки вашим разработчиком, вытягивая спецификации по требованию.
• Marvel - это инструмент для создания прототипов, который импортирует файлы Sketch. Ничто так не общается, как интерактивный прототип!

Экспериментальный генератор HTML

Я никогда не использовал это, и это явно на ранних стадиях разработки, но плагин Blade выглядит многообещающе.

Blade - это плагин Sketch 3 для автоматической генерации HTML. Будет сгенерирован тег <div> для группы, тег <p> для текста и т. Д.

Смотрите следующие ссылки http://blog.mengto.com/the-best-hidden-features-in-sketch/

Следите за блогом Мэн То, чтобы быть в курсе интересных уроков, советов и даже хитростей в Sketch. http://blog.mengto.com/ https://designcode.io/