Back in May, I announced our design to code vision for how visual designers, UX Architects, Product Managers, & Application Developers can participate in a collaborative software design and development process, allowing each stakeholder to use the tools they love the most, including Sketch, Indigo Studio and Visual Studio Code and the frameworks they love the most like Angular & Flutter.

Today I am excited to announce the release of Indigo.Design, a unified, cloud-based platform for visual design, UX prototyping, code generation and app development. 

We believe that you'll get the best outcomes if we participate in the ecosystem of tools that you love the most and that give you the most productivity – we aren’t trying to wrestle you out of Sketch if you are a visual designer, or Indigo Studio if you are a UX Architect, or Visual Studio Code if you are a developer. We know you are most productive in the tools you use every day, all day, we aren’t asking you to change. We'll bring the tooling into your process, not the other way around. We won't force you down an uncomfortable path that will deliver less then amazing results. 

What you get with Indigo.Design

Indigo.Design includes four key components that make up the design to development process of creating amazing experiences, with the goal of ensuring that stakeholders are involved in the design process, and the elimination of the error-prone & tedious hand off of designs from designer to developer - Indigo.Design lets you generate code instead, delivering unparalleled team flow and productivity.

• Design System - 50+ UI components surfaced as Sketch UI Kits that map to our Ignite UI for Angular UI toolset.  Designs created using these components will generate HTML, CSS & Angular code. We’ve also included 45+ UX/UI patterns and complete applications to jumpstart your design projects, plus a couple completed app designs that you can learn from. Our libraries are designed with extensibility in mind, allowing you to customize components or UX patterns easily for your brand needs.

• Design Cloud – Is our cloud experience that has a few key features & benefits. An image-based prototyping tool with built-in group collaboration allows you to organize your teams around public and private workspaces. With image-based prototyping, you can Import your Sketch documents or images and then add interactions and transitions to show user flows, then share your prototype with others and view on any device.  Add to that the unmoderated usability studies feature, which lets you create task-based tests for your prototypes, and we’ll record audio & video, so you can watch your users interact with your prototypes all while returning real-time analytics and reports as tasks are completed.

• Design Code Generation Service: Is surfaced via a Visual Studio Code extension that links your cloud-based designs to your development team. Use the URL generated from your Indigo.Design prototype to access your prototype from the Visual Studio Code extension, select the components or views you want HTML, CSS & code for, and with 1 click, we’ll generate best-practices Angular code and add it to your application.

• Ignite UI for Angular: 50+ Material-based UI components designed and built on Google's Angular framework, including the fastest Angular data grid and data chart on the market. Each symbol in the Sketch UI kits map to our Angular components, ensuring full-featured, enterprise ready capabilities in your apps.

Who can benefit from using Indigo.Design?

Indigo.Design can help anyone that uses Sketch & Angular bring productivity in their teams and drive amazing experiences to their customers.

• Development managers can get unparalleled team flow and productivity. Combine UX guidance and Sketch Libraries for the designers with the powerful Indigo Studio for prototyping and user testing and bringing it all together in an Ignite UI for Angular project.
• UX Architects can share, collaborate, & test the experience with users. With an Indigo.Design prototype, they get user videos and analytics from usability studies to decide on the right design before coding.   
• Sketch designers can craft best-in-class, functional designs using our components & UX patterns in the expressive Indigo Design System with Sketch UI kits. Extensibility is built in with easy customization to match the brand experience their app needs.
• Angular developers can skip handoffs - everything a design team crafts in Sketch from the design system matches our Angular components, so there is 100% certainty in the outcome of high-quality HTML, CSS & Angular code from the design.    

What about Flutter? What about React?

My original post around Design to Code was all about Flutter (http://flutter.io), a killer new mobile framework from Google that seems to be taking the world by storm. Flutter is super exciting to us; at Goggle I/O we demoed an early version of our code generator for Flutter from a Sketch design with Indigo.Design. We are working on Flutter now, stay tuned for access to Flutter beta's in Q3.

We are investing in React controls now - by Q4 this year, you'll see new a new React Data Grid, React Chart, React Financial Chart, 100% framework-free - no 3rd party dependencies.  Just like our Angular Grid & Charts, we are focused on high-volume, real-time data scenarios and will bring the fastest React grid and charts to the market.  Following that, we'll ship React code generation as part of Indigo.Design.

For the complete roadmap on Indigo.Design, visit: https://ko.infragistics.com/community/blogs/b/infragistics/posts/indigo-design-2018-roadmap

Availability & Pricing

Indigo.Design is available today for immediate trial and purchase. We’re offering 2 pricing models for the Enterprise SKU that includes everything described in this blog post. There is a yearly subscription for $995 or a very attractive $99 per month option. Check out the pricing page here:

https://ko.infragistics.com/products/indigo-design/pricing

Wrap Up & Resources

I hope you are as excited as we about Indigo.Design and its potential to help design & development teams build amazing app experiences while reducing time, cost and rework.

We have a lot of guidance – help, videos and samples - to help you get started and successful on day 1, get started here:

• Getting Started Overview: http://indigo.design/help/getting-started.html
• Learning Library: http://indigo.design/help/video-tutorials.html. There are 12 videos today, we’ll be posting more every week.
• Sample Apps & Demos: http://indigo.design#app-gallery. These include 2 complete demos (Sketch, Indigo.Design files plus complete Angular apps).

Please visit the Forums for help if you need: https://ko.infragistics.com/community/forums/f/indigo-design.

If you have any other questions, comments, feedback, shoot me an email at jasonb@infragistic.com. In the mean-time, get started today by going to http://indigo.design and sign up for your trial!