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:
- Create designs in Sketch using the
- Share as prototypes to test and collaborate with users via
- 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.sketchallows you to standardize the colors, typography, icons, and elevations (shadows) in your designs
Indigo-Components.sketchincludes 50+ components that match Ignite UI for Angular components that can be further customized using overrides.
Indigo-Patterns.sketchcontains common UI patterns that are composed using
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.
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.
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.