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

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

前回の記事から3ヶ月ほど経ったため、あらためプラグインを棚卸しました(半年だとチェックする数が多いので少し短くした)。前回から2020/3/31までに、Plugin Directoryへマージされたものから、「インストールしたプラグイン」「候補に上がったプラグイン」「今回チェックしたその他のプラグイン」の順でお届けします。

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

Arrange Artboards Hierarchically

https://github.com/oodesign/arrange-artboards-hierarchically

スラッシュベースの名前に応じてアートボードを並び替えてくれるプラグイン。AA/AA/BA/A/Aとあれば、A先頭に階層的に並び替えてくれます。

アートボードを自動で整頓してくれるArtboard Managerを使ってますが、こちらは完全なグリッドとして整列してしまい、階層的な並びにはできないって悩みがあったので、期待を込めてインストール。これで自動的に並び替えてくれたらいいのですが……

ちなみに併用すると大変なことになりました。

Light Switch Sketch Plugin

https://github.com/TheBerriman/lightswitch-sketch

シンボル・レイヤースタイル・テキストスタイルをキーワードに応じてLightモードとDarkモードで切り替えるプラグイン。

Swap Itと迷いましたが、レイヤースタイル・テキストスタイルにも対応しているので、こちらに。

候補に上がったプラグイン(使いそうだけど、多分使わなくなりそうなやつ)

Helpify

https://github.com/Luckyfoxdesign/helpify

ランダムな数字を生成するプラグイン。最小・最大・丸め・単位を設定可能。

Sketch Inter Letter Spacing

https://github.com/giliamverheide/sketch-inter-letter-spacing

Inter Dynamic MetricsによるLetter Spacingをいい感じに調整してくれるプラグイン。

Inter Dynamic Metrics

Copycat

https://github.com/azhsetiawan/sketch-copycat

アートボードのスナップショットをPattern Fillとして適用し、レイヤースタイルを作成・更新するプラグイン。「アートボードをシンボル化したい」みたいな用途で使えそう。

CSS box-shadow to Layer Style

https://github.com/oliverpitsch/CSS-Shadow-to-Sketch-Style-Plugin

CSSのbox-shadowプロパティを、SketchのDropshadowに変換してくれるプラグイン。

Playful Design Tools

https://wavetogether.github.io/wave_design/sketch-plugins/

選択したアートボードを.ttfファイルとして書き出すプラグイン。

TogglePixelFitting

+ https://github.com/KevinGutowski/PixelFit

パスの編集中にしか表示されない、ピクセルスナップの設定変更にショートカットを設定するためのプラグイン。

Swap It

+ https://github.com/shantsis/swap-it-sketch

LightとDarkなど、特定のシンボルグループに応じてシンボルを入れ替えてくれるプラグイン。Light / Dark以外が指定できるものの、入れ替えはシンボルのみのため、今後に期待。

Snap to 8pt Grid

https://github.com/mheesakkers/sketch-plugin-snap-to-8pt-grid

幅や高さ・座標などをグリッドにスナップさせるプラグイン。スナップ幅は2・4・8・10・12・16から設定可能。

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

sketch-color-manager

https://github.com/hecflores/sketch-color-manager

ドキュメント中の色を表形式で一覧できるプラグイン。カラーコードなどは表示されないので、あくまでどのような色を使っているかを確認できるのみ。

sketch-twilio-ipsum

https://github.com/twilio-labs/sketch-twilio-ipsum

Twillio製のダミーテキスト生成できるDataプラグイン。25%の確率で英語以外のダミーテキストが生成される。レイヤー名に接尾辞をつければ特定の言語も強制可能。

XD2Sketch [未検証]

https://xd2sketch.com/

XDファイルをSketchファイルにコンバートするプラグイン(有料)。有事の際に覚えておきたい。

Paste to Fill

https://github.com/tgfjt/sketch-paste-to-fill#readme

コピーした画像をPattern Fillとしてペーストするプラグイン。

Sketch Export Preferences

https://github.com/KevinGutowski/Sketch-Export-Preferences

書き出し設定をJSONで読み書きできるプラグイン。他者に設定を共有するときなどに利用できる。

SR Measure

https://github.com/endswithak/sketch-measure-react

デザインスペックをブラウザで確認できるようにエクスポートするプラグイン。

Sketch Dark Side Plugin

https://github.com/receptiryaki/darkside

Lightモード用とDarkモード用のレイヤースタイルを事前に作成しておくことで、切り替えができるプラグイン。

axure [未検証]

https://www.axure.com/

プロトタイピングツールaxureへエクスポートするプラグイン。

Name My Color

https://github.com/carlosflrg/name-my-color

カラーコードに応じた色の名前をつけてくれるプラグイン。名前の元になったのはこちらのサイト: http://chir.ag/projects/name-that-color/

efficient-images-export

https://github.com/BinLia/efficient-image-export

画像を最適化して書き出すためのプラグイン。TinyPNGなどで圧縮できる。

Sketch Times

https://github.com/xaddict/sketch-times

時間のダミーデータを生成するDataプラグイン。最大値(分)を入力してその範囲でランダム生成する。

Potrace Plugin for Sketch

https://github.com/perrysmotors/sketch-potrace

ビットマップをモノクロのベクターへ変換してくれるプラグイン。イラストとかの簡易トレースに。

Attention Insight Sketch plugin [未検証]

https://github.com/attentioninsight/attention-insight-sketch-plugin

デザインをAIで分析しヒートマップを生成するプラグイン。元のサービスのアカウントが必要。

bankingdata

https://github.com/nktx/banking-data-supplier

中国の銀行口座などのダミーデータを生成するDataプラグイン。

UI-House

https://www.ui.house/sketch-plugin

UI HouseにあるSketchリソースをインポートするためのプラグイン。サイトのプレビューにある「Import to Sketch」から直接インポートできるようになります。

https://www.ui.house/sketch-resources

Search Sketch

https://github.com/candy02058912/search-sketch

文字列を検索してフォーカスするプラグイン。マルチバイト対応版。[動作してない?]

ICONICON

https://github.com/Sugarcode-Team/icanicon-sketch-plugin

iconicon.ioへの書き出しや更新ができるプラグイン。[未検証]

Merge duplicate symbols

https://github.com/oodesign/merge-duplicate-symbols

重複しているシンボルをマージするプラグイン。[未検証]

DatesFromNow

https://github.com/LeipeLeon/Sketch_DatesFormNow

現在の日付をテキストレイヤーへ生成するDataプラグイン(ただしオランダ語)。

Copy Optimized SVG Code

https://github.com/chenxsan/copy-optimized-svg-code

選択しているオブジェクトのSVGコードを最適化し、クリップボードへコピーしてくれるプラグイン。

Sketch Map

https://github.com/she1991/Sketch-Map

プロトタイピングをHTMLとして書き出してくれるプラグイン。ただし全体の繋がりを確認できるだけで、プレビューモードでインタラクティブに確認できるわけではないので注意。

Trim Artboard

https://github.com/franklymrshankly/Trim-Artboard

指定した余白分をプラスして「Resize to fit content」してくれるプラグイン。

Dark Mode Plugin

https://sketch-dark-mode.eduardogomez.io/

あらかじめLightモードとDarkモードのカラーを設定しておき、それを入れ替えるプラグイン。

sketchdesignops [未検証]

https://github.com/genexuslabs/sketchdesignops

Design Opsを内部的に簡素化するプラグイン。試そうと思ったのですが、説明にSambaでサーバーへ接続せよとあったため、ちょっと怖くて未検証です。

おそらくこれ関連のプラグイン? https://www.genexus.com/

Greyscale

https://github.com/KevinGutowski/ToggleGreyscale

アードボードの内容をグレースケールに切り替えて表示してくれるプラグイン。

Find Dirty Styles

https://github.com/KevinGutowski/FindDirtyStyles

テキストスタイルと同期していないレイヤーを見つけるためのプラグイン。

Tiled for Sketch plugin

https://github.com/TiledCo/tiled-sketch-plugin

Tiledへエクスポートするためのプラグイン。

Sketch WebGL

https://github.com/endswithak/sketch-webgl

SketchのデザインをHTML CanvasのWebGLでレンダリングするプラグイン。

sketch-ignore [未検証]

https://github.com/theboi/sketch-ignore

.gitignoreのようにSketch Cloudへアップしないアートボードやレイヤーを指定するプラグイン。

ChemFill

https://github.com/ahadik/chemfill

ChEMBL APIから分子構造を取得して画像(PNG)をPattern Fillとして適用するDataプラグイン。

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

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

では楽しいSketchライフを。