Inspect for Sketch prototypes in the cloud or private server

George Abraham / Tuesday, June 25, 2019

We are on a mission to help software teams be more productive and also to deliver amazing user experiences! As part of this mission, Indigo.Design lets you create your designs or prototypes in Sketch, using the Indigo.Design UI kit, and then generate Angular components from these designs directly in Visual Studio code. 

It’s possible that you don’t need to generate components directly from Sketch designs but prefer to review the design spec and create the components manually; maybe using something other than Angular. Also, not everyone on the team may own a Sketch app license or use a Mac computer to view Sketch documents.

Today we are announcing the ability to inspect your Sketch designs directly on cloud.indigo.design (or your private Indigo Server). Now you can go to a single source for your design specifications and prototypes.

What is Inspect?

The Inspect feature takes the tediousness out of marking up design documents with visual specifications like spacing, type styles, and many others. UI developers need this information to recreate the designs in code, but it’s not possible to always predict what they may need up front.

Inspect allows you to extract any visual specifications directly from Sketch designs when needed. Better yet, it requires no extra effort on the design front to achieve it. To view the properties for any UI element, simply select it in your design and view the relevant properties in a visual format. We also generate an equivalent CSS representation to speed up your web development.

You can also view the relative spacing between sibling or parent UI elements based on the select UI element. To do this, hover on any UI element other than the selected one. If things look a bit crowded, don’t hesitate to zoom in :).

Image showing relative spacing

How to enable Inspect

The Inspect feature is available in the prototype editor at http://cloud.indigo.design. But before you can use Inspect in the web-based editor, you will need to first publish your designs using our latest Indigo.Design Sketch plugin

If you need to support downloading image assets in your design, mark your images or icons for export in the Sketch before publishing.  The marked images will show up as downloadable assets when someone "inspects" the image.

marking the image for inspect

Don't have a Sketch design available but still want to give this a try? Use our sample prototype when creating a new prototype in the cloud. For existing designs, find the prototype in your group workspace and select the “edit prototype” option. In the editor, you can switch over to the inspect tab to start reviewing the specifications.

To allow other team members to inspect your designs and notify them when you update designs, publish your design to a group workspace and invite them there. Ready to see it in action?

Try Inspect now

Private server for your Sketch prototypes with inspect, commenting, and usability testing

As mentioned earlier, with Indigo.Design, you can access both your prototypes and inspect in one place. You can get all the power of cloud.indigo.design as a private Indigo Server so that only members from your organization have access. Your private server also supports unmoderated usability testing with user videos to ensure that you have the right design before you generate code. We truly believe in the value of iterating with real customers. Indigo.Design On-Prem offers a unified platform to design and evaluate your designs as frequently as required and with no limits on the number of test participants. 

Contact sales@infragistics.com for a demo of Indigo.Design On-Prem, our private server offering. 

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

Get Indigo.Design Professional starting at $39/mo for a complete UX prototyping solution. Want Code Generation? Get Indigo.Design Enterprise for $99/month!