Indigo.Design プラグイン

Indigo.Design Sketch プラグインは、Indigo.Design UI Kit for Sketch を使用した新しいテーマの作成や既存のテーマの編集が可能です。primary (プライマリ), secondary (セカンダリ), error (エラー), success (成功), warn (警告), info(情報) の色やブランディングに合わせたタイポグラフィのプロパティの調整ができます。プラグインはプロジェクトを簡単に Indigo.Design クラウドに公開し、変更や更新の際に定期的に同期させることができます。

1.Indigo.Design プラグインのインストール

Indigo.Design プラグインは、Sketch UI キットとバンドルされています。アカウントをお持ちでない場合は、Indigo.Design ページでサインアップしてください。サインアップ後、Indigo.Design クラウドにサインインします。Indigo.Design アセットのダウンロード ボタンをクリックして Indigo.Design プラグインと Sketch UI キットの両方をダウンロードできます。

2.テーマ

このセクションでは、Indigo.Design UI Kit で作成した Sketch プロジェクトでテーマを作成する際のベスト プラクティスについて説明します。以下の方法に従ってタイポグラフィや色などブランディング アセットをプロジェクトやライブラリに適用できます。複数のプロジェクト内のすべての UI コンポーネントで統一したブランディングを表現できます。

テーマ構成の起動

Sketch の Plugins メニューの Indigo.Design から Themes を選択します。モーダルで表示されるテーマの 1 つを選択して必要に応じて調整、あるいは新しいテーマを作成します。

テーマの新規作成

ブランディングに基づいてテーマをビルドし、テーマ コレクションに追加する場合は、新しいテーマを選択して色やタイポグラフィを必要に応じて調整します。デフォルトの値は、Ignite UI for Angularデフォルトのテーマと同じです。

1.新しいテーマに名前を付ける

Colors や Typography プロパティを編集する前にテーマの名前を指定します。テーマの説明となる名前を付けるとテーマが増えたときにわかりやすく便利です。

2.ブランディングと色の選択

上部にある 2 つのパレットを指定する場合、残りのシェードが自動的に生成されるためベース値 Primary 500Secondary 500 のみ設定できます。ほとんどの場合、ブランディング カラーのパレットを使用します。error (エラー), success (成功), warn (警告), info(情報) の色に関しては、アプリケーションに対するユーザーの知覚を考慮することをお勧めします。デフォルトの色は、ほとんどのケースにマッチする色になっています。テーマをクリックし、HEX/RGB 値を入力、または色を選択して簡単に調整できます。

3.タイポグラフィの選択

Typeface プロパティは、Typography タブで設定できます。ベース タイプフェイス としてよく使用されるフォントファミリなどが設定できます。追加で各テキスト スタイルのフォントの太さを調整する場合もプラグインで行うことができます。テキストのスタイルは線や段落、更に Chipa など内部にテキストを表示するコンポーネントにも適用されます。

4.テーマの保存と適用

[保存] をクリックするとテーマが保存され、定義済みテーマの一覧に表示されます。ライブラリが更新されてスタイルが現在のプロジェクトにプロパゲートされると、ライブラリと Sketch ファイルのサイズにもよりますが処理は通常数秒で終わります。

既存のテーマの使用

テーマの作成は簡単ですが、既存テーマ (デフォルトまたはカスタム) の再利用はより簡単です。テーマは 1 クリックで選択できる以外に適用する前に調整することも可能です。あるいはプラグインのコレクションをクリーンアップするために削除することもできます。

テーマの編集

既存のテーマを適用する前に調整する場合は、上記『テーマの作成』セクションで説明したエントリをいくつか設定できます。

Note

error (エラー), success (成功), warn (警告), info(情報) の色がブランディング カラーや プライマリセカンダリ のために生成したパレットと区別できるようにします。

3.クラウドへのプロトタイプの公開と同期

Indigo.Design クラウドにプロトタイプを公開する準備ができたら Sketch の Plugins メニューから Indigo.Design > Publish Prototype を選択します。プラグインのクラウド インテグレーション機能をはじめて実行する場合、Indigo.Design アカウントでログインする必要があります。プロトタイプを公開する際場合、はじめに新しいプロトタイプを作成するか既存のプロトタイプを置き換えるかを選択してください。

1.新しいプロトタイプの公開

共有したい Sketch プロジェクトがある場合、Indigo.Design クラウドへ公開して早い段階でフィードバックをもらうことができます。New prototype タブで実行でき、以下が可能です。

  • デバイス タイプと解像度の選択 (デフォルトでアートボードと一致する必要があります)
  • プロトタイプをパーソナルまたはチーム ワークスペースに公開するかどうかを選択
  • プロトタイプの名前を提供 (デフォルトで Sketch プロジェクト ファイルの名前と一致)
  • 簡単な説明文の追加 (オプション)
  • プロトタイプのパスワード保護
  • ホットスポットとインタラクションの強調表示を選択
  • デザインにコメントを許可

[公開] ボタンをクリックするとプロジェクトが Indigo.Design Cloud へアップロードされます。これによりフィードバックをもらったりコードを生成したりすることができます。

2.既存プロトタイプの更新

新しいプロトタイプを公開する他、クラウドにあるスクリーンをより新しいスクリーンと置き換えて既存のプロトタイプを更新することもできます。プロトタイプの置き換えタブへ移動し、プロトタイプの検索やフィルタリングができます (パーソナルまたはチームワークスペースにある場合など)。作成時に定義したプロトタイプの構成を変更することもできます。

  • デバイスタイプと解像度
  • 名前
  • ワークスペース
  • 簡単な説明
  • パスワード
  • ホットスポットとインタラクションのハイライト
  • コメント

3.プロトタイプの公開

プロトタイプがクラウドへ正しく公開されるとリンクの他に以下のオプションがあります。

  • ブラウザ ウィンドウでワークスペースを閲覧
  • ユーザビリティ テストを作成し、リモート ユーザービリティ テスト を初期化してブラウザーで開く
  • クリップボードにプロトタイプのリンクをコピーしてメールで送信、またはコードを生成

プラグイン ダイアログで完了をクリックすると引き続き Sketch でデザインできます。

4.プロトタイプの同期

プロトタイプを最初に公開した後もデザイン フローが継続されるため、細かな調整や公開したプロトタイプと同期する必要があります。プラグイン メニューから プロトタイプの同期 を選択します。

これにより現在のプロジェクトを前回公開したプロトタイプへ公開します。進捗状況がダイアログで表示されます。プロトタイプが正しく同期されると通知が表示されて、数秒後にダイアログが自動的に閉じられます。

その他のリソース

関連トピック:

コミュニティに参加して新しいアイデアをご提案ください。