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 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).
Switch on the Grid, with lines at every 2px (Size: 2).
Next, create two rectangles (R):
- Rotate: -45°/45°
- Width: 20px
- Height: 112.9px
- X/Y: 1px (the 1px space accounts for overflow)
Now let’s run through the boolean operations.
Union combines 2+ shapes into one.
Subtract uses one shape as a mask.
Intersect leaves only the region where the 2+ shapes overlap.
Exclude leaves only the region where the 2+ shapes don’t overlap.
In this scenario it’s the Union operation that we need.
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).
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.
Paths can be removed by clicking the Cut Path icon.
Paths can be created with the Pen tool (P).
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.
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.
Straight types also have a Corner setting.
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 👌.
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.
Also, the shape and image will be grouped together.
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.
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.
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!
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.