Tortoise Shell

Webサービスの会社で働くデザイナーが、デザインやライフハックについてゆるく書き連ねるブログです。

Sketchと合わせて使いたい!オススメのツール4選

突然ですが、あなたの好きなUIデザインツールは何ですか?

わたしは、ここ2年ほど変わらずSketchを愛用し続けています。

先月のAdobe MAXでは、Adobe XDもついに「CC」が付いて正式リリースされました。

デザインとプロトタイピングが1つのアプリケーション上で完結するという利便性から、SketchからAdobe XDへ乗り換えたという人も少なくないかもしれませんね。

しかし、Sketchの強みは1つのアプリケーション上で完結するものではなく、周辺ツールやプラグインを組み合わせて使える拡張性にあるのではないでしょうか。

そこで今回は、Sketchと合わせて使うのにオススメなツールを4つほどご紹介したいと思います。

もしSketch単体でしか使用したことがないという方は、ぜひこれらのツールも試していただき、Sketchエコシステムの快適さを知っていただきたいと思います。

1. Zeplin(デザイン共有)

f:id:tamusan100:20171107231843p:plain

Zeplinは、Sketchのデザインデータを簡単に共有できるアプリケーションです。

専用のプラグインを入れることで、Sketchから直接Zeplinへデザインデータを送ることができます。

そのため、Sketchを持っていないユーザーにも、簡単にデザインデータを共有できます。

ただデザインデータを共有できるだけではなく、各コンポーネントのスタイル情報をSwift3やReactNativeといった形式で取り出すこともできるため、エンジニアへの受け渡しにも大変便利です。

2. Framer(プロトタイピング)

f:id:tamusan100:20171107231856p:plain

Framerは、インタラクティブなプロトタイプを作成できるアプリケーションです。

画面遷移を作るのであればProttが有名ですが、Framerはインタラクションの作成に特化したプロトタイピングツールと言えます。

CoffeeScriptによるコードベースでの記述を行うため、エンジニアへの共有もスムーズに行うことができます。

まだ日本語の情報も少ないのですが、Framerの公式サイトのチュートリアルはとても充実しているので、動画を見ながら操作を真似していけば基本動作は自然に習得できるでしょう。

ドキュメントは全て英語ですが、Google翻訳を使えば十分に読み進めることができます。

コードベースで手軽にインタラクティブなプロトタイプを作りたい方は、ぜひ試してみてください。

3. Abstract(バージョン管理)

f:id:tamusan100:20171107231913p:plain

Abstractは、デザインデータのバージョン管理を行うことができるアプリケーションです。

長らくベータ版として一部のユーザーのみの公開に留まっていましたが、最近になって一般ユーザーにも公開されました。

わたしが働いている職場でも最近導入されましたが、快適すぎて作業がはかどりまくっています。

Gitのように、マスターとなるSketchデータからブランチを切り、コミットし、最終的にマージすることができます。

Abstractがあれば「最新のSketchデータはどこに行った?」「このSketchデータを更新したいから、ちょっと他の人は触らないでね」といったやりとりは全て不要になります。

複数人で1つのSketchファイルを触ることがあるデザイナーの方は、絶対に試していただきたいアプリケーションです。

4. Craft(効率化)

f:id:tamusan100:20171107231925p:plain

Craftは、効率良くダミーデータを生成できるSketchのプラグインです。

開発しているのは、プロトタイピングツールで有名なinVision社。

これまでご紹介した3つはいずれもデスクトップ版のアプリケーションがリリースされていますが、このCraftはただのプラグインだからといって侮れません。

Sketchでデザインデータを作成していると、ダミーデータの作成はとても面倒ですよね。

しかし、Craftを入れておけば、JSONデータからダミーテキストを生成したり、あらかじめフォルダに格納しておいた画像データをランダムに配置したりしてくれます。

APIを通してデータを取得することも可能なため、よりリアルなアプリケーションに近い形でデザインデータを作成することができます。

こちらも、Sketchを使用されている方は必ず入れておきたいプラグインです。

おわりに

いかがでしたか?

冒頭でも述べたように、Sketchの強みは、そのシンプルさと拡張性にあります。

Sketch本体はどこまでも軽量でシンプルでありながらも、足りない機能はプラグインによってどんどん自分好みにカスタマイズしていくことができるのです。

だからこそ、Sketch単体ではその力を120%引き出すことはできないとも言えるかもしれません。

Sketchを使われている方は、ぜひ今回ご紹介したようなツール等を駆使し、快適なデザインライフを送っていただきたいと思います。

UIデザイナーのための Sketch入門&実践ガイド

UIデザイナーのための Sketch入門&実践ガイド