marc tech

株式会社MAISON MARCが運営するブログです。Tech Blogとは名ばかりの、採用・福利厚生の情報や、日々の活動記録(?)からエンジニアのくだらない小話までMAISON MARCに関する情報をお伝えするブログとなっています!興味のある方は是非ご覧になってください。

膨大なページを作成する際に役立つ、Sketchプラグイン5選と解説

f:id:marctech:20170518141908p:plain

f:id:marctech:20161010185811p:plainこんにちは、デザイナーのひとみです。

Sketch3が流行りはじめてから、だいぶ経ちましたね。使っている人も多くなってきて使い方や便利情報も出始めているので嬉しい限りです。

Sketch3を使い始めてからは写真の加工や切り抜き、細かいイラスト作成以外はSketch3でなんでも制作するようになりました。資料作成もSketch3化したい・・・。

そこで今回は、おすすめプラグインを紹介します。

 

Sketch3を使いたい理由

  • コンポーネント管理や便利プラグインの使用による作業効率化
  • デザインのパターン出しやページの量産によるデザイン修正が楽
  • よく使うツールが直感的で使いやすい
  • 何より、操作が軽い

 

文字数指定に使いたい「Counter」

github.com

キャプションやなどの文字制限のあるものをチェックするのは、時間がかかって大変ですよね。そんなときに便利なプラグインです。テキストレイヤーを選択してプラグインを使用すると、ポップアップで何文字か教えてくれます。

 

使用しているフォントが多くなっていた!「Font finder」で解決

github.com

どんなサイトデザインでも、作業者のPC環境や制作方法によってどうしてもフォント設定がバラバラになりがちです。

そうすると、少しずつデザインが変わってきたり微妙に名前が違うことから、Sketch立ち上げ時にフォントが入ってないけど立ち上げる?みたいなエラーメッセージが返ってきたり。

このプラグインを使用すると、使用しているフォントが一覧で表示され、チェックボックスにチェックを入れるとレイヤー選択をしてくれます。

そのあと、まとめてフォント統合して適切にText Styleなどで保存しておくと作業効率アップです。

 

名前間違えた!いらないスタイルが増えてきた!似てるから消したい!でも消せないStylesには「Remove dupulicated styles」

sketchhunt.com

これもフォントと同じく、増えがち。しかも消せないので同じようなStyleが何個も並ぶことも・・・。symbolの設定によってはそれぞれのsymbolに適用されているStyleも全部登録されちゃうこともあります。これも整理整頓して作業効率化しましょう!

プラグインメニュー内にあるRemove duplicatesを選択してちょっと待つだけで使っていないStyleが削除されます。

 

レイヤーもアートボードも増えてきた。一括で名前修正したいわ〜というときには「Rename It」

github.com

名前の付け方って、プロジェクトや人によって様々ですよね。このプラグインでは、そこも考慮してくれているので少し操作が必要です。

いわゆるタグみたいなもので管理しているので「こういう名前の場合はこのタグをこういう風に入れる」といったかんじです(ざっくり)。パターンを覚えれば組み合わせたり応用も!

 

みんな大好きCRAFT

www.invisionapp.com

サービスUIをデザインしている人であれば、ご存知の方も多いはず。

便利機能が備わったプラグインですね。

このプラグインはプロトタイプを作るinvisionとうサービスから出ているプラグインだけあって、invisionとの連携も楽にできます。

CRAFTでできること

  • invision連携がアートボード毎でできる。しかも連携が早い。
  • 実際のwebサービスから画像やテキストを引っ張ってこれるため、複数選択して一気に変更可能
  • あらかじめ画像やテキストを登録し、呼び出して一括でランダム変更
  • レイヤーの複製(上記のwebサービスから画像やテキストを引っ張ってくるのと掛け合わせると、同じタグ情報を抜いてくれるので複製してもランダムで自動挿入してくれます)
  • フリーハンドで書いたメモをシェアできる

 

 

現場で使えるSketchプラグインでした!

気になった人はぜひインストールしてみてください。