This blog is a quick feature tour of App Builder, a design-to-code solution that enables 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, production 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 iApp Builder, and to learn more about our vision for app building modern apps, check out the App Builder launch blog.

Web App Builder - 100% Web-Based WYSIWYG

With App Builder, there is no need to download anything, no heavy IDEs or 3rd party dependencies. Everything is on the web, accessible by your whole team on any platform!

Library of Sample Apps and Starters

Hit the ground running with one of our pre-built app scenario-based 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-based App Builder and you can use as a starter for your own application design!  If you are using 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.

UI Controls Library with Properties Editors

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://ko.infragistics.com/products/indigo-design/help/appbuilder/indigo-design-app-builder-components

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

Application / Component Interactions 

App Builder goes beyond designing application layouts and screens by letting you define the application interaction design. Interactions can be set up between components and views or just between components. In this release, we've included three interaction options that you can set in the WYSIWG designer:

• Navigate To -  Connect components enabling child or master view navigation.
• Open / Close - Enable open / close interactions to overlay components such as Dialog.
• Show / Hide -  Change the visibility of another component in the same view.

Web-Based Layouts

App Builder includes layouts with Relative, Absolute, Fixed & Sticky positioning. One of the biggest differences between App Builder and other design tools like Sketch, Figma and Adobe XD is that App Builder 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. If you are importing a Sketch, Figma or Adobe XD file, we've introduced artificial intelligence into App Builder - when parsing Sketch files we infer web layouts for you through heuristics algorithms, which means you never need to worry about going from the absolute positioning to a proper web-based layout, we do the work for you!

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

Pre-Set Themes and Custom Themes

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

• Material
• Bootstrap
• Fluent UI

Since 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://ko.infragistics.com/products/indigo-design/help/appbuilder/app-themes/app-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 one using one of the base 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. 

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.

Single Page Apps and Navigation

 Another 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://ko.infragistics.com/products/indigo-design/help/appbuilder/single-page-apps-and-navigation

Connect to Live Data or Upload a JSON File

Connect to live REST API or upload a JSON file to light up your application with real data. If you don't have data yet, use our mock Northwind data source to see how your design reacts to live data. Each control that supports data binding will have additional properties in the Property Editor that lets you customize how your data is presented.

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 production-ready 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://ko.infragistics.com/products/indigo-design/help/appbuilder/preview-code#preview-code-1 

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://ko.infragistics.com/products/indigo-design/help/appbuilder/generate-app/generate-app-overview 

Upload Sketch Files Directly to App Builder

If you have a design team that has already done the UI design, simply upload their Sketch designs into App Builder and watch the IDE light up with the app with production ready code! The best part is you get the full power of App Builder - the WYSIWYG drag and drop canvas, data binding, theming, live code preview, and code generation! Just make sure your design team is using the Indigo Design System UI kits, and you'll be guaranteed a pixel-perfect import from Sketch, and a pixel-perfect code generation output.

Even though I highlighted this earlier in this post, I'll highlight it again here because its so cool - if you are importing a Sketch, Figma or Adobe XD file, we've introduced artificial intelligence into App Builder - when parsing Sketch files we infer web layouts for you through heuristics algorithms, which means you never need to worry about going from the absolute positioning to a proper web-based layout, we do the work for you!

 

Learn More!

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

• Product Documentation: https://ko.infragistics.com/products/indigo-design/help/appbuilder/getting-started
• Video Library on YouTube: App Builder - YouTube Playlist

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