UIデザイナーはしっかり押さえておきたい、Sketch 3.5の新機能とデザインフローのまとめ

3ヵ月前にSketch 3.4がリリースされ、2016年1月26日に多くの改良とバグフィックスで新しいバージョンのSketch 3.5がリリースされました。
※2016年2月3日現在の最新版は3.5のマイナーバージョンアップの3.5.1です。

3.5はパフォーマンスの改良だけでなく、機能的にも多くの改善がされており、今まで以上により快適なデザインフローとなるSketchの新機能を紹介します。

What's New in Sketch 3.5?

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

• アートボードでのタイトル表記
• 「Retina Canvas」のチェックボックスは除去
• キャンバスのちらつきを改善
• グルーピング
• 常に選択されたレイヤーの上に挿入
• 角度を数値で回転
• すべてのガイドを除去
• 使用しているフォントをすべて表示
• アートボードの選択
• ピクセルのエッジにレイヤーを整列させる
• イメージのサイズの縮小時のアラート表示
• レイヤー・アートボードでの整列アイコンの一貫性
• ボーナス: 注目のプラグイン

アートボードでのタイトル表記

今までのバージョンではアートボードでの各タイトルはそのまま表示され、長いタイトルだとズームアウトした際に重なって表示されてしまいました。

3.5からはタイトルがアートボードの幅を超えることはなくなり、文字数が多い場合は上記の画像のように、アートボードの幅に依存して省略されます。

以前の表記

2.1.9 Mobile — Browse — Hamburger Menu

3.5+の表記

2.1.9 Mobile — B…amburger Menu

またアートボードの幅が更に狭い場合は、下記のようにタイトルが省略されます。

「Retina Canvas」のチェックボックスは除去

「Preferences」の「Canvasタブ」内の「Retina Canvasのチェックボックス」は無くなりました。

以前のバージョンのPreferences

この機能はドキュメントが同じサイズでも多くのディテールが見えるようにするためのものでしたが、本来のディテールと混同することを私は望まないので、一度もチェックしたことはありませんでした。拡大して見ることは簡単なので、私は常に@1xでデザインしています。

キャンバスのちらつきを改善

3.5ではキャンバスで編集をする時の白いちらつきが起きるバグが修正されました。

確かに3.5でスペースバーを押しながら、キャンバスをぐるぐるさせると白いちらつきは減りましたが、外部モニターに接続していると若干のちらつきがまだあります。しかし、これはデザインフローには影響を与えません。

グルーピング

以前のバージョンでは例えば、3つのRectangle（長方形）をグループ化したレイヤーの名前は子レイヤーの名前が組み合わさり、「Rectangle 1 + Rectangle 1 + Rectangle 1」となっていました。

3.5では、まとめられたレイヤーの名前は「Group」とつけられ、レイヤーのリストをもっとクリーンにします。

また、複製したレイヤーのためをクリーンにするのであれば、「Rename duplicated layers」のチェックをはずします。

これをはずすことで、「 Copy」を末尾に加えません。

常に選択されたレイヤーの上に挿入

3.4だと、アートボードでイメージやシェイプやアイコンをペーストしようとした際、常にアートボードの最初のレイヤーにペーストされていました。

3.5ではこれが改善され、ペーストしたレイヤーは常に選択されたレイヤーの上に挿入されます。

角度を数値で回転

角度を正確な数値で回転させることは今までもできましたが、3.5では数値がポインタの脇に表示されるようになりました。

これにより、インスペクタパネルを見て角度を確認する必要がなくなります。

すべてのガイドを除去

以前のバージョンでは、Sketchファイルですべてのガイドを除去することは、なかなか面倒な作業でした。

3.5では、ルーラーを右クリック「Remove All Guides」でガイドをすべて除去することができます。もちろん、一つずつガイドを除去することもできます。

使用しているフォントをすべて表示

3.5では、すべてのページで使用しているフォントをすべて表示します。

これにより、それぞれのページでいくつフォントを使用しているか知ることができます。
通常、私はUIデザインではボディテキスト・ヘッダ・チャートテキスト用に3種類のフォントを使っています。

アートボードの選択

アートボードの外で選択ツールをドラッグしても、アートボードのレイヤーを選択できなくなりました。アートボードを選択する時は、アートボードのタイトルを選択します。

これは多くのアートボードがある時に非常に有用で、必要としないシェイプを偶然選択してしまうことがなくなります。
私は常にアートボードの中にはアートボードより大きいシェイプを作らないようにしています。より大きいイメージを使う場合は、マスクを使用します。

ピクセルのエッジにレイヤーを整列させる

3.5のアップデートリストで、紛らわしい新しい拡張があります。

最初これが何を意味するのか分かりませんでしたが、ツールバーのリストにある「Round To Pixel」であると理解しました。

確かにUIデザインで完璧なピクセルを望むので、これは私のデザインのために最も普通のアクションです。私はこの機能のために、すぐにショートカットを作成しました。

この機能は異なる名称ですが、Sketchのメニュー「Layer::Round to Nearest Pixel Edge」からも選択できます。
同じ機能で異なる名前は混乱が生じるので、Sketchの開発チームに同じ名前にしてほしいと思います。

イメージのサイズの縮小時のアラート表示

メニュー「Layer::Image::Reduce Image Size」からイメージのサイズの縮小を選択した際に、アラートが表示されます。

このアクションはイメージのサイズだけでなく、クオリティも減らします。

レイヤー・アートボードでの整列アイコンの一貫性

複数のレイヤーを選択した時、アートボードで一つのレイヤーを選択した時、どちらでも整列のアイコンが同じになりました。

ボーナス: 注目のプラグイン

Sketchのワークフローをさらによくするプラグインを最後に、紹介します。

git-sketch-plugin

SketchのファイルをGitクライアントで管理でき、分かりやすいdiffを作成します。

Silver Flows（プライベートベータ版）

Sketch用の画面遷移を伴うプロトタイプを作成します。