前回に引き続き、先日発表したIndigo Design to Code (D2C) Studioの構成要素をご紹介します。
Indigo D2C Studioの構成要素 - 参考エントリ(英語)
- Atomic Design System
- イメージベースプロトタイピング ← イマココ
- コード生成可能なVisual Studio Codeプラグイン
- Angular & Flutter 対応 UI コントロール & コンポーネント
Indigo D2C Studioとは？
ビジュアルデザインからプロトタイプ作成、コード生成までをシームレスに実現するアプリケーションデザインプラットフォームです。
このアプリケーションデザインプラットフォームを用いることで、ビジュアルデザイナー、UXアーキテクト、プロダクトマネージャー、デベロッパーといったアプリケーション開発におけるさまざまな役割のプロジェクトメンバーが、SketchやVisual Studio Code、Angularといったそれぞれが得意とするツールを利用しながら、これまで以上により密接にソフトウェア設計および開発プロセスに携わることを可能にします。
イメージベースプロトタイピング
本年4月に一部機能の無償化をアナウンスしたIndigo Studioで提供しているクラウドサービス、indigodesigned.comにイメージベースプロトタイピング（IBP）機能を追加します。このIBPは、indigodedesigned.comにSketchやAdobeデザインツールなどで作成した画面のビジュアルデザインをインポートし、プロトタイプを作成することができます。IBPではインポートした各画面間のナビゲーションの設定や、プロトタイプをエンドユーザーを含むプロジェクトの関係者に共有し、フィードバックを得ることができるようになります。また、動画レコーディング可能な参加人数無制限のユーザビリティテストを実施し、分析できます。
この際、前回ご紹介したAtomic Design Systemを用いて作成されたSketchデザインをインポートすることでIBPの機能を最大限に活用できます。Sketchで定義されたシンボルやアートボードの情報、事前に定義されたナビゲーション情報などインポートしたSketchファイルに保存されている重要なメタデータを保存し、我々のコード生成モデルとなるように解析します。
次回紹介するコード生成機能を利用するためには、Atomic Design Systemを用いて画面デザインを行う必要があります。これは、コード生成機能は前回解説した、Atom（UIウィジェット）とAngularツールキット、Flutter SDKとのマッピングを前提にしているため、それ以外のものを利用した場合には解析することができないためです。
コード生成機能を利用せず、任意の画像をインポートしイメージベースのプロトタイピング機能のみを利用する場合は、デザインシステムを利用する必要はありません。
次回はいよいよコード生成可能なVisual Studio Codeプラグインです！
このIndigo Design to Code (D2C) Studioの詳細をご紹介するセミナー、「Distinct」を6/26に開催します。からプロトタイプ作成、コード生成までをシームレスに実現するその実力をぜひその目で確かめてみてください！
