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 using 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 consists of three Sketch libraries files that work together to deliver the complete Indigo.Design System.

  • Indigo-Styling.sketch allows you to standardize the colors, typography, icons, and elevations (shadows) in your designs
  • Indigo-Components.sketch includes 50+ components that match Ignite UI for Angular components that can be further customized using overrides.
  • Indigo-Patterns.sketch contains common UI patterns that are composed using Indigo-Components

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 usability 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

View page on GitHub