logo for indigo.design application for prototyping logo for App Builder

Indigo.Design UIキット

ダウンロードはこちら

Indigo.Designシステム

Indigo.Design システムとApp Builderで、UXの設計と開発のコラボレーションがより簡単、効率的になります。Indigo.Designシステムは、実際のUIコントロールやコンポーネントにマッピングするUIキット、そしてプロダクトチームがデザインからプロダクション可能なコードへと移行するための、生産性向上のためのツールを組み合わせています。デザインしたものはすべて実際に使用可能なコードに変換することができるので、 デザイナーと開発者のハンドオフ がこれまでになくシンプルになります。

アプリケーション制作のデザインから コード生成まで高速化

Accelerate App Creation From Design to Code Accelerate App Creation From Design to Code Accelerate App Creation From Design to Code

人気

  • データグリッド
  • 折れ線チャート
  • リストビュー
  • カレンダー

チャート

  • 縦棒チャート
  • 折れ線チャート
  • スプラインチャート
  • ステップチャート

ゲージ

  • ブレットゲージ
  • リニアゲージ
  • ラジアルゲージ

スタイル & テーマ

  • アイコン
  • カラーパレット
  • タイポグラフィ
  • エレベーション
  • イラストレーション

グリッド

  • データグリッド
  • ツリーグリッド
  • 階層グリッド
  • リストビュー
  • コンボ

インタラクション

  • ダイアログウィンドウ
  • スライダー
  • ツールチップ

メニュー

  • ナビゲーションバー
  • ナビゲーションドロワー

レイアウト

  • アバター
  • ボトムナビゲーション
  • カード
  • カルーセル
  • 展開パネル
  • スプリッター
  • タブ

データ入力 & 表示

  • バッジ
  • ボタン
  • ボタングループ
  • チェックボックス
  • チップ
  • デバイダ
  • ドロップダウン
  • アイコン
  • インプット
  • プログレス
  • ラジオグループ
  • 選択
  • スイッチ

通知

  • バナー
  • スナックバー
  • トースト

スケジュール

  • カレンダー
  • 日付ピッカー
  • 時間ピッカー

なぜIndigo.Design UI キットを使うのか?

App Builder

本格的なUIコンポーネントによるサポート

Indigo.Designシステムは、最も人気のあるAdobe XDやSketchなどのツールのUIキットを収録し、Material、Fluent、Bootstrapなどの現在人気のあるデザインシステムの各種バージョンとAngular、React、Blazor、Web ComponentsのUIコントロールでサポートされています。

ブランドに合わせてカスタマイズ

タイポグラフィーやカラーなどのブランドアセットを、自分のプロジェクトやライブラリに適用できます。テーマプラグインを数回クリックするだけで、UI コンポーネントやパターンをカスタマイズして、プロジェクト全体で一貫したブランドを表現することができます。.

Scalable

最初から最後まで完璧に

アプリケーションのデザインからコード生成までサポートするソリューションとして、全体のプロセスを効率化できます。開発チームは、妥協することなく、使い慣れたツールを使用して、簡単にデザインをプロダクション対応可能なコードに変換できます。

Pixel-perfect

モダンなデザイン

マテリアルデザイン、Microsoft Fluent、Bootstrap、そして自社のIndigo.Designのテーマにインスパイアされ、あらゆるデバイスに対応した、最新でモダンなアプリケーション体験がデザインできます。すぐにシンプルで美しいデザインを実現できます。

Minimal Design

コンポーネントレベルでのカスタマイズ

UIキットに搭載されているコンポーネントは、標準的なプロパティエディタを通じて、設計期間を短縮できるように構築されています。つまり、カスタムコントロールの再設計や 再構築をせずに、デザインや作業フローに集中することができます。

Overrides
Well-crafted UI Kits for Sketch and Adobe XD

SketchとAdobe XD向けの高品質UIキット

Indigo.DesignのUIキットでは、作成するものすべてにデザインシステムを使用します。パレット、エレベーション、タイポグラフィー、ディスプレイ密度、テーマなど、すべてのスタイル仕様が実際のUIコンポーネントとマッチします。

UIキット及びApp Builderのツールボックスを使用して作成したデザインは、以下のUIコントロールでサポートされています。

  • Angular
  • React
  • Blazor
  • Web Components

さらに400種類以上のアイコン、スペシャルカラーパレット、カスタマイズ可能な17個のイラストなど、盛りだくさんです。

Well-crafted UI Kits for Sketch and Adobe XD - capture 1
Well-crafted UI Kits for Sketch and Adobe XD - capture 2
Well-crafted UI Kits for Sketch and Adobe XD - capture 6

ブランドに合わせて選べるテーマ

Indigo.Designには、ダークバージョンとライトバージョンの4種類のテーマがあり、どんなブランディングにも対応できます。同梱されているものを使用する、あるいはテーマを選んでカスタマイズをして完璧なアプリが作成できます。

Indigo.Design UI Kit comes in different theming options Indigo.Design UI Kit comes in different theming options
Indigo.Design UI Kit comes in different theming options Indigo.Design UI Kit comes in different theming options

Sketch用カスタムテーマプラグイン

Indigo.Design Plugin for Sketchをデザイン制作プロセスに導入すれば効率が上がり、数クリックで簡単にテーマ設定プロセスが最適化できます。

Custom Theme Plugin for Sketch component featuring financial chart

SketchとAdobe XDから直接アプリを作成

デザインからコードまで、ワンクリックで。
デザインをもとに、実際のUIコンポーネントやスタイリングを使用して、インタラクティブなレスポンシブ・アプリケーションを作成できます。SketchAdobe XDでIndigo.Designプラグインを直接使用して、実際の制作に適したコードでアプリを構築できます。プラグインは、カスタムテーマの配信、画像アセットのインポート、すべてのコンポーネントがApp Builder Toolboxのコントロールと1対1でマッピングされるようにすることもできます。

Create Apps Directly from Sketch and Adobe XD Designs
Create Apps Directly from Sketch and Adobe XD Designs

レスポンシブ

パターンを動的に拡大・縮小できて、様々なスクリーンサイズに簡単に合わせられるので、本当の意味でレスポンシブなUl環境を構築し、あらゆる要望に対応することができます。

logo for App Builder

SketchやAdobe XDから直接、最先端のWebアプリケーションを作成し、App Builderでデータに接続し、GitHubにコードをプッシュ等、デザイナーと開発者がかつてないほど一体となれるワークフローを実現します。

App Builder
App Builder

ユーザビリティテスト

Indigo.Designでプロトタイプを作成し、様々なデバイスやプラットフォームで実際のユーザーとリモートユーザーテストを実施できます。ユーザー情報、関係者とのコラボレーション、ユーザーの行動に関する詳細な分析、ユーザビリティテスト中のビデオと音声の録音も保存することができます。

最新リリース

3.6.0新機能

このバージョンの最大の特徴は、Indigo.Designの4つの主要テーマそれぞれに専用のUIキットのバリエーションを用意し、Bootstrap、Fluent、Indigoに完全対応していることです。

  • 新コンポーネント
  • 新機能
  • 新リファレンスアプリケーション
  • 新ステータスデザイン
  • バグ修正
ダウンロードはこちら