Help us understand the problem. What is going on with this article?

Sketchプラグインまとめ(2015年版)

More than 3 years have passed since last update.

Livesense(その2) Advent Calendar8日目の記事です。

sketch3で作ったサイト

はじめに

治療ノートのデザイナーをしております。@htmlmogmogです。
私にとって2015年はとても貴重、かつ怒涛の1年となりました。
まだまだひよっこ社会人ではありながら6月に転職を決意し、この7月から株式会社リブセンスにJoin。
最近では、使用ツールもAdobeからSketchに移行することとなり。Atom、ターミナルを使ってフロントエンド開発にも関わっていたりします。

本記事では

PL(プロジェクトリーダー)を支える技術(CSS篇)でも紹介されているように
現場では時に突然の企画が立ち上がることだってありますし、それに合わせ短期スケジュールにも対応できる体制・環境が必要になったりします。デザイナーが爆速でデザインを上げる。そんなことが求められる瞬間は一度や二度じゃありません。(...世知辛い)
と、まあ、そんな環境に耐えるため、使用ツールをSketchに移行しました。
最近だとこちらのページこちらのサービスなどが弊社ではSketchで作られています。

せっかくなので今回はMac App Storeから撤退したことで話題Sketch3をもっと使いやすくするプラグインについてご紹介します。プラグインを導入することで、Sketchは今より断然使いやすくなります。

プラグイン導入方法

Sketchにプラグインを導入する方法は大きく分けて2つあります。
1.Sketch Toolbox を使う方法
2.ターミナルを使う方法
Sketch Toolboxをダウンロードするのもめんどくさいので、ターミナルを使ってダウンロードしていこうと思います。

プラグイン配置フォルダまで移動する

最初にプラグインを配置する先のフォルダまで移動します。
Sketch3.appをインストールした方法によって、ディレクトリ構造が違います。
(初期状態ではフォルダの中身は空です)

App Storeからインストールした場合

.bash
$ cd ~/Library/Containers/com.bohemiancoding.sketch3/Data/Library/Application\ Support/sketch/Plugins/

Bohemian Codingからインストールした場合

.bash
$ cd ~/Library/Application\ Support/com.bohemiancoding.sketch3/Plugins/

プラグインをgitからダウンロードする

Pluginsフォルダに移動したら、下記のように、git cloneするだけで
プラグインの導入ができます。(アプリの再起動は不要)

.bash
$ git clone https://github.com/turbobabr/duplicator.git

おすすめのプラグイン

プラグインはググれば大量に見つけられます。英語のものがほとんどですが、動画や画像付きなので比較的わかりやすくできています。

Sketch Palettes

複数のデータを作っていると、別ファイルで同じカラーデータを使いたくなりますよね。
そんなときに、カラーデータを保存したり、読み込んだりできるプラグイン。

Sketch Palettes_img

git
$ git clone https://github.com/andrewfiorillo/sketch-palettes.git

duplicator

Command + Control + 矢印キーでオブジェクトの複製が簡単にできるようになる
Illustratorのコピペ移動 & Command + Dのような感じでしょうか。

duplicator_img

git
$ git clone https://github.com/turbobabr/duplicator.git

SketchDistributor

Shift + Control + Dでオブジェクト間のマージンを数値入力で調節できるようになる。
リスト表示ものを等間隔で表示させたい場合におすすめ。

SketchDistributor_img

git
$ git clone https://github.com/PEZ/SketchDistributor.git

sketch-dynamic-button

Command + Jでボタンパーツを作成する。
表示文字を長くしたり短くしたりした後、textレイヤー名にマージン数値(8:15:4:15など)を設定、
textレイヤーを選択後Command + Jを押すことで入力したマージンにあったボタンパーツが作成される。

sketch-dynamic-button_img

git
$ git clone https://github.com/ddwht/sketch-dynamic-button.git

Align Text Baseline for Sketch

textのベースラインを揃えるプラグイン
Sketchのバグなのかline-hightがうまくいかなかったりするので入れてます。

Align Text Baseline for Sketch_img

git
$ git clone https://github.com/soutaro/Align-text-baseline-sketch-plugin.git

Sketch Use FontAwesome

FontAwesomeが手軽に使えるようになるプラグイン

Sketch Use FontAwesome_img

git
$ git clone https://github.com/keremciu/sketch-use-fontawesome.git

CSSketch

CSSコードいじるみたいに編集ができるプラグイン
使い方:http://applech2.com/archives/46631552.html

CSSketch_img

git
$ git clone https://github.com/JohnCoates/CSSketch.git

Sketchプラグイン掲載サイト

Sketch関連おすすめリンク

まとめ

このようにSketchのカスタマイズができれば、爆速でデザインをあげるデザイナーに一歩近づくと思います。
あとは、1日でサイトを作ってみるみたいな日々の筋トレも重要ですよね。
クリスマス近いですが、皆様、残り少ない2015年を有意義にお過ごし下さい。
ではでは。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした