僕はPhotoshopやIllustratorなどのアドビ税を払いたくなかったし、僕がやりたいことはある程度できるSketch3をだいぶ前に買いました。
全然安いし、動きも軽いし、プラグインも充実しています。
たくさんあるプラグインの中で僕みたいな初心者でも今すぐ使える便利なプラグインをまとめました。
プレゼンやフロントエンドを作成するのにピッタリです。
では参ります。
Sketchのおすすめ時短プラグイン５選
目次
Autolayout
これはiphone SE / iPhone7 / iPad などの違う画面サイズのものを簡単に作れるプラグインです。
まずここからダウンロード>>Autolayout
ダウンロードしてインストールするとSketchの画面の右下にこんな感じで新たにツールバーがでてきます。
クリックで要素を選んであとはPinのところの点をクリックします。
赤い矢印のとこをクリックすると違うデバイスのサイズにしてくれます。
今回は簡単なサインアップ画面を例に挙げてみてみます。
するとアートボードのサイズを変えてもクリックした点のところに要素がくっついてきます。
なので全部設定してやってみるとこんな感じで違うサイズのアートボードがあっという間に作れちゃいます。
素晴らしいの一言です笑
レスポンシブのデザインを作っている時などに役立ちます。
Clipboard Fill
ここからダウンロードしてインストールします>>Clipboard Fill
簡単に言えば画像検索などでコピーした画像を選択した要素の中に入れ込めるって感じです。
犬の無料画像を入れてみます。
こうやってコピーします。
Sketchの画面に行ってPluginからClipboard Fillをクリックします。
(レクタングルを用意しました。)
するとこんな感じ
簡単ですね。
どんな形でも行けるようです。
円のオブジェクトにも入れてみました。
超簡単ですね。
Rename It
ベタですがやはり便利です。
ダウンロードはこちら>>Rename It
使い方はcommandクリックなどで名前を変更したいレイヤーを選んで
Plugin / Rename It / Rename Selected Layersに行きます。
あとはNameのところに変更したい名前を入力しOKをクリックすると選んだレイヤーの名前が変わります。
名前の後に以下を入力することで色々設定ができます。
| %N | 下から順番に番号を振ってくれます |
| %n | 上から順番に番号を振ってくれます |
| %W | 幅を設定できます |
| %H | 高さを設定できます |
他にも設定できますが僕は上記の機能で十分ですので気になる方はググってください。
Prism
これはドキュメントカラーズのパレットを作ってくれるプラグインです。
ここからダウンロード・インストール>>Prism
Plugin / Prism / Generate Color Paletteをクリック
こういうドキュメントカラーズだったら
こんな感じになります。
よく使う色をDocument Colorsに追加してると思いますがこれで簡単にHexコードやrgbaも表示してくれます。
Craft
これはめちゃくちゃ使えます!!
モックなどを作る時、テキストや画像を一つ一つ入れ込むのがめんどくさい時に使えます。
絶対入れときましょう!!
ここからダウンロードできます>>Craft
インストールが完了すると勝手に”Data、Duplicate、Library、Sync(Beta)”がオンになっています。
そして新たなツールバーが登場します。
上の”Craft”からツールバーを表示するかしないか設定可能です。
Craftの使い方を軽く紹介
画像やテキストの入れ込み
例えば下のスクショみたいな感じで四角いレイヤーにテキストでタイトルと打ちました。
これに背景画像とタイトルにあったテキストを入れてみます。(ツールバーと被っていますがグレーの四角いやつです)
背景を入れたいグレーのレクタングルを選択してツールバーの矢印の部分をクリックしてCUSTOMからPhotosを選択して今回は皆さんご存知”Unsplash”を選びます。
するといくつかカテゴリーが出てきます。
“Cafe”を選択してみました。Place Photosをクリック
すると、、、
Titleの背景がカフェの画像になりました。
Unsplashという高品質画像の無料素材サイトから選んだカテゴリーの画像を持ってきてくれます。
気に入らなかったら何度でも繰り返しできます。
Titleのテキストでも同じようなことができます。
まずは”Title”部分をクリックしCUSTOMからTypeを選択し、今回はタイトルなのでHeadlinesを選びます。
カテゴリーは”Travel”を選んでみます。
するとランダムにカテゴリーに応じたテキストを入れ込んでくれます。
こんな感じ
文字数が長過ぎたらもう一度やるか、いくつか単語を削除しましょう。
めちゃ簡単ですね。
他にも名前を考えるのがだるい時にこんな感じで複数のテキストを選択し、
TypeのNameからMale / Female / Bothいずれかを選びます。
するとランダムに人の名前を入れ込んでくれます。
相当楽です。
他にも”日付”や”メールアドレス”、”記事”などもあります。
超面倒くさがりですね、、、ww
複製
この機能もめちゃめちゃ使えます。
適当に先ほどの要領で画像とテキスト付きのレイヤーを作りました。
これを横に三つ並べてそれぞれに違う画像とテキストを入れてみます。
複製したいものを選んでツールバーの一番下”Duplicate”をクリック
横に並べたいなら”Horizontal”
縦に並べたいなら”Vertical”にチェックを入れます。
Countのところに並べたい数の合計を入れます。
全部で３つにしたいので”３”と入れます。
Gutterはその要素と要素の隙間の広さです。
今回は”３０”にしてみました。
“Duplicate Content”をクリック
すると同じカテゴリーの画像とテキストを自動的に入れ込んで複製し、横に並べてくれました。
超簡単で高速ですね。
テキストの長さがバラバラなので長い時は自分で短くしないといけないですが、一つ一つ作るよりも全然楽です。
面倒くさがりの人はぜ是非使ってみてください!!
日本語版があるかわからないですのであったら教えてくださーいww
まとめ
いかがでしたでしょうか?
最後に紹介した”Craft”は本当に優れものです。
今の所何もバグなど起こっていません。
結構ベタなプラグインもありましたが是非参考にしてみてください!!
あと、この４つ以外にオススメのプラグインがあれば教えていただけたら嬉しいです。
では〜