Getting Started

Indigo.Design is a unified platform for visual design, UX prototyping, code generation and app development. It’s aimed at design and development teams looking to deliver pixel perfect apps as quickly as possible, without losing focus on UX.

How does this work?

Indigo.Design offers three key capabilities to support the design to development workflow:

  1. Create designs in Sketch with the Indigo.Design System
  2. Share as prototypes to test and collaborate with users via cloud.indigo.design
  3. Generate code from prototypes using the Indigo.Design code generator (Ignite UI for Angular)

1. Indigo.Design System

The design system is a Sketch library that contains various components (symbols) that allow a designer to create intricate user interfaces and leverage pre-made palettes, typographies and assets such as icons and illustrations. On top of that UI components are built to offer design time flexibility through various states and templates. To improve your productivity there is also a collection of patterns such as product details layouts, various forms, and pricing tables among others.

Learn more:

Create your first Sketch artboard

2. Prototyping & Usability Testing

To get feedback on your designs, use cloud.indigo.design to import the Sketch document and share it as an interactive prototype. This will allow your stakeholders to view your prototype on any device and give feedback via comments.

Learn more:

Create prototypes in the cloud

If you want to watch how users use your prototype to complete specific tasks, and also collect metrics like time on task and completion rate, set up a usability test using the published prototype.

Learn more:

Set up a user test

3. Generate Code for Angular Apps

You can generate code for Angular apps directly from published prototypes. To do this, you will need a share URL for the prototype, and use the Indigo.Design code generator. The code generator is available as an extension for VS code, and it generate code using the Ignite UI for Angular UI framework.

Learn more:

Generating code from prototypes