Advertisement

ultimate-sketch-plugin-2017-1

 

デザインアプリ Sketch が、デザインの現場で人気となっています。公式の利用ユーザー数は発表されていませんが、多くのデザインチームがSketchを使っており、名前を聞いたことがある人も多いのではないでしょうか。

 

Sketch が他のデザインアプリと決定的に異なる点のひとつとして、活発に活動する開発者コミュニティと、これまでに作成された素晴らしいプラグインがあります。これらのSketchプラグインを使用すれば、豪華な3Dイラストやユニークなアニメーションなどを手軽に作成することができます。

 

今回は、ウェブデザイナーの制作時間を短縮できる「時短」Sketchプラグイン50個をまとめてご紹介します。カテゴリ別に分類されているので、自分にぴったりのプラグインを探してみてはいかがでしょう。

 

23-essential-free-sketch-plugin-top
アプリのUIデザイン作成ツールとして有名な Sketch 。今週、バージョン44が発表されたタイミングで、Sketch をより使いやすくするオープンソースの優れた無
tools2x
ウェブサイトやモバイルアプリ向けのUIデザイン作成に、Photoshop や Illustrator を利用している人も少なくないでしょう。ただし機能が多すぎ、もっ

 

 

コンテンツ目次

 

Sketch プラグイン管理ツール

 

まずはSketchプラグインを効果的に管理できる、以下プラグインのインストールからはじめましょう。

 

Sketch Packs

https://sketchpacks.com/

best-sketch-plugin-1-sketch-pack

 

インストールしている Sketch プラグインを検索、管理、自動アップデートしてくれるプラグイン。プラグインのバージョンアップによる不具合なども修正することができます。

目次へ戻る

 

 

Sketch Runner

http://sketchrunner.com/

best-sketch-plugin-2-sketch-runner

 

Sketchをキーボードのコマンドで利用できるプラグインで、同時にインストールした他のプラグインの管理も行うことができます。

目次へ戻る

 

 

Sketch Plugin Manager

https://mludowise.github.io/Sketch-Plugin-Manager/

best-sketch-plugin-3-sketch-plugin-manager

 

プラグインを検証したり、管理したりできる便利なSketchプラグイン。Gitをつかってすべてのプラグインを最新版に保つことができます。

目次へ戻る

 

 

Sketch Toolbox

http://sketchtoolbox.com/

best-sketch-plugin-4

 

こちらもSketchプラグインのインストールや管理、アップデートを行うことができるツール。

目次へ戻る

 

 

 

コラボレーション用 Sketch プラグイン

 

プラグイン管理ツールをインストールしたら、ファイルの管理や他デザイナーとのコラボレーション、フィードバック機能などをSketchに追加してみましょう。

 

Zero Height

https://zeroheight.com/

best-sketch-plugin-5

 

アセット用ライブラリやスタイルガイドを作成したり、他のデザイナーとのコラボレーションを行ったり、すべてのファイルをクラウド上で同期することができます。

目次へ戻る

 

 

Chain

https://lalomrtnz.github.io/Chain/

 

大量のファイル配色をまとめて変更したいときに便利なプラグイン。色を選択すれば、一度にダイナミックな切り替えが可能です。

目次へ戻る

 

 

Kaktus

https://kactus.io/

best-sketch-plugin-7

 

デザインのバージョンコントールを可能にするSketch拡張機能。チーム全体でファイルを管理したり、同期することが可能。

目次へ戻る

 

 

Abstract

https://www.goabstract.com/

 

デザイナー向けのGitプラグインで、プロジェクト全体の管理や他のデザイナーとのコラボレーションを実現できます。Sketchファイルのバージョンコントロールもでき、Slackへの導入もできるので、Sketchを使っていないクライアントのフィードバックも可能。

目次へ戻る

 

 

Craft by InVision

https://www.invisionapp.com/craft

 

Sketchプラグインの中でも特に人気の高いアイテムのひとつで、プロトタイプ作成に便利なコンテンツを自動生成してくれます。実際にウェブサイトで使われている「リアル」なコンテンツが特長の高機能プラグイン。

目次へ戻る

 

 

 

コンテンツ&オブジェクト自動生成プラグイン

Sketch Material

https://websiddu.github.io/sketch-material/

 

Googleのマテリアルデザインのどんなコンポーネントもボタン一発で生成してくれるSketchプラグイン。

目次へ戻る

 

 

Bootstrap Grid

https://github.com/De-La-Vega/BootstrapGrid

 

Sketchファイル上に Bootstrap のグリッドを作成できるプラグイン。選択範囲を指定すれば、残りはプラグインが自動で行います。

目次へ戻る

 

 

7 Column Calendar

https://lstore.graphics/plugins/calendar/

best-sketch-plugin-12

 

簡単に7つのグリッドに分割されたカレンダーを作成できるプラグイン。

目次へ戻る

 

 

User Flows

https://abynim.github.io/UserFlows/

best-sketch-plugin-13

 

Sketchをつかってユーザーフロー用ダイアグラムを自由に作成できるプラグイン。

目次へ戻る

 

 

Looper

http://sureskumar.com/looper/

 

シェイプやグループを複製し、美しい幾何学模様イラストなどを作成できるプラグイン。シンプルに広告バナーやポスター、パターン作成などにも活用できます。

目次へ戻る

 

 

Confetti

http://www.sketchconfetti.com/

 

レイヤーごとに整理された紙ふぶきをボタンひとつで作成できるSketchプラグイン。

目次へ戻る

 

 

Icon Flower

https://github.com/avadhbsd/IconFlower

 

お好みのアイコンを使って、継ぎ目のないシームレスパターンテクスチャ素材を作成できるプラグイン。

目次へ戻る

 

 

Skatter

https://github.com/joshdjuric/Skatter

 

ランダムのシームレスパターンを作成できるプラグインで、シンプルなシェイプを幾つか追加するだけで、あとはプラグインが美しいパターンに仕上げてくれます。

目次へ戻る

 

 

Blender

https://github.com/bunnieabc/Blender

 

2つのシェイプを重ね、美しいグラデーションカラーを作成できる新しいSketchプラグイン。

目次へ戻る

 

 

Map Generator

https://github.com/eddiesigner/sketch-map-generator

 

地図のスクリーンショットを撮影するのに手間取っている人にオススメしたいプラグイン。長方形の選択範囲を指定し、ロケーションを入力し、Snazzy Maps よりスタイルをコピーしたら、プラグインがあとは自動で行います。

目次へ戻る

 

 

Sketchy Pies

https://github.com/longzheng/sketch-randomSize

best-sketch-plugin-20

 

あまり円グラフなどの作成に適していない Sketch ですが、このプラグインを利用すれば誰でも簡単にグラフを作成できます。

目次へ戻る

 

 

Random Sizing

https://github.com/longzheng/sketch-randomSize

best-sketch-plugin-21

 

こちらは棒グラフの作成に適した拡張プラグインで、高さの異なるグラフをランダムで作成できます。

目次へ戻る

 

 

 

エクスポート | フロントエンド開発プラグイン

 

ここで紹介するプラグインを使用すれば、HTML/CSSフィアル、ウェブサイト全体、コード不要で作成できるニュースレターなどを作成できます。また一部のプラグインでは、Sketchを利用していないチームメンバー用のファイル作成なども可能です。

 

Launchpad

https://launchpad.animaapp.com/

 

コードの知識がなくても Sketch から直接ウェブサイトを公開できるプラグイン。

目次へ戻る

 

 

Slinky

https://launchpad.animaapp.com/

v23

 

Eメール用テンプレートの作成を頼まれたときに便利なプラグインで、HTMlで作成されたレスポンシブ対応のテンプレートを手軽に作成できます。

目次へ戻る

 

 

Sync to Slides

https://websiddu.github.io/sync-to-slides/

best-sketch-plugin-best-sketch-plugin-24

 

オンライン・プレゼンテーション資料を作成したいときに便利なプラウ銀で、Sketchのアートボード機能とGoogleスライドを同期させます。

目次へ戻る

 

 

Measure

http://utom.design/measure/

best-sketch-plugin-best-sketch-plugin-25

 

開発チームにデザインを渡すときに便利なプラグインで、各コンポーネントの寸法を図り、全体のデザインを含んだHTMLファイルを作成します。

目次へ戻る

 

 

Marketch

https://github.com/tudou527/marketch

best-sketch-plugin-26

 

開発チームと共同作業を行うときに便利なプラグイン。デザインをベースにHTMLファイルを作成し、各種レイヤーのCSSスタイルをコピーすることも可能。

目次へ戻る

 

 

 

レイヤー管理プラグイン

 

巨大なデザインファイルを管理するときに役立つプラグインをまとめています。ファイルを整理したり、名前変更、レイヤー削除、レイヤーから検索など便利な機能が揃います。

 

RenameIt

https://github.com/rodi01/RenameIt

best-sketch-plugin-27

 

複数のレイヤーを選択すれば、ショートカットを使って一度名前の変更が可能なプラグイン。

目次へ戻る

 

 

Cleanup Useless Groups

https://github.com/bomberstudios/Cleanup-Useless-Groups

best-sketch-plugin-best-sketch-plugin-28

 

デザイン制作を素早く行っていると、使っていない空のグループが残っていたりします。このプラグインは、使用していないグループをすべて削除してくれます。

目次へ戻る

 

 

Select Familiar Layers

https://github.com/wonderbit/sketch-select-similar-layers

best-sketch-plugin-29

 

選択したレイヤーの色やボーダー、フォントサイズ、ブレンドモードなどをまとめて変更できます。

目次へ戻る

 

 

Sketch Artbard Manager

https://github.com/bomberstudios/artboard-manager

 

作成したアートボードを縦横カラムに合わせて再配置してくれるプラグイン。

目次へ戻る

 

 

Sketch Search Everywhere

https://github.com/MrPeak/sketch-search-everywhere

 

名前を入力するだけで、レイヤーを検索することができる便利プラグイン。

目次へ戻る

 

 

Sort Me

https://github.com/romashamin/sort-me-sketch

 

この小さなプラグインは、レイヤーやアートボードをキーボードショートカットのみでソート、並び替えできます。

目次へ戻る

 

 

Toggle Layers

https://github.com/joshwayne/jw-sketch-plugins

 

レイヤーのトグルを絵文字を使って分かりやすく表示できるプラグイン。

目次へ戻る

 

 

 

お役立ちプラグイン

 

Sketchの基本機能を拡張してくれるプラグインが中心で、よりSketchを使いやすくしてくれる拡張機能が揃います。

 

Magic Mirror 3

http://magicsketch.io/mirror/

 

Sketchで作成したどんなファイルも破壊することなく、立体的な見た目で表現できるプラグイン。

目次へ戻る

 

 

Stark

http://www.getstark.co/

best-sketch-plugin-best-sketch-plugin-34

 

プロジェクトのアクセスを考えているなら、このプラグインは確実にインストールしておきたいところ。色盲チェックとコントラストチェックを行うことができます。

目次へ戻る

 

 

Handy Tools

https://github.com/webpatch/Handy-Tools

 

レイヤーの整列や等間隔での配置、レイヤー用トグルの可視化などを可能にする小さくても重宝する Sketch プラグイン。

目次へ戻る

 

 

Nudge Corner Radius

https://github.com/DWilliames/nudge-corner-radius-sketch-plugin

 

キーボード操作のみでシェイプの角の丸みを調整できるプラグイン。

目次へ戻る

 

 

Import Symbols

https://github.com/kmerc/sketch-import-symbols

best-sketch-plugin-best-sketch-plugin-37

 

複数の Sketch ファイルで同時に作業をしているときに便利なプラグインで、すべてのシンボルをひとつのSketchファイルから他のファイルにインポートします。

目次へ戻る

 

 

Move Half Pixel

https://github.com/canisminor1990/sketch-move-half-pixel

 
オブジェクトを0.5ピクセル動かしたい、そんなときに簡単に実現できるSketchプラグイン。

目次へ戻る

 

 

Text Plugins

https://github.com/joshwayne/jw-sketch-plugins

 

複数のテキストレイヤーをひとつにまとめたり、異なるレイヤーに分割できるプラグイン。

目次へ戻る

 

 

Appalette

https://github.com/Carlosarturo28/Appalette

 

DropboxやFacebook、Airbnbなど人気アプリから配色カラーパレットをダウンロードできるプラグイン。

目次へ戻る

 

 

Spellcheck All Layers

https://github.com/Tallwave/sketch-spellcheck-all-layers

best-sketch-plugin-40

 

ファイル全体から見つけている文字テキストを検索できる、地味に便利なプラグイン。

目次へ戻る

 

 

Auto Layout

https://animaapp.github.io/

 

レスポンシブデザインをより手軽に、直感的に作成できる Sketch 拡張プラグイン。

目次へ戻る

 

 

Fluid

https://github.com/matt-curtis/Fluid-for-Sketch

best-sketch-plugin-42

 

プロジェクトの制限に応じてレスポンシブ対応のアートボードを作成できるプラグイン。

目次へ戻る

 

 

Compo

https://github.com/romashamin/compo-sketch

best-sketch-plugin-43

 

よりダイナミックなコンポーネント作成を可能にする Sketch プラグイン。

目次へ戻る

 

 

FlipSize

https://github.com/apertureless/sketch-flip-size

 

オブジェクトの縦横サイズを反対に変更してくれるプラグイン。

目次へ戻る

 

 

Pixel Perfecter

https://github.com/swiadek/pixel-perfecter-sketch-plugin

 

寸法のおかしいレイヤーを作成してしまうのを防いでくれるプラグイン。

目次へ戻る

 

 

Icon Stamper

https://github.com/tylergaw/icon-stamper

best-sketch-plugin-46

 

異なるサイズのアイコンをまとめて複数作成できるプラグイン。

目次へ戻る

 

 

Social Artboards

https://github.com/herrhelms/social-artboards-sketch

best-sketch-plugin-47

 

さまざまなソーシャルメディア用イメージ画像を作成するとき、異なるサイズのアートボードを自動作成してくれるプラグイン。

目次へ戻る

 

 

Find and Replace

https://github.com/thierryc/Sketch-Find-And-Replace

best-sketch-plugin-best-sketch-plugin-48

 

ファイルの中で利用されている文字を検索し、置き換えることができる Sketch プラグイン。

目次へ戻る

 

海外サイト Toptal で公開された The Ultimate List of 50 of the Best Sketch Plugins – by Wojciech Dorby | Toptal より許可をもらい、翻訳転載しています。

 

参照元リンク : The Ultimate List of 50 of the Best Sketch Plugins – Toptal