Introducing Inspect: Where the file is the design spec

Building digital products is a collaborative effort. Abstract makes this process more transparent by opening up the design process to the entire organization. Today, we’re launching a feature for designers to collaborate more effectively with their engineering partners and make sure development teams always have the latest design spec.

We’re proud to announce Inspect, an easy way for engineers to quickly gather all the information they need to implement any design. Since Inspect is built on top of our versioning system, designers never need to upload the latest version of a file, and engineers no longer have to worry about referencing an outdated design spec. With Abstract, you always have the latest version at hand—on the web or in the desktop app.

Never ask, "Is this the latest?" again

Abstract continues to bring design and engineering closer together. By working in a parallel manner with Branches and Commits, designers and engineers share a predictable way to see the work and engage with one another. Every team has a different workflow for implementing designs, and one place we knew we could remove some friction was the design specification. With Inspect, repeatedly exporting screens, updating annotations, and adding redlines are a thing of the past.

For designers, there are no additional steps. You can just keep creating and committing your work in Abstract as usual. Engineers now have access to a range of specifications they need to accurately implement any project. As the designs change, so do the specifications, automatically.

Automatic updates are possible when your team’s design work lives in Abstract. Not only does your team have access to a rich history of all of the design work within your organization, engineers can now access every single detail of the artboards and symbols in your team’s Sketch files without having to open Sketch.

What you can expect

Inspect can be found in a new tab on the layer detail, alongside Comment (previously, Design) and Compare. We also added handy new shortcuts: Option + 1–3, respectively, to quickly switch between tabs.

Always find the latest designs

Someone on your team committed new changes? Design specifications are instantly updated. Looking for an older version of a screen? Simply navigate through the history on the layer detail to see previous versions of the design.

Measure layers and distances

Click a layer, any layer—text, shape, path, symbol—then simply move your cursor to measure the next one. Inspect provides essential information about positioning, sizing, and spacing of any element.

See all layer specifications—even symbols

The right-hand panel contains all the information you could possibly need: opacity, rotation, backgrounds, shadows, line-height, alignment…It’s all there, even for layers inside symbols.

Overview of colors and typefaces

Inspect also provides an aggregate view of all the colors used on an artboard, along with a comprehensive list of all the typefaces and their respective properties.

Copy CSS code on the fly

Abstract generates CSS* for any element in the design. Select only what you need, or quickly copy all properties. *More languages are coming soon.

Single-click access to text strings

Eliminate typos and mistakes that come with typing out text. Simply click any value and copy text strings directly from artboards to your clipboard.

Access without Sketch installed, in any browser

Inspect gives you all the information to implement a design without needing a Sketch license, and it's available through our web app for those who don’t use Mac.

Available to everyone on the team

Whether you’re a Contributor or a Viewer, Member or Guest, your entire team* has access to the new Inspect tab. *Only available on our Business Plan.

What’s next?

This release is just the initial set of features we’re building for anyone implementing designs. We’re already working on more, some of which will launch very soon:

• Highlighting properties which have changed between commits (think of this as diffing for the design spec!)
• More code generation languages (Sass, iOS, Android)
• Assets based on export settings set in the Sketch file
• An API to give 3rd-party developers access to all of the rich design data

We will continue working toward making it easier for designers and engineers to work together. We are excited for you to use Inspect and look forward to hearing your feedback.

Update to the latest version of Abstract by selecting Abstract → Check for Updates from the main Mac menu bar or by downloading the latest version. See a full list of all changes in the detailed release notes.