Indigo.Design App Builder: Feature Tour

Jason Beres [Infragistics] / Wednesday, December 16, 2020

This blog is a quick feature tour of the Indigo.Design App Builder. Indigo Design App Builder is a design to code solution, enabling design and development teams to quickly and easily design and build real web applications. Built with a design system approach, with a real component library,  everything designed is running live, developer ready, with high-quality app code. You do the design and check the instant real-time preview; we'll do the code.

If you haven't read about the basics of Indigo.Design App Builder, and to learn more about our vision for app building modern apps, check out the App Builder launch blog.

Indigo App Builder - Build Apps in the Cloud

Web App Builder - 100% Web Based WYSIWYG

With the Indigo.Design App Builder, there is no need to download anything, no heavy IDE's, and not 3rd party dependencies. Everything is on the web, accessible by your whole team on any platform!

Indigo.Design Web App Builder IDE

Library of Sample Apps and Starters

Hit the ground running with one of our pre-built app templates or use one of our preset layout options to build your app in no time. Just tweak our design, swap a theme and you are done!

Our getting started apps will help you learn how to use the web app builder and you can use as a starter for your own application design!  If you are using the Indigo Design App Builder for first time, we recommend using the sample app option as a starting point. This is the quickest way to onboard yourself with the awesome features of the tool and to start building your application.

Web App Builder Select Templates and Layout

UI Controls Library with Properties Editors

The Indigo. Design App Builder comes fully equipped with more than 30 UI Controls in the Toolbox that are ready for drag & drop app design.  All the components are conveniently distributed into groups in the toolbox, and if you can’t find something, the search input on the top of the components list makes it easy to find a particular component

Learn more:   https://www.infragistics.com/products/indigo-design/help/appbuilder/indigo-design-app-builder-components.html

 Web App Builder – Component Library Toolbox with Properties

Each control has specific property settings that make it easy to configure with simple point and click!

 Web App Builder – Custom Property Switches

Web Based Layouts

Indigo.Design App Builder includes layouts with Relative, Absolute, Fixed & Sticky positioning. One of the biggest differences between the Indigo Design App Builder and other design tools like Sketch, Figma and Adobe XD is that Indigo.Design is a flex-based layout system. This makes designing screens and arranging a responsive layout very easy, and this flows through into the generated code.  The layout of your design is preserved perfectly in your generated code.

Learn more at https://www.infragistics.com/products/indigo-design/help/appbuilder/flex-layouts/flex-layouts.html

Pre-Set Themes and Custom Themes

With Indigo.Design App Builder, you can easily apply one of the six built-in Light or Dark themes for

  • Material
  • Bootstrap
  • Fluent UI

Since the Indigo Design App Builder adopts a design system approach to UI creation, you can apply themes at the app-level, or you can override a theme with screen and control-level property settings. 

Learn more at https://www.infragistics.com/products/indigo-design/help/appbuilder/app-themes/app-themes.html

 Web App Builder – Theme Switching Bootstrap, Material UI, Fluent UI Themes

Create Custom Themes

If you don’t like one of the built-in themes, you can create a custom theme to match your brand. You can choose to create a brand new using one of the based themes as a starting point. Color palettes are automatically generated based on the primary and secondary color you select, and you can pick one of the common web fonts we’ve provided for your typography. 

 Web App Builder – Custom Theme

Pre-Set and Custom Viewports

With the flex layout, responsive design is built in. As you are designing your app, or in the preview, you can change the viewport size to one of the common screen size settings or create your own custom viewport setting.

 Web App Builder – Change Viewport and Create Custom Viewport

Single Page Apps and Navigation

 Another Indigo.Design App Builder feature is the single-page apps and navigation. This means you create separate views that are injected or switched based on how users navigate.

Learn more at: https://www.infragistics.com/products/indigo-design/help/appbuilder/single-page-apps-and-navigation.html

Web App Builder - Master Page and Components

Instant App Preview with Source Code Preview

One of the best features for developers in the web app builder is that you can preview your running app as well as the source code (HTML, TypeScript and CSS) for the screen or screens you are previewing.  All the interactions can be experienced just like your end users will experience.   The underlying code and application model are updated in real time as you make changes to the application in the design surface.  This means you get instant preview … no wait time! 

Learn more at: https://www.infragistics.com/products/indigo-design/help/appbuilder/preview-code-and-generate-app.html

Web App Builder - Instant Preview

Generate a Complete Angular Project

Everything you design results in production ready HTML, TypeScript & CSS!  With 1-Click, you download a zip file with standards-based code that’s ready for Visual Studio Code or your favorite IDE.

Learn more at: https://www.infragistics.com/products/indigo-design/help/appbuilder/preview-code-and-generate-app.html#run-the-app

Visual Studio Code Run App

Learn More!

There is a lot more to learn about App Builder. Here are 2 important links to continue learning:

If you have any feedback, or run into any issues, please let us know at appbuilder@infragistics.com or shoot me an email at jasonb@infragistics.com. The only way we can make the product better is with your feedback!