ブログ

コーディングを10倍早くするSketch Pluginを紹介するよ

UIを制作するベストなアプリ、とばかりに普及したSketch。最近はHTMLコーディングに役立つSketch Pluginも増えてきました。
本日は、デザイナー視線ではなく、コーダーやプログラマー的な立場からみた、コーディングを10倍早くするSketch Pluginを紹介します。

Make Exportable

はじめに紹介するのは、「Make Exportable」というプラグインです。画像の「Export」を爆速にするプラグインです。

Retina Displayのような高解像度ディスプレイも今や当たり前になり、画像を利用するときにも@1xや@2xなど、1つのレイヤーから複数種類の画像形式のファイルやサイズの書き出しをするのが当たり前になりました。
しかし、Sketchでは、そのような作業を行うときに欠点があります。複数の種類の画像形式のファイルやサイズの指定を一つ一つおこなうにはかなり面倒です。
そのような時に「Make Exportable」プラグインが活躍します。

Sketch 41からファイルやサイズの書き出し設定が新しく登場しました。レイヤーやグループをエクスポートするときのテンプレートを作成でき、そこから書き出し指定を適用できます。

「Make Exportable」プラグインがSketch純正機能とと比べて優れている点は、指定したテンプレートのエクスポートやインポートが簡単にできることです。Sketch 41から画像書き出しをテンプレートにできますが、それでも弱点は解消されたわけではありません。
Sketch純正機能ではいちいちマシンごとに設定を行わなければいけないのが難点です。複数のデザイナーやコーダー・プログラマーでコラボレートするときにも、同じ設定で書き出しを行うことが可能です。

Slicer

Slicer」プラグインは、選択したレイヤーをiOSやAndroid・Webサイト用に一度にエクスポートできます。ただし「Export」設定には記録されません。また、同じ名前のレイヤーが複数あると上書きされてしまいます。

Sketch SVGO Compressor

Sketch SVGO Compressor」を利用するとSVGファイルを自動的にSVGOで圧縮された状態で書き出しすることが可能になります。
SVGOのオプションも使えるようになっており、プラグインメニューから「About SVGO Compressor」を選択し、表示されるウィンドウの「Edit SVGO Settings…」ボタンをクリックすれば、設定のJSONファイルを編集することができます。

Clear Export Options

Clear Export Options」プラグインは、Sketchデータをスリムにするときにレイヤーの削除は簡単ですが、「Export」の指定を一つ一つ削除するのはかなり面倒です。「Clear Export Options」では、選択した要素のExport指定をクリック1つで削除できます。

SizeArtboard

SizeArtboard」は、指定領域を仮想(?)アートボードにするプラグインです。

Sketchでは、複数のレイヤーをグループにしたモジュールがあった場合、透明領域は書き出されません。画像の大きさは違うけど、書き出し領域は同じにしたいいうときに困ります。
「 SizeArtboard」を利用すれば、サイズが違う複数のアイコンに透明領域を追加して、書き出ししたファイルの幅と高さは同じにしたい、などの用途に使うことが可能です。

Export Text

Export Text」プラグインは、ファイルやアートボードごとにSketchファイルにあるテキストをテキストファイルにエクスポートできるプラグインです。テキストをコピー&ペーストするときに役に立ちます。

Copy Color As Hsla

Copy Color As Hsla」プラグインは、HSLA形式で文字色・背景色・枠線色をクリップボードに一発でコピーできるプラグインです。Sketchでは、レイヤーからCSSをコピーすることは可能です。しかし、要素の形などは同じだけど色を取得したいというときに、色だけコピーできないので面倒です。「Copy Color As Hsla」プラグインを利用すれば指定したレイヤーの文字色・背景色・枠線色のみを取得可能です。

まとめ

コーダーやプログラマーから見ると、レイヤーのスタイルの抽出や画像の書き出しが早くできれば、コーディングを10倍早くできると思います。特に、書き出ししなければいけない画像が多いと、いちいち設定をやるのは面倒です。あとはレイヤーからクリップボードにテキストをコピーするプラグインがあればベストですね。

最後に、コーディングや画像書き出し作業は、PhotoshopよりもSketchを利用したほうが10倍くらい早く作業できる気がします。一昨日あったプログラマーさん曰く、「スペックのいいマシンを利用してもPhotoshopは重すぎる」のだそうです。本日利用したようなプラグインなどをうまく利用すれば、その差は大きくなるのではないでしょうか。