Мой самый часто используемый плагин для Sketch, Content Generator от Тимура Карпеева, является и одним из моих любимых. Он экономит мне уйму времени, когда необходимо наполнить дизайн в Sketch контентом.

Как хакнуть Sketch Content Generator для использования вашего собственного контента?
Но все же данные в Sketch Content Generator не настоящие, и иногда это не позволяет конкретно показать, как должен выглядеть конечный результат.

Так что я решил покопаться в самом плагине и найти способ заменить данные настоящими. Вы убедитесь, что на деле все проще, чем кажется, и вы сможете использовать любые данные, какие только хотите.
Перед тем, как мы начнем: используйте данные решения на свой страх и риск, и обязательно делайте резервную копию плагина перед любыми изменениями! Скачайте последнюю версию плагина.

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

Итак, сначала нужно найти папку Sketch Plugins.

Перейдите в Plugins в панели инструментов > и из дропдауна кликните на ‘Manage Plugins…’.

Sketch Plugins
Manage plugins…

В диалоговом окне кликните на иконку настроек в левом нижнем углу и затем выберите Show Plugins Folder.

Show Plugins Folder
Show Plugins folder

Откроется поисковик и отобразит все ваши плагины, включая Sketch Content Generator. Перейдите в папку Sketch Content Generator, в ней нужно найти папку ‘data’. В папке ‘data’ вы найдете данные (изображения и текст), используемые в плагине: имена, фотографии, персональные данные и так далее.

Папка с данными в плагине контент-генератора
Папка с данными в плагине контент-генератора

Скажем, вы хотите заменить картинки в папке ‘Music Artists’ новыми.

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

Просто перейдите на data > photos > music и заменяете, добавляете или удаляете изображения из папки:

 Затем перезапустите Sketch, и автоматически подтянутся новые фото в ‘Music Artists’
Затем перезапустите Sketch, и автоматически подтянутся новые фото в ‘Music Artists’.

 

Создайте вашу собственную папку с вашим собственным контентом.

Давайте в качестве примера возьмем Spotify и хакнем плагин, чтобы использовать его контент.
В папке Sketch Content Generator создайте новую папку ‘Spotify’. (Причина, по которой она помещена в корень — более легкий доступ в Sketch).

Создайте папку ‘Spotify’
Создайте папку ‘Spotify’

Итак, мы создали папку. Spotify обычно состоит из:

  • song titles (текст)
  • artist names (текст)
  • artist photos (изображения)
  • album covers (изображения)

Как вы можете видеть в скобках, названия песен — это текст. Так что мы будем использовать один из выводов текста в плагине Sketch Content Generator. Вернитесь в корневую папку (где вы создали папку ‘Spotify’) и разместите там папку Persona (как мы знаем, в ней есть что-то, что генерирует вывод текста):

Вернитесь в корневую папку (где вы создали папку ‘Spotify’) и разместите там папку Persona

Скопируйте и вставьте: Email.sketchplugin (который генерирует текст [email protected]) в папку Spotify, созданную ранее и переименуйте файл на Songtitles.sketchplugin.

переименуйте файл на Songtitles.sketchplugin

Теперь правой кнопкой кликните на файл Songtitles.sketchplugin и откройте его в текстовом редакторе:

Songtitles.sketchplugin

Окей, конкретно songtitles.sketchplugin делает импорт набора файлов javascript, который может выводить данные из файла emails.js в папку с данными. Когда вы кликаете на ‘Email’ в плагине генератора контента в Sketch, он проходится по этому коду и заполняет имейл адресами из файла data/persona/email.js.

Все, что вам теперь нужно, — заменить текст в строке 3 и 5:

Все, что вам теперь нужно, - заменить текст в строке 3 и 5:

Как вы видите в строке 3, нужно создать папку spotify в папке data с файлом внутри под названием songtitles.js, чтобы при клике на songtitles в контент-генераторе, он знал, откуда брать названия песен.
Снова перейдите в папку data и создайте папку spotify, как показано ниже:

Создайте папку ‘spotify’ в папке data.

Создайте папку ‘spotify’ в папке data.

Теперь нам нужно только поместить какие-то данные в эту папку. Перейдите в persona в папке data и скопируйте/вставьте файл emails.js в папку spotify, которую вы только что создали и переименуйте его на songtitles.js.

поместить какие-то данные в эту папку

Отлично, теперь все просто. Откройте файл songtitles.js в текстовом редакторе, и получится что-то вроде этого:

Откройте файл songtitles.js

Всюду электронная почта, естественно.

Это все данные, которые Sketch выводит рандомно. Удалите все кроме data = [] и начните добавлять названия папок (или любой другой текст, который вам нужно) и не забудьте о запятых).

Удалите все кроме data = []

Сохраните изменения. Теперь, если вы откроете заново Sketch, увидите новый пункт меню в плагине контент-генератора под названием ‘Spotify’, и там вы сможете сделать следующее:

в плагине контент-генератора под названием ‘Spotify’

Почти также можно сделать и с картинками. Скажем, мы хотим добавить обложки альбомов в наш новый пункт меню Spotify. Просто скопируйте/вставьте Music artist.sketchplugin из папки Photos (как мы знаем, Music Artists генерирует изображения) в папку Spotify и переименуйте его в Album covers.sketchplugin.

переименуйте его в Album covers.sketchplugin

Скопируйте/вставьте Music artists.sketchplugin в папку Spotify и переименуйте ее.

редактируйте файл album covers.sketchplugin
Редактируйте файл album covers.sketchplugin
  1. Измените строку 4 на:
    loadImages(‘data/spotify/albumcovers/’, ‘album covers’)
  2. Создайте папку в data > spotify под названием ‘albumcovers’ и скопируйте-вставьте изображения в эту папку, как показано ниже:

albumcovers

3. В sketch у вас появится опция “Album covers”.

В sketch у вас появится опция “Album covers”

Ухты, здорово!