UX DesignNEW InVision Studio

InVision Studio: Vectors, Masking, and Exporting

Scroll down to learn how to draw, mask, and export assets with Studio or download our InVision Studio ebook 🎉

Pre-order (free)

Quick summary

Learn how to create vectors, mask images, and export assets with InVision Studio — feat. design handoff and boolean operations.

What you’ll learn

  • Boolean operations
  • Drawing vectors
  • Masking images
  • Exporting assets

Side Quest Anyone?

So, in the last InVision Studio tutorial we took our first foray into high-fidelity prototyping, however, it was a long tutorial and there were a few things we didn’t touch on — in this tutorial we’ll look into booleans, vectors, masking, and exporting.

We’ll start with booleans.

Boolean Operations

Boolean operations are used to combine two or more shapes into one (although the shapes can still be manipulated individually). In the example mockup we’ve been using throughout this InVision Studio Series, there’s one element that’d make an ideal candidate for a boolean operation — the “x” icon — up until now we’ve been using the multiplication symbol unicode character accessed via the MacOS Character Viewer.

Objective: create an “x” icon using two rectangles.

Adding a Page

Tip: design icons on a new page to stop them from showing up in the shared prototype.

  • Add Page: ⌘⇧N (or click the + icon in the layer list)

Creating An Artboard

Create an artboard (A) with 96x96 dimensions (easily divisible by 2, 3, and 4).

Creating an artboard

Switch on the Grid, with lines at every 2px (Size: 2).

Grid with 2px lines

Next, create two rectangles (R):

  • Rotate: -45°/45°
  • Width: 20px
  • Height: 112.9px
  • X/Y: 1px (the 1px space accounts for overflow)
Creating shapes

Now let’s run through the boolean operations.

Union Selection

Union combines 2+ shapes into one.

Union operation

Subtract Selection

Subtract uses one shape as a mask.

Subtract operation

Intersect Selection

Intersect leaves only the region where the 2+ shapes overlap.

Intersect operation

Exclude Selection

Exclude leaves only the region where the 2+ shapes don’t overlap.

Exclude operation

In this scenario it’s the Union operation that we need.

Vectors

Put the “x” icon aside for now.

Shapes are vectors, meaning we can scale them up and down without losing visual quality, and if we export them as SVG, they can remain scalable when used on a live website. The defining factor of vectors is that they’re made up of multiple paths, and all paths are connected via points. Manipulating these changes the shape of the vector.

Let’s mess around using a rectangle (R).

Press return or click the Edit Path icon to begin (hit esc to exit edit mode, if needed).

Edit Path

We can split a path by clicking on it — this adds an extra point to the vector, making the shape more complex. Manipulating these points changes the adjacent paths.

Split Path

Paths can be removed by clicking the Cut Path icon.

Cut Path

Paths can be created with the Pen tool (P).

Pen tool

Cutting achieves the opposite of the pen (the pen creates paths, Cut Path removes them). Cutting a path leaves the path as what’s called an “open path” — the vector won’t change shape if we cut a straight path, but it will allow us to fill the void with the pen tool. To instead undo a path split, delete the point by hitting or holding while clicking on it. This, for example, would turn a 5-sided shape back into a 4-sided shape.

Manipulating Paths and Points

Simply drag a point to move it, redefining the shape’s basic structure.

Manipulating vectors

Points have four types (Straight, Mirrored, Asymmetric, and Disconnected). Mirrored, Asymmetric, and Disconnected all come with two draggable handles to help us create curves, however, to really understand how they work it’s best to experiment with them.

Point types

Straight types also have a Corner setting.

Point radius

Tip: for best results re: icon design, change Rounding to “Full Pixels”.

All-in-all, if you’ve used any other vector-based screen design tool before, then drawing vectors with InVision Studio is a breeze. Drawing vectors is an acquired skill though, and regardless of the chosen tool, it does require time and effort to master.

Later on in the series we’ll complete a more practical exercise 👌.

Masking

Back in the low-fidelity tutorial we learnt how to fill a shape with a background image — this is the quickest way of inserting an image into a mockup, although, it doesn’t really allow us to control how the image aligns. However, the masking approach does.

  • Masking allows images to be styled and aligned while masked
  • With image fills, we can only align using Fill, Fit, Tile, and Stretch

Let’s try it.

Paste an image over a selected shape (⌘⇧V) and hit ⌘⌃M (or click the Toggle Mask icon) with both the shape and image selected. You’ll notice that while we can still move, align, and style the image, the image is cut off outside the boundaries of the shape.

Mission accomplished!

Also, the shape and image will be grouped together.

Image masking

Exporting

When it’s time to hand over mockups to developers, we might need to set export settings for each image asset. After selecting an asset (such as an icon), click on the Export tab at the bottom of the inspector to reveal the export settings for that asset.

  • Size: the asset resolution (e.g. 2x or 3x)
  • Prefix/Suffix: the naming convention (e.g. 2xLogo.png or logo2x.png)
  • Format: the asset’s file format (available formats include: PNG, JPG, SVG)

Click the + icon to create additional export rules.

Exporting the assets is easy — hit ⌘⇧E or click the Export [layer name] button.

Exporting assets

Design Handoff

Or there’s design handoff. Exporting assets one-by-one is time-consuming, and also doesn’t tell the developer much about the other elements and styles in the design.

How large is that font exactly?

What’s the hex code of that blue?

How much space is between those icons?

InVision Inspect will tell developers everything they need to know.

As we learnt earlier on in the series, Inspect is a browser-based design handoff tool accessible via share links (hit I) after clicking the Publish to InVision icon in Studio.

Below: a screenshot from earlier in the series.

Publish to InVision

Directly in the browser, Inspect will reveal not only the styles used by each object, but the copy used on text layers, the color swatches used in the document, and of course, it’ll allow developers to extract the assets. Styles can even be extracted as code, formats of which include SCSS, SASS, LESS, CSS, Android, Swift, Obj-C, and Stylus.

Note: design handoff with Inspect doesn’t require designers to set export settings!

InVision Inspect

Had a blast but feel like you’ve missed a few steps? Download the ebook (free) to learn about InVision Studio from the ground up. Download InVision Studio here.

Daniel Schwarz, author

Daniel Schwarz

Daniel Schwarz is a UX/UI designer, web developer, and maker by background, but a writer, editor, 5x author, and teacher at heart. Currently a design blog editor at SitePoint (ex Toptal), writer at .net Magazine and Web Designer Magazine, but occasionally a collaborator with top design companies such as Adobe and InVision.