Sketch JSON Parser

Sketch JSON Parser – используем реальный контент в дизайне

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

 

Установка

  1. Скачайте / клонируйте из репозитория
  2. Запустите json-parser.sketchplugin

 

Пример

1. Скажем, у вас есть группа:

 

Sketch JSON Parser пример

 

2. И массив JSON:

[{

“img”: “http://i.imgur.com/IBZMRic.png”,
“title”: “Holabila”,
“date”: {

“formatted”: “25 Jan 2015”,
“time_ago”: “5 min ago”

},
“name”: “Koen Vendrik”

},
{

“img”: “/Users/joeytribbiani/Desktop/350.png”,
“title”: “Bilahola”,
“date”: {

“formatted”: “28 Feb 2015”,
“time_ago”: “2 days ago”

},
“name”: “Jaer Pollux”

}]

 

3. Теперь включите переменные пути JSON в названия слоев, как тут:

Профессия «Дизайнер интерактивных медиа»
Профессия «Дизайнер интерактивных медиа»
Скидка 45% по промокоду UXPUB
Узнать подробнее

 

Sketch JSON Parser - название слоев

 

4. Продублируйте группу столько рз, сколько нужно, и выделите группы

(в данном случае, возможно, дважды, так как у вас два элемента в массиве)

 

5. Запустите плагин и вставьте JSON, когда появится запрос

 

Sketch JSON Parser - JSON запрос

 

6. Вуаля! Плагин заменил все значения слоев данными из JSON

 

JSON - вуаля все работает

 

[dt_button size=”big” style=”default” animation=”none” color_mode=”default” icon=”” icon_align=”left” color=”” link=”https://github.com/kvendrik/sketch-json-parser/archive/master.zip” target_blank=”true”]Скачать Sketch JSON Parser[/dt_button]

Total
0
Shares
Добавить комментарий

Ваш адрес email не будет опубликован.

Похожие статьи
Экспорт исходников интерфейса из Sketch: как упростить себе жизнь
Подробнее

Экспорт исходников интерфейса из Sketch: как упростить себе жизнь

Sketch стал очень популярной программой, широко используемой UI-дизайнерами. В этом посте я покажу некоторые этапы моей работы по созданию и экспорту исходников в мобильные и веб-приложения.
Изучаем Group Resizing в Sketch 3.9
Подробнее

Изучаем Group Resizing в Sketch 3.9

Одним из инструментов, который долго был в моем списке желаний в Sketch - это возможность работать с адаптивными макетами. Следующий релиз Sketch, версия 3.9 (сейчас в бета тестировании), наконец представит новый инструмент Group Resizing.

Еженедельная рассылка

Одно письмо с лучшими записями за неделю

Total
0
Share