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 with 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 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.
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.