UXPUB 🇺🇦 Дизайн-спільнота

Cover image for 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 в названия слоев, как тут:

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

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

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

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

Sketch JSON Parser - JSON запрос

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

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

Скачать

Топ коментарі (0)