設計システム+スケッチ— UIコンポーネントライブラリの準備を開始する方法

最後に、設計システムが業界標準になりました。これが、プロジェクトのためにそれらを準備する方法を知ることが重要である理由です。あなたが私のような人で、主にSketchでデジタルデザインを作成する場合、このストーリーには、デザインシステム用のUIコンポーネントを準備するための多くのヒントが含まれています。

注意:
私は物事を明確にしておくのが好きです。 UXMisfit.comの作成者としての私の優先事項は、UXについて少し異なる見解を与え、時間を節約するツールを準備することでデザイナーを支援することです。

UXMisfitツールキットは、主にSketch用に準備されています。ユーザーフローを効率的に準備したり、アプリアイコンの品質を向上させるためのものを見つけることができます。

Design System Kitもあります— Primeと呼ばれます。これには、Sketch用の最新のUIデザインシステムよりも多くのものが含まれています。カスタマイズ可能な数百の要素を除き、イラストレーションシステム、Web UIキット、チャート、メインデバイスのベクターテンプレートが含まれています。

Prime Design System Kitに関係なく、ユーザーが自分でUIコンポーネントを準備することを決めた場合でも、ストーリーに記載されているすべてのヒントは機能します。

最初は混乱がありました…

新しい製品の開始時にDesign Systemのコンポーネントの準備を開始するか、既存の数年前のプロジェクトに含めるかどうかは関係ありません。システムを作成するというアイデアを他の人(デザイナーだけでなく)に納得させる必要があるため、初めてそれを作成する場合、それは常に難しい決定です。さまざまな人々をデザインシステムにもっと熱狂させる方法を考えてみましょう。

ビジネスピープル&マネジメント-地面から大きなものを作成する時間とコストが怖いかもしれません(もちろん、プロセスをスピードアップする方法があります)。明らかに、初期コストは高いかもしれませんが、将来的には新しいコンポーネントの作成の価格がはるかに低くなり、実装が速くなり、製品の品質がはるかに良くなることを納得させる必要があります。

開発者—設計システムのおかげで、コンポーネントを事前に準備し、複数のページでインスタンスを使用できます。設計の一貫性を維持することははるかに簡単です。開発者は、この青いボタンに太字のフォントを使用するか、影を使用するかを考える必要はありません。正しいコンポーネント(プライマリボタン)を使用するだけです。

QA —テスターに​​、真実の単一のソースを受け取ることを示します。このおかげで、何かが正しく行われていれば間違いありません。

OK、チームの準備ができたら、マグカップを手に取り、Sketchを起動しましょう。

既存のプロジェクトをお持ちですか?インベントリを作成します。

現在のプロジェクトに何らかのデザインシステムまたは独自のUIキットを準備しなかった場合、最初のステップは、既存のすべての要素をチェックすることです。おそらく少し異なる要素の複数のインスタンスが見つかるでしょうが、これは修正する必要があります。

既存のDesign System Kitを使用すると、コンポーネントライブラリに必要なほぼすべての要素のリストがすぐに取得できます。さらに、それらはすでにシンボルとして分類されています。ソリューションの要素と一致するように既存の要素を調整することができ、すぐに使用できるはずです。

ライブラリを最初から作成する場合は、リストまたはスプレッドシートを最初に準備することをお勧めします。これは、適切な構造を確立するのに役立ちます。適切なドキュメントアーキテクチャを開発するのは難しいかもしれませんが、後の作業をスピードアップするためにそれを行う価値があります。

しかし…スケッチライブラリは設計システムではありませんか?

これはそれほど明白ではないように聞こえるかもしれませんが、正しいです。ブラッド・フロストに同意します。スケッチライブラリは設計システムではありませんが、次のことも覚えています。それらは基本的な部分です。

多くのライブラリは、設計システムの最初の火付け役です。それらから生体システムを準備する方法もありますが、これについては次の章で説明します。

設計システムは、UIコンポーネント以上のものです。また、モーションのガイドライン、コンテンツ戦略の原則、コピーライティングのスタイル、最終的に実装されているコンポーネントを含める必要があります。特定のプラットフォームですぐに使用できます。

最終的に、これらはすべて、スケッチなどの設計ツールで作成されたコンポーネントから始まります。キットは設計システムそのものではありませんが、これらのライブラリはシステムの構築に役立つことを忘れないでください。

設計システム用のUIコンポーネントライブラリの構築

ごく小さな粒子から大きな生物やテンプレートまで、システムのコンポーネントを準備する方法を見てみましょう。アトミックデザインの哲学は、頻繁に使用して将来拡張する必要があるライブラリを準備するときに非常に役立ちます。

粒子

アトミックデザインといえば。基本的なUIコンポーネントを作成する前に、パーティクルを確立する必要があります。

すべてのブランドが独自のパレットを持っているため、色から始めるのは良いことです。適切な命名規則を確立することを忘れないでください。どのトーンがプライマリー、またはセカンダリーで、成功、警告、またはエラー要素のものであるかを指摘するのは良いことです。システムに「青」または「紫」だけを含めないでください。すべての色に意味があるため、これは重要です。適切な命名により、チームは色の目的を認識できます。

ヒント:塗りつぶしと境界線のスタイルのカスタマイズを最適化するには。塗りつぶしのみを含む共有スタイルでシェイプレイヤーを作成し、境界線で共有スタイルのみを含むまったく同じ位置とサイズで作成します。塗りつぶし、境界線は同じ色にする必要があります。近くまたは同じ位置にある不透明度のみが異なるスタイルを持つシェイプレイヤーも追加すると、スタイルを非常に高速に更新できます。シェイプレイヤーを選択し、2つのパラメーター(Sketchの右側パネルの塗りつぶしと境界線)を更新し、共有スタイルを更新するだけです。

Prime Design System Kitのカラー設定

グラデーションとオーバーレイ

グラデーションは新しい色だと言う人もいます。 DribbbleまたはBehanceを参照すると、多くのショットにそれらが含まれていることがわかります。そのため、デザインシステムライブラリにプロジェクト用のセットを用意する必要があります。

同じ状況がオーバーレイにもあります。一貫性を確保するために、システムでトーンと不透明度を定義する必要があります。

幸いなことに、Sketch 52以降では、色、グラデーションなどの特別なアートボードを準備する必要はありません。すべて共有レイヤースタイルとシンボルオーバーライドにあります。

タイポグラフィ

優れたタイポグラフィシステムは、より大きなデザインシステムの一部であるすべてのUIフレームワークの重要な部分です。キットを作成していたとき、この要素の準備には膨大な時間がかかりました。タイポグラフィを作成する場合は、少なくとも次のスタイルを含めることを忘れないでください。

  • 白い
  • グレー
  • プライマリ(システムのプライマリカラー)

また、持っているといいでしょう:

  • 成功
  • 警告
  • エラー

これらのカラーバリエーションは、後の作業で十分な柔軟性と一貫性を確保するのに役立ちます。

それでは、スケールとサイズについて見ていきましょう。タイポグラフィシステムに沿ってこのプロパティを定義できる複数のメソッドがあります。 AppleのPrimeを含め、最新のWebトレンド(巨大なタイトルなど)で拡大するものを刺激することにしました。この強力な基盤のおかげで、システムが機能し、タイポグラフィがモバイルおよびデスクトップで読みやすくなることを確信できます。

正確なサイズのタイポグラフィスケールを使用する場合は、https://type-scale.comが便利です。 Base Size、Scale Typeを選択して、サンプルフォントを設定し、設定を再生します。

すべてのサイズを定義するときは、少なくとも通常の太字オプションを追加します。次に、すべてのアイテムを2回複製します。それらを右、中央、左に揃えます。次に、すべてのオプションのテキストスタイルを作成します。

タイポグラフィの最高の使いやすさを確保するには、次の命名規則を使用します。

[サイズ名] / [アライメント] / [色] / [スタイル]

システムに複数のフォントファミリがある場合:

[サイズ名] / [フォントファミリー] / [アライメント] / [色] / [スタイル]

例えば:

タイトル/中央/黒/太字

Title / SF Pro / Center / Primary / Left

また、タイポグラフィシステムを個別のファイルに分割して、共有ライブラリにすることもできます。

ヒント:タイポグラフィのカスタマイズを最適化します。 1つの列にすべての要素を(単色設定から)配置します。異なる整列スタイル(左、中央、右)を含むレイヤーを互いの上に整列します。これにより、タイポグラフィを含む単一の列を取得できます。これにより、グループを選択して一緒に更新することにより、書体またはそのスタイルを変更できます。すべてのアライメントのパラメータを個別に準備するよりもはるかに高速で便利です。

Prime Design System Kitのタイポグラフィのセットアップ

グリッドとレイアウト

グリッドシステムを準備すると、一貫性が確保されるだけでなく、後の作業もスピードアップします。グリッドはユニバーサルにする必要があります。一般的な選択肢は、8ポイントグリッドを設定することです。これにより、デスクトップ、タブレット、およびモバイルでUIが適切に機能するようになります。

ヒント:Sketchの作業セットアップの大きなナッジ(Shift +矢印)をグリッドのサイズ(8ピクセルなど)に高速化するには。これにより、作業がはるかに高速になります。

アトミックUIコンポーネント

特定のシンボルの作成に飛び込む前に。必要なすべてのUIコンポーネントをリストするのに少し時間がかかります。このリストは非常に長い場合がありますが、UIフレームワークの構造を計画するのに役立ちます。

アトミックデザインシステムには、ボタン、入力/テキストフィールド、アイコン、チェックボックス、スイッチ、ラジオボタンなどのコンポーネントが含まれることは明らかですが、チャットのように初めてシステムを考えたときにそれほど明白ではない要素もありますバブル、チップ、または評価コンポーネント。

原子コンポーネントでさえ、内部にいくつかの粒子記号を持っていることがあります。たとえば、ボタンには、アイコン、シャドウ、シェイプ、コンポーネントの状態、またはテキスト(個別のシンボルを用意する場合)が含まれる場合があります。

これらのアトムは、将来のプロジェクトでUIコントロールのインスタンスになるだけでなく、スケッチライブラリでより複雑なものを作成するのにも役立ちます。

ヒント:Sketch 52以降、ボタンやアイコンの色に特別なマスクを用意する必要はありません。共有スタイルは、Symbol Override機能を使用してそれを処理します。これは、シンボルが少なく、より透明でエレガントなワークフローを意味します。

分子と生物

これで、すべてのアトミック要素が作成されました。これで、それらを分子に結合できます。

これは、基本的な入力、ボタン、アイコンをより複雑なものに結合できることを意味します。システムの検索テキストフィールドカードコンポーネントは、形状または画像、オーバーレイ、アイコン、ボタンまたはテキストスタイルから作成できます。

共有スタイルを使用してシンボルとレイヤーで一連の必須要素を使用すると、非常に迅速に更新されるシステムを構築できます。

アトミックデザインは設計システムに最適

UIキット

原子設計では、定義済みの原子、分子、生物の複雑なセットをテンプレートとして呼び出します。これらはソリューションの大きな部分(Webサイトセクションなど)であり、複数回使用される場合があります。

目的を考慮してテンプレートを設計するのは良いことです。それらを一般的にしすぎると、特定の場合に収まらない要素が生じる可能性があります。

Primeには、テンプレートの次のカテゴリが含まれています。

  • 勇者
  • 製品の特徴
  • ギャラリー
  • コマース
  • 注文
  • 価格
  • ニュース/ブログ
  • 接触
  • お客様の声
  • アカウント
  • ダッシュボード
  • フッター
  • その他(404および近日公開予定のページ用)。

独自のUIフレームワークを作成するときは、少なくともこれらのカテゴリでこれらの大きなテンプレートを準備することをお勧めします。

Many多くの設計システムに欠けている要素

多くのデザイナーは、UIコントロールライブラリの時点で、Design System Kit for Sketchを考えています。しかし、設計システムはそれだけではありません。スケッチは、他の多くのデジタル設計の目的にも使用できます。

キットを作成していたとき、ライブラリにはチャートとベクターデバイス(アウトライン、フラット、現実的なスタイル)も含める必要があることに気付きました。現代のウェブサイトやソリューションで頻繁に使用されているため、システム内で一貫した表現が必要です。

さらに、最近のWebサイトやアプリには美しいイラストがたくさんあります。そのため、コンポーネントを含むカスタマイズ可能なイラストシステムを含めて、それらをすばやく構築およびスタイル設定しました。

Primeで5分以内に作成されたサンプルイラスト

設計システム用に独自のライブラリセットを設計する場合は、これらの要素をライブラリに追加することを検討してください。

チームコラボレーション

デザインシステムは、チームメンバーの真実の源です。これは、プロジェクトに関与するすべてのデザイナーが使用できるように、スケッチライブラリを準備する必要があることを意味します。チームとファイルを共有する最も簡単な方法は、それらをSketch Cloudにアップロードすることです

UIフレームワークをライブラリとして準備する間、一貫性のある適切な命名を確実に行うようにしてください。論理的で明確な構造を構築すると、同僚がキットのすべての可能性を発見するのに役立ちます。

ファイルを分離する

さらに、Sketch UIデザインシステムの一部を個別のファイルとして作成することを検討する必要があります。コアライブラリを除き、アイコンセット、イラストレーションキット、デバイステンプレート、またはチャート用のファイルを準備することをお勧めします。

これらをいつ分離するのか?特定の要素(アイコンなど)の大きなセットがあるか、チームの一部のデザイナーのみがそれらを作成し(これはイラストに適用される可能性がある)、残りはその作成物を使用していることが明らかなときに、それを作成することを検討する必要があります。

ライブラリの履歴を管理する

チームでSketch Libraryファイルを管理するより良い方法は、Abstractなどのバージョン管理ソリューションを使用することです。これにより、ライブラリの変更履歴を閲覧したり、チームメイトの変更を確認したり、コメントしたり、マスター(ライブラリのメインバージョン)に追加したりできます。

Sketchからリビングデザインシステムを構築する

InVision Design System Managerなどの一部のツールを使用すると、設計者だけでなく、開発者、QAスペシャリスト、およびその他のチームメンバーのために、設計システムのドキュメントと真実のソースを構築できます。

Invision DSMの使い方は簡単です。ここで簡単な紹介を見つけることができます。設計システムのドキュメントをすばやく作成し、バージョンとユーザー権限を管理して、システムを表示または編集できます。

このツールにより、Sketch Libraryが実際のリビングデザインシステムになります。

最後に:必要に応じて一貫性を破ります

一貫した戦略が基本ですが、UXデザイナーとして、ユーザーのニーズを快適に解決し、ビジネス要件を満たすソリューションを準備する必要があることを覚えておく必要があります。そのため、より高い目的がある場合、一貫性のある設計システムを壊す準備ができている必要があります。

「学んだことを学ぶ必要があります。」
—マスターヨーダ

その特定の要素が単に機能しない場合がある場合、それを検証する必要があります。テストの結果、UIの一貫性が損なわれるとユーザーが満足することが示された場合は、変更を検討してください。システムのこの「例外」に注意することを忘れないでください。そうすれば、他の人はそれがエラーではなく、戦略的な決定であることがわかります。

まとめ

Sketchは、Design System UIコンポーネントを構築するための適切なツールです。これは、ワークフローを非常に簡単にするオーバーライド機能を備えたシンボル、レイヤー、テキストスタイルなどの複数の機能を含むツールです。ライブラリの哲学のおかげで、ファイルをすばやく共有でき、追加のプラグインを使用して、すぐに実際のデザインシステムに変えることができます。

Design Systemの構築を開始する場合、またはUIライブラリを整理する場合-すべてをゼロから作成する時間を無駄にしないでください。 Prime — Design System Kitを自由に使用してください。

ギフトを簡単にするために、MED MEDIUM10オファーコードを使用して10%オフにします。

ストーリーを楽しんだ場合は、toを忘れないでください。

UIデザインシステムの維持に役立つスケッチプラグインにも興味があるかもしれません。

読んでくれてありがとう、あなたのデザインシステムで頑張ってください!