このページの本文へ

Sketch 3.7でガラッと変わった「シンボル」UIデザインが捗る新機能にふるえた

2016年06月14日 11時36分更新

文●Daniel Schwarz

  • この記事をはてなブックマークに追加
本文印刷
UIデザイナーの間では「Photoshopから乗り換えた」との声も多いSketch。今春リリースされた3.7の新機能で、これまで作業にかかっていた時間がだいぶ節約できそうですよ。

バージョン3.7より前のSketchでも、優れたシンボル機能を使えば、1組のレイヤーを、繰り返し使える1つの要素にできました。1つのシンボルインスタンス設定内容は、テキスト値など多少の例外を除けば、すべてのシンボルインスタンスに適用されました。.sketch形式のデータに含まれる特定のデザイン要素は、一定の設定が確実に保持されていたのです。

01

バージョン3.7より前のSketchは、入れ子のシンボル、つまり、シンボルの中のシンボルをサポートしていませんでした。たとえば、Webサイトのヘッダーを複数のアートボードで繰り返し使うけれども、ヘッダーに異なったシンボル(繰り返し使えるボタン要素など)を利用する場合を考えてみましょう。Sketch3.7より前では、不可能で大きな制約がありました。繰り返し使える要素を繰り返し使えなかったためです。

バージョン3.7になって、別のシンボルの中にシンボルを作成することができるだけでなく、機能が強化されたことで、特別なシンボル専用キャンバス上で新しいシンボルを保存、編集、作成することさえできるようになりました。

繰り返し利用可能な要素を作成

繰り返し利用できる要素を作成することから始めます。ボタンは、何度も利用することができますが、テキストはボタンのインスタンスにより異なります。繰り返し利用できる要素はシンボルに最適の候補だといえます。

長方形を作成し(Rキー)、次のスタイルを設定します。

  • Width: 220
  • Height: 60
  • Fill: #FF3654
  • Border (Color): #FF3654
  • Border (Thickness): 3

続いて、新規テキストレイヤー(Tキー)を次のスタイルで作成します。

  • Width: 220
  • Typeface: Roboto
  • Size: 18
  • Color: #FFFFFF

02

注意:指定したスタイルを必ず利用する必要はありません。好きなスタイルを使って記事を読み進めてください。

シンボルを適用する

レイヤーをシンボル化できる準備ができたら、すべてのレイヤーを選択し、ツールバーの「シンボルを作成する」を選択します。ダイアログが現れ、シンボルに名前を付けるよう促されます。このシンボルの名称を「Filled Button」とします。また、「シンボルをシンボルページに送る」オプションにチェックが入っていることを確認します。Sketch 3.6との違いはどこにあるでしょうか? その違いと、この方法が良い理由を説明しましょう。

03

シンボルの管理とオーバーライドのアクティベーション

シンボルページとシンボルがグループに適用されなくなった理由を説明します。グルーピングは、いくつかのレイヤーが相互に関係している場合に、レイヤーを瞬時に動かす方法です。Sketch 3.7で1組のレイヤーからシンボルを作成する場合、レイヤーは1つにまとまっているかのように見えます。つまり、たとえグループ化されていなくても、グループ化されたように動かせるのです。

代わりに、個々の(編集可能な)レイヤーが、キャンバス全体にシンボルだけを保存するシンボルページに送られます。シンボルは、このシンボルページ内で編集されます。この機能はPhotoshopのスマートガイドと同様です。

04

シンボルページについて説明する前に、キャンバスがいかにフレキシブルかを解説しましょう。インスペクターを使ってシンボルを適用したり解除したりできますが、インスペクターは「シンボルのテキスト値を上書きする」旧機能を強化しています。デフォルトでテキスト値が持つシンボルからテキスト値を削除するよりも、インスペクタを使用して、各インスタンスのテキスト値を上書きします。

command+Dでシンボルを複製し、インスペクターを使って新しいテキストを入力します。たとえば、シンボルテキストは「#sitepoint」ですが、「#rocks」で上書きしました。「#sitepoint」を別にすれば、構成要素は常に同じです。

05

シンボルページからシンボルを作成する

レイヤーリストのページタブから、シンボルページを選択します。先に説明したとおり、このページでシンボルを編集します。キャンバスでは編集しません。Sketch 3.6とは大きく異なっているところです。

図のシンボルページ(ちなみに、スタイルガイドのようなものですが)では、シンボルごとに個別のアートボードがあります。シンボルページでシンボルを編集すると、そこで変更内容が反映されるだけでなく、データ全体のシンボルのインスタンスもすべて更新されます。基本的には、「スタイルガイド」に変更を加えているようなもので、キャンバスが適宜更新されます。

シンボルを複製し、「Ghost Button」に名称変更し、背景を削除してテキストの色を#FF3654にします。完全に独立した2つのシンボルができました。テキスト値を「#rocks」に変更すれば、インスペクターでテキストを上書きする必要はもうありません。

06

新規のインスタンスをキャンバスに挿入する

ツールバーの「Insert」から「Symbol」を選んで表示されるシンボル名を選択します。キャンバスの任意の場所をクリックして、選択したシンボルのインスタンスを挿入します。通常なら、このインスタンスは、シンボルページのリンクされているシンボルと同一になります。もちろん、上書きされたものは除きます。

07

共通スタイルおよびテキストスタイル

共通スタイルおよびテキストスタイルにも、多少ですが重要な更新がありました。共通スタイルまたはテキストスタイルのインスタンスに独自の変更を加えられますが、更新アイコンをクリックしないかぎり、他のインスタンスと同期しません。この仕組みのおかげで、非常に柔軟に、繰り返し使える要素を作成したり管理したりできます。

また、複数のレイヤーに指定した数種のスタイルだけを適用できるようになりました。

08

最後に

Sketchチームによると、バージョン3.7はまだ序章でしかないそうです。シンボル機能は、今後提供されるバージョンでさらに改良するとのことですから、どのようになるか楽しみです。新しいシンボルページから移動したり、シンボルをキャンバスに挿入するキーボードショートカットがないことが残念です。できれば、バージョン3.7の改良で実現してほしいものです。

Sketch 3.7をどう思いますか? この新しいワークフローで作業効率が上がったでしょうか。それとも、旧バージョンの方が良かったでしょうか。

(原文:How Sketch’s New Symbols Will Improve Your Workflow

[翻訳:中村文也]
[編集:Livit

Web Professionalトップへ

WebProfessional 新着記事