Introducing Inspect: Where the file is the design spec
No more exporting files, Inspect provides one place to access the information needed to implement any design!
June 21, 2018
Building digital products is a collaborative effort. Abstract makes this 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.
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. 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.
As a designer, there are no additional steps, just keep creating and committing your work in Abstract as usual. As an engineer, you now have access to a range of specifications needed 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? 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 is available through our extensive 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 .
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 towards 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.