いちばん詳しい Sketch / XD / Figma / Studio の比較 〜4. シンボルとスタイル
Sketch, XD, Figma, Studio を比較する連載記事の4番目です。
※ 2019年5月追記: XDのシンボルについての大幅なアップデートに対応して、内容をかなり修正しました。
1. 導入と背景知識
2. 基本項目の比較
3. デザイン機能比較
4. シンボルとスタイル ◀イマココ
5. プロトタイピングとコラボレーション
6. まとめ
今回はUIツールの肝とも言える、「シンボル」の機能や管理性能、「スタイル」の機能、デザインシステム・コンポーネントライブラリについての比較を行います。今回は非常に長いです😅。
※ 注意 ※
厳密にはSketchのみが "Symbol" で、FigmaとXDとStudioでは "Component" という名称です。本記事中ではオリジナルとなるオブジェクトをシンボル、それに紐付いたコピーの子オブジェクトをインスタンスと呼びます。
一応、先にSketchをベースにシンボル機能とスタイル機能の説明をします。この説明が不要な方は「シンボルの設計思想」まで飛ばしてください。
シンボルとは
作成したオブジェクトをシンボルとして登録しておくことで、デザインファイルの中で何度もそのUIを再利用できる機能です。アプリでは、ボタン・入力フォームなど、同じUIが各所で何度も登場します。デザインの一貫性・修正しやすさなどが重視されるUIデザインにおいては、シンボルはコアとなる機能のひとつでです。
↑オリジナルがシンボル、コピーがインスタンスです。シンボルのデザインを修正すれば、インスタンスのデザインもすべて修正されます。
## シンボルのオーバーライド
インスタンスはシンボルとまったく同じではなく、文言やサイズなど一部のデザインを変更 (オーバーライド)できます。これにより、ひとつのシンボルからデザインのバリエーションを表現可能です。
また、シンボルの中にシンボルを置くことで、シンボルinシンボルのオーバーライドができるようになります。インスタンスの中のシンボルを、別のシンボルに変更できる機能です。
スタイルとは
テキストや色、エフェクトなどのデザインを定義しておき、再利用できる機能です。シンボルがオブジェクトそのものを再利用する機能なのに対し、スタイルはオブジェクトのデザイン指定を再利用します。例えばテキストなら「Headline」「Body」、色なら「Theme」「Warning」など定義しておけば、デザインの再利用が簡単になり一貫性も維持できます。理想論を言えば、デザインファイル上ではスタイル定義したものしか使わないのが安全です。ツールによって微妙に定義できるスタイルは異なります。
▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
シンボルの設計思想
シンボル機能は一見似ているように見えますが、4つのツールそれぞれでかなり設計思想が違います。特に、親となるシンボルがどこで管理さるのかが異なっています。以下でそれぞれ詳しく紹介します。
## Sketchのシンボル管理
任意のオブジェクトをシンボル化すると、それ自体はインスタンスになりSymbolsという別のページの中にシンボルが作られます（一応、アートボードと同じページ内に作ることもできます）。
特徴
★ シンボルを修正するためには、実際のアートボード上ではなくSymbolsページの中で編集しなければいけないため、デザイン修正を確認しづらい
★ シンボルのアートボードがSymbolsページに無限に並んでいくため、みづらくなっていく。シンボルを整理してくれるプラグインが必須
★ シンボル一覧パネルがなく、アートボードに挿入するときはプルダウンメニューから探さなければならない。適切な命名と、シンボルを検索できるプラグインが必須
デザインが大規模になってくるとプラグイン無しでは辛いです。が、逆にいうとプラグインさえあれば相当に便利です。シンボルのデザイン修正はどうしてもつらいです。
## XD・Figmaのシンボル管理
XDとFigmaのシンボルの管理思想はかなり似ています。もともとXDのシンボルは超使いづらかったのですが、2019年5月のアップデートでFigmaとそっくりな機能に修正され、使い勝手が良くなりました。
任意のオブジェクトをシンボル化すると、それ自体がそのままその場所でシンボルになります。シンボルをコピーするとインスタンスになります。
ちなみにこの状態でオリジナルのシンボルを一度削除した場合、シンボルを編集するには親シンボルを復活させる必要があります。インスタンスを右クリックして、XDの場合は「Edit Master Component」、Figmaの場合は「Restore Master Component」を実行することでアートボード上にシンボルが復活します。
特徴
★ 同一アートボード上にシンボルとインスタンスが同時に存在できる
★ 視覚的に修正がしやすい。また無理にシンボルを整理する必要もない
★ もちろんSketchのように、シンボルを一箇所に集めて管理することもできる
★ シンボル一覧はAssetsというメニューで確認でき、グラフィカルに挿入できる。しかもページや命名規則に応じて整理されているので見やすい
FigmaとXDのシンボルは非常に使いやすいです。
Sketchの場合はなんでもかんでもSymbol化してしまうとファイル内が煩雑になっていくのですが、FigmaとXDはそうなりません。2回以上登場するオブジェクトは無条件にシンボル化してもいいレベルです。
ただし、Sketchプラグインの「Symbol Organizer」のような整理機能はないため、「アイコン一覧」や「ロゴ一覧」など、デザインシステム用のシンボルを作るときは手動での整理が必要になり、大変です。
## Studioのシンボル管理
任意のオブジェクトをシンボル化すると、それ自体はインスタンスになり、Librariesという別メニューの中にシンボルが作られます。Sketchと違い完全に独立したメニューUIの中に入り、同一ページ内にシンボルを置くことは不可能です。
特徴
★ シンボルは通常のアートボードの世界から完全に分離された、LibrariesというUIの中で管理される
★ 命名規則によるグループ分けはされない
★ シンボル一覧は同じくLibrariesのメニューから管理・挿入ができるが、整理されておらず見づらい。シンボルを一覧で見ることすらできない
Studioのシンボル機能は劣化版Sketchといった感じです。はっきりいって超絶使いづらいです。
シンボル/スタイルの命名によるグループ整理
SketchとFigmaでは、シンボルやスタイルに名前をつける際、「/ (スラッシュ)」で名前を区切ることで、グループ化することができます。たとえば「Color/Theme/Normal」や「Button/Hover」といった名前をつけておくと、階層ごとにグループ分けされ、使用する際に整理されて表示されます。
複数デバイスに展開しているサービスなど、大規模なUIを作る場合、シンボルの数がとんでもない量になります。階層ごとにグループ分けして整理できることは、運用上とても助かります。
また、Atomic Design ともとても相性が良いです。
リサイズ設定
インスタンスやアートボードのサイズを変更したとき、内包するオブジェクトがどのように変化するかを設定する機能です。
複数のサイズで使える柔軟なシンボルが作れるので、無駄にシンボルが増えていくことを防げます。CSSのレスポンシブデザインにはもちろん、iPhone↔iPadのデザインに1つのシンボルで対応できたりします。
Sketchは「Resizing」、XDは「Responsive Resize」、Figmaは「Constraints」、Studioは「Responsive」という名称ですが、4つともほとんど同じ機能です。
XDは一応、自動でレスポンシブを考えてくれる機能もありますが、あまりまともに動作しません。
オーバーライド
インスタンスのデザインをどこまで自由にオーバーライドできるかはツールによって異なります。オーバーライドの自由度が低いと、ほぼ同じ見た目のシンボルを量産することになってしまい無駄です。
たとえば、以下のようなタブバーの4つの状態をデザインする場合、シンボルを4つ作るのは非生産的です。ひとつのシンボルを、使う場所によってわずかにデザインを変更して使えれば便利ですね。いずれのツールでも、一つのシンボルからこれを再現可能です。この機能がオーバーライドです。
オーバーライドで変更できる項目は以下の通りです。
Sketchはオーバーライドの自由度がかなり低く、けっこう辛いです。XDはかなり自由にデザインを変えられるのですが、シンボルinシンボルの変更や、シンボルの命名が面倒くさくて、若干使いづらいです。
一括オーバーライド
同じシンボルのインスタンスを複数並べた後、それぞれの画像とテキストを、ひとつひとつ手でオーバライドするのは非常に面倒です。
↑のような場合に、事前に用意した素材やランダムなデータから、一括でオーバーライドする機能があります。各ツールについて簡単に紹介します。
## Sketchの一括オーバーライド
Sketch ver.52 から実装されたData連携機能が超絶便利 💯です。
★ 選択したインスタンスを、ローカルに用意した画像フォルダや.txtファイルから一気にオーバライドできる
★ 「Face Icon」「Name」など、ランダムに用意されたデータセットの反映も可能
★ 画像素材サイトの「Unsplash」から画像を検索してすぐに利用することも
また、コピーした画像もすぐインスタンスに反映できるので、Webから簡単に画像をひろってこれます。
## XDの一括オーバーライド
Repeat Grid であれば、ドラッグ&ドロップで一括変更可能です。Google Sheets for XD というPluginを使えば、Google Docs の Spreadsheetと連携して一括オーバライドすることも可能です。コピーした画像はインスタンスに反映できず、ローカルフォルダに保存された画像しか使えません。
## Figmaの一括オーバーライド
インスタンスのテキストを一括オーバライドする機能は存在しないので、手でやるしかありません。画像に関しては「⌘⇧K」で一気にオーバーライドできます。コピーした画像はインスタンスに反映できず、ローカルフォルダに保存された画像しか使えません。
## Studioの一括オーバーライド
一括オーバライドできる機能は存在しません。ただし、クリップボードにコピーした画像を使うことはできるので、その点のみXD, Figmaよりましです。InVisionは古くから一括オーバライドのSketchプラグインを作っているくらいなので、将来的に実装されるはずだとは思います。
スタイル
スタイルに関してはFigmaがいちばん細かく設定できます。Studioはほとんど使えません。
## Sketchのスタイル定義
★ Layer Style: レイヤー(オブジェクト)の塗り・線・影などのエフェクトなどをまとめて定義
★ Text Style: テキストオブジェクトのフォントサイズ・行間・文字詰め・色・影などを定義
★ Document Colors: 色を定義してパレットに保存する
シンボル同様に名前をスラッシュで区切ることで、グループ化して整理できます。
## XDのスタイル定義
★ Character Styles: テキストオブジェクトのフォントサイズ・行間・文字詰め・色などを定義
★ Colors: 色を定義して保存する
シンボルと同じ「Assets」というパネルUI上で管理されます。影など、エフェクトのスタイルは定義できません。
## Figmaのスタイル定義
★ Text Style: テキストオブジェクトのフォントサイズ・行間・文字詰め・色・影などを定義
★ Color Style: 色を定義して保存する
★ Effect Style: 影などのエフェクトを定義する
★ Grid Style: オブジェクトの間隔を定義する
唯一、グリッドのルールをスタイルとして定義できます。名前をスラッシュで区切ることでグループ化して整理できます。
## Studioのレイヤー定義
★ Document Colors: 色を定義してパレットに保存する
定義できるのは色のみで圧倒的に機能不足です。テキストやエフェクトのスタイルを定義できず、色も名前をつけて保存できないので不便です。
▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
補足: デザインシステム・コンポーネントライブラリ
最後に、デザインシステムやコンポーネントライブラリの運用について軽く補足説明します。
ここまで紹介してきたシンボルやスタイルは、ライブラリとして複数のファイル間で共有して使用することができます。ざっくりいうと「あるファイルAをライブラリとして他のファイルBで読み込むと、Aに定義されているシンボル・スタイルを使える」といった機能です。
https://www.sketch.com/docs/libraries/
https://helpx.adobe.com/jp/xd/help/symbols.html
https://help.figma.com/article/29-team-library
https://support.invisionapp.com/hc/en-us/articles/360019182552-Studio-Shared-Libraries
実はライブラリとしての機能だけを見れば、4つのツールともほぼ同じ使い方・性能です（なので比較に挙げていません）。結局ここまでに紹介した、シンボルやスタイルの機能・特性で優劣が決まります。
また、XDはAdobe公式の Creative Cloud Library も使えます。Sketch はにも使えます。Sketch は InVision DSM, LINGO といった外部サービスも使えます。
▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
今回は以上です。次回は 5. プロトタイピングとコラボレーション です。よかったら続きもお読みいただけると嬉しいです。ありがとうございました。