スケッチスタイルガイド、ライブラリ、およびUIキットを作成する方法

すべてのデザインプロジェクトは、よく考えられたスタイルガイドの恩恵を受けることができます。 このチュートリアルを使用して、UIキットを構築すると同時に、ラピッドプロトタイピング用のカスタム（および再利用可能な）ライブラリを作成します。

Sketchの専門家であろうと、Sketchの初心者であろうと、設計者は、Sketchでスタイルガイドを作成することが、時間を大幅に節約できる設計ツールボックスの貴重なリソースになる可能性があることに気付くでしょう。

スタイルガイドは、物事の一貫性を保つのに役立つだけでなく、複数のドキュメントにわたる色やアイコンなどの要素をはるかに少ない手間で更新することもできます。 このチュートリアルでは、スタイルガイドとUIキットを作成するステップバイステップのプロセスを順を追って説明し、設計者がSketchシンボルをよりよく理解し、Sketchライブラリを参照して設計し、設計資産の編成に自信を持てるようにします。

スケッチスタイルガイドの作成

UXPinによると、「スタイルガイドは、ブランディングルールから召喚ボタンの面取りの量まで、プロジェクトのすべての繰り返し要素を追跡する包括的な「生きたドキュメント」です」と述べています。 スタイルガイドには、単純な視覚要素から語彙や承認された画像まで、あらゆるものを含めることができます。 このチュートリアルでは、構成、色、アイコン、フォント、テキストスタイル、およびアセットについて説明します。

ステップ1：組織

1. スケッチファイル、プラグイン、およびフォントや図像などの他の必要なアセットを保持するマスターフォルダーを作成します。 （プラグインについては、チュートリアルの最後で説明します。）
2. 新しいSketchファイルを開始し、「 ClientnameLibrary 」という名前を付けます。 たとえば、クライアントがToptalの場合、ファイルの名前は「ToptalLibrary」にする必要があります。

ステップ2：色

色がすでに選択されている場合、次のステップは色を記号に変換することです。

1. これを行うには、同じサイズの正方形を作成し、それに応じて色を変更します。 「シンボルの作成」をクリックし、color / @color-nameラベリングシステムを使用してこれらの要素を保存します。 Color / @ pink 、 color / @ background-gray 、またはcolor /@FFFFFは適切なラベルの例です。 スタイルガイドを整理するためには命名規則が重要であるため、最初からすべての形式を確立して順守する必要があります。
2. 完了したら、それらをスタイルガイドページに追加します。
3. カラーパレットのドキュメントセクションに色見本を保存します。

便利なショートカット：R-長方形ツール、T-テキストツール、alt-距離の測定。

ステップ3：アイコン

アイコンを動的シンボルに変えると、アイコンの色を上記のステップ2で保存した色に簡単に変更できます。 これは、アイコンがデザインに配置された後、キャンバスの右側にある「インスペクター」を使用して、「オーバーライド」と呼ばれる単純なドロップダウンメニューから色を変更できることを意味します。

1. アイコンをシンボルとして保存します（可能であれば、アセットタイプの.svgに固執します）。
2. シンボルページに移動し、アイコンを見つけて、以前に保存した色のデフォルトの色でマスクします。 これを行うには、アイコンの上に色の記号を重ねて、ツールバーの[マスク]をクリックします（または右クリックして、ポップアップメニューから[マスク]を選択します）。
3. アイコンがマスクされたら、インスペクターの[塗りつぶし]セクションの下にあるチェックボックスをオフにして、塗りつぶしを削除します。
4. スタイルガイドページでアイコンを整理します。 同じセクションで、アクティブなアイコンと非アクティブなアイコンの色、およびその他の重要な色の指定を指定すると便利です。

ステップ4：テキストスタイル

フォントを選択したら、テキストスタイル（H1、H2、H3、H4、H5、本文、リンク、キャプション、ラベルなど）を指定します。Webタイポグラフィの参考になるのは、Typecastによるこのブログ投稿です。

1. 必要な数のスタイルのサイズ、太さ、文字、および行間隔を選択します。
2. 単語を書き（テキストツールのTを押すと、「Type Something」が自動的に表示されます）、選択したスタイルの詳細を反映するようにフォーマットします。
3. 「新しいテキストスタイルを作成」​​をクリックします。
4. スタイルガイドページでテキストスタイルを整理します。

ステップ5：資産

さて、楽しい部分です。 これまでのすべての手順を組み合わせて、いくつかのアセットを作成します。 アセットがすでに作成されている場合は、一貫性を保つために、選択済みのテキストスタイル、アイコン、および色を使用してアセットを再作成することをお勧めします。 たとえば、作業中の設計ドキュメント内には、設計で考慮されていないさまざまな灰色の色が存在する可能性があるため、アセットを再作成すると、選択した色の一貫性が保証されます。 名前の一貫性を保つことを忘れないでください。また、アセットが作成されたら、必ずスタイルガイドページにアセットを追加してください。

取り組むべきいくつかの提案された資産はここにあります：

ボタン

1. ボタンをデフォルトの色でマスクし、塗りつぶしを削除して、アイコンと同じようにこれらの動的シンボルを作成します。
2. テキストを常に中央に配置するには、テキストボックスの幅をボタンと同じになるように広げ、テキストを中央に配置します。
3. 一貫性を確保するために、必ず保存されたテキストスタイルを使用してください。
4. ボタン/ボタン名の命名システムを使用して、これらの要素をシンボルとして保存します。
5. オーバーライド機能を使用して、ラベルと色を変更します。

検索バー

1. 検索フィールド、およびフィールド自体で使用されるアイコンとテキストにサイズ変更の制約を適用します。
2. 以前にドキュメントのカラーパレットに保存したテキストのスタイルと色を適用することを忘れないでください。
3. タイトルとして検索を使用してこの要素をシンボルとして保存するか、検索の種類が異なる場合は、検索/標準や検索/アイコンなしなどのラベル付けシステムを順守してください。

ラジオボタンとチェックボックス

1. シンボル内にシンボルを含めることは可能です。それをテストする良い方法は、インテリジェントなラジオボタンとチェックボックスのアセットを作成することです。
2. まず、ボタンアセット自体を作成します。 ラベル付けの例として、チェックボックス/選択済みおよびチェックボックス/選択解除を使用して、この要素をシンボルとして保存します。
3. 次に、入力を作成します。 チェックボックス記号の横にプレースホルダーテキストを追加してから、アセット全体を記号に変換します。 これは入力であるため、アセットをそのまま保存することをお勧めします。適切なラベルは、入力/チェックボックス/選択および入力/チェックボックス/選択解除になります。

ステップ6：スタイルガイドを使用してください！

このすべての作業を行ってスタイルガイドを作成することは、実際にプロジェクトをよりスムーズに実行できる場合にのみ役立ちます。 すべてのアセットが作成されたら、設計中のドキュメントにライブラリを適用します。 Sketchで、「設定->ライブラリの追加…」に移動し、ライブラリドキュメントを追加します。

プロジェクトデザインファイルにライブラリを追加すると、シンボルセクションでライブラリとそのシンボルにアクセスできます。 ライブラリオプションとしてSketchが付属しているiOSUIデザインライブラリと、最近インポートされたライブラリに気付くでしょう。

シンボルを更新する場合は、シンボル自体をダブルクリックすると、ライブラリドキュメントが表示されます。 変更を加えたら、設計ドキュメントに戻り、右上隅にある更新ボタンをクリックします。

ボーナス：テキストスタイルのインポート/エクスポート

テキストスタイルはライブラリに保存されませんが、Sketch用の共有テキストスタイルプラグインはそれを解決します。 プラグインをダウンロードしたら、ライブラリドキュメントに移動し、メニューに移動します。「プラグイン->共有テキストスタイル->エクスポート…」このファイルをライブラリドキュメントと同じフォルダに保存します。 次に、デザインドキュメントで、[プラグイン]->[共有テキストスタイル]->[テキストスタイルのインポート...]というメニューに再度移動し、保存したファイルをインポートします。 テキストスタイルが表示されます。

ボーナス：カラーパレットのインポート/エクスポート

テキストスタイルと同様に、ドキュメントの色はSketchライブラリでは保存されませんが、SketchPalettesプラグインはそれを解決します。 上記とほぼ同じように、「プラグイン->スケッチパレット->ドキュメントカラー->パレットの保存」を使用してパレットをエクスポートし、「プラグイン->スケッチパレット->ドキュメントカラー->パレットのロード」を使用してインポートします。 他のライブラリドキュメントと同じフォルダに保存することを忘れないでください。

ボーナス：フォント

Craft by InVisionは、Sketchソフトウェアを次のレベルに引き上げるプラグインのスイートです。 Craftを使用すると、画像をストックフォトに置き換えたり、プロトタイプを作成してInVisionに同期したり、ライブラリを作成したりできます。 Craftがダウンロードされている場合は、ドキュメントで「cmd-shift-c」を押すと、スタイルシートが生成されます。 フォントはここに一覧表示されます。

上記の6つの手順に従うと、大小の設計プロジェクトがよりスムーズに実行され、最終結果がより洗練されます。 それらが一意または非常に具体的である場合、スタイルガイド、ライブラリ、およびUIキットは、1つのクライアント、またはワイヤーフレームやプロトタイプなどの標準UI要素が絶えず作成されている場合は多くのプロジェクトに使用できます。 最初に、これらのSketch UIコンポーネントを適切に作成するために時間を費やすと、将来的に、そして潜在的に多くのプロジェクトにわたって多くの時間を節約できます。

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

• スタートアップがスタイルガイドを必要とする理由
• Sketchのタイポグラフィについて知らないかもしれないこと
• 最高のスケッチプラグインの50の究極のリスト
• Adobe XDとSketch-どちらのUXツールがあなたに適していますか？
• 効果的なデザインフレームワークを構築する方法（無料のSketch UIフレームワークを含む）