今回ご紹介するのは、Sketch3のCraftというプラグインを使用して、JSONのデータをデザインに反映させるというものです。
ダミーデータではなく、実際に稼働しているAPIのデータを取り込むことで、より公開後のイメージに近いデザインを作り出すことができます。

Craftとは

ダミーデータを挿入して作業を自動化できるSketch3とPhotoshopのプラグインです。

公式サイト
https://www.invisionapp.com/craft

以前のCraftについての記事(※バージョンが古いものなので、現バージョンとはUIと機能が少し異なります)
https://www.tam-tam.co.jp/tipsnote/html_css/post9091.html

本記事で検証した仕様環境

OS X El Capitan - version 10.11.3
Sketch 3 - version 39.1
Craft - versition 1.4.1

JSONを読み込む

取得イメージ画像

公式サイト説明(ページ中段 Inserting JSON contentより)
https://support.invisionapp.com/hc/en-us/articles/209650506

JSONの取得方法

APIから取得

1.JSONタブ内のinputにAPIのエンドポイントを入力してImportする

2.JSONを反映させたいレイヤー、JSONのKEYをそれぞれ選択する

ローカルのJSONファイルから取得

• 1.JSONタブ内のinputにローカルのJSONデータの場所を入力する
  or ファイルをドラッグ&ドロップしてImportする
  
• 2.JSONを反映させたいレイヤー、JSONのKEYをそれぞれ選択する

データの複製

取得したJSONデータはSketch上のレイヤーとリンクされます。

Craftの複製機能を使用したとき、リンクされたkeyが別のvalueに差し代わって複製できます。

※リンクさせたJSONの階層が深いとvalueが差し変わらないこともあるようです。
サムネイル画像の階層が深くて今回差し変わりませんでした。

JSONとリンクされているレイヤーのリンク解除は、
レイヤーを選択後、JSONに表示されている青枠の中にある×をクリックします。

補足

• APIで叩けるhttp動詞はGETのみ (PUT, POST, DELETEは使えない)

痒いところに届かなかったところ

• 日付などAPIのレスポンスがparse前のものだと、そのまま使うのが難しい
  
  

• APIでリンクされたレイヤーはAPIが更新されても動的に変更されない
  
  

• <br>などのタグは反映しない
  

まとめ

今回Craftを使用して簡単にJSONをレイヤーに反映できました。

JSONをデザインに反映させるメリットとしましては、実際に使用するデータを使用することでダミーデータを反映させるよりもよりリアルな感じを出すことができるところでしょうか。

テキストや画像を抽出する素材としてJSONを扱う、もしくは限定的に部分部分で表示を別媒体で管理する、などで使えるといいかと思いました。

参考サイト

Sketch上でAPIを叩いてデザインに内容を表示する方法
http://qiita.com/yoshikikoji/items/8e889de5c21046713946