Что такое Markup Listify?

Плагин для Sketch созданный для того, чтобы сделать жизнь дизайнера и фронт-энд разработчика немного проще. Идея данного плагина состоит в том, чтобы упростить и ускорить возможность конвертации и копирования ваших текстовых слоев или групп содержащие текстовые слои в листы HTML.

Как это поможет?

Используя Markup Listify плагин для Sketch, вы сможете ускорить процесс HTML верстки, особенно когда вам необходимо внедрить большой список элементов или опций из Sketch.

Как его использовать?

Для того, чтобы добавить вашему списку возможность вставки в код, выберите текстовые слои, группы слоев (с текстовыми слоями) или оба варианта, и перейдите к Plugins ▸ Markup Listify или просто нажмите сочетание клавиш cmd + ⌥ + l, и готово. Но ничто не расскажет об этом процессе лучше, чем картинка:

68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f31313239393138352f64656d6f312e676966

Установка

Прежде всего, вам нужен установленный Sketch. Далее, есть несколько способов установить этот прекрасный плагин, так что вы можете выбрать более подходящий вариант для себя.

Быстрая установка (вариант, если вы торопитесь)

  1. Скачать zip файл с Markup Listify плагином и распаковать его.
  2. Двойной клик на Markup Listify. sketchplugin для установки (при запущенном Sketch).
  3. Вы можете найти плагин в меню Plugins Menu ▸ Markup Listify

Клон Git (лучший способ для любителей Git)

  1. Используйте командную строку (Terminal, iTerm и.тд.) для навигации в директории плагинов Sketch. Она может отличаться в зависимости от ваших настроек. Если у вас возникли сомнения, перейдите в Sketch к Plugins Menu ▸ Manage Plugins… ▸ Show Plugins Folder.
  2. После того, как вы попали в директорию с плагинами, выполните git clone github.com/marisaroque/sketch-markup-listify.git или вашу ветку.
  3. Теперь вы можете найти плагин по пути Plugins Menu ▸ Markup Listify.

Системные требования

Плагин Markup Listify протестирован на Sketch (версии 39.1) на OS X El Capitan. Если у вас возникли проблемы, дайте мне знать.

Планы и идеи на будущее

  • Выстроить отношения между текстовыми слоями и их подгруппами.
  • Создать возможность выбора типа тегов, например: ul, ol или option.
  • Создать возможность выбора тегов, которые могут быть вставлены внутрь li тегов, например: li > a, li > p, li > span, и т. д.
  • Поиск решения для обработки невидимых слоев или групп слоев.
  • Создание возможности копирования Pug (бывший Jade), Markdown и Handlebars.
  • Создание возможности копирования JSON соответственно выбору.
  • Продумать возможность создания вставляемых списков с изображениями, текстом и шейпами.
  • Продумать возможность обратного действия. А именно, возможность конвертировать HTML в группы и/или текстовые слои.

Обратная связь

Если вы обнаружили ошибку или у вас возникли вопросы касательно использования данного плагина, пишите мне в Twitter или следите за апдейтами.

Лицензия

Плагин Markup Listify для Sketch выпущен под лицензией MIT. Детально о лицензии.