今回ご紹介するのは、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