Introducing Indigo Design to Code Studio: Design to Developer Collaboration Redefined

Jason Beres [Infragistics] / Tuesday, May 8, 2018

This is a big week for Infragistics. We have teams in Seattle, WA at Build 2018 and at Google I/O in Mountain View, CA. Both Microsoft and Google this week are showcasing keynotes focused on Artificial Intelligence (AI), Machine Learning (ML), Elastic Cloud, and how it not only permeates what we are all doing in business today, but also the home to make our lives easier. I think even better however is that AI, ML & the Cloud are helping us live better lives – beyond business productivity and smarter homes – it is making all of us more aware of how our lifestyle choices affect our health (negatively or positively), our personal productivity, our relationships with others, and how the availability of this abundance of personal data can't be ignored. It’s a cool time to be in the thick of such great innovation, it’s up to us how we use all of this newly found intelligence to better ourselves and those around us.

At Infragistics, we’ve focused on making developer’s lives better for over 3 decades with productivity tools, UI control suites and rich components that have increased the overall productivity of teams anywhere from 40% to 80% when designing and implementing beautiful, multi-channel user experiences. We’ve helped the biggest brands in the world run their businesses, from internal mission-critical applications to public websites to mobile apps for the largest banks, insurance companies, retailers, manufacturing and software companies in the world.

Today, we are taking this level of team productivity a step further with a new vision on how design, UX & development teams can build better software, faster, with predictable outcomes and amazing user experiences.

I am excited to announce Indigo Design to Code Studio, our vision for how visual designers, UX Architects, Product Managers, & Application Developers participate in a collaborative software design and development process, allowing each stakeholder to use the tools they love the most, including Sketch, Indigo Studio and Visual Studio Code and the frameworks they love the most like Angular & Flutter.

Indigo Design to Code Studio

Indigo D2C Studio is a set of tools and technologies centered around the vision that you'll get the best outcomes if we participate in the ecosystem of tools that you love the most and that allow you to be the most productive – we aren’t trying to wrestle you out of Sketch if you are a visual designer, or Indigo Studio if you are a UX Architect, or Visual Studio Code if you are a developer. We know you are most productive in the tools you use every day, all day, we aren’t asking you to change. We'll bring the tooling into your process, not the other way around. We won't force you down an uncomfortable path that will deliver less then amazing results. Watch this quick 90 second video to give you an idea of what we'll detail in the rest of this post.

While we achieved that to a certain degree with our Code Generation plugin for Indigo Studio and with the addition last year of rich Sketch integration in Indigo Studio, there was more to do. Through customer feedback and more market research we realized that a lot of the design work that teams do today was done in Sketch, by Visual Designers, then followed by UX work. The process didn’t necessarily start in Indigo Studio and didn’t necessarily follow the accepted norms of a UX-lead process (start with a low-fidelity prototype and move it up the chain to a high-fidelity interactive prototype after multiple iterations with stakeholders). Most design tool vendors place restrictions on your process, as they prescribe that everything must start with a UX architect and the lower-fidelity wireframe. We know that while this is true a lot of the time, it isn’t true all the time, so ensuring that we fit into either process that you may use was really important.

We also learned that developers wanted a more robust code output than what we were providing in the current Indigo Studio plugin, so the approach we took and the way we generated the models needed to be re-thought and re-architected. Our priority in this re-architecture was pixel-perfect native Angular code from a visual design digital asset, and still is. When we ship, you'll see Angular first, then Flutter a bit after that. Flutter came along this year as a very interesting approach to building native apps for iOS & Android, so we started on a Flutter code-generation engine as well. But most importantly, we realized that everything from design to code could not center around our tooling (Indigo Studio). While Indigo Studio is a critical piece in the UX process, it isn’t the only piece. We needed to ensure we kept you in the tools that make your software so successful.

With that background, our goal is to add value in each stage of the design to code process. Making what you do today even better, and at the same time saving hours, days and even weeks of software development time.

We know, from years of experience working with enterprises across the globe and listening to their challenges, having our own design process at Infragistics and having our own UX Services team that not only designs and builds software but helps other companies implement a UX process, that:

Successful software design & development is an iterative, collaborative process across multiple teams (most of the time geographically dispersed) with many stakeholders
Each target persona in the process of design and delivery of software has their own tool(s) that drive to successful digital outcomes
To ensure certainty in outcomes, tooling that fits each personas ecosystem will result in higher quality, amazing experiences, and enormous cost and time savings

We are addressing these needs with four pieces of technology that make up the core of Indigo D2C Studio. Let’s take a look at each one of these.

Atomic Design System

The foundational piece to this new story is a new Design System, based on the Atomic Design Methodology. Each atom (think of the atom as a UI widget) in our design system maps directly to our Material-based Ignite UI for Angular toolset, and to the core widgets in the Flutter SDK. We’ve meticulously created Sketch libraries of each core widget, with overrides for additional properties like name, data bindings, and more. Further beyond the atom, we are shipping molecules, organisms, templates & pages in the Atomic Design system – all to give you a leg up in productivity and design, and to feed into the other tools in Indigo D2C Studio.

In this screenshot, you can see the design system in action by way of a Sketch UI Kit. Each control is represented as a symbol in Sketch, allowing you to build entire screens with our UI controls directly in Sketch. As part of the design system, you'll get more capabilities like common UI patterns, full screens and even compete applications, all designed beautifully and ready for use.

Image-Based Prototyping: Intelligent UX from Visual Designs

We are announcing the addition of a brand-new tool to indigoDesigned.com. The new Image-Based Prototyping (IBP) tool (shipping in H2) on IndigoDesigned.com can import any type of screen designed in the visual design tool of choice (Sketch, Adobe, etc). With the IBP tool, you can add navigation between screens, collaborate with stakeholders by sharing designs and gathering feedback, and create usability studies at scale giving you analytics and recorded audio and video of each study. However, the real magic in IBP happens if your designs are created in Sketch with our new Atomic Design system. We light up Sketch drawings in the designer by highlighting symbols on artboards, optionally importing pre-defined navigation from Sketch, all while saving important meta-data as well as the Sketch file you imported for further parsing into our code generation model. In order to get generated code, you are required to use our design system, However, you are not required to use our design system to use Indigo IBP. Remember that each atom (UI widget) in the Design System maps to a widget in our Angular toolkit or Flutter SDK, if you aren't designing with the design system, we won't know what to do at the time of code-generation.

Visual Studio Code Plugin with Code Generators

The magic to a pixel-perfect app from your design is a new Visual Studio Code plug-in that includes a code generation engine that is fueled by the data we keep in the Sketch drawing and the meta-data from Indigo IBP. We are doing our best to accommodate all the detailed nuances that go into a design in the design process, so how we parse files from Indigo IBP into our model is quite an effort, and arguably the most critical piece of this process. Our goal is a pixel-perfect output – the way your design looks in Sketch, all the additional information layered on to the design like data model, bindings, the navigation and routing you add in Indigo’s IBP, should all be exact when we generate the code output in Angular & Flutter

Native Angular & Flutter UI Controls & Components

Best Angular Grid Chart in the World

Today, we have a rich set of native Angular components headlined with our best-in-class, high-performance Grid and Chart. We are working on Flutter variants as well and improving the overall feature-set we offer in Angular. Without a highly-capable, feature-rich UI library, you won’t be able to deliver the amazing experiences across multi-channel that your customers and stakeholder expect. We are right there with you in bringing best-of-breed plus high-performance UI to the platforms you care about most.

Building for the Broader Ecosystem

The really cool thing about our approach that I have laid out in this post is that we have extensibility, theming & branding built in. This is critical for any enterprise UX toolset. Since everything in the system starts from the atom in the design system, anything you create (UI patterns, screens, new themes, etc) using the foundational atom means that it can work across the entire system, including the code generation. I'll post more on that later, but with built-in extensibility, it's hard not to give this a try when we ship. It can save your teams so much time in the design to development process, it will pay for itself.

That being said, if you are a software publisher, and would like to talk to us about how your UI frameworks, visual design tooling or UX tooling can participate in the Design to Code process, I'd love to talk to you. The more tools we can support and that support us the better for the broader ecosystem. Email me at jasonb@infragistics.com and let's get a conversation started!

Public Preview Availability & Pricing

I hope this post gives you a good idea of what you can expect when we ship. Some of the screens may change, but the overall capability is what we are marching towards. I'm also holding back a few surprises, so make sure to sign up to be the first to learn about what more we have in store for this already awesome story!

To get your hands on the preview bits as soon as they are available, signup today at https://ko.infragistics.com/design. When you sign up, you’ll get an invite to a private Slack channel that we’ll use for communication on what’s happening, updates, feedback, etc. We expect previews to go out for feedback in the next month, with more to follow quickly after that. Today, you can still use all the goodness available in both Indigo Studio, IndigoDesigned.com and Ignite UI for Angular. So, if you need interactive prototyping tools, cloud-based collaboration and unmoderated usability studies at scale, get Indigo today. If you need the fastest HTML5 Angular Grid & Charts on the planet, check out Ignite UI for Angular today.

Remember, to get all of your questions answered, and to interact directly with the team and I, sign up for the preview today at https://ko.infragistics.com/design.