Livesense(その2) Advent Calendar8日目の記事です。
はじめに
治療ノートのデザイナーをしております。@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からインストールした場合
$ cd ~/Library/Containers/com.bohemiancoding.sketch3/Data/Library/Application\ Support/sketch/Plugins/
Bohemian Codingからインストールした場合
$ cd ~/Library/Application\ Support/com.bohemiancoding.sketch3/Plugins/
プラグインをgitからダウンロードする
Pluginsフォルダに移動したら、下記のように、git cloneするだけで
プラグインの導入ができます。（アプリの再起動は不要）
$ git clone https://github.com/turbobabr/duplicator.git
おすすめのプラグイン
プラグインはググれば大量に見つけられます。英語のものがほとんどですが、動画や画像付きなので比較的わかりやすくできています。
Sketch Palettes
複数のデータを作っていると、別ファイルで同じカラーデータを使いたくなりますよね。
そんなときに、カラーデータを保存したり、読み込んだりできるプラグイン。
$ git clone https://github.com/andrewfiorillo/sketch-palettes.git
duplicator
Command + Control + 矢印キーでオブジェクトの複製が簡単にできるようになる
Illustratorのコピペ移動 & Command + Dのような感じでしょうか。
$ git clone https://github.com/turbobabr/duplicator.git
SketchDistributor
Shift + Control + Dでオブジェクト間のマージンを数値入力で調節できるようになる。
リスト表示ものを等間隔で表示させたい場合におすすめ。
$ git clone https://github.com/PEZ/SketchDistributor.git
sketch-dynamic-button
Command + Jでボタンパーツを作成する。
表示文字を長くしたり短くしたりした後、textレイヤー名にマージン数値（8:15:4:15など）を設定、
textレイヤーを選択後Command + Jを押すことで入力したマージンにあったボタンパーツが作成される。
$ git clone https://github.com/ddwht/sketch-dynamic-button.git
Align Text Baseline for Sketch
textのベースラインを揃えるプラグイン
Sketchのバグなのかline-hightがうまくいかなかったりするので入れてます。
$ git clone https://github.com/soutaro/Align-text-baseline-sketch-plugin.git
Sketch Use FontAwesome
FontAwesomeが手軽に使えるようになるプラグイン
$ git clone https://github.com/keremciu/sketch-use-fontawesome.git
CSSketch
CSSコードいじるみたいに編集ができるプラグイン
使い方：http://applech2.com/archives/46631552.html
$ git clone https://github.com/JohnCoates/CSSketch.git
Sketchプラグイン掲載サイト
Sketch関連おすすめリンク
- Sketch Shortcuts
- Sketch 3のメニューと環境設定を日本語へ意訳をしましたよ。
- PhotoshopとIllustratorとSketchを上手に使っていこう|バニデザノート
- デザイナーとエンジニア間のコミュニケーションコストを下げる試み
まとめ
このようにSketchのカスタマイズができれば、爆速でデザインをあげるデザイナーに一歩近づくと思います。
あとは、1日でサイトを作ってみるみたいな日々の筋トレも重要ですよね。
クリスマス近いですが、皆様、残り少ない2015年を有意義にお過ごし下さい。
ではでは。