オンラインのスタイルガイドを手軽に作成できるzeroheightと連携するAdobe XDプラグイン

デザインシステムは、ユーザー体験の世界における時代の寵児となっています。Mediumでも、カンファレンスでも、ツイートでも、誰もがその話題について語り、大手ブランドは独自のデザインシステムを実装しています。そして、この状況には十分な理由があります。適切に実装されたデザインシステムは、デザインチームのコラボレーションを改善して、製品の公開までにかかる時間を短縮し、ユーザー体験とブランドの一貫性の向上に貢献することができます。しかし、自分のチームや会社のためにデザインシステムを実装しようと考え始めると、ひるんでしまう人も多いでしょう。いったいどこからどのように始めればよいのでしょうか?

zeroheightの創設者であるジェローム・デ・ラファルグの意見では、すべてはドキュメントから始まります。成功するデザインシステムをつくり上げるには、スタイルガイドを文書化するだけではまったく不十分ですが、ドキュメントは重要な基盤として、デザインシステムを成功するために必要な、3つの重要な段階を進むことを可能にします。最初の段階は「誕生」、すなわちステークホルダーを説得し、デザインシステムのための資金を集めます。次の段階は「導入」で、人々がシステムを使い、貢献するフェーズです。最後の段階は「成熟」で、システムが持続して使われるよう管理します。

zeroheightは、Redbull、Staples、The Guardianを始めとする数百の顧客を持っています。zeroheightが提供するオンラインの編集環境は、唯一のドキュメントの参照場所として機能するサイトを、チームが素早く作成し、維持するために利用できます。プラグインを介してAdobe XDと同期して、シームレスにドキュメント制作をすることができます。

デザインシステムに関わる作業を大幅に効率化

XD用のzeroheightプラグインは、昨年8月の新しいXDプラグインパネルの公開と同時期に公開されました。以来、XDとzeroheightをデザインシステムの構築に使おうとしていたユーザーからの注目を急速に集めてきています。素早く容易に開始できる点が特徴で、すでにXDでUIコンポーネントをデザイン済みのユーザーの中には、ブランディングされたデザインシステムのサイトをわずか数時間で立ち上げることができた人もいます。これは、カスタムのWebサイトを構築して維持する労力や、汎用ドキュメントツールを使用することによる制限を考えると、極めて重要な違いです。構築済みのサイトに興味があれば、zeroheightのショーケースページをご覧ください。

zeroheightとの統合により、Adobe XDユーザーは最新の情報を提供する美しいスタイルガイドを容易に作成し、すべてのデザインシステムに関するリソースをひとつの場所にドキュメント化してまとめることが可能です。その際の大まかな手順を3つのステップに分けて説明します。

Step 1: XDコンポーネントとスタイルをzerheightにアップロードする

まずzeroheightのサイトから無償の試用版にサインアップして、次にzeroheight XDプラグインをダウンロードします。XDプラグインをインストールして、ログインすれば、コンポーネントとスタイルをzeroheightにアップロードすることができます。

Step 2: XDからシームレスにzeroheightのスタイルガイドを更新する

XDのコンテンツを元にしたスタイルガイドの作成は、短時間で簡単に完了できるでしょう。また、オンラインのドキュメントをインラインで編集したり、希望するレイアウトになるようにページ内の要素を移動するのも容易です。XDでコンポーネントやスタイルを変更した場合は、再びアップロードするだけで、zeroheightのドキュメントサイトが自動的に更新されます。

Step 3: ブランディングして、スタイルガイドをチームと共有する

ブランドアセットをデザインシステムサイトに適用するのは簡単です。美しく仕上げたドキュメントサイトをチームメンバーやステークホルダーと共有すれば、デザインシステムについての理解を早めるだけでなく、そのサイトを持つことの価値を伝えるのにも役立ちます。

もしこれらの利点に興味があって、チームのためのサイトを立ち上げたいと考えているなら、zeroheightを使えば、すぐに着手できます。

XDでzeroheightを使用する方法については、zeroheightのXD入門ガイド（zeroheight’s XD getting started guide – 英文）を参照してください。上の画像で使われているデモを試してみたい方は、デザインエージェンシーImpekableのDashboard UI Kitをダウンロードしてお使いください。XDとzerheightを使用して、独自のデザインシステムサイトを楽しく作成しましょう。

この記事はzeroheight for Adobe XD: Build Design System Documentation Sites in Just a Few Hours（著者:Minson Chen）の抄訳です