2017年8月23日

デザイン

【Sketch】Sketch内でAlfredを使うようなSketch Runner とは?

目次

  1. はじめに
  2. Sketch Runner とは?
  3. Sketch Runner の機能
  4. Sketch Runner のインストール方法
  5. v0.9で追加された機能
  6. まとめ

はじめに

本記事では、コマンドライン感覚でSketchを動かすことができるSketchのプラグイン、Sketch Runnerをご紹介します。
Sketchの数あるプラグインの中でも非常に人気のプラグインで、今年の4月に新しいバージョンがリリースされました。
本記事では、Sketch Runnerのインストール方法から新しいバージョンで追加された機能まで幅広くご紹介します。

Sketch Runner とは?


Sketch Runnerとは、よくSketch版「Alfred」と言われています。
キーボードでコマンドをいくつか打つことで、指定したアートボードに飛んだり、シンボルを追加したりなど様々なことができるようになります。
メニューからいちいちコマンドを探すよりもはるかに効率的に作業が進む、ということが特徴です。

Sketch Runner の機能

Run

Sketch Runnerの run コマンドを使用すると、現在選択しているものを操作することができます。
例えば、色を変更したり、アウトラインを作成したり、小文字を大文字に変換したり、大きさを変えたりすることができます。
メニュー上のすべてのコマンドがSketch Runnerでも操作可能です。
また、SketchにインストールされているプラグインもSketch Runnerで操作可能です。

Jump anywhere

Sketch Runnerの goto コマンドを使用すると、指定したページ、アートボード、グループ、レイヤー、どんなところへもジャンプすることができます。
指定した場所が拡大された状態でジャンプするので、その後の処理も簡単にすることができます。

Insert Symbols

Sketch Runnerの insert コマンドを使用すると、シンボルを挿入したり、すでに挿入されているシンボルと選択したシンボルを入れ替えたりすることができます。
シンボルも数が増えると、項目分けしたりしますが、そのぶん探す手間がかかるので、Sketch Runnerを使って作業効率を上げることができます。

Create Styles & Symbols

Sketch Runnerの create コマンドでは、現在選択している範囲からシンボルやテキストスタイルを作成することができるようになります。

Apply Styles

apply コマンドを使用すると、選択しているレイヤーに対してテキストスタイルなどの共有スタイルをあてることができます。
Sketch Runnerが選択しているレイヤーを判断してくれるので、適用したいテキストスタイル名をタイプするだけでスタイルが当たります。

Sketch Runner のインストール方法

Sketch Runnerはこちらから最新のv.0.9.2をダウンロードすることができます。

こちらのバージョンは最新のSketch46にも対応しているので、バグの心配はありません。

ダウンロードしたファイルをダブルクリックすると、Sketch Runner がインストールされ、使用できる状態になります。

Sketch Runnerを起動するには ⌘ + ' を押します。

それぞれの runjumpinsertなどのコマンドはタブキーで行き来できますし、そのままタイプしてもokです。
検索結果は上下の矢印キーで操作することができます。
コマンドを発動させたいときはエンターキーでokです。

Sketch Runnerが5分ほどのチュートリアルをyoutubeに載せているので、
心配な方はそちらを見ても良いかもしれません。

v0.9で追加された機能

最後に最新のv0.9で追加された機能をご紹介します。

Install

Sketch Runner v0.9では新しいコマンド、 install が追加されました。
install コマンドを使用すると、プラグインの検索、インストール、アップデート、アンインストールがすべて Sketch Runner内部でできるようになります。
プラグイン名、もしくは開発者の Githubユーザー名でプラグインは検索することができます。

プラグインをインストールする: return
プラグインの公式ページを開く: option/alt + return
プラグインをアンインストールする: ⌘ + return

コマンドバーを隠す

runjumpinsertなどのコマンドを隠すことができるようになります。
コマンドバーの表示・非表示はSketch Runnerの設定から変更することができます。

insertコマンドに機能追加

  1. option/alt + returnで選択したレイヤーをシンボルと入れ替える
  2. シンボルが選択された状態で insert コマンドを起動させるとそのシンボルが表示された状態でメニューが出てくるので、同じような名前のシンボルを選択しやすい

まとめ

以上、本記事では、コマンドライン感覚でSketchを動かすことができるSketchのプラグイン、Sketch Runnerをご紹介しました。
人気のプラグインなので、アップデートがきちんとしているので安心して使うことができますし、学習コストが低く、今までメニューから操作していたものをコマンドラインから操作するだけで作業の効率化ができるのでぜひ試して見てください。

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP