アートボードをHTMLとして書き出し、ブラウザ上でスペックを確認できるMarkechプラグイン - Sketch Plugin Advent Calendar 2016

Sketchプラグインを適当に選んで紹介していく、Sketch Plugin Advent Calendar 2016 16日目は、アートボードをHTMLとして書き出し、ブラウザ上でスペックを確認できる「Markechプラグイン」です。

プラグインを実行して表示されるウィンドウで設定を行い[Confirm]ボタンをクリックすると、必要なリソースをZIPファイルに内包して保存されます。プラグインのショートカットはCommand + Shift + Mです。

プルダウンは書き出す対象のアートボードを選択します。選択肢は次の通りです。

  • All Artboard: すべてのアートボード
  • Selected Artboard(s): 選択しているアートボード
  • Artboards On Current Page: 現在のページにあるアートボード

オプションの「Slece all Artboards as 2x」をチェックした場合は、アートボードを@2xとして扱います。

Export all layers as image」をチェックした場合は、Exportableな設定をされていないレイヤーも画像として書き出します。

Save Sketch file」にチェックを入れると、ZIP内にSketchファイルを内包します。ただし、ドキュメントを新規で作成している場合は、保存をしておく必要があります。

ZIPファイルに含まれるHTMLをブラウザで開き、オブジェクトをマウスオーバーしたりクリックしたりするとスペックを確認することができます。また「Export all layers as image」のオプションを有効にしておけば、Sketchを使わずに書き出しもできます(画像含めて書き出ししているので当然なんですが)。

右上のUnitで単位を変えることができ、スペックもそれに応じた数値で表示されます。

Sketchを使わずファイルの中身を確認しようと思うと、ZeplinやAvocodeなどのウェブサービスもありますが、アカウントの登録というハードルがあります。MarketchではHTMLとして書き出すため、ブラウザさえ使うことができれば、内容を確認することができます。

もちろん、Sketchがマルチプラットフォーム対応してくれるのがベストですが……


それでは、楽しいSketchライフを。

tags