くまだどうも、くまだです。
最近、私はコーディングするときにZeplinというツールを使っています。Zeplinというのは以下のような公式サイトから使うことができます。
XdやPhotoShopで作られたデザインカンプを、Zeplinと連携させます。Zeplin上からFigmaやAdobeXdのデザインカンプからコーディングするのいっしょで、要素間から数値を読み取ったり、要素の幅を測って数値を読み取ることができるようになります。
私がなんでこれを使っているのかというと、めちゃくちゃ軽いからです。
効率的にコーディングするなら、EJSやPugが便利です。
Zeplinがめちゃくちゃ便利
クライアントによっては、SPがXｄのデザインカンプ、 PCがPhotoShopのデザインカンプで作成、というパターンもあります。（デザイナーが別なんだろうか、、）
そういったときに、XdとPhotoShop両方起動するとパソコンがめちゃくちゃ重くなります。（古い&低スぺPC笑）
片方だけでいいんですが、結局開かなかったほうのデザインカンプのレイアウトを確認するためにそちらも開くことになるから、結論両方開くことになる、、、。Xdだけ、PhotoShopだけのときもありますが、とくにPhotoShopのデザインカンプでこられたときにはもう、、、PCが死ぬ。
で、そんなときはZeplinを使ってそちらでデザインカンプの数値を読み取ってコーディングしています。
ZeplinとPhotoShop,Xdと連携
XD とPhotoShopでそれぞれZeplinと連携させると、Zeplinのほうでデザインカンプが読み込まれて、XdやFigmaで数値を測るのと同じような感覚で使うことができます。
Xdを例に超ざっくり簡単に手順をいうと、
- Zeplinでアカウントをつくる
- ZeplinのアプリダウンロードするかWebで利用するか選択
- Zeplinでプロジェクト作成（create first project）
- AdobeXdでデザインカンプを開く
- 読み込みたいデザインカンプのアートボードを選択
- メニューからファイル→書き出し→Zeplinを選択
- Zeplinで作成したプロジェクトが表示されるので、それを選択
- Zeplinにインポートされて、Zeplinで使えるようになる
という感じですね！
もしかしたら6のところで表示がでない場合もあるかもしれません。
その場合は、「Zeplin for Xd」というXdのプラグインがあるのでそれをインストールします。
そしてZeplinに読み込みたいデザインカンプアートボードを選択しておいて、その状態でXdのプラグイン、
Zeplin for XDからExportを選択します。
Zeplinで作成したプロジェクトを選択すればプロジェクト内にインポートされます。
上記のような感じでインポートされればOKです。（なお上記デザインファイルは無料キットを使用しております。）
あとは下の画像のように、FigmaやXd使ってコーディングするのと同じ感覚で使用することができます。（しかもめちゃくちゃ軽い！）
PhotoShopのデザインカンプでも同様のことができますので、そちらも試してみるといいでしょう。PhotoShopのデザインカンプがめちゃくちゃ重くて困るという人は、Zeplinに移行してからやると快適にコーディングすることができます。
Zeplinはコーディングツール
もちろんZeplinは、デザインツールではないので色を変更したりフォントサイズを変更したり、といったことはできません。あくまでもコーディングするためだけのツールとして使うならば十分です。
最近はこのやり方ばっかりやっているので、Zeplinがないとコーディングできない身体になってしまったかもしれません。それというのもPhotoShopが重いから、、、。
Zeplinは有料プランや無料プランがあるみたいですが、基本的には無料プランでだいたい事足ります。一つのプロジェクトで何個も追加してやりくりすればいいだけの話なので。
PCが重いとコーディング作業に支障をきたすので、個人的にはこういった軽いツールに移行してやるのがいいんじゃないかなと。
ここまで読んでくださりありがとうございました。