はじめに

Indigo.Design は、ビジュアル デザイン、UX プロトタイプ、コード生成、アプリケーション開発のためのプラットフォームです。UX にフォーカスしてアプリケーションをすばやく公開したいデザインチームと開発チームに最適な製品です。

手順

Indigo.Design はデザインから開発までのワークフローをサポートする 3 つの機能を提供します。

  1. Sketch で Indigo.Design システム を使用してデザインを作成
  2. プロトタイプを共有し、cloud.indigo.design でユーザーとテストしてコラボレーション
  3. Indigo.Design コード ジェネレーター (Ignite UI for Angular) を使用してコードを生成

1. Indigo.Design システム

デザイン システムは、さまざまなコンポーネント (シンボル) を含む Sketch ライブラリで、デザイナーは複雑なユーザー インターフェイスを作成し、作成済みパレット、タイポグラフィ、アイコンやイラストレーションなどのアセットを活用できます。UI コンポーネントは、さまざまな状態やテンプレートを使用してデザイン時の柔軟性を提供します。生産性を高めるために、製品詳細レイアウト、さまざまなフォーム、料金表などのパターンのコレクションもあります。

関連トピック:

はじめての Sketch アートボードの作成

2. プロトタイプおよびユーザビリティ テスト

デザインのフィードバックは、cloud.indigo.design で Sketch ドキュメントをインポートし、インタラクティブなプロトタイプとして共有します。関係者が任意のデバイスでプロトタイプを表示し、コメントによってフィードバックを送信できます。

関連トピック:

プロトタイプの作成

公開したプロトタイプを使用してユーザビリティ テストを作成します。ユーザーがプロトタイプを使用して特定のタスクを実行する方法を表示し、タスクの時間および完了比率などのメトリックを取得できます。

関連トピック:

ユーザー テストの作成

3. Angular アプリケーションのコードを生成

公開したプロトタイプから Angular アプリケーションのコードを直接生成するには、プロトタイプの共有 URL を Indigo.Design コード ジェネレーターで使用します。コード ジェネレーターは VS Code の拡張機能です。この拡張機能は Ignite UI for Angular UI フレームワークを使用してコードを生成します。

関連トピック:

Visual Studio Code 拡張機能のインストール