2人のヘビー級の候補者が、最も人気のあるデザインツールであるAdobeXDとSketchのトップの座を獲得するために戦い続けています。どのツールがそれらすべてを支配しますか？答えは簡単ではありません。どちらも近年目覚ましい進歩を遂げているため、機能、パフォーマンス、使いやすさに関する包括的な設計ツールの比較は遅れています。

スケッチはXDのデビューの何年も前にすでにありました。正確には6つです。幅広い熱心なファンベースがあり、機能が豊富で、広範なプラグインエコシステムがありました。 しかし、Sketchにはアキレス腱がありました。Macでしか機能しませんでした。

2016年、アドビは熱を上げ、争いに飛び込みました。 SketchをXDの同様の機能と一致させただけでなく、Windowsでも利用できるようにしました。 世界のデスクトップコンピュータの約78％がWindowsで実行されているため、これは大胆で競争力のある動きでした。

Adobe XDは、CreativeSuiteラインナップの大きな穴も埋めました。花火にはゴールデンハンドシェイクが与えられ、XDが提供する機能はIllustratorやPhotoshopなどの他のアプリケーションでは利用できませんでした。 XDは、Sketchと同じ軽量のベクターベースのデザインツールであるだけでなく、Adobe CreativeSuiteエコシステムの他の部分との統合も優れています。

ただし、設計者の間では、どちらのツールが優れているかについての意見は依然として異なります。 両方のツールに機能が急速に追加され、しばしば追いつき、頻繁にお互いを模倣するため、戦いは最近全面戦争に成長しました。

AdobeXDとSketchの次の機能を詳しく見てみましょう。

• ユーザーインターフェース
• シンボル/マスターコンポーネントの操作
• アセットおよびコンポーネントパネル
• レイヤーとコンポーネントのスケーリング
• 要素の複製と配布
• レスポンシブデザインツール
• プラグイン
• プロトタイピング
• チームコラボレーション
• 開発者ハンドオフ
• バージョン管理と共有ライブラリ
• ダークモード

ユーザーインターフェース

SketchとAdobeXDは同様のインターフェイスを共有していますが、 SketchのUIはXDよりも優れています 。 XDはIllustratorとPhotoshopのスリムな組み合わせのように感じますが、堅牢でプロフェッショナルなデザインツールのように感じます。

の重大な不便 Adobe XD それはそれが表示するということです 資産 パネルはデフォルトで開いています。 これは、ほとんどの設計者が期待するものではありません。 設計ドキュメントを開始するとき、ほとんどの設計者は レイヤー すぐにパネル-ではなく 資産 または プラグイン 。

➠直感的なインターフェイスのためにSketchに+1します。

シンボル/マスターコンポーネントの操作

再利用可能なデザインライブラリの「シンボル」は、SketchとAdobe XDの両方で使用できます（XDでは「マスターコンポーネント」と呼ばれます）。シンボルまたはマスターコンポーネントが更新されると、プロジェクト内のそのコンポーネントの他のすべてのインスタンスが更新を反映します。

ただし、Adobe XDとは対照的に、Sketchの スマートレイアウト このようなマスターコンポーネントを操作する場合、機能はより強力になります。これにより、柔軟性とワークフローが向上します。

に スケッチ 、特定のレイアウトをコンポーネントに割り当てることができます→コンポーネントをキャンバスにドラッグします→オーバーライドを使用してコンテンツをカスタマイズすると、コンポーネントは新しいコンテンツに基づいてサイズ変更されます。

➠シンボルのパフォーマンスが向上するため、スケッチに+1します。

アセットおよびコンポーネントパネル

SketchとAdobeXDは、いくつかの違いはあるものの、同様のアセット/コンポーネントパネルを共有しています。

アセットの場合、XDにはドロップダウンメニューがあり、デザイナーは「すべて」以外の特定のカテゴリのみを表示できます。設計者は、「グリッドビュー」と「リストビュー」を切り替えることもできます。これらのオプションにより、 XDのアセットパネル 大幅にユーザーフレンドリー。また、特定のカテゴリを表示するためのドロップダウンにより、将来的にカテゴリを追加するための柔軟性が高まります。

スケッチは柔軟性が低くなります。 3つのボタンでセグメント化されたコントロール（シンボル、テキストスタイル、およびカラースタイル用）の下にプロジェクトアセットを表示します。 Sketchを使用すると、コンポーネントは検索可能ですが、カテゴリ間では検索できません。 XDは、すべてのアセットのすべてのコンポーネントを検索することで、より適切に検索できます。

➠資産をより適切に管理するため、AdobeXDに+1します。

他のライブラリのマスターコンポーネントの使用

Sketchを使用すると、デザイナーは、ローカルまたはオンラインで共有されている多数のリンクされたライブラリからアートボードにマスターシンボルをすばやく簡単に追加できます。 Adobe XDでは、「リンクされたアセット」を「XDクラウド」のデザイン（コンポーネント、色、文字スタイル）に配置できますが、この厄介なワークフローのため、AdobeXDの柔軟性ははるかに低くなります。

➠マスターコンポーネントを操作するときのUXを向上させるためにSketchに+1します。

カラースタイルの編集

アセットライブラリに追加されると、AdobeXDは デザイナー カラースタイルを編集し、アートボード全体の色の変化をリアルタイムで確認します。 Sketchには、色をグローバルに編集するための回避策がありますが、AdobeXDほど直感的ではありません。

➠色のスタイルをより適切に編集するためのAdobeXDへの+1。

設計システムの設定

Sketchには、ビルド時にコンポーネントを整理するための優れた方法があります 設計システム （アイコン、ボタン、カラースタイル、テキストスタイルなど）。これらのアセットを作成して名前を付けるときにスラッシュ「/」を使用すると、アセットはコンポーネントパネルにグループ化され、挿入メニューに階層的に配置されます。これは、コンポーネントを論理的に整理するための優れた方法であり、 デザイナー 何百ものデザイン要素を操作します。

AdobeXDはこの柔軟性を提供していません。

➠デザインアセットを簡単に管理するためのスケッチへの+1。

レイヤーとコンポーネントのスケーリング

複数のコンポーネントを含むオブジェクトのスケーリングは、AdobeXDでは適切に処理されません。一般に、Sketchはこれをはるかにうまく処理します。たとえば、シンボルをスケーリングするときに、要素間の比例した間隔を適切に維持します。

さらに、Sketchには便利な機能があります スケールレイヤー 機能（ Command + K ）ここで、要素のグループは、スケーリングする原点を指定しながら、パーセンテージまたは数値を使用してスケーリングできます。 Sketchは選択したレイヤーのサイズを変更し、境界線の太さ、影のサイズ、半径などのスタイル属性は適切に拡大縮小されます。

Sketchのもう1つの便利な機能は、インスペクターの要素のサイズを数値またはパーセンテージで変更する機能です。 これは、 スケールレイヤー 上記のコマンド。パーセンテージまたは数字に次の文字を追加することにより— c / m、t、b、r -スケッチは、選択した要素をその原点から拡大縮小します。例えば、 ' 50％c 」は、選択した要素を中心から50％拡大縮小します。

• c / m：中心からのスケール
• t：上からスケール
• b：下からスケール
• r：右からスケール

注意 ：「左から拡大縮小」オプションは、Sketchのデフォルトの動作であるため、表示されていません。

Sketchでレイヤースケーリングがどのように機能するかを見る →

➠要素をスケーリングする際の多様性と精度を高めるために、スケッチに+1します。

要素の複製と配布

ザ・ グリッドを繰り返す Adobe XDは、要素のグループをそれらのオブジェクトを繰り返すグリッドに変換する便利な機能です。ほとんどの設計者は、XDを探索するときにおそらく数回試しましたが、設計者は何回使用しますか？そして残念ながら、 グリッドを繰り返す レイヤーにスナップしない、重大な欠点。

一方、Sketchを使用すると、 オプション キーを押しながらレイヤーをドラッグして複製します（ シフト キーもそれを制約します）。以下のこと、 コマンド+ D 複製間の正確な間隔を同じにして、要素を必要な回数繰り返します。

さらに、Sketchは次の方法で設計ワークフローをスピードアップします。 スマート配布 。これにより、設計者はグリッドの作成、間隔の調整、およびレイヤーの並べ替えをより細かく制御できます。多くの便利な小さなことは別として スマート配布 あります、それは魔法を持っています 「整頓された」 インスペクターのボタン。

アートボードにランダムにいくつかのオブジェクトを配置した後、クリックすることができます きちんとした ボタンをクリックすると、魔法のようにグリッド上に均等に分散されます。表示されるハンドルをドラッグするか（グループにカーソルを合わせたとき）、絶対精度の手動値を入力することで、間隔をさらに調整できます。

設計者がグリッド、ガイド、および配布に加えて役立つように、いくつかのSketchプラグインが作成されています。 スマート配布 。ここに3つあります：

レイヤーを配布する •• SketchDistributor •• 均等に配布されたガイド

javascriptで現在の日付と時刻を取得する方法

➠要素をより適切に複製および配布するためのスケッチへの+1。

レスポンシブデザインツール

AdobeXDとSketchはどちらも同様の自動応答機能を備えています。どちらも、要素をバウンディングボックスの特定の原点に固定しながら、要素の固定幅と高さを手動で制御できます。 Adobe XDには、要素とグループのサイズ変更を自動的に決定する巧妙な「レスポンシブサイズ変更」ツールもありますが、完全ではありません。

Sketchには、と呼ばれるスマートレスポンシブツールがあります スマートレイアウト 。設計者はレスポンシブコンポーネントを構築でき、コンテンツが調整されるたびに、コンポーネントが変更に対応できるため、柔軟性とワークフローが向上します。

と スマートレイアウト 、デザイナーは、テキストラベルの長さに関係なく、一貫した余白とパディングを維持しながら、自動的にサイズ変更するボタンを簡単に作成できます。スマートレイアウトはグループでも機能します。

Adobe XDは最近「レスポンシブサイズ変更」機能を実装しましたが、それでもSketchに遅れをとっています。

➠+ 1to Sketchにより、迅速で簡単なレスポンシブデザイン機能を実現します。

プラグイン

豊富なデジタルデザインツールの中で、Sketchは最も堅牢なツールの1つです。 プラグインエコシステム 。何千ものプラグインを持つことはSketchの最も魅力的な機能の1つであり、開発者はSketchの機能を拡張する便利なプラグインを継続的に作成しています。

Adobe XDのプラグインのコレクションは、比較すると見劣りします。同じ開発者がSketchプラグインのXDバージョンを作成したとしても、XDはプラグインを広く採用するには新しすぎます。さらに、多くの新しいXDプラグインは、設計者がそれらを受け入れるのに十分な価値を追加していません。

➠広範なプラグインエコシステムのSketchに+1。

プロトタイピング

と 自己アニメーション 、AdobeXDはプロトタイピングの準備を整えました。 「インテリジェント」な自動アニメーション機能を使用して、 デザイナー プロトタイプで見栄えの良いトランジションを作成して、画面間のコンテンツの動きを視覚化できます。 XDは、トリガーに応答してサウンドエフェクトやその他のオーディオファイルを再生する新しい「アクション」を使用して、プロトタイプにサウンドを追加することもできます。

Sketchには、プロトタイピング用に画面間にいくつかの基本的なワイプがありますが、マイクロインタラクションでは同じ流動性を提供しません。 Sketchがいつそれらを追加するかは定かではありません。焦点は、次のような他の価値ある機能を組み込むことにあるようです。 アシスタント スケッチに。

Sketchのメーカーは、非常に詳細なマイクロインタラクションを備えたプロトタイプを作成するためのツールが他にもたくさんあると感じている可能性があります。 ProtoPie 。強力で、Sketch、Figma、AdobeXDからデザインを簡単にインポートできます。

SketchとAdobeXDはどちらも、モバイルでプロトタイプをプレビューするためのアプリを提供するという点で首を絞めています。 スケッチミラー そして Adobe XD 。アプリはプル プロトタイプ USBケーブルまたはwifiを介してデスクトップからモバイル画面に設計されています。

➠プロトタイプを視覚化するための自動アニメーション遷移用のAdobeXDへの+1。

チームコラボレーション

どちらのツールもチームコラボレーションを提供します。スケッチは持っています チームのためのスケッチ 共有クラウドワークスペースを使用するデザイナーがアイデアを共有し、同期を保つことができる場所 共有クラウドライブラリ 、他のチームプロジェクトの進捗状況を確認し、設計に関するフィードバックをすべて1か所に残します。

さらに、Sketchアプリにアクセスできない招待された関係者や共同編集者は、ブラウザでデザインを表示、検査、コメントすることができます。開発者ハンドオフもSketchに統合されています チームのためのスケッチ 。

この記事の執筆時点で、Adobe XDのプレミアムバージョンを使用すると、チームはCreative Cloudを介してXDファイルを他のデザイナー（オンラインおよびオフライン）と共同編集し、レビュー用にファイルを共有し、開発者に仕様を簡単に渡すことができます。これらの機能はすべて現在 ベータ版 。

➠簡単なチームコラボレーションのためのスケッチへの+1。

開発者ハンドオフ

デザインを開発者に渡すことは重要なステップであり、AdobeXDとSketchの両方が同じようにうまく処理します。オンラインプラットフォームを介してプロジェクトを共有することで、設計者は仕様を生成し、開発者と協力して、設計をWebサイトやアプリに変えることができます。

➠AdobeXDへの+1そしてスケッチに+1開発者ハンドオフ用。

バージョン管理と共有ライブラリ

同じプロジェクトで他の設計者と作業する場合は、設計ファイルのバージョンを制御することが不可欠です。また、チームのコラボレーションと設計フィードバックをより効率的に促進します。 Sketchは最近、これらの機能をに統合しました チームのためのスケッチ 。と Sketch Cloud 、設計者は設計ファイルを共有でき、 ライブラリ これにより、分散したチームの設計システムでの作業が容易になります。

Adobe XDには、Adobe CreativeCloudを使用したクラウドファイルバージョン管理システムもあります。 Creative Cloud WebサイトはXDファイルのバージョンを保持していますが、以前のバージョンに戻すことはできません。以前のバージョンに戻すには、デザイナーはCreative CloudWebサイトからAdobeXDでファイルを開き、コンテンツをコピーして現在のドキュメントに貼り付ける必要があります。名前やブックマークがない限り、ファイルバージョンも30日後に自動的に削除されます。言い換えれば、それはシームレスなプロセスではありません。

Sketchと同様に、XDを使用すると、チームはCreativeCloudライブラリを使用して共有アセットを簡単に使用できます。設計者は、これらのライブラリから色、文字スタイル、およびグラフィックをXDに取り込むことができます。

➠クラウドでのファイルのバージョン管理と共有ライブラリを簡単にするためのSketchへの+1。

ダークモード

見栄えが良く、デザインを際立たせます

多くのデザイナーは、反射やまぶしさなしに自分の作品を画面に表示するために、薄暗い部屋で作業することを好みます。ダークモードのUIは、その環境にうまく適合します。ほぼすべての色に優れたコントラストを提供し、視覚的なコンテンツをより印象的にします。

ダークモードは見栄えが良いだけでなく、「」を最小限に抑えることが知られています。 デジタル眼精疲労 。」それに直面しましょう、デザイナーは一日のほとんどの間スクリーンを見つめます。デジタル眼精疲労は、何百万人もの人々に影響を与える一般的な状態です。コンピュータの過度の使用から明るい光への定期的な露出まで、あらゆるものが原因で、頭痛、首の痛み、かすみ目、火傷/刺痛を引き起こす可能性があります。

アクセントとハイライトの色

Sketchは、Sketch 52（2018年10月）以降、ダークモードをサポートしています。また、macOSMojaveのグローバルをサポートします アクセント そして ハイライト 色の好み。レイヤーパネル、インスペクター、およびアプリの他の場所で強調表示されている選択されたオプションは、システム環境設定と一致します。

ダークモードは、MacOSでも、AdobeXDでは使用できません。

➠ダークモードのスケッチに+1。

Adobe XD vsSketch対決の勝者は…Sketch

Sketchは、Adobe XDを大幅に上回り、デザインツールの優位性をめぐる戦いに勝利しました。

一部のシナリオでは、選択は明白です。SketchはWindowsでは使用できません。 Adobe Creative Cloudサブスクライバーにとっての注目すべき利点は、XDの「スタータープラン」が無料で提供されることです。ただし、かなりの制限があります。

webpackにはnode_modulesが含まれます

Sketchの多様性により、macOSの設計者はXDではなくSketchを選択する必要があります。そのインターフェイス、プラグイン、コラボレーション機能、レスポンシブデザインツール、再利用可能なシンボル、共有ライブラリ、およびその他の便利な機能は、AdobeXDの機能よりも優れています。

注目に値する デザインファイルをXDからSketchに移動することはできません 。 XDはSketchファイルを開くことができるため、Sketch（およびPhotoshopまたはIllustrator）からXDへの移行が簡単です。次のようなSketchのみのプラグインを使用すると、いくつかの問題が発生する可能性があります。 概要 または InVisionクラフト 、しかし、これは少しクリーンアップすることで回避できます。

一部のデザイナーはAdobeXDを気に入っています 自己アニメーション 特徴。これは、プロトタイプの見栄えを良くする魅力的な機能です。ただし、設計者はそれが 1 ファンシー属性。 SketchとXDの利点を考えると、トレードオフはそれだけの価値はありません。多くの洗練された プロトタイピングツール Sketchとシームレスに連携するものが利用可能です。

戦いはまだ終わっていません。 今後数年間は、AdobeXDとSketchの間で激しい全面戦争が発生するはずです。 最終的に、両方の設計ツールに機能が追加されるとメリットが得られるのは設計者です。それは彼らの日常の仕事をずっと楽にしてくれるでしょう、そしてそれは楽しみです。

---

ご意見をお聞かせください。以下にあなたの考え、コメント、フィードバックを残してください。

•••

ApeeScapeデザインブログの詳細：

• 正確なデザイン– Adob​​eXDレビュー
• マルチモーダルデザインの探索– Adob​​eXDチュートリアル
• フォームと機能–トップワイヤーフレームツールのガイド
• これらのトップUXツールであなたのクラフトをマスターする
• 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例

基本を理解する

Adobe XDはSketchよりも優れていますか？

どちらのデザインツールが優れているかについては、AdobeXDとSketchの議論が続いています。機能を比較する場合、物事は相対的ですが、多くの点で、特にデザイナーがmacOSで作業している場合は、Sketchでの作業の方が優れています。ただし、SketchはWindowsで実行されないため、この場合、AdobeXDを使用するのが当然の選択です。

Adobe XDはSketchファイルを開くことができますか？

Adobe XDは、Sketchファイルを開いてXDファイルに変換できます。 Sketchファイルを変換すると、XDで編集可能になり、デザイナーは他のAdobeXDファイルと同じように操作できます。ただし、XDで開くことができるのはSketchバージョン43以降のバージョンを使用して作成されたSketchファイルのみです。

Adobe XDはSketchとInVisionを殺しますか？

XDがSketchやInVisionやFigmaのような他のツールを殺すかどうかは議論の余地があります。各設計ツールには長所と短所があり、一部の設計者は異なるツールを好みます。決定的な要因の1つは、ツールが実行されているOS（macOSとWindows）、またはスタンドアロンアプリとWebベースのツールのどちらであるかです。

Adobe XDは使いやすいですか？

ほとんどの設計者は、以前にAdobeアプリケーションを使用したことがあります。彼らはUIに精通しています。左側のツールパネル、中央のメインキャンバス、右側のレイヤーなどです。学習曲線はわずかであり、主に複雑な設計システムを組み込み、マスターコンポーネントのオーバーライドを理解することで発生します。

Adobe XDまたはSketchを学ぶ必要がありますか？

macOSで設計する場合は、SketchとAdobeXDの学習に時間を費やすことを強くお勧めします。 Sketchには、幅広い専用のファンベースがあり、機能が豊富で、広範なプラグインエコシステムがあります。これはmacOSの事実上の設計ツールであり、設計者はほとんどの設計作業でこのツールに精通している必要があります。

Sketchは習得が難しいですか？

スケッチは学ぶのが難しいことではありません。ほとんどの設計者は、Sketchの前にさまざまなデジタル設計ツールを使用しており、インターフェイスは非常に使い慣れています。デザインを始めたばかりの人にとって、アートボード、レイヤー、ツールに対するSketchのメタファーは、理解しやすくなり、すぐに使い始めることができます。