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の新機能を紹介します。

Sketchの最新情報

What's New in Sketch 3.5?

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

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

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

Sketchの最新機能

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

以前の表記
2.1.9 Mobile — Browse — Hamburger Menu
3.5+の表記
2.1.9 Mobile — B…amburger Menu

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

Sketchの最新機能

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

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

Sketchの最新機能

以前のバージョンのPreferences

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

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

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

Sketchの最新機能

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

グルーピング

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

Sketchの最新機能

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

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

Sketchの最新機能

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

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

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

Sketchの最新機能

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

角度を数値で回転

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

Sketchの最新機能

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

すべてのガイドを除去

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

Sketchの最新機能

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

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

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

Sketchの最新機能

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

アートボードの選択

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

Sketchの最新機能

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

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

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

Added a toolbar icon for the common action of Aligning Layers to Pixel Edge

ピクセルのエッジにレイヤーを整列させる普通のアクションのためのアイコンをツールバーに加えました。

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

Sketchの最新機能

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

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

Sketchの最新機能

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

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

Sketchの最新機能

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

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

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

Sketchの最新機能

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

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

git-sketch-plugin
SketchのファイルをGitクライアントで管理でき、分かりやすいdiffを作成します。
Silver Flows(プライベートベータ版)
Sketch用の画面遷移を伴うプロトタイプを作成します。

top of page

©2016 coliss