Есть ли в приложении Sketch функция или плагин для генерации CSS / HTML?

13

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

css html sketch-app plugin Рахиля Лала Ибилдаева
источник

Ответы:

11

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

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

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

Скопируйте атрибуты CSS контекстные люди

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

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

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

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

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

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

Плагин Sketch Measure

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

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

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

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

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

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

введите описание изображения здесь

простая одежда
источник
1
Я улучшил Blade Readme с обзором / руководством по архитектуре для других, чтобы иметь больше шансов поработать над ним, чтобы еще больше улучшить его ... github.com/kristianmandrup/blade
2
Мы выпустили Protohip UIPad, который делает именно это. Это генератор кода для Sketch, который преобразует проекты Sketch в компоненты HTML, CSS, SASS и React. Он использует BEM для CSS и использует поля, отступы, числа с плавающей точкой и flexbox вместо абсолютного позиционирования. protoship.io/tools/uipad.html .
Джасим
«Мы выпустили» вводит в заблуждение - Protoship был Листом ожидания в течение года, и до сих пор.
Крис Москини
1

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

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

Kiodour
источник
Привет, Киодур, не могли бы вы объяснить немного подробнее, что мы найдем по предоставленной вами ссылке и почему она отвечает на вопрос? Таким образом, ваш ответ по-прежнему имеет значение в случае разрыва ссылки в более позднее время. Гниение ссылок - главная причина, по которой нам здесь не нравятся ответы, содержащие только ссылки. Спасибо за ваши усилия и продолжайте вносить свой вклад!
AndrewH