Logo for Indigo.Design application for prototyping

Streamline App Creation from Design to Code

Don't let a siloed approach to app creation slow down innovation. Eliminate design hand offs, reduce costly iterations, and enable true UX Design-Development collaboration with Indigo.Design – a complete design-to-code system – integrating prototyping, design systems, user testing, and code generation.

Application screenshots for usability testing, design systems, and design-to-code views within Indigo.Design

The Indigo.Design Story

Mosaic of components and UX patterns for Sketch UI kits within Indigo Design system

Yellow Diamond icon representing design systems feature for Indigo.DesignOne Design System for UX Designers and Developers

Create best-in-class UX and UI designs using our components and design patterns in the Indigo Design System with Sketch UI kits. Jumpstart your UX and UI design with pre-built design patterns or create your own custom UI library. Then easily share as visual specs or wireframes, to generate Angular code.

  • 60+ UI kit components ready for customization
  • Generate themes for UI kit and UX development
  • Shared design language for product teams
Get Started
Test Usability with Indigo.Design User Testing

Indigo Plug icon representing prototyping and user testing feature for Indigo.DesignTest the Usability of Designs and Prototypes with Real Users

Conduct user research and get feedback early, before coding, to avoid costly iterations. Quickly set-up user testing for designs and prototypes to see how users engage, screen-by-screen or via video. Testers can participate on any device. Get detailed test analytics reports to access usability and overall user experience.

  • Create wireframes and prototypes in the cloud for testing
  • Access usability early on with unmoderated user testing
  • Test many, write code once
Learn More
Image representation of code generation workflow of Indigo.Design's design-to-code

Red Angular icon representing design-to-code feature for Indigo.DesignGo from Design to Code in Seconds with Ready-to-Use Angular UI Components

Everything you create in Sketch using the design system, matches our Angular UI components. With the click of a button, generate high-quality HTML, CSS, and Angular code, right from your design.

  • Get enterprise-grade, Angular UI components from Ignite UI
  • Generate code directly in your IDE
  • Easy to use and modify – backed by 24/5 global support and comprehensive documentation
Get Started

Experience A Complete Design-to-Code System – Try Indigo.Design for Free

Sign Up
UX designer using his tablet.

Reviews

Star Rating: 4 out of 5 stars

There isn't any prototyping tool with this kind of animation capabilities. The best for the money. There is a lot of intuitive features for interactive prototyping, usability testing, and collaboration. You can copy/paste your designs from Sketch and animate your interactions in any possible way.

Pavol D.UX Designer
Star Rating: 5 out of 5 stars

Indigo is a great replacement to wireframing and prototyping tools like Axure and Balsamiq. Ability to create interactive prototypes with animations quickly and also to sync with Sketch to reuse artifacts. We are also starting to include usability testing in our workflows.

Anonymous - CapterraComputer Networking
Star Rating: 5 out of 5 stars

Best tool on the market. We looked at all the wireframing tools on the market, and none have the features that Indigo has. The ability to be able to deploy wireframes as a site is invaluable to our proposal process.

Michael S.Software architect
Star Rating: 4 out of 5 stars

Great program for non-technical managers. Display a fully functioning software w/ no coding necessary.
Lets me focus on creative and UI more than anything else. This is extremely important as recruiting mentors and team members relied heavily on demonstrating this UI even though none of our co-founders have any coding experience.

Luke P.Co-Founder
Star Rating: 5 out of 5 stars

I have worked in Balsamiq and made the switch to Indigo and LOVE the enhanced features.
Extremely easy to design and setup interactions. Testing is a breeze! The training videos are GREAT!

Brenda A.Business Implementation Consultant
Star Rating: 5 out of 5 stars

The biggest benefit is that we were able to produce what the end product would look like before we had developed it, and we could demo it to get user feedback. Controls used in the screens matched bootstrap, etc. making it easier for developers to deliver as the prototype matches what can be produced.

Frederick N.Development Team Lead
humana
intel
mellon
pearson
thomson reuters

Indigo.Design Pricing

Compare Plan Details

Professional

$39/mo per user Or $399 /yr (includes 15% discount)

Powerful, rapid prototyping for unlimited web, mobile, and desktop prototypes in the cloud, with built-in usability testing, analytics, video replays and group collaboration.

Enterprise

$99/mo per user Or $1099 /yr (includes 10% discount)

Everything in PROFESSIONAL plus:

Indigo Design System for Sketch with components and UX patterns, Angular UI framework (Ignite UI), and code generation from prototypes.

On-Prem

$10k/yr

Everything in PROFESSIONAL plus:

Secure, on-premises prototyping, collaboration, and usability testing with video replays.

Includes one server.

Inspiration is Everywhere

Jumpstart your next project using these sample applications. Created using Indigo.Design, these samples are free to use and include the Sketch UI Kits and Angular Code. Just download and make them your own.

App Dashboard showing budget allocation through Indigo.Design System components

Budget Management

The Budget Management example is an Angular financial app that manages your organization's budget and tracks incoming and outgoing payments.

Learn More
App showing contact list and form for adding people using Indigo.Design System components

People App

People App is an example of a typical Master-Detail app demonstrating a list, details and editing features.

Learn More

Learning Resources

Get started with the resources you need to create amazing user experiences.

Learn More
 General Overview of Indigo.Design System

Indigo.Design Tour

 Install Sketch UI Kits

Installing the Sketch UI Kits

 Using Sketch to build your first artboard

Building Your First Artboard in Sketch

 User Testing Overview

User Testing Overview

 How to get started with Prototyping in Indigo.Design

Getting Started with Prototyping

 Generate Code within Visual Studio Code

Code Generation in Visual Studio Code

Request a Demo of Indigo.Design

Indigo.Design is a complete design-to-code system – integrating prototyping, usability testing, and code generation. To request a demonstration, please complete the form below and a member of our team will follow-up to confirm and schedule at a date and time that will work with you.

Frequently Asked Questions

Questions and Answers for Indigo Design

What is Design to Code?

Design to code is a process where a product team (including design and development) use a design system, which includes user interface (UI) components, UI patterns and styling options that are represented and back by real-world components. For a team, this means that anything ‘designed’ and be turned into ‘code’. The important distinction between design to code and a ‘code-generator’ is that the code output in a design to code process is clean, usable, and customizable code. Meaning that even the top developers in your company will accept this code output and equal of better to what they would have written by hand.

When a design and development team is in sync, they can use design to code solutions to accelerate product delivery. The real benefit of design to code with Indigo.Design is the enormous time savings - everything the design team creates in Sketch using the Indigo.Design design system, matches our Ignite UI for Angular UI. With the click of a button, the development team can generate high-quality HTML, CSS, and Angular code, from any design from your UX team.

What is a Design to Code System?

A design to code system helps teams and organizations streamline app creation with a set of tools and best practices that accelerate the process of taking a design and turning it into usable code. Historically, product development and design teams will work in solos, there is a collaboration gap between design and development which slows down innovation. With a deign to code system, a team can have seamless collaboration and eliminate design hand offs, reduce costly iterations, and enable true UX Design-Development collaboration.

The foundation of a reliable and usable design to code system is ensuing there is one design system for UX designers and developers. With an agreed upon corporate design system, back by reusable UI kits with are based on real component libraries, anything that is designed in a design to code system can get turned into usable code output.

Why Design to Code is a Good Solution for Your Business?

And today’s competitive market it is critical that every potential advantage you have in reducing time to market and saving costs is considered. A design to code system offers both cost savings and time savings. If your design team can follow a best-practice iterative design using their favorite design tool like Sketch, the Indigo.Design cloud digital product design platform can get markup, styling, do user testing and usability studies (remote and unmoderated) at scale and ultimately get pixel-perfect code output from a design. With tooling like this to support your teams, you have a leg up on your competition.

Historically, the handoff of designs between a design team and a development team is one of the largest hidden costs of software development. Research shows that 60% of development time is on the user interface, but the tooling to get from an approved design to the right, bug-free code is limited. With Indigo.Design as your design to code solution, you eliminate any slow-down or mistakes in the form of UX bugs that drive this cost up (in terms of time and real money).

Any UX bug fixed during an iterative design phase costs one dollar to fix / change, while that same bug released into the market can cost up to $100 to fix. And these are just examples - you can add 2 to 3 zeros to any one of those numbers – to understand the real cost of letting low-quality design and UX bugs get out the door.

Using a design to code system eliminates these costly errors, and even better, the handoff from design to development in a design to code system generates pixel-perfect HTML and CSS and TypeScript that your development team can then use to build out the remainder of their high-quality application with no UI/UX bugs.

What is Indigo Design?

Indigo design is a digital product design platform that helps teams accelerate design to code. Indigo.Design has four key pillars:

  1. Indigo.Design is a prototyping tool
  2. Indigo.Design is a user testing tool
  3. Indigo.Design is a design to code tool
  4. Indigo.Design is a WYSIWYG app builder

We created Indigo.Design to helps team’s delivery higher quality software faster than ever before. Indigo.Design reduces the high cost and time-consuming handoffs from design teams to development teams. Once a design is uploaded to the Indigo.Design cloud, teams can iterate on their prototype, collaborate with stakeholders, get markup and styling, perform unlimited remote user testing studies, and ultimately generate pixel-perfect code from designs.

With indigo design you can use any piece of the application - any one of the four pillars - as features are designed to work seamlessly together or independently from each other.

  • If you are a design team and you would like to use the prototyping and user testing feature, you can.
  • If you are development team and you want to get pixel-perfect code from Sketch designs, you can choose to use the Visual Studio Code plug-in to get HTML, TypeScript, and CSS directly in your Angular app.

Indigo design is a complete solution as a digital product design platform that enables huge cost savings faster time to market – but best of all - certainty in outcomes if all capabilities are use in your software development process.

What is the Latest Version of Indigo Design?

Indigo.Design is a SaaS-based product that is always up to date. When you log into the Indigo.Design cloud at https://cloud.indigo.design, you are always using the latest version of the product. With Indigo.Design, the latest version includes the latest versions of our Angular components in the Ignite UI for Angular toolset and the most up to date Sketch UI kits in the Indigo.Design design system.

What is Sketch UI kit?

A Sketch UI kit is a collection of libraries (like sticker sheets) that include UI components, UI patterns and even complete screens. The Indigo.Design UI Kits for Sketch takes an “Atomic Design” approach by providing three libraries.

  • The Styling library has sub-atomic pieces such as colors, shadows, typography styles, and icon glyphs that define the looks of the Atoms and Molecules found in the Components library.
  • The Component library are collections of atoms that represent full-featured components, like charts, grids, etc.
  • The Patterns library is a collection of higher-level collections of components like login forms, user profiles, and detail pages.

With Sketch UI kits, a design team can build a consistent, branded digital experiences for any app in the enterprise. With Indigo.Design, the Sketch UI kits are partnered with Angular UI components, enabling a design to code system that can significantly accelerate product delivery.

What is Sketch to Code?

With Indigo.Design, the worlds leading digital product design platform, you can upload a complete sketch prototype with unlimited screens and unlimited interactions and turn that into real, running Angular code.

Sketch to code allows you to do your complete iterative design process using your favorite design tool, like Sketch, and then hand that design off to a development team who can then generate code from your Sketch design. The benefit with going from Sketch to code is the enormous time savings and cost savings from having your development teams do the same repetitive work in screen design that can be done with tooling. With Indigo.Design as the intermediary cloud platform between your Sketch design and Visual Studio Code you have the additional benefits of doing additional interactive prototyping, or even creation of user tests and usability studies on the prototype and then share those with an unlimited number of users for instant feedback.

Can I Turn Sketch Designs to Code with Indigo.Design?

Indigo.Design fully supports turning Sketch files to code. This is done by uploading or synchronizing your Sketch prototype to the Indigo.Design cloud. Once your Sketch files are uploaded to the Indigo.Design cloud your development team can use the Visual Studio Code that code plug-in that lets them select individual components, full screens or the entire application and generate real HTML code, TypeScript, and CSS. You can literally go from Sketch to code in 3 easy steps.

With Sketch to code, the time and money savings are enormous. Better yet, your time to market is faster than your competition with pixel-perfect app screens directly from Sketch designs.

Is Indigo Design User testing tool?

Indigo Design is a comprehensive user testing tool. With indigo design you can upload any image-based prototype or Sketch design to the Indigo.Design cloud and then create user tests and usability studies. With Indigo.Design, user testing is achieved with a simple point and click tool that records your actions and turns those actions into the user test that you will then share with your users, or any group of users that you’d like to get feedback from.

With Indigo.Design user testing, you do not need to write any code, any scripting, or have any advanced knowledge to perform a user test. User testing with Indigo.Design is as easy as creating a PowerPoint slide. If you are a product manager or developer and you just want to do a quick user test on a handful of screenshots, you can upload the screenshots to the Indigo.Design cloud and create a prototype with the hotspot prototyping tool then turn that into a user test with one click.

Our goal was to make it simple for any person with any skill to do user testing. You do not need to be a UX researcher with an advanced degree to create a sophisticated, detailed user test and then get real-time analytics on your user test results report with Indigo.Design.

Can I do remote user testing with Indigo Design?

Indigo.Design is a comprehensive cloud platform that includes user testing and unmoderated, remote user testing for any type of application or design. You can upload complete Sketch prototypes or images (screenshots of your app) and use the Indigo.Design hotspot prototyping tool to create an interactive prototype, which would be the foundation for your user test and usability study. That user test can contain any number of questions that you were trying to get UX feedback on. Once you’ve created your user test, which you can easily do with the point-and-click recorder in Indigo.Design, you can share that with any number of testers by simply entering their emails or sending them a hyperlink via email.

The benefit of unmoderated, remote user testing - especially with COVID-19 - is that you’re not required to be face-to-face with users. You can get very fast results and make very rapid iterative changes in your design with real time data coming back in the analytics of your user testing report. You are not limited to the number of testers and you’re not limited by the number of questions per prototype. You can send your user test to an unlimited number of users and they can choose to go through an unlimited number of questions to get you the results you need to improve your prototype before you start to write code.

Cartoon of a team depicting collaboration efforts through prototyping and user testing

Indigo.Design Desktop

Check out Indigo.Design Desktop to create rich, interactive prototypes with custom transitions, both on and offline.

And to get feedback and conduct user research, simply publish to the cloud for collaboration, commenting, user testing and usability analytics with video.