How to Use InVision’s Inspect for Better Development Collaboration

How to Use InVision's Inspect

The creation of a great app hinges on effective collaboration between designers and developers. To that end, designers now have access to a new magical tool called Inspect from InVision.

With the help of Inspect, designers can now transform the design to development workflow, making sure none of the design’s nuances are lost in translation. Inspect makes this possible by generating a pixel-perfect code that evolves with the design so that everyone has access to the latest, most updated code.

Developers can download the slice images, full assets, measurements and colors in easy steps and get access to various screen dimensions including typeface, fonts, palette, position, asset preview and much more from the web or mobile prototype.

Inspect makes it easier to create comps, discuss design challenges, export assets adaptively and generate real code for any design element. This way, the design to engineering hand-off becomes an easier, more accurate and less frustrating experience, saving time for both teams. You can now say goodbye to long emails and endless rounds of revision and say hello to real-time collaboration instead.

Here’s a quick introduction to how you can use Inspect for your next project:

1. Export slice images

a. Sketch: Make exportable layers for Slicing the images(PNG-1x 2x 3x, SVG, PDF, EPS) in any way you want.

Export slice images

b. Photoshop: Just type the layer’s name into image extension. Ex. Logo@1x.PNG, Logo@2x.PNG, Logo@3x.PNG, Logo.SVG, Logo.PDF, Logo.EPS etc…

Export slice images 2

2. Sync your designed screen via the Craft Sync plugin from your Sketch or Photoshop source file.

Sync your design screen

3. Click into a prototype and select a screen.

Click into prototype to and select a screen

4. Click on the  ‘+’ icon (with dashed circle) to send an Invitation mail to your developers to access the Inspect mode, Don’t worry, the developer cannot create or delete prototypes.

send invitation mail to developers

5. Click into Inspect mode by selecting the </> icon at the bottom

Click into inspect mode

6. You can change the Unit, Code or Color any way you want.

a.Units
    i.Pixels (Default for Web/Desktop)
    ii.Percentage
    iii.Points (Default for iOS)
    iv.DIP (Default for Android)
b.Code
    i.CSS (Default for Web)
    ii.LESS
    iii.SASS
    iv.SCSS
    v.Stylus
    vi.Swift (Default for iOS)
    vii.Objective-C
    viii.Android (XML) (Default for Android)
c.Color
    i.Hex (Default for Web/Desktop)
    ii.RGBA
    iii.UIColor (Default for iOS)
    iv.ARGB (Default for Android)

change the unit, code and colour

7. Select layer and get downloadable slice image in right bottom or check Assets from top right to download all images

get downloadable slice image

8. Change the screen in Inspect mode

change the screen to inspect mode

That’s it. That’s how easy it is to use Inspect.

This is how Inspect helps developers save a ton of time, which they can in turn spend mastering their code and becoming smarter developers.

Checklist To Secure Your Mobile App From Every Possible Threat

Download Checklist
*We will send the checklist to your inbox and keep you updated with the latest trends and insights on app development to keep you on top of your game.
I’m Prashant, Lead Designer at MoveoApps. I love to express myself through design and have designed everything from stunning mobile apps to beautiful web pages and creative graphics. I love to explore and create something new, unique and out of the ordinary every single time. Design challenges excite me and bring out the best in me. I’m a total team player and take pride in my work ethic. I strongly believe that design is not just about fancy technology or the newest trends. Good design is really about creating an effective brand and communicating in a way that truly invokes an emotion.