SketchのData機能を極めろ：JSON連携と自動化で「作業」を「デザイン」に変える技術
プロダクトのクオリティを左右するのは、画面の綺麗さではない。「いかに現実のデータに近い状態で検証できるか」という、プロトタイプの解像度だ。
多くのデザイナーが「ダミーテキスト」や「unsplashの適当な画像」でレイアウトを組むことに時間を費やしている。だが、それは時間の無駄だ。今日から、Sketchの標準機能である「Data」とJSONをハックし、開発スピードを5倍に引き上げるワークフローを導入しよう。
—
1. なぜ「Data機能」なのか？：デザインシステムの最終防衛ライン
SketchのData機能は、単なるプレースホルダーではない。「UIの制約をデザイン段階で可視化する」ための強力な武器だ。
例えば、日本語の文字列長が想定を超えた場合、UIはどう崩れるのか？APIから取得する画像が正方形ではなく長方形だったら？これらを静的な画面で確認するのは不可能だ。
基本のJSON構成：保守性を高めるスキーマ定義
Data機能に読み込ませるJSONは、構造化が命だ。デザイナーだけでなく、バックエンドエンジニアと共通の構造で管理できれば、それは「動く仕様書」になる。
// users.json – プロダクトの属性を定義するベストプラクティス
{
“users”: [
{
“name”: “佐藤 健一”,
“email”: “kenichi.sato@example.com”,
“avatar”: “https://i.pravatar.cc/150?u=1”,
“role”: “Admin”
},
{
“name”: “山田 花子”,
“email”: “hanako.yamada@example.com”,
“avatar”: “https://i.pravatar.cc/150?u=2”,
“role”: “Member”
}
]
}
ポイント： SketchのData機能は、JSON内の配列構造を自動的に認識する。階層化されたJSONを用意することで、コンポーネントの「オーバーライド」と完璧に同期できる。
—
2. 現場で震えるほど効率が上がる「絶対導入プラグイン」
標準機能だけでは足りない。「現場の速度」を出すには、以下の2つを必ず入れろ。
1. [Sketch Data Populator](https://github.com/preciousforever/sketch-data-populator)
- 標準機能の限界を超える。レイヤー名とJSONのキーを自動マッチングさせる機能は最強。これがないと、手動で一個ずつデータを流し込む羽目になる。
2. [Content Generator](https://github.com/timuric/Content-Generator-Sketch-Plugin)
- リアルなダミーデータ（名前、住所、URL、画像）をワンクリックで生成する。思考停止で埋めたい時に必須。
—
3. 生産性を爆速化する「隠れたキーボードショートカット」
UIエンジニアなら、マウスでメニューを辿る時間は0.1秒たりとも許すな。
- `Command + Shift + D` (Dataの更新):
データソースを差し替えた後、すべてのレイヤーを一括更新する。これを知らない人は一生マウスを握り続けることになる。
- `Option + Command + Shift + V` (スタイルを保持して貼り付け):
シンボルを多用するプロジェクトでは必須。データを流し込んでも、コンポーネントのスタイル（文字色やフォント）を維持したまま、中身だけを最新のJSONに置き換える。
—
4. チーム開発で勝つための「設定共有ルール」
個人の環境で完結させてはいけない。チーム全員が同じデータセットを使えるようにしろ。
チーム用データフォルダの構成
DropboxやGoogle Driveで以下の構造を同期させ、Sketchの「Data」設定からそのフォルダを読み込ませるルールを敷く。
/design-system-data
/assets/ # ダミー用の画像群
/json/
mock-user.json # ユーザー情報
mock-post.json # 記事コンテンツ
config.yaml # デザインシステム用定数
ルール： `manifest.json` をルートに置き、各コンポーネントがどのJSONを参照すべきかをドキュメント化しておくこと。これで、新入社員がジョインした瞬間に、本番に近いデータでデザインを開始できる。
—
5. 最後に：エンジニアリング思考でデザインせよ
君たちが目指すべきは、「見た目が整った画面」を作ることではない。「開発プロセスにおけるデータ入力を自動化し、仕様の不整合をデザイン段階で殲滅すること」だ。
JSONを編集し、Data機能で流し込み、崩れを確認する。このループを高速で回せるチームこそが、リリースまでの期間を劇的に短縮し、開発者とデザイナーの間に「共通言語」という名の信頼を築ける。
さあ、今すぐファイルを閉じ、JSONを書き換えろ。手作業に費やしているその時間は、本来もっとクリエイティブな課題解決のためにあるはずだ。
—
追記： もしAPIの実データをそのままSketchに流し込みたいなら、`JSON to Sketch`系のスクリプトを自作するのも一つの手だ。エンジニアなら、`Sketch JS API` を叩いて、APIレスポンスを直接シンボルにバインドするCLIツールを書いてみるのもいいだろう。限界を決めるのはツールではない。君のコードだ。