Log in to like this post! 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. 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! 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. 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 Each control has specific property settings that make it easy to configure with simple point and click! 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 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. 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 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 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 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 Learn More! There is a lot more to learn about App Builder. Here are 2 important links to continue learning: Product Documentation: https://www.infragistics.com/products/indigo-design/help/appbuilder/getting-started.html Video Library on YouTube: Indigo.Design App Builder - YouTube Playlist If you have any feedback, or run into any issues, please let us know at firstname.lastname@example.org or shoot me an email at email@example.com. The only way we can make the product better is with your feedback!