Zeplinの何が悪いの？

　Zeplinとはデザイナーが作成したデザインをチームに共有するためのツールです。最近はFigmaを使ってデザインをチームに共有する方も多いと思いますが、私自身は未だにZeplinには大変お世話になっています。長年Zeplinを使う中で”もう少しこうだったらいいのに"、"なんでそんな仕様なの？"と思うことが知見として溜まってきたのでまとめておこうと思います。

1. テキストスタイル

　フォント、サイズ、寄せ方向、文字高さ、文字幅が同じテキストスタイルを重複して登録することができません。つまり、見出しに使うのつもりで上記画像のうような文字スタイルを登録すると、同一スタイルでボタン内の文字に使うスタイルとして btn/center_black のうようなものを登録することはできません。したがってテキストスタイル名には用途を限定するような名称は避けたほうがよいでしょう。自動登録されるスタイルの中にはそのような命名もあるので注意が必要です。

2. シンボル前提知識が無いと数値意図を汲み取りにくい

　上の図でチェックボックス付きのリストの間隔を測ると、左の図では8ptと表示されます。しかし、実際にデザインデータを見るとアイコンとテキスト合わせてシンボル化して、その間隔は右のように4ptとなっています。上の例ではアイコンパーツに余白があるため実際に8ptで実装するとデザインより間隔が広くなります。
　このようにどのパーツがシンボルになっているかの事前知識がないと、細部のパーツがフォーカスされてしまうので数値を誤認してしまいます。

3. 線の太さ

　シンボル化したシェイプは小数点以下が吸収されてしまいます。塗りの場合は見た目上0.5ptに見える場合もありますが数値上は1ptとなってしまいます。iOSでは0.5ptの線を使いたい場面もあるので大変困ります。また、色味も太さが吸収された場合に実際に指定している値と異なる色味に表示されます。

4. 画面全体の書き出しがWeb版からのみ

　デザイナーであればZeplinはmacOSネイティブアプリケーションを使っていると思いますが、ネイティブアプリからアップロード画面の画像ダウンロードができません。画像のダウンロードはWeb版のDashbordからのみしかできない仕様になっています。

5. 同じアートボード名は同一画面として扱われる

　デザインデータ上では異なるArtbordになっていても、bord名が同じであればZeplinにアップロードする際に同じ画面だと認識されてデータが上書きされてしまいます。自社サービスなどで施策ごとに細かく画面のチューニングをする現場などではArtbordの命名規則をしっかり決める必要があります。

6. セクションが簡単に切れてしまう

　Zeplinではアップロードした画面をセクションという機能で複数画面をグループ化することがでます。アップロード画面サムネイルの間をタップすると簡単にセクションが切れてしまうので誤ってタップして画面を見失うことが多々あります。またアプリ版では複数画面をまとめてセクション移動させることができますがWeb版ではそれができないため、デザイナー以外が普及させようとすると手間がかかります。

おまけ：小技

1.セクションの移動

　画面数が多くなるとdashboardから意図した画面にたどり着くことのが困難になります。Web版のみ提供の機能ですが画面左上にあるアイコンからセクション見出しへのショートカットリンクを表示することができます。

2.プロジェクトにサムネイルを設定する

　アップロードした画面から Set as Thumbneil を選ぶとプロジェクトのサムネイルに設定することができます。設定しないと初回アップロード画面が自動で設定されてしまうためプロジェクトの視認性が悪くなります。一度設定してしまえば該当の画面を削除しても適用され続けるので最適なサイズのデータを一度アップロードして設定してしまいましょう。

まとめ

　Zeplinでデザインデータを運用していく上でつまずきやすいポイントをまとめました。若干クセがあるツールですが特徴を知った上で運用すれば十分活用できるツールです。