見出し画像

【AdobeXD】XDtoZeplinの注意点



XDには開発者モードもありますが、実装者が実際に活用できるXMLが表示できたり、機能面の使いやすさ及び慣れなどからZeplinを使用することが多いと思います。
今回は主にアプリ開発の実装の受け渡しに、Zeplinを選択した場合、XDからアップする際の注意点をまとめました。

1.ローカルに保存してアップしないといけない


XDからZeplinへアップする際、クラウォファイルからはアップすることができません。
一応、アートボードのみなら可能ですが、コンポーネントやスタイルからリンクが切れてしまうことが多いためお勧めできません。


XDからZeplinへアップする際はかならずローカルファイルに保存してアップする必要があります。
少々面倒ですが、XDは意外とファイル動作が軽く、保存も時間がかからないためファイルの管理さえしておけば問題ないと思います。

画像1


2.同じ数値のカラースタイルを登録できないので、濃度をずらして命名する

これはおそらく他のUIツールも同様です。
Zeplinが同じカラースタイルを登録できないため、XD上でデザインを作成する際、同じカラーの別名スタイルを登録する際、不透明度の%をずらし、登録ないといけません。
Figmaは同じスタイルでも別名登録ができますが、XDはZeplin同様同じカラースタイルを登録できないので、ルール的にはZeplinとおなじなので都合がいいです。

例えば、

primary_black #000000

primary_text #000000

の2つを登録したい場合、

primary_black #000000 100%

primary_text #000000 99%

の不透明度でどちらかを濃度をずらして登録する必要があります。

デザイン上で若干差がでてしまいますが、あくまでゴールは実装されたものなので、
Zeplinで性格な情報を受け渡すため、実装や修正に機転が聞く様デザイン側でスタイルの調整をする必要があります。

補足:
カラースタイルはSVGやPDFにも適応すると思いますが、それらの濃度が100%でないとエラーが出る可能性があるので
その場合なるべくSVG/PDFに優先的に100%のスタイルがあたるよう設計する必要があります。


3.テキストスタイルは一覧表から登録 

XD上で登録したテキストスタイルは、アップする際に自動的に正しく登録することができません。
そのため、一度アートボードに使用されているフォントのリストを作成し、それぞれを選択してZeplinのスタイルへと登録する必要があります。

補足として、
iOSではスタイルは行揃えは統一し1つのスタイルで登録されますが、
Androidでは行揃え別にスタイルを登録することができるので、
各1スタイルごとに左揃え、中心揃え(中央揃えかつ、テキスト設定で中心揃えにしておく必要がある)、右揃えの3パターンを追加することをお勧めします。

例1)
text1/left
text1/right 


他の注意点

他ツール共通で気をつけることをまとめました。

・同じコンテンツはボックスで囲む

Zeplinではなぜかマージンがずれて小数点が発生するというバグがあります。
これらを調整するために、同じコンテンツのレイヤーに0%のシェイプを作成し、全体を囲ってあげることで回避することができます。

・書き出す素材は書き出しにチェックを忘れない様に

これはどのツールもですが、書き出しが必要なアイコンは必ず書き出し素材としてチェックする必要があります。


他にも注意点があれば今後も追記していきます。


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
ありがとうございます!
1
Yumemi.inc/UIデザイナー/(前職はゲームUIデザイナー/VR系)/個人事業主として副業もしています。日々の学びや振り返りを書いています。