zeplinへ愛を込めて

はじめまして、Praha Inc.デザイナーです。
この記事では、みんな大好きzeplinについて愛をしたためます。

Zeplinとは、デザイナーと開発者をつなぐ強力なコラボレーションツールです。 デザインをアップロードすることでマージンやカラーなどの情報を抽出したり、スタイルガイドを制作することができます。 

そんなZeplinの好きなところを語らせてください。

多くの主要デザインソフトに対応している

「案件・クライアントによって使用するデザインソフトは異なるけど、デザインを一括で管理したい…」

zeplinなら、Sketchはもちろんのこと、 Photoshop や XD、 figma にも対応しているので、デザインを一括で管理することができます。また、プラグインを設定を行えば、各ソフトの UI からダイレクトにファイルのエクスポートができるので、作業を止めて別のソフトを立ち上げる必要はありません。

ヒストリーが見やすい

アップロードしたデザインの履歴がかなり分かりやすいです。

デスクトップアプリでしか使用できないのですが、便利だなと思っている機能は過去のデザインを透過させることができる機能です。

これを使うことで、新しいデザインの上に重ねて差分を探すことができます。 特に実装と並行してデザイン作業を行うときに、エンジニアたちに「どこが変わったのか」 と聞かれても 一瞬で変更箇所が分かります。画像は文言の変更前後で重ねて見た様子。

画像の書き出しが楽

画像制作時にアイコンを指定することで、だれでもpng/jpg/svgで2倍3倍の画像を書き出すことができます 。頻繁に発生する「あの画像書き出しといて」という 無駄なやり取りの往復を減らすことができます.。

デスクトップアプリの細かいUX

デザイン 一覧からドラッグアンドドロップするだけで画像をフォルダにコピーできたり、 文言やURLのコピーがワンクリックで済んだりと、 かゆいところに手が届くような体験が提供されています。

簡単にデザインシステムを構築することができる（らしい）

実はまともに使ったことがないのですが、シンボルをアップロードすることで、zeplin上で コンポーネントの管理をすることができるそうです。 各デザインのプレビューでシンボルを選択すると何のシンボルが使われているかが表示されます。 エンジニアが実装する際に既存コンポーネントを使い回しやすくなりますね。 

👆👆👆👆👆👆👆👆👆👆👆👆
ここまでが愛で、ここからが愛ゆえの要求（デメリット）です。
👇👇👇👇👇👇👇👇👇👇👇👇

スマホでプレビューできない

figma や XD と比べて弱い点として、スマートフォンでのプレビュー機能がないことがやや死活問題でした。 iOSもアプリを会社で製作している時は、その場で sketch Mirror を使って確認することで事足ります。 しかし、私用のスマホが Android のため、 Sketch で作ったモバイル UI を実機で確認しようとした時にsketch Mirror も使えず、 invisionを使用しました。 Zeplinを使ってスマホでプレビューできるようになれば動き以外大体完結するのに…。

------

小規模チームでのやり取りはもちろんですが、特に中〜大規模サービスで使用すると真価を発揮できるZeplin。私はで画面のデザインだけではなく、アイコンの一覧化やイラストの整理としても使っています。zeplin号のネーミングセンスもアイコンもキュートでグッド。

以上、最近はFigmaを使った制作も楽しいデザイナーのzeplinへの愛を語る回でした。