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.

• Indigo.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 jump-start 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.
• Indigo.Design Cloud– This 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.
• Indigo.Design Code Generation Service: This 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 for which you want HTML, CSS, & code, 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 delivering amazing experiences to their customers:

• Development managers (PM, CTO, VP DEV, PD Team Lead of a team that uses Sketch & Angular) can get unparalleled team flow and productivity: Combining 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, this is the glue that will bind your teams together closer than ever before.
• 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. If you are a Sketch user in a design agency, the Indigo.Design UI Kits are free, you can create designs and share them with your customers via Indigo.Design cloud so their development teams can benefit from the code generation piece of this solution.
• Angular developers can skip handoffs and get runnable code with 1-click!  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.    

Why would I want a solution like Indigo.Design?

According to Gartner, the UI makes up 60% of an applications development time. A solution like Indigo.Design can significantly increase the productivity of a development team responsible for building app. Mistakes in hand-offs and misunderstood designs cost a factor of 10x once an application is deployed. With Indigo.Design, you can design and build applications with no compromise, eliminating the costly & error-prone hand-off from designer to developer.

An Angular app can take anywhere from weeks to months to build. The cost of a single screen in terms of development time can take hours if not days. Using the Indigo.Design system and the Indigo.Design Code Generator, the screen HTML, CSS & TypeScript is generated in seconds, directly from the design. This saves dozens of hours and thousands of dollars in UI work, which is arguably where most developers have the biggest challenges.

During the design phase, a change to design costs nothing. Using prototyping tools like Indigo.Design’s image-based prototyping gives you this flexibility. Once an app is in development, every change can cost up to 8 hours of time & materials, once an app is deployed, a single change can cost 32 hours of time and materials. Indigo.Design removes this cost factor and risk. In an iterative design process, a developer can choose what to code generate as the designer is modifying the UI experience. It is not an all-or-nothing proposition for generating app UI.

40% to 50% of time is spent on re-work in application development. This is due to the lack of UX process & tooling that enables stakeholder collaboration and clarity of communication to product teams, usability testing and finally the right handoff to development teams.

The bottom line is that a poor user experience can cost anywhere from hundreds of thousands of dollars to millions of dollars, changes to an app post-deployment increase cost exponentially.

We have a great whitepaper on the business value of UX, which goes into detail on all of the numbers and cost factors I’ve highlighted. Check it out here. 

What about Flutter? What about React?

My original post around Design to Code was all about Flutter, a killer new mobile framework from Google that seems to be taking the world by storm. Flutter is super exciting to us; our initial demos of the design to code vision included a proof of concept that generated a Flutter app from a Sketch design. We are still 100% committed to delivering Flutter this year, expect more announcement on Flutter in the next few months.

React is another hot technology that we will be investing in code generation and UI controls for. Stay tuned for React announcements in Q3. 

For the complete roadmap on Indigo.Design, visit the article for details. 

Availability & Pricing

Indigo.Design is available today for immediate trial and purchase. We’re offering two 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.

If you are an Infragistics Ultimate customer, Indigo.Design Enterprise is part of your subscription, you can start using it immediately.

The pricing page has a complete FAQ that will answer any question you might have about the license and usage scenarios.

Wrap Up & Resources

I hope you are as excited as we about Indigo.Design and its potential to help save time and money while bringing huge productivity gains to your teams.

We’ve posted a ton of stuff to help you get started and successful on day 1:

• 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 Angualar apps).

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

If you have any other questions, comments, feedback, shoot me an email at jasonb@infragistics.com.