【入門編】SketchからZeplin・Abstractへのスムーズな連携フロー！エンジニア・デザイナー間の引き渡し完全ガイド – UI/UX・デザインツール活用バイブル

デザインを「ただの画像」で終わらせない。Sketch・Zeplin・Abstractで築く、鉄壁のハンドオフ・ワークフロー

こんにちは。現場で日々デザインとコードの境界線を溶かしているエンジニアです。

「デザインデータが更新されたのに共有が漏れていた」「エンジニアから『この余白の数値はどう計ればいいの？』と聞かれる」。そんな消耗するやり取り、もう終わりにしましょう。

今回は、Sketchをソース・オブ・トゥルース（信頼できる唯一の情報源）とし、Abstractで歴史を刻み、Zeplinでエンジニアに「仕様」を届ける。この黄金の三位一体ワークフローを、明日から即戦力で使えるレベルまで噛み砕いて解説します。

—

初心者が陥りがちなミスは、これらを「似たようなツール」と混同することです。役割を明確にしましょう。

Sketch: 「創造の核」。デザインの設計図を描く場所。
Abstract: 「時間の守護者」。Gitのようにデザインファイルの変更履歴を管理し、枝分かれ（ブランチ）させて安全に実験する場所。
Zeplin: 「通訳者」。デザイナーの意図をエンジニアが理解できる「仕様書（CSS/Swift/Kotlin/Composeコード）」に自動変換する場所。

「Sketchで描いて、Abstractで管理し、Zeplinに流し込む」。これが、プロの現場の基本形です。

—

デザインをいきなり「マスター（メイン）」データでいじってはいけません。Abstractを立ち上げ、必ず新規ブランチを作成します。

1. Abstractでプロジェクトを開く。
2. `New Branch`を選択。「feature/login-page」のように目的を明記。
3. Sketchファイルが自動で同期されます。これで「失敗しても元の状態に戻せる」という最強の保険が手に入りました。

エンジニアが一番困るのは、書き出されたアセットの命名規則がバラバラなことです。Sketch側で名前を整えましょう。

ポイント: レイヤー名に「`/`」を使うと、Zeplin上でフォルダ分けされます。
例: `icon/navbar/home`, `icon/navbar/search`
Sketchの右パネルにある「Make Exportable」を押し、`2x`, `3x`など必要な解像度を設定。これでZeplin側に自動で最適化されたアセットが飛ぶようになります。

—

設定が正しいか、以下の手順で「エンジニアの視点」をシミュレートしてください。

1. Sketchで「プラグイン」からZeplinへ送信: `Plugins > Zeplin > Export Selected Artboards` を実行。
2. Zeplinブラウザを確認:

3. エンジニアの体験をテスト:

ここが重要です！
もしここで「意図しない余白」や「変な名前の画像」が出てきたら、それはSketch側のレイヤー構造が整理されていない証拠です。ツールに合わせるのではなく、「ツールが読み取りやすい設計」を意識しましょう。

—

最後に、ベテランが密かに守っている「運用ルール」を授けます。

Sketchの「シンボル機能」を徹底して使ってください。シンボルをZeplinに送ると、エンジニアはそれを「再利用可能なUIパーツ」として認識しやすくなります。

Slackやメールで「ここの余白10pxにして」と伝えても、数日後に埋もれます。必ずZeplin上の該当箇所の座標にピンを立ててコメントしましょう。それが「デザインの仕様書」そのものになります。

「修正」というメッセージは禁止です。「ログインボタンのホバー色を#FF0000に変更」のように、「何を変えたか」を記録してください。半年後の自分とチームが泣いて感謝します。

—

このフローを導入すると、エンジニアは「デザインを解釈する」という無駄な推測から解放され、実装という「価値創造」に集中できます。デザイナーは「修正の指摘」という消耗戦から解放され、より良いUXを考える時間に充てられます。

ツールはただの手段です。本当に大切なのは、このフローを通じて「エンジニアとデザイナーが同じ言語で話せるようになること」です。

さあ、まずは今日の作業から、一つだけブランチを切ってみてください。その小さな一歩が、あなたのチームのプロダクト開発を劇的に速く、楽しく変えていくはずですよ。

応援しています！