作業の開始

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

デザインから開発までのワークフロー

Indigo.Design プラットフォームは、UI キット、プロトタイプ/ユーザビリティテスト、および App Builder の 3 つの主要モジュールで構成されています。UI キット (Figma) は、生産性を高めるツールを使用して、実際の UI コントロールとコンポーネントにマッピングされます。各 UI キットは、色、タイポグラフィ、サイズなどを厳密に実装および準拠しています。一方、プロトタイプとユーザビリティテストは、製品または機能のユーザーエクスペリエンスを測定および改善するのに役立ちます。App Builder を使用すると、ユーザーは Web 環境で独自のアプリケーションを構築し、そこから Angular、React、Blazor、または Web Components コードを生成できます。

手順とは?

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

Figma で Indigo.Design システムを使用してデザインを作成
プロトタイプを共有し、cloud.indigo.design でユーザーとテストしてコラボレーション
Figma ファイルを使用して App Builder でアプリをデザインし、プラグインを介してインポートするか、App Builder を直接使用します。
Code Generation (コード生成) サービスを使用して、App Builder でアプリケーションから Angular、Blazor、React、または Web Components コードを生成します。

Indigo.Design システム

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

Figma UI Kit for Material

Figma UI キット

当社の Figma Indigo.Design UI キットは、Ignite UI for Angular、Blazor、React、Web Components UI ツールセットにマッピングされ、デザイン開発プロセスを完全に再定義します。コンポーネント、パターン、スタイリング、およびカスタマイズオプションの強力なセットを利用できるようになり、プロトタイプまたは Figma で設計された任意のタイプの画面をインポートして、クリーンなコードに変換できるようになりました。最も素晴らしい点は、すべての静的なデザインが、シングルクリックで実際の UI コンポーネント、ブランディング、およびスタイリングを備えたインタラクティブでレスポンシブなアプリになることです。

Figma UI キット

当社の Indigo.Design Figma プラグイン、Indigo.Design UI キット、およびサンプルアプリは、アセットのダウンロードページからダウンロードできます。

または、以下のダイレクトリンクから:

UI キットを無料の Figma ユーザーまたは Pro ユーザーとして使用する場合の違いについては、このトピックをご覧ください。

App Builder を使用してアプリをデザインする

App Builder を使用すると、開始点として 1 ページの Figma デザインファイルを生成したり、最初から作成したりできます。実際の UI コンポーネント、グローバルテーマ設定、外部データソースとの統合など、さまざまな強力な機能を提供します。

デザインキャンバス

コードの生成

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