What's New for Indigo.Design

In July 2018 we released Indigo.Design – a unified platform for visual design, UX prototyping, code generation, and app development. If you missed our previous announcement, you can read all about it here.

Indigo.Design aims to bridge the gap between best-in-class UX and best-in-class software development by offering a platform for visual designers, UX practitioners, and developers to collaborate efficiently. In a nutshell, it helps you deliver great UX to your customers faster than before with a design-to-code productivity story. Our ultimate goal is to help software teams in the enterprise to deliver better outcomes.

As you can tell, we have started the journey and will be releasing new capabilities along the way. After all, Rome wasn’t built in a day! You can take a peek at our vision/roadmap here. Following up on our roadmap discussion, here’s what’s new for Indigo.Design (coincides with Infragistics Ultimate 18.2 release):

Updates for Indigo.Design System

• Sync plugin for Sketch
• Indigo.Design System v2
• New UI components for UI kits

Updates for Indigo.Design Prototyping & Usability studies:

• Version history for prototypes created in the cloud
• Shared edit privileges for prototypes in group workspace
• Support for custom viewport sizes
• New device chromes

Indigo.Design Sync for Sketch

We are releasing Indigo.Design Sync Plugin for Sketch, which lets you publish your artboards to the Indigo.Design cloud directly from within Sketch. Moreover, after the initial publishing, you can push updates in the cloud in a split second through the menu (or by simply pressing Control+Shift+Y on your keyboard). Now, you may never have to leave your favorite tool as there is no need to switch context multiple times. Once you have the plugin installed, you can access it by using the OS X menubar (Plugins > Indigo Sync > Publish).

The link to the published share will be generated and provided to you inside of Sketch. You can paste this share link in the Indigo.Design code generator extension for VS code, and start generating components for Angular. If you have already added navigation for your artboards in Sketch, you can share this publish link with your reviewers and they can view and provide feedback on your prototype using the web browser.

To get deeper insights on how people use the prototype, click on the “create usability study” option from the publish complete dialog to start a usability study in the cloud. You can add tasks for people to complete and capture video recordings of people using the prototype, complete with task analytics.

Ready to give this a try?

Get Indigo.Design Sync plugin for Sketch

Indigo Design System v2

Two significant events happened almost together:

1. Google released their Material Guideline interpretation of a type system in May. We knew that the Indigo.Design UI Kits would need get an update, but we didn’t see it coming before typography was released as an Ignite UI for Angular theme update.
2. Sketch released version 51 with shared library styles and we knew it was the right time to update the foundations of our UI Kits – the Colors, Elevations and Typography inside the Styling library.

Responding to this, we have updated the Indigo.Design UI Kits to support the latest Sketch features through shared Style and Type libraries to enhance your productivity. Also, besides our consistency with Material guidelines for Type Scale, we are committed to extending their language to support data-rich scenarios. As a result, you will notice additional Detail-Text Style within the Typography section of the Styling Library. Discover all these goodies by downloading the Indigo.Design UI Kits v2.

New components for the Design System

With the Indigo.Design UI Kits v2, we have improved some of our existing components to make them more flexible and easier to use. However, we have also added a number of data visualizations, elements for user inputs, and more to the long list of components that we support. Just like any other component in the Kit, these also map to their Ignite UI for Angular siblings and generate the same grade of code when passed on to the code generation engine. The list of new components includes the following:

• Linear gauge
• Bullet graph
• Radial Gauge
• Chips
• Combo
• Dropdown

Version history support for prototypes

The very nature of design and evaluation leads to iteration. However, it’s a pain to keep track of iterations, which is why we have version history for the prototypes you create in the cloud.

Anytime you publish a change to your prototype, we automatically preserve a version. Thus, if your latest iteration strays too far, you can simply set an older version as the current version and continue editing from there on. You can even view the older version of the prototype without having to do anything special. This way you can compare them if you need to.

One thing to note is that if you are trying to generate Angular code using our Indigo.Design code generation extension in VS code, it will use the version set as “current”.

Shared edit privileges for prototypes in group workspaces

Group workspaces on cloud.indigo.design provide a shared space where members are co-owners of the prototypes. Furthering this mission, with this release, any group workspace member can make edits to the published prototypes as long as they belong to the workspace; even if they did not create the prototype themselves. For now, only one member can edit at a time, but we will ease that restriction over time. If someone else is editing the prototype, you will see a notification informing you who is editing.

For those fearing a doomsday scenario where someone “accidentally” deleted or corrupted a critical prototype, we’ve got you covered. With activity feed, you get a timeline view of any changes made to the workspace. So, if someone accidentally deletes a prototype, you can easily restore it from the activity feed area or from the email notification informing you about this action.

Custom viewport sizes

Sometimes your design does not have to be about a specific device. You may be designing for giant monitors or tiny watches. And for that reason, we’ve added support for custom viewport sizes.

If anyone is curious about the difference between custom size for browser vs. desktop, the height is ignored for the browser. This way your prototype will behave almost like a webpage. However, when you are previewing the prototype in the editor, we show you the height, so you see where the page fold will be. Our recommendation is to use desktop viewport if you always want to maintain height and width for your prototypes.

New device chromes

While we try hard to keep up with all the new form factors for devices, it’s never enough :). And looking at the trend pointing to fullscreen phones, all we will need is a rounded rectangle! In the meantime, we have added some of the common device chromes for your viewing pleasure (notched and notch-free variants).

Get started with Indigo.Design!

Don't stop with prototypes; get it in the hands of real users with our 1-click sharing, and the ability to view prototypes on any device. Harness the power of Indigo.Design Cloud for recording user sessions and task analytics

Use our Essential Plan for free or upgrade to Indigo.Design Professional starting at $39/mo. Want Code Generation? Get Indigo.Design Enterprise for $99/month!

• Sign up for free
• View plans & pricing