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.
Indigo.Design platform consists of three main modules - Prototypes, Usability Studies and App Builder. While Prototypes and Usability Studies help you measure and improve the user experience of a product or feature, the App Builder enables users build their own single page application in a web environment and generate Angular code from it.
How does this work?
Indigo.Design offers three key capabilities to support the design to development workflow:
- Create designs in Sketch or Adobe XD with the
- Share as prototypes to test and collaborate with users via
- Design your app in
Indigo.Design App Builderusing a Sketch or Adobe XD file or directly using the visual application builder
- Generate Angular code from your application in the Indigo.Design App Builder, using the its
1. Indigo.Design System
The design system is a library for Sketch and Adobe XD that contains various assets, styles, components, and patterns. Тhe UI components allow you to create intricate user interfaces providing you with the flexibility to use various states and templates. To customize their appearance you may leverage the pre-made palettes, typographies, shadows, icons, and illustrations. And finally, with the provided collection of patterns, such as product details layouts, various forms, and pricing tables among others, you are able to streamline app design assuring the application of best practices in UI and interaction design.
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.
Learn more: Set up a user test
3. Design and generate code from an application in Indigo.Design App Builder
The App Builder module lets you design a single page application using a design file (Sketch or Adobe XD) as a starting point or create it from skratch. The App Builder includes a set of major features, enabling users to use real UI components, global themeing, external data sources.
Learn more: Build an application in the App Builder
4. Generate Code for Angular Apps
Once ready with the design of your application in Indigo.Design App Builder, you can easily generate Angular code from it. The generated code can be directly uploaded to a repository in GitHub or downloaded locally as a file package. The components used in the generated application are powered byIgnite UI for Angular UI framework
You can also generate code for Angular apps directly from published prototypes in Indigo.Design cloud. 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.