Sketch Data Populator - создает сетку из выбранного элемента и заменяет текст и изображение

Почему именно Data Populator

Мы уверены, что дизайнеры должны работать с осмысленными и реалистичными данными на как можно более ранних этапах создания проекта по ряду причин:

  1. Контент определяет дизайн-решения (и помогает лучше передать цель)
  2. Данные беспощадны (так что компоненты интерфейса должны создаваться по принципу максимального быстродействия и здравого смысла)
  3. Это интересно (смотреть, как ваш дизайн эволюционирует вместе с осмысленными данными, мотивирует и направляет в нужное русло)

Sketch Data Populator не только повышает вашу продуктивность (возможно, ускоряет процесс в 60 раз), но еще и меняет вашу манеру дизайна интерфейсов (как минимум, с нами произошло именно так).

Мы создали Sketch Data Populator для улучшения нашего процесса дизайна в работе с данными и разработали плагин совместно с Lukas Ondrej.

Установка

  1. Скачайте ZIP-архив.
  2. Переместите файл Sketch Data Populator. sketchplugin в вашу папку с плагинами Sketch. В Sketch 3, выберите Plugins › Reveal Plugins Folder… чтобы открыть ее.

Как пользоваться…

Плагин Sketch Data Populator создает сетку из выбранного элемента (группа слоев или артборд) и заменяет текст и изображение {заглушки} данными из JSON-источника:

Sketch Data Populator - создает сетку из выбранного элемента и заменяет текст и изображение

Вот как это работает:

  1. Создайте группу стилей, которая содержит минимум один текстовый слой. В этом текстовом слое используйте «заглушки» для полей данных в фигурных скобках — напрмер, {имя} или {фамилия}. В текстовом слое вы можете делать произвольное сцепление строк — например, {имя}, {фамилия}. Команда плагина «Populate with …» заменит все эти заглушки соответствующими данными.
  2. В той же группе слоев создайте слой фигуры (это графическая заглушка). Дайте этой заглушке название в фигурных скобках — например, {image}. Команда плагина «Populate with …» заменит заглушку на соответствующие графические данные (PNG, JPG).
  3. Создайте еще один слой с фигурой в качестве заглушки иконки. Присвойте слою имя в двойных фигурных скобках — например, {{icon}}. Установите любые параметры, такие как размер, цвет заливки или тень по своему усмотрению — все свойства применятся к конечной иконке после наполнения плагином. Команда «Populate with …» заменит заглушки на соответствующие иконки в векторном формате (SVG).

Все доступные команды:

Populate with JSON

запросит выбрать файл JSON, который может храниться в любом месте на компьютере. После выбора JSON-файла вы сможете выбрать настройки для данных и макета (разделы Data и Layout):

Sketch Data Populator - создает сетку из выбранного элемента и заменяет текст и изображение

Populate with Preset

отобразит диалог для выбора одного из пресетов (Presets) и также позволит сделать настройки данных и макета:

Sketch Data Populator - создает сетку из выбранного элемента и заменяет текст и изображение

Опции для настройки данных

  • Randomize data order: вместо прохождения по JSON-источнику сверху вниз построчно, команда будет производить произвольную выборку данных.
  • Trim overflowing text: текстовый слой с фиксированной длиной будет обрезать лишний текст.
  • Insert ellipsis after trimmed text: вставит «…» после обрезанного текста.
  • Default substitute (смотрите ниже)

Управление недостающими данными

Замена текста

  • {placeholder} вставляет пустую строку, если для этой заглушки нет доступных данных
  • {placeholder?} использует Замену по умолчанию
  • {placeholder?substitute} использует заданную замену, которую вы вводите после знака «?»

Замена графики и SVG

Если нет изображения или SVG-исходника, плагин отключит заливку заглушки и активирует ее только когда появятся нужные исходники при повторном заполнении данными. Так что для изображений рекомендуется поместить картинку для замены или пиктограмму позади самого изображения. В таком случае вы будете видеть, что здесь не хватает исходника (смотрите «demo.sketch» для примера).

Опции для макета (Layout)

Если отмечена опция «Create grid», плагин создаст сетку из выделенных элементов (групп слоев или артбордов) и заполнит из разом. Укажите количество строк и колонок с соответствующими отступами. Эта опция работает по аналогии с инструментом «Make Grid» в Sketch.

Populate again (⌘⇧X)

Перезаполняет все выделенные объекты с последнего использованного пресета или JSON-источника по последним использованным настройками. Отлично работает для «прохода» по разным наборам данных.

Restore Placeholders

Восстанавливает заполненные текстовые слои, возвращая изначальные {заглушки}. Пример: вы использовали заглушки «{имя} {фамилия}» в текстовом слое, после заполнения они приняли значения «John Doe». «Restore Placeholders» опять вернет «{имя} {фамилия}». Эта опция нужна, если нужно перезаполнить изначальные заглушки новыми данными. Чтобы плагин видел снова наличие заглушек в тексте, их нужно восстановить.

Place SVG

Поможет выбрать SVG-исходник с памяти компьютера. Он заменит выделенную фигуру и адаптирует ее параметры (такие как размер, цвет, тень …).

Place image

Поможет выбрать изображение на компьютере, а затем использует его в качестве фона для выделенной фигуры.

Reveal Presets

Укажет местоположения плагина для его пресетов. Пресеты представляют собой обычные файлы в формате JSON и папки с исходниками графики из комплекта плагина. Там вы можете использовать любую структуру папок. Чтобы найти папку «Preset» внутри папки плагина, кликните правой кнопкой мыши на Sketch Data Populator. sketchplugin и выберите опцию Show Package Contents (показать содержимое пакета).
________________________________________
Посмотрите файл demo.sketch, чтобы понять, о чем речь.
________________________________________
Формат данных и исходники

Данные нужно хранить в файлах JSON, которые можно подгрузить плагином либо из папки пресетов (с помощью опции (Populate with Preset), либо с любой другой папки на компьютере ( опция Populate with JSON). Данные в JSON должны быть структурированы в массив, как в примере ниже:

[dt_code]
{
"id": 1,
 "firstname": "Willie",
 "lastname": "Willis",
 "company": "Myworks",
 "job": "Marketing Assistant",
 "email": "wwillis0@cdc.gov",
 "phone": "9-(528)011-1428",
 "address": "99 Hallows Terrace",
 "city": "Outeiro",
 "country": "Portugal",
 "image": "assets/1.jpg",
 "icon": "assets/vip.svg"
},
 {
"id": 2,
 "firstname": "Melissa",
 "lastname": "Flores",
 "company": "Tagtune",
 "job": "Actuary",
 "email": "mflores1@jigsy.com",
 "phone": "4-(965)937-9250",
 "address": "46 Acker Trail",
 "city": "Santiago",
 "country": "Philippines",
 "image": "assets/2.jpg",
 "icon": "assets/vip.svg"
}
[/dt_code]

Обратите внимание, что в примере файл графики (JPG) и иконка (SVG) хранятся в папке под названием assets. Это означает, что все данные графики и иконок должны храниться внутри папки на том же уровне, что и файл JSON. Папки картинок/иконок и сами файлы могут быть названы, как вам хочется, просто нужно ссылаться на них относительно вашего JSON-файла.

Вы также можете использовать полный URL в качестве ссылки на изображения, если вам так удобнее.

[dt_button size="big" style="default" animation="none" color_mode="default" icon="" icon_align="left" color="" link="https://github.com/preciousforever/sketch-data-populator/archive/master.zip" target_blank="true"]Скачать плагин Sketch Data Populator[/dt_button]