新しくリリースされたSketchプラグインを紹介します(2020.07版)

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

前回の記事から3ヶ月ほど経ったため、あらためプラグインを棚卸しました。前回から2020/6/30までに、Plugin Directoryへマージされたものから、「インストールしたプラグイン」「候補に上がったプラグイン」「今回チェックしたその他のプラグイン」の順でお届けします。

インストールしたプラグイン

今回はなしです。

候補に上がったプラグイン

Sketch MeaXure

https://github.com/qjebbs/sketch-meaxure

Sketch MeasureをForkしてJavaScript API版として再ビルドしたプラグイン。Tintなどの新しい機能にも対応しています(が、あまり使いどころがないかも)。

A Lion

https://github.com/KevinGutowski/A-Lion

整列(Align)や配置(Distribute)の基準となるレイヤーを選択して、整列・配置できるようになるプラグイン。オブジェクトを選択してプラグインを実行すると表示されるウィンドウで基準となるレイヤーを選択します。

このプラグインをインストールしておくと、選択しているレイヤーが2つの場合であれば、Controlキーを押しながらインスペクターの上にある整列・配置のアイコンをクリックすると、基準となるレイヤーが反転します。(右揃えをクリックすると、右側にあるレイヤーが左側にあるレイヤーの右端へ揃います)

今回チェックしたその他のプラグイン

Brandfetch

https://github.com/Brandfetch/Brandfetch-Sketch-Plugin

https://brandfetch.io/ から検索して、アセットをダウンロードできるプラグイン。APIを叩くためにアカウントが必要。

Rename Text Layers by Style

https://github.com/okaybueno/rename-text-layers-by-style

テキストスタイル名に応じて、接頭辞または接尾辞として追記、置換のいずれかでレイヤー名を書き換えてくれるプラグイン。

Fill-Updater

https://github.com/lizhengDesign/Sketch-FillUpdater

アートボードを選択してプラグインを実行すると、選択したアートボードと同名のシェイプやシンボルにパターン塗りを追加して、アートボードのスナップショットを適用します。同時に、シェイプやシンボルからオリジナルのアートボードへ、プロトタイプ用のリンクが繋がれます。

Sketch Foundation

https://github.com/13protons/sketch-foundation

メモやガイド用途のレイヤーなど、特定のキーワードが設定されたレイヤーの表示・非表示を切り替えるプラグイン。キーワードは独自に設定可能です。

DarkModeSystem

https://github.com/BDiogo/DarkMode-System

選択しているレイヤーの色をライトモードのカラーとしてレイヤースタイルを生成し、同時にダークモード用に色を調整しつつレイヤースタイルを生成するプラグイン。ライトモード・ダークモードの切り替えも、プラグインで一括切り替え可能です。

Sympli Handoff

https://sympli.io/handoff

Sympli上でハンドオフをするために、アップロードするプラグイン。ハンドオフでは、レイヤー構成の確認、オブジェクトの大きさや位置・間隔の計測、アセットの書き出し、カラー、フォントの情報を取得できます。

CODING Toolkit Sketch Plugin

https://github.com/Coding/coding-sketch-toolkit

おそらく説明で「アイコンを同期」といった単語が見られるため、ライブラリホスティングサービス向けのプラグイン。Dataにも追加されるが、中国市場向けのため、ほぼ未検証。

Switch Theme(Light/Dark Switch)

https://github.com/chaos-machine/switch-theme

LightモードとDarkモードを切り替えるプラグイン。アートボード内のオブジェクトを走査しながら、オブジェクトが属するライブラリ内にLight / Darkモード用のシンボルやスタイルがあれば切り替えてくれる感じです。単にライブラリ内のシンボルやスタイルの名前にある「Light」と「Dark」を置換しているようですが、、シンボルしか変わってくれなかった…あと、Runnerでインストールする場合は「Light/Dark Switch」で検索してください。

Above the Fold by Visualeyes

https://www.visualeyes.design/tools/above-the-fold/

いわゆる「ファーストビュー」がどこまでの範囲かを明示してくれるプラグイン。プラグイン提供元のサービスが持っているユーザーデータを元に、アートボードのサイズからOSやブラウザのツールバーなどを除いた、実際のビューポートに近い領域を算出して表示してくれるようです。

Isometry

https://github.com/maxkonovalov/Isometry

名前の通り、アイソメトリックなオブジェクトを生成できるプラグイン。シンボルにも適用自体はできますが、さすがに正しく変形はできないようです。

Copy-Updater

https://github.com/lizhengDesign/Sketch-CopyUpdater

SketchファイルとJSONファイルをリンクして、テキストレイヤーやテキストオーバーライドに含まれる特定にキーワードをJSONの値で置換して同期してくれるプラグイン。JSONからSketch・SketchからJSONと相互に同期可能で、Sketchでテキストを編集するのが面倒という場合は良いかもしれません。

Sync with Library

https://github.com/oodesign/sync-with-library

ライブラリと同じ名前のローカルシンボルやレイヤースタイル・テキストスタイルを探して、ライブラリかローカルかのどちらで置換できるプラグイン。Gumroadでライセンスキーの取得が必要で、金額は任意の値で値段を入力できます。Merge Duplicatesのサブセットアプリのようです(こっちは€25)。

Export Flat SVGs

https://github.com/KevinGutowski/ExportFlatSVGs

テキストレイヤーをアウトライン化し、SVGとして書き出ししてくれるプラグイン。選択したレイヤーを書き出せるような説明ですが、Make Exportableの設定がないと書き出しできませんでした。(ちなみにPNGで設定されていてもプラグインは動作します)

Color Copy Paste

https://colorcopypaste.app/

スマートフォンなどのカメラと連動し、写っている画像内から色をピックアップするプラグイン。

Genus

https://github.com/keplerlab/genus

プロトタイプ用にHTML(とCSS)を書き出ししてくれるプラグイン。divspanでマークアップされ、レイアウトはposition: absoluteで配置される感じでした。

Detach out of sync text styles

https://github.com/tijmenvangurp/detach-out-of-sync-text-styles

ライブラリのテキストスタイルを適用しかつそのスタイルを変更しているレイヤーをライブラリから分離してくれるプラグイン。プラグイン実行後、分離したいライブラリを選択すると、条件が揃っているテキストスタイルすべてを一発で分離できます。

slint

https://github.com/nusability/slint

デフォルト名のレイヤーや同期されていないスタイル・空のグループなど、Sketchファイルをさまざまな条件でチェックしてくれる、いわゆるLinterプラグイン。

同じような機能がSketch 68でAssistantsとして実装される予定です(執筆時点)。

Library inventory

https://github.com/tijmenvangurp/library-inventory

ファイル内で使われているライブラリシンボルの一覧を、CSVで書き出しできるプラグイン。

Colors to Code

https://github.com/Sugarcode-Team/colors-to-code-sketch-plugin-live

選択しているレイヤーの塗りから、CSSやSCSS・Reactなどのフォーマットのカラーコードを生成してくれるプラグイン。レイヤー名が変数名になります。

有料ウェブサービスicanicon.ioのプラグインですが、テストで使ってみたところ、#が多いとかSCSS記法なのに;がないとか、ちょっといただけない感じでした。

Icons to Code

https://github.com/Sugarcode-Team/icons-to-code-sketch-plugin-live

選択したオブジェクトを、SVGをはじめReactやVue・EPSなど、さまざまな形式で書き出してくれるプラグイン。「Colors to Code」と同じく、有料ウェブサービスicanicon.ioのプラグインです。

Xscape

Xscape! A plugin for ?Sketch

小技系のプラグイン集。Sketchファイルをコピーしてバックアップを作成したり、Change logとしてドキュメントのメタ情報にコメントを追加したり、サイズやポジションのコピペができたりと、Automate Sketchとは少し違った内容です。

Perfect Type

https://github.com/rtrikha/perfect-type-plugin

プラグイン内に設定された値に合わせて、Line heightとText spacingを設定してくれるプラグイン。一応3種類のプリセットが準備されているのですが、プラグイン内のJavaScriptファイルを直接書き換えてねって感じなので、実質1種類です。

アンインストールしたプラグイン

Symbol Browser

RunnerにComponents Browserが実装(執筆時点でベータ版かつ有料機能)されたため、あえなくお役目御免に。

現在のインストール済みのプラグイン

たまにしか使わないものも含めて次の通りです。

では楽しいSketchライフを。