Figma vs. Sketch vs. Axure –タスクベースのレビュー

最近のToptalインフォグラフィック「TheBestUXTools」では、市場に出回っているさまざまなデジタルデザインツールを調べました。そのほとんどは、個々のUXデザイナーの日常業務を支援することができます。

フィーチャーされたツールの3つ、Sketch、Figma、およびAxureは、UXデザインワークフロー内の特定のジョブに優れているため、忠実なフォロワーを生み出しています。

ただし、これらのツールのパフォーマンスは、手元の設計タスクによって異なります。 それらのすべての機能を比較表にリストする代わりに、タスクベースのレビューでそれらの有効性を判断します。

競合他社の概要は次のとおりです。

• ハーグ、NLに拠点を置くボヘミアンコーディングによるスケッチ。 SketchはMac専用のアプリケーションです。
• カリフォルニア州サンフランシスコを拠点とするFigmaによるFigma。 Figmaは、ブラウザを介して任意のオペレーティングシステムで実行されます。
• カリフォルニア州サンディエゴを拠点とするAxureSoftwareSolutionsによるAxure。 AxureにはWindowsとMacのバージョンがあります。

プラグイン、アドオン、サードパーティ製アプリを使用せずに、すぐに使用できる日常の設計タスクをどれだけうまく実行できるかに基づいて、各ツールにスコアを付けます。 タスクは次のとおりです。

1. コンセプトアイデアを行う
2. 忠実度の低い成果物の作成
3. 忠実度の高い成果物の作成
4. インタラクティブなプロトタイプの作成
5. デザインシステムの作成
6. 開発への提供

注：ツールにタスクを完了するために必要なほぼ同じ機能がある場合、より使いやすく、より迅速な配信を提供するツールが優先されます。 その決定があまりにも近いと思われる場合は、サードパーティのサポートがタイブレーカーです。

タスク：コンセプトのアイデアを実行する

アイデアは、新しいアイデアを生み出すための創造的なプロセスであり、通常、デザイナー、開発者、製品所有者、およびプロジェクトマネージャーで構成される学際的なグループによって行われます。

目標は、基本要件とすでに作成中の作業を考慮した後、製品で使用する新しいアイデアを作成することです。 たとえば、チームはコンセプトアイデアセッションを受けて、新しいアプリのMVP機能のセット、または既存のアプリの次世代機能を作成できます。

多くのデザイナーは、ホワイトボードや紙にコンセプトのアイデアを出します。 ただし、特に分散型オフィスでは、アイデアもデジタルで行われます。 コンセプトの生成はチームスポーツであり、プロダクトオーナー/マネージャーやフロントエンド開発者などの非デザイナーが含まれます。 このタスクには、コラボレーションを促進し、使いやすいツールが最適です。

勝者：フィグマ

SketchとAxureはどちらもクラウド共有サービスを提供していますが、共同作業者とリアルタイムで画面を共有する方法はありません。

Figmaで共有されているファイルはリアルタイムで結合でき、すべての参加者のラベル付きカーソルが表示されます。 ツールバーの代表的なアバターをクリックすると、ビューがその人の視点に切り替わり、アイデアをすばやく簡単に共有できるようになります。 さらに、Figmaはデザイナー以外の人がコピーを所有する必要はありません。 彼らはファイルリンクを開き、作業を開始します。

MuralやRealtimeboardなど、他のホワイトボードコラボレーションツールは、Figmaよりもコンセプトのアイデアに適している場合がありますが、デザインツールの場合、FigmaはSketchやAxureよりも1マイル優れています。

タスク：忠実度の低い成果物の作成

忠実度の低い成果物は通常、他の設計者や製品所有者が配布およびレビューできるワイヤーフレームまたはデジタルスケッチとして作成されます。 UXプロセスによっては、開発者やその他の利害関係者も表示できます。

ワイヤーフレームは、アプリの基本構造を示すことを目的としているため、忠実度の高いモックアップの作成に時間を費やす前に、インタラクションモデルを定義できます。

忠実度の低いワイヤーフレームの作成は、Balsamiq Mockups、Moqups、FluidUIなどのタスク専用のツールで実行できます。 ただし、Sketch、Axure、およびFigmaはすべて同じタスクを実行できます。特に、ユーザーがワイヤーフレームコンポーネントライブラリを作成する場合はそうです。

ワイヤーフレームは通常、アプリまたはページの初期UIレイアウトとして機能するため、頻繁に変更される単色のラフカットです。 これは、利害関係者の期待を抑えるのに役立ちます。

ワイヤーフレームの場合、設計者がさまざまなデザインを効率的に作成できるため、使いやすさ、納期の速さ、および変更が不可欠です。

勝者：Axure

Axureは、ソフトウェアのインストール直後にワイヤーフレーミング用のコンポーネントが事前にパッケージ化されているため、ここで勝利を収めます。 SketchとFigmaにはワイヤーフレームを作成するためのツールがありますが、ワイヤーフレームコンポーネントを描画するか、それらを含むファイルをダウンロードする必要があります。 いずれの場合も、Axureコンポーネントのようにドラッグアンドドロップするには、シンボル（Sketch）またはコンポーネント（Figma）ライブラリに統合する必要があります。

Axureには、忠実度の低い成果物を作成するための多くのサードパーティライブラリがあり、Sketchにはダウンロード可能な無料および有料のファイルが多数ありますが、Figmaの公開リソースはまだ始まったばかりです。

設計者がワイヤーフレームコンポーネントライブラリを作成すると、3つのツールが均等に一致します。 Axureのコンポーネントはパラメトリックで調整可能なプロパティを備えていますが、静的なワイヤーフレームの場合、ライブラリが利用可能な場合、3つのツールすべてが適切に機能することに注意してください。

タスク：忠実度の高い成果物の作成

忠実度の高い成果物は、忠実度の低いワイヤーフレームから収集されたフィードバックと学習から生まれます。 これらは、アプリの色、視覚的な詳細、および提案された最終的なデザインを示すモックアップです。

忠実度が高いということは、プレゼンテーションの準備ができており、クライアント、社内の幹部、およびその他の設計者以外の利害関係者に表示される画面のモックアップも意味します。 このタスクに優れた設計ツールには、最終的な顧客向けの成果物の表現を作成するために必要な洗練を追加するために必要なすべての機能があります。

これには、オブジェクトの塗りと線の制御、シャドウやグラデーションの塗りなどの効果の追加、アートを簡単に消化できる形式（png、pdf、jpg）へのエクスポートが含まれます。

勝者：フィグマ

SketchとFigmaには、忠実度の高いモックアップを作成できるほぼ同じツールセットがありますが、Figmaのインタラクションモデルはより洗練されており、ツールは最初から使いやすくなっています。 どちらのツールも、Join、Intersect、Union、Subtractなどの高度な編集およびブールコマンドに簡単にアクセスできます。 Sketchのプラグインサポートにより、サードパーティが追加機能を作成できますが、これらのツールはインストール直後は利用できません。

3つのツールすべてにカスタムオブジェクトの作成を可能にする機能がありますが、Axureではコマンドへのアクセスがやや困難になっています。 上記の編集はツールバーでは使用できません。 複数のオブジェクトが選択されている場合にのみ、コンテキストメニューからアクセスできます。

さらに、Figmaのベクターネットワークにより、ラインツールの操作が簡単になります。

タスク：インタラクティブなプロトタイプの作成

インタラクティブなプロトタイプは、紙のプロトタイプのように粗雑なものでも、新しい機能を探索するために変更された既存のアプリの分岐バージョンのように詳細なものでもかまいません。 通常、インタラクティブプロトタイプを使用すると、ユーザーは画面間を移動したり、メニューやリストなどの機能を使用したりできます。

多くのデザイナーにとって、作品を発表するときは、基本的なインタラクティブなスライドショーで十分です。 これは特にモバイルアプリに当てはまります。単純なトランジションは、デザインを説明するのに十分なデバイスの相互作用を提供するからです。

Figmaのプロトタイピングモデルは十分に統合されており、使いやすく、リアルタイムのクラウドベースのアプリであるため、ファイルが更新されたときにHTMLページを更新する必要はありません。

時折、利害関係者は、設計のスケーラビリティをテストするために、ライブデータ接続で実際のデータを含むプロトタイプをロードすることを望んでいますが、設計者の大多数は現在、複雑なプロトタイプをほとんど必要としません。

勝者：フィグマ

SketchとFigmaはどちらも、「オブジェクトからアートボードへ」のリンクと限られた一連のトランジションを使用した単純なプロトタイピングをサポートしています。 プラグインはSketchのシンプルなプロトタイピング機能を強化するのに役立ちますが、プロトタイプに堅牢なインタラクションモデルを提供する場合、Axureが最も強力です。

タスク：設計システムの作成

デザインシステムは、UXデザインドメインでは比較的新しいものですが、何十年も前から存在しています。 これらには、チームが共同作業を行い、より良い意思決定を行えるようにする共有設計言語、コンポーネント、リソース、およびガイドラインが含まれています。 設計システムライブラリは通常、Webサイトとして実装され、会社全体の製品の信頼できる唯一の情報源として機能します。

勝者：フィグマ

コンポーネントライブラリはどのプログラムにも組み込むことができますが、設計者がスイッチを切り替えて、実行可能なコンポーネントライブラリを最初から作成することはできません。 Axureは、カスタムコンポーネントを含むHTMLページを生成できますが、単一のコンポーネントをクエリして、色の値、サイズ、およびその他のプロパティを見つける方法はありません。

これらのツールのいずれかを使用して設計システムを構築することは、依然として手動プロセスです。 ただし、Sketch用のプラグイン（Googleが最近リリースしたマテリアルデザインプラグインなど）と、Figma用の作品には少なくとも1つのサードパーティツールがあります。

コラボレーションは優れた設計システムの中心であるため、Figmaが勝利を収めます。 いくつかの分野（設計、開発、品質、コンテンツ）の会社の従業員は、設計システムライブラリにアクセスする必要があり、多くの従業員が共有ライブラリに同期する設計コンポーネントファイルに追加します。 Figmaは、ライセンス所有者だけでなく、誰でも使用できるため、共有ファイルに簡単にアクセスして追加できます。

タスク：開発への提供

UIデザイナーがインターフェースの作成を終えたら、プロジェクトを完了するために、デザインファイルを開発者に渡すのは彼らの責任です。 しかし、ハンドオフは単なるデータ交換以上のものであり、設計者が作業の論理的根拠を伝え、それによって開発者がフォームと機能を結び付けるのを支援する機会です。

SketchおよびFigmaファイルからのレッドライニングおよびオブジェクト情報クエリを容易にするための数十のハンドオフメソッドとさらに多くのサードパーティツールがあります（AvocodeおよびZeplinを参照）。 ただし、この比較では、プラグインや他のアプリで補完される前の元の設計ツールを調べています。

興味深いことに、公開されたコンポーネントライブラリは開発者にとって唯一の正しい情報源であるため、UXデザインシステムの台頭により、この形式のハンドオフの必要性が軽減されています。 成果物やUXの相談を待たずに、コンポーネントの正確なレイアウトと設計情報を抽出できます。

また、設計ファイル内のオブジェクトから情報を取得することは、設計システムの構築中に役立つ可能性があるため、CSSの一部のビューは良いことです。

Sketchでは、オブジェクトを選択し、コンテキストメニューを使用して「CSS属性をコピー」できますが、理想的ではありません。 Figmaは、プロパティパネルに、選択したオブジェクトのCSS、iOS、またはAndroidの値を生成する「コード」タブを提供することで公正な仕事をします（開発者はこの機能を表示専用モードまたはプロトタイプモードで使用できます）。

勝者：Axure

現時点では、Axureだけが、完全に公開可能なHTMLファイル、Word仕様、さらにはスプレッドシートにインポートするCSV形式のレポートを生成する強力な「ジェネレーター」を備えています。 結果はデザインライブラリではありませんが、アプリは有用な開発者ハンドオフ資料を提供します。

全体的なデザインツールの勝者：Figma

数字で見ると、Figmaは、主にそのコラボレーションの性質とクロスプラットフォームの可用性のために、この比較の勝者です。 フロントエンドの開発と設計全体でより緊密な統合を要求する設計システムを使用するチームが増えるにつれ、Figmaのリアルタイムコラボレーションとライブ埋め込み機能は大きな利点をもたらします。 欠点として、Figmaは、セキュリティ上の理由から企業での使用が禁止されている可能性のあるオンラインアプリケーションです。

Axureは、構築済みのコンポーネント、強力なインタラクティブなプロトタイピング機能、およびドキュメント生成を備えた、箱から出してすぐに使用できる強度により、2位になります。 企業が特定の機能がどのように動作するかを確認するために実際のデータストアにアクセスする必要があるまれなケースでは、Axureが最良または唯一のオプションです。

Sketchが最後に登場したかもしれませんが、ユーザーがツールで利用できる多くのプラグインとリソースを利用すると、非常に強力で、デザイングループのニーズに合わせて調整できます。 ここでの注意点は、Sketchを更新するたびにプラグインを更新する必要があることです。また、Mac専用アプリケーションとして、WindowsPCを使用している企業はプラグインを使用できません。

この記事でレビューした3つのツールはすべて、それ自体が強力です。 ただし、それぞれに制限があります。 ワークフローのニーズを特定し、各プログラムの長所と短所を比較検討し、適切な選択を行うのは、個々の設計者とチームの責任です。

Toptal Designブログでさらに読む：

• MVPを捨て、Minimum Viable Prototypes（MVPr）を採用
• デザインツールとしてのFigmaの力
• スケッチスタイルガイド、ライブラリ、およびUIキットを作成する方法
• デザインシステムとパターンを理解する
• ワイヤーフレームの死。 ストレートからハイフィデリティまで！