Indigo.Design has been recently launched by the team at Infragistics, highlighting their interest in creating a competitive UI kit to bridge the gap between design and development teams. Using Sketch designs to then generate Angular components and code, the application is centered around eliminating the error-prone and tedious hand-off of designs to developers.
The application takes design and development teams productively through the staple steps of visual design, UX prototyping, Angular Code generation, and application development. To move through these development steps, Indigo.Design has four key parts that facilitate productivity for the teams.
1) There are extensive Sketch UI kits that come packaged as Sketch libraries. The user can look through a variety of components, patterns, and pre-modeled scenarios that make it easy to determine the best look and feel for a new project. Extensibility is intrinsically built-in with customizations that are able to match a particular brand or experience. It should be noted that, later down the road, these Sketch components have a twin Angular component that can be generated.
2) Indigo.Design features cloud services for image-based prototyping, unmoderated usability studies, and across-the-board collaboration. So, once the Sketch design phase has been completed, a team can upload the prototype into the cloud and add hotspot navigations, transitions, and other interactions. From this point, the prototype can be viewed on any device by others and this makes usability testing and team decision-making far easier. The usability testing offers insight into user interactions with audio and video, also returning real-time analytics and updated reports as certain tasks are completed with the prototype.
3) After the cloud-based prototyping, teams can move into Angular, HTML, TypeScript, and CSS code generation with the Visual Studio Code extension that goes hand-in-hand with Indigo.Design. By designating the portions of the prototype for which you want to generate code, the extension will generate code assets and update your project. Some highlights for this extension are that it'll install the project's required npm packages, like Ignite UI for Angular, create the Angular components from the Sketch components, create modules around these components, and create basic routes in the modules for each component to make them navigable. From this point, the project is now runnable after a no-code experience.
4) With the generated project, users can now move into further editing and tailoring their Angular application with help from the Ignite UI for Angular component suite. With additions like the Visual Studio Code Ignite UI for Angular Tooltip and the CLI wizard, adding components and making edits to the web-based application is simple and stream-lined. The tooltips give you ability to select a desired component and insert it directly into the Angular project.
Moving forward, Indigo.Design aims to cut down on the loss in productivity and the go-to-market time on teams' Angular applications. By mitigating and migrating the often tedious processes surrounding hand-offs amongst the design and development teams, the unified platform is sure to become a productive and useful UI kit for Angular app development.