見出し画像

いちばん詳しい Sketch / XD / Figma / Studio の比較 〜3. デザイン機能比較

平田 / U-NEXT

Sketch, XD, Figma, Studio を比較する連載記事の3番目です。

1. 導入と背景知識
2. 基本項目の比較
3. デザイン機能比較    ◀イマココ
4. シンボルとスタイル
5. プロトタイピングとコラボレーション
6. まとめ


今回は基本的なデザイン作成に関する機能についての比較です。


操作感・UI

ツールの操作のしやすさ、UIについての評価です。まず、基本的な操作感・キーボードショートカット・UIの構成はどのツールもかなり似ています（XDは少し特殊です）。慣れや好みもある世界だとは思いますが、Sketchの完成度が1番高いと思います。

また、SketchとFigmaではコマンドパレットが使え、テキストでコマンド入力することで大半の機能を実行できます。Sketchは「Runner」というプラグインが必要なのですが、シンボルも素早く検索して挿入できたりと、非常に優秀です。


デザインの表現力

色の設定やブラーエフェクトなど、ツールでどこまでの表現を行えるかの比較です。UIの中で使うアイコンや写真など、高品質な素材はPhotoshopやIllustratorなど別のソフトで作ることが多いと思います。それでも表現力は高いにこしたことはありません。

SketchとFigmaに関しては、特別困ることはないと思います。

XDはひとつのオブジェクトにFill（塗り）をひとつしか設定できなかったり、ブレンディングが使えないのがすこしつらいです。

Studioはブラーエフェクトが使えません。最近のiOSデザインでは必須表現なので、致命的といえます。


日本語タイポグラフィ

日本語のテキストオブジェクトをどれほど正確にデザインできるかについてです。

日本語に関しては、どのツールもCSSやXcodeの最終的な実装とはすこし変わってしまいます。全く同じ数値を指定しても完全に一緒にはなりません。

主に行間や文字詰めに差異が出やすいです。Sketchは先頭行の開始位置がすこし下がります。Studioは、日本語フォントがまともに機能しないことがあるので、論外です。


繰り返しオブジェクト・グリッドの調整

同一種のオブジェクトが繰り返されているデザインで、それらのマージンなどを一括で調整しやすいかの比較です。UIデザインではリストやグリッドの配置が頻繁に登場するので、作業効率に関わります。Sketchには「Smart Distribute」、Xdには「Repeat Grid」、Figmaには「Smart Selection」という専用機能があります。Studioもオブジェクトを等間隔に整列するだけなら可能です。

## SketchのSmart Distribute
同一のオブジェクトが繰り返されているとき、それらの間隔をドラッグで変更できます。後述するFigmaの「Smart Selection」のパクり機能としてSketch55から実装されました。できることはドラッグで間隔を調整するだけで、シンプルです。また、「Automate」などのプラグインを使うことで一括でマージンを調整したりすることも可能です。

## XDのRepeat Grid
任意のオブジェクトを「Repeat Grid」という特殊なオブジェクトに変換できます。Repeat Gridオブジェクトは、指定した範囲内で水平・垂直方向に同一のオブジェクトを繰り返します。オブジェクトを繰り返す個数や、マージンなどをマウスでグラフィカルに調整できます。後に紹介しますが、繰り返されたオブジェクトは一括で画像やテキストを変更できます。

https://helpx.adobe.com/jp/xd/help/create-repeating-elements.html

## FigmaのSmart Selection
任意のオブジェクトを複数並べた後「Tidy Up」というアイコンをクリックすることで、オブジェクトの並びを整理できます。操作的にはRepeat Gridによく似ているのですが、どんなオブジェクトでも利用できるのでより便利です。ドラッグで順番を並び替えることもできます。

https://help.figma.com/article/189-smart-selection


プラグイン・テンプレート

機能追加を行えるプラグインや、デザインのテンプレート素材がどれほど公開されているかについです。やはり歴史の長いSketchが圧倒的に質・量ともに1番です。XDも数が増えてきており、国内でのプラグイン開発者も増えています。Figmaはあまり数がなく、既存サービスと連携させるだけのプラグイン ( integration ) がほとんどです。非公式のChrome拡張機能がいくつかあったりはします。Figmaは素材を簡単に公開できるので、テンプレートはそこそこ数があります。Studioはプラグイン・テンプレートのマーケットを現在準備中のようです。

## Sketchのプラグイン
本記事のコンセプトからは外れるのであまり詳しく書きませんが、Sketchは運用や管理のコストを劇的に変えるような、圧倒的に良いプラグインが多いです。例えば以下などは個人的に、これがあるからSketchを使うレベルで必須のプラグインです。

- Runner (テキストコマンドであらゆる操作を効率化する)
- Automate (Sketchの機能を大量に増やす)
- SymbolOrganizer (シンボルを整理する)
- Find & Replace (テキストオブジェクトの文言を置換する)
ほかにもたくさんあります。

## 公式のUIテンプレート・リソース
AppleからはiOS, GoogleからはandroidのOS標準 UI Kit が公開されています。現状、公式から提供されているのはSketchとXDだけです。

Appleからは iOS, MacOS などのUI Kitと、OS標準フォントのSan Franciscoが素材として提供されています。

GoogleからはSketch用のプラグインが提供されています。XD用のテンプレートファイルもありますが、アーカイブ扱い(古い)なので注意が必要です。フォントはRobotとNotoSansCJK JP を Google Fonts から落とせます。



▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼


今回は以上です。次回は 4. シンボルとスタイル です。よかったら続きもお読みいただけると嬉しいです。ありがとうございました。

いいなと思ったら応援しよう！