Мой самый часто используемый плагин для Sketch, Content Generator от Тимура Карпеева, является и одним из моих любимых. Он экономит мне уйму времени, когда необходимо наполнить дизайн в Sketch контентом.
Но все же данные в Sketch Content Generator не настоящие, и иногда это не позволяет конкретно показать, как должен выглядеть конечный результат.
Так что я решил покопаться в самом плагине и найти способ заменить данные настоящими. Вы убедитесь, что на деле все проще, чем кажется, и вы сможете использовать любые данные, какие только хотите.
Перед тем, как мы начнем: используйте данные решения на свой страх и риск, и обязательно делайте резервную копию плагина перед любыми изменениями! Скачайте последнюю версию плагина.
В Sketch 3.5 есть баг, который не позволит вам загружать изображения, так что если у вас более старая версия плагина, в начале нужно обновиться.
Итак, сначала нужно найти папку Sketch Plugins.
Перейдите в Plugins в панели инструментов > и из дропдауна кликните на ‘Manage Plugins…’.
В диалоговом окне кликните на иконку настроек в левом нижнем углу и затем выберите Show Plugins Folder.
Откроется поисковик и отобразит все ваши плагины, включая Sketch Content Generator. Перейдите в папку Sketch Content Generator, в ней нужно найти папку ‘data’. В папке ‘data’ вы найдете данные (изображения и текст), используемые в плагине: имена, фотографии, персональные данные и так далее.
Скажем, вы хотите заменить картинки в папке ‘Music Artists’ новыми.
Просто перейдите на data > photos > music и заменяете, добавляете или удаляете изображения из папки:
Создайте вашу собственную папку с вашим собственным контентом.
Давайте в качестве примера возьмем Spotify и хакнем плагин, чтобы использовать его контент.
В папке Sketch Content Generator создайте новую папку ‘Spotify’. (Причина, по которой она помещена в корень — более легкий доступ в Sketch).
Итак, мы создали папку. Spotify обычно состоит из:
- song titles (текст)
- artist names (текст)
- artist photos (изображения)
- album covers (изображения)
Как вы можете видеть в скобках, названия песен — это текст. Так что мы будем использовать один из выводов текста в плагине Sketch Content Generator. Вернитесь в корневую папку (где вы создали папку ‘Spotify’) и разместите там папку Persona (как мы знаем, в ней есть что-то, что генерирует вывод текста):
Скопируйте и вставьте: Email. sketchplugin (который генерирует текст likerandom@emailaddress.com) в папку Spotify, созданную ранее и переименуйте файл на Songtitles.sketchplugin.
Теперь правой кнопкой кликните на файл Songtitles. sketchplugin и откройте его в текстовом редакторе:
Окей, конкретно songtitles. sketchplugin делает импорт набора файлов javascript, который может выводить данные из файла emails. js в папку с данными. Когда вы кликаете на ‘Email’ в плагине генератора контента в Sketch, он проходится по этому коду и заполняет имейл адресами из файла data/persona/email.js.
Все, что вам теперь нужно, — заменить текст в строке 3 и 5:
Как вы видите в строке 3, нужно создать папку spotify в папке data с файлом внутри под названием songtitles. js, чтобы при клике на songtitles в контент-генераторе, он знал, откуда брать названия песен.
Снова перейдите в папку data и создайте папку spotify, как показано ниже:
Создайте папку ‘spotify’ в папке data.
Теперь нам нужно только поместить какие-то данные в эту папку. Перейдите в persona в папке data и скопируйте/вставьте файл emails. js в папку spotify, которую вы только что создали и переименуйте его на songtitles.js.
Отлично, теперь все просто. Откройте файл songtitles. js в текстовом редакторе, и получится что-то вроде этого:
Всюду электронная почта, естественно.
Это все данные, которые Sketch выводит рандомно. Удалите все кроме data = [] и начните добавлять названия папок (или любой другой текст, который вам нужно) и не забудьте о запятых).
![Удалите все кроме data = []](http://ux.pub/wp-content/uploads/2016/02/1-lg0R55c1Zj0lu9UfNDjrSA.png)
Сохраните изменения. Теперь, если вы откроете заново Sketch, увидите новый пункт меню в плагине контент-генератора под названием ‘Spotify’, и там вы сможете сделать следующее:
Почти также можно сделать и с картинками. Скажем, мы хотим добавить обложки альбомов в наш новый пункт меню Spotify. Просто скопируйте/вставьте Music artist. sketchplugin из папки Photos (как мы знаем, Music Artists генерирует изображения) в папку Spotify и переименуйте его в Album covers.sketchplugin.
Скопируйте/вставьте Music artists. sketchplugin в папку Spotify и переименуйте ее.
- Измените строку 4 на:
loadImages (‘data/spotify/albumcovers/’, ‘album covers’) - Создайте папку в data > spotify под названием ‘albumcovers’ и скопируйте-вставьте изображения в эту папку, как показано ниже:
3. В sketch у вас появится опция «Album covers».
Ухты, здорово!
Нет комментариев