Kickstarting 2025 With a Brand-New Indigo UI Kit for Figma

We’re excited to bring you the latest innovations in App Builder. Designed to enhance your app development process, these updates empower you to create visually stunning, high-performance apps more efficiently than before.

Zdravko Kolev Last Updated Jan 21, 2025 5min read

We’re excited to bring the latest innovations to App Builder with the new year underway. Designed to enhance your app development process, these updates empower you to create visually stunning, high-performance applications more efficiently than ever before:

The Indigo UI Kit for Figma – which seamlessly integrates with App Builder to visually design and later generate code for Angular, Blazor, Web Components, and React.
Automatic Value Binding for Grid Column Templates – which simplifies template configurations to save time and reduce errors.

Before diving into these new functionalities, if this is your first time learning about App Builder, let me quickly share why you should consider it as a key tool in the application development process for your organization:

A visual app builder – the unified platform for product managers, designers, developers, and stakeholders.
Cloud-based WYSIWYG drag & drop tool that helps companies design and build complete business apps 80% faster than ever.
A low-code tool generating production-ready Blazor code, Angular code, React code, and Web Components code from your Figma designs.

Try App Builder Try App Builder Try App Builder

Indigo UI Kit for Figma

We’re thrilled to announce the release of version 1.5 of the Indigo.Design Figma UI Kits, alongside a brand-new addition – the Indigo UI Kit!

The Indigo UI Kit is a custom in-house theme designed to elevate your projects with a modern and unique aesthetic. Pairing seamlessly with our existing offerings, this kit expands your creative possibilities and ensures your designs stand out.

Best of all, all UI kits integrate with App Builder, allowing you to visually design and generate production-ready code for Angular, Blazor, Web Components, and React effortlessly.

Okay, So What’s New in Version 1.5?

The latest update brings a suite of enhancements to improve usability, flexibility, and customization across all UI kits:

New Variants for Components:
- Vertical multiview options for Calendar and Date Picker.
- Action button toggles for Date Picker and Time Picker for greater flexibility.
Enhanced Customization:
- Boolean properties for icons and actions in the Navbar component.
- Disabled item states in the Navigation Drawer for improved control.
- Greater customization options for Splitters, Tabs, and other components.
Design Enhancements:
- Hints for Text Areas.
- Improved contrast for Dark Mode components.
- Optimized alignments, paddings, and color settings for Buttons, Steppers, Grids, and more.

If you are not familiar with our UI Kits, here is a good place to start your journey.

In a nutshell, Indigo.Design is a unified platform for visual design, UX prototyping, code generation, and app development. It’s aimed at design and development teams looking to deliver pixel-perfect apps as quickly as possible without losing focus on UX.

The platform consists of three main modules – UI Kits, Prototypes/Usability Studies, and App Builder. The UI Kits for Figma map to real UI controls and components, with tooling that delivers productivity. Each UI Kit implements and follows strictly – Colors, Typography, Sizes, etc. Prototypes and Usability Studies help you measure and improve the user experience of a product or feature. App Builder, on the other hand, enables users to build their own applications in a web environment and generate Angular, React, Blazor, or Web Components code from it.

So, are you ready to explore the possibilities? Try the latest Indigo UI Kit today and elevate your design workflow. You can also read the entire design-to-code story explained in this blog post.

Automatic Value Binding for Grid Column Templates

Configuring templates for grid columns often involves binding a component’s Value property to the cell’s data context. While straightforward, this step can be overlooked, potentially leading to errors or unexpected behavior.

Our new automatic value-binding feature addresses this by simplifying the process. How does it work? When you add the first supported form control component to an Edit template, its Value property is automatically bound to the corresponding cell’s data context.

Key Details:

The feature applies only to Edit templates (not Display or Header templates).
Subsequent components in the same template or nested components will not be auto-bound.
Components added by copy/paste or reparenting will not be affected.
Existing configurations will remain unchanged for templates created before this feature.
Supported Components – All components with a form control value, including value/checked/content, are supported.

This enhancement helps your workflow by reducing manual effort and ensuring more consistent template behavior.

Other Release Improvements

Angular apps are generated using Ignite UI for Angular 19.0.0
Web Component apps are generated using Ignite UI for Web Components 5.1.2
Blazor apps are generated using Ignite UI for Blazor 24.2.6
React apps are generated using Ignite UI for React 18.7.4

Wrap Up

In conclusion, App Builder is a game-changer in the app development process. With its cloud-based visual builder, low-code capabilities, and new features, it’s a must-have tool for any organization. Try it out today! If you need more details, we encourage you to check out our:

To experience everything in the latest App Builder updates, visit your customer portal and get the latest version. As usual, we are always excited to get your feedback and hear what you want to add or recommend. So please email me at zkolev@appbuilder.dev and let me know how we can help you continue delivering value to your customers with Infragistics.