Adobe XDを使ったデザインシステムの構築と管理に役立つ5つのプラグイン

今日では、主要なブランド、企業、そして組織が、複数のプラットフォームに向けた体験をデザインしています。Webサイトに始まり、モバイルアプリからスマートウォッチまで、さまざまなデジタル製品が普及するにつれ、一貫したブランドアイデンティティを維持しながら、快適な顧客体験を迅速につくり出す一元化されたスケーラブルな手段の必要性が高まっています。デザインシステムは、ブランドの一貫性、ワークフローの効率化、製品チーム内での円滑なコラボレーションという皆に共有された目標を達成する手段として注目を集めるようになりました。様々なチャネルを駆使するデジタル環境では、市場に対応するまでの時間が重要になるため、製品チームは開発速度を向上させるために、より短期間で回せるデザインワークフローを必要としています。

Adobe XDを使用すると、アセットの共有ライブラリをつくり、デザインシステムのための再利用可能なコンポーネントを作成し、さまざまなデザインプロジェクトから利用することができます。クラウドドキュメント、リンクされたアセット、ドキュメントの履歴などの機能を使用することで、単一のソースを保持しながらコラボレーションして、迅速かつ効率的なプロセスを実現できます。

もちろん、デザインシステムのワークフローがXDで簡潔するとは限りません。ですがXDには、デザインシステムの作成、実装、管理に役立つ主要ツールと連携するプラグインがあります。この記事では、オススメのプラグインをいくつか紹介します。

zeroheight

zeroheightは、デザインシステム用のサイトを構築し、管理するためのオンラインエディタで、XDで作成されたアセットおよびコンポーネントを使ってドキュメントの作成を行えます。デザイナー、コピーライター、開発者を含む製品チーム向けに設計されており、デザインドキュメントの唯一の参照場所として機能します。XD用のzeroheightプラグインを使用すると、コンポーネントやスタイルを簡単にアップロードして整理することができるため、zeroheightサイトのドキュメントを最新の状態に保つことは容易です。わずか数時間でデザインシステムのドキュメントサイトを立ち上げることができるでしょう。その方法を簡単に説明した記事もご覧ください。

Frontify

Frontifyは、ユーザーフレンドリーで包括的なブランド管理プラットフォームです。ブランドアセットの集中管理により、利用者はブランドの一貫性、効率性、貢献を最大化することができます。Adobe XD用のFrontifyプラグインを使用すると、Frontifyが管理する最新のデジタルブランドアセットをAdobe XDに直接リンクして、色、タイポグラフィ、アイコン、イメージ、ロゴにシームレスにアクセスできます。

Zeplin

Zeplinは、開発者向けに構築された、デザインの共有、整理、コラボレーションのためのワークスペースです。

Zeplinのスタイルガイドを使用すると、デザインシステムの色、文字スタイル、およびコンポーネントを一元管理できます。Zeplin 3.0では、エンジニアはUIコンポーネントをコードベースからデザイン上に表示することができ、ドキュメントへのリンクも提供されるため、チーム全体の再利用が促進されます。

Toolabs

Toolabs DSMプラグインは、ステートを持ったデザインシステムマネージャで、デザイントークンをAdobe XDドキュメントのデザイン要素にリンクできます。デザイントークンを作成し、デザインシステムにステート（カラーテーマ、言語、バージョンなど）を定義すると、ステートのバリエーションを利用することで、デザインにテーマを適用できるようになります。

Superposition

Superpositionは、Webサイトからデザイントークンを抽出できる無料のデスクトップアプリで、与えられたWebサイトのURLから、色、タイポグラフィ、スペースなどを抽出します。

XDのプラグインパネル内からSuperpositionのデザイントークンを直接使用することができて、任意のオブジェクトを選択すると、該当するトークンが表示され、それをクリックすると、選択したオブジェクトに自動的に適用されます。Webサイトやアプリの一部または全体に、一貫した体験を実現するために使用できます。

デザインシステムは、幅広いデジタルプラットフォームやチャネルに対応するためにワークフローを拡張しようとするチームにとって、重要な要素になりました。この記事で紹介したプラグインは、XDを使用したデザインシステムの立ち上げを容易にし、効率的なワークフローとブランドの一貫性の確立に役立ちます。

これらのプラグインを含め、デザインシステムのためのコレクションをXDのプラグインマネージャーに追加しました。

XDを既にお持ちの場合は、ここをクリックすると、新しいコレクションの表示とプラグインのダウンロードができます。Zeplinがインストールされていれば、XDのファイルメニューからZeplinのプロジェクトに書き出せます。

まだXDをインストールしていない場合は、ダウンロードして無料で試すことができます。

この記事は5 XD Plugins to Help You Create, Distribute, and Manage a Design System（著者:Minson Chen）の抄訳です