Indigo.Design 2018 Roadmap

Jason Beres [Infragistics] / Tuesday, July 24, 2018

Indigo.Design is a unified platform for visual design, UX prototyping, code generation, and app development. Our goal with Indigo.Design is to give you the tools and capabilities to drive productivity across all the personas that make up teams charged with delivering amazing experiences to customers. It is comprised of four parts:

  • Sketch UI Kits in the form of Sketch Libraries that include components, patterns, and apps;

  • Indigo.Design Cloud includes services for image-based prototyping, collaboration with stakeholders, and unmoderated usability studies;

  • Visual Studio Code Extension that generates Angular code;

  • Ignite UI for Angular UI components, Angular data grid & controls for high-performance, touch-first mobile, and desktop web apps.

Each piece has its own roadmap, based on a couple factors:

  • How we deliver value across the tool chain to drive collaboration & productivity for teams

  • How we deliver best-of-breed capabilities for each target persona’s tool of choice

For the remainder of 2018, we have aggressive goals for each tool in the tool-chain, as shown in the following sections:

Graphic Designer / Visual Designer Role

As Sketch is currently the core Visual Design tool, we've centered the UI Kits around it. Sketch gives us the ability to customize our UI Kits with custom overrides on the symbols we provide - thus allowing the detail we need to ensure code is generated accurately. We will continue to improve the features in the Sketch symbols in our libraries. In Q3 2018, we will ship:

  • Additional UI Patterns – UI patterns are the basis of apps, and they help drive productivity by removing repetitive work for commonly used scenarios. We’ll ship more patterns that will help you design / build apps faster.

  • Additional Typography, Shapes, and Density Features – One of the more important aspects of Sketch is its flexibility, and with the Material 6 restrictions removed on what it means to deliver a Material-based app, we are going to improve our Sketch UI kits to take advantage of the Material 6 features, so you deliver more creative designs with Material & Indigo.Design.

  • Stencils – Apps are made more complete with a polished UI, highly stylized stencils, graphics, & imagery. These not only help support the meaning and intent of a page but can add real polish to your apps. We are going to ship domain specific stencil libraries, like Finance, Medical, Manufacturing, etc., so you can design more beautiful apps and use these graphics in your production experiences.

  • Sketch Plug-ins – There are two areas in Sketch that we want to improve as soon as we can:

    1. A Sketch plugin that automatically syncs your artboards with the Indigo.Design Workspace. This makes keeping the work between the visual designer and the UX designer in sync.
    2. A visual configure that will let you create and lay out controls directly to an artboard through a custom dialog. This means it’ll be easy to add rich controls like Charts & Grids to your designs quickly, saving time and ensuring the richer controls are set up currently in Sketch for the code-generation service.

UX Designer / Architect Role

Indigo.Design Cloud will receive significant, very exciting updates, as our goal between Q3 and early 2019 is to move our desktop-based prototyping tool to an HTML Web-based experience. You’ll have a high-performance design tool accessible via the web to design and share prototypes easier than ever with stakeholders. The Q4 plan is:

  • Cloud-based Screen Designer Preview – The current incarnation of our image-based prototyping tool on Indigo.Design allows you to upload images and add navigation or flows to those images. With the screen designer, you’ll be able to design new screens and experiences within the same UI. We’ll have a toolbox / property editor experience, coupled with a WYSIWYG design surface, that includes all the core components from the Sketch UI kits, as well as the shipped UI patterns. This provides complete control of new screen and app design, without needing to use Sketch to access & use the Sketch UI kits and pattern libraries in our design system.

The unique benefit of this approach is that a visual designer, UX architect, or even a developer can cobble together screens, flows of screens, interaction states, and entire apps in a cloud-based WYSIWYG that will output best-practices Angular code!

Developer Role

The Visual Studio Code extension is the glue between designs in Indigo.Design and your Angular codebase. In the current iteration of the extension, a link opens your prototype and you select for what you want Angular code generated, and it inserts the HTML, CSS, TS into your Angular project. There is significant improvement coming in the next few months:

  • We are adding a "Login" to the extension which will give you more flexibility on what you might want to code-generate and when. You'll have access to all of your workspaces and designs in the Indigo.Design cloud. This will give developers more flexibility to choose what the design team has in process or completed, and the dev team can choose the right time to get code integrated into their app.

  • Flutter Code Generation – We are moving beyond Angular and delivering code generation for Flutter. We’ll be adding new UI kits for Sketch in the design system and additional features to support Flutter. This is really exciting for us; we previewed our Flutter capability during Google I/O in May of this year, and we are looking forward to delivering this in 2018.

  • More templates and starter-apps – Part of the excitement around Indigo.Design is that anyone can create screens, UI patterns, and apps in Sketch using the design system and get Angular code. We will add more artifacts to the design system, so you can get benefit from apps faster, without having to be an expert designer!

We are also adding a ton of features in Ignite UI for Angular, some of the highlights for Q3 / Q4 are an Angular Spreadsheet, a complete Excel library, a cloud-based styling tool that makes it easier to create beautiful CSS for Angular apps with a WYSIWYG tool, higher performing React Grids & Charts, and many more. For the complete roadmap for the web UI controls, check out the roadmap here:

https://www.infragistics.com/community/blogs/b/infragistics/posts/coming-up-2018-roadmap-for-ignite-ui-for-angular.

If you have any questions, or features you'd like to see, please shoot me an email at jasonb@infragistics.com

Indigo.Design 2018 Roadmap