はじめに

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

Note

Indigo.Design プラットフォームは、プロトタイプ、ユーサビリティテスト、App Builder の 3 つの主要モジュールで構成されています。プロトタイプとユーサビリティテストは、製品または機能のユーザーエクスペリエンスの測定と改善に役立ちますが、App Builder を使用すると、ユーザーは Web 環境で独自のシングルページアプリケーションを構築し、そこから Angular コードを生成できます。

手順

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

Sketch または Adobe XD で Indigo.Design システム を使用してデザインを作成
プロトタイプを共有し、cloud.indigo.design でユーザーとテストしてコラボレーション
Sketch または Adobe XD ファイルを使用するか、ビジュアルアプリケーションビルダーを直接使用して、Indigo.Design AppBuilder でアプリをデザインします。
Code Generation サービスを使用して、Indigo.Design App Builder でアプリケーションを実行します。

1. Indigo.Design システム

デザインシステムは、さまざまなアセット、スタイル、コンポーネント、およびパターンを含む Sketch および Adobe XD 用のライブラリです。UI コンポーネントを使用すると、複雑なユーザーインターフェイスを作成して、さまざまな状態やテンプレートを柔軟に使用できます。それらの外観をカスタマイズするには、事前に作成されたパレット、タイポグラフィ、シャドウ、アイコン、およびイラストを活用できます。そして最後に、製品の詳細レイアウト、さまざまなフォーム、価格表などの提供されたパターンのコレクションを使用して、アプリのデザインを効率化し、UI とインタラクションデザインのベストプラクティスの適用を保証できます。

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

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

3. Indigo.Design App Builder でアプリケーションからコードをデザインおよび生成します。

App Builder モジュールを使用すると、デザインファイル (Sketch または Adobe XD) を使用してシングルページアプリケーションをデザインしたり、最初から作成したりできます。App Builder には一連の主要な機能が含まれており、ユーザーは実際の UI コンポーネント、グローバルテーマ、外部データソースを使用できます。

関連トピック: App Builder でアプリケーションを作成

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

Indigo.Design App Builder でアプリケーションのデザインの準備ができたら、そこから Angular コードを簡単に生成できます。生成されたコードは、GitHub のリポジトリに直接アップロードすることも、ファイルパッケージとしてローカルにダウンロードすることもできます。生成されたアプリケーションで使用されるコンポーネントは、Ignite UI for Angular UI フレームワークを利用しています。

Indigo.Design クラウドで公開されたプロトタイプから直接 Angular アプリのコードを生成することもできます。これを行うには、プロトタイプの共有 URL が必要であり、Indigo.Design コードジェネレーターを使用します。コードジェネレーターは VS Code の拡張機能として利用でき、Ignite UI for Angular UI フレームワークを使用してコードを生成します。