UX DesignNEW InVision Studio

InVision Studio Tutorial: High-Fidelity Prototyping

Learn about high-fi prototyping with InVision Studio — or read this article and more in our ebook: InVision Studio Pocketbook. Read offline, any time, on any device 🎉

Pre-order (free)

Quick summary

Learn how to go from low- to high-fidelity with InVision Studio while maintaining a clean and visually consistent document.

What you'll learn

  • High-fi screen design
  • How to stay organized
  • Component creation
  • Responsive resizing

High-Fidelity = Challenging

Designing screens in high-fidelity is challenging, because at this stage we’re moving beyond functional requirements as we start to think more about surface rather than structure. By surface we mean visual design (styles) and responsive design (resizing).

For every visual element, we need to think:

  • What color does it need to be?
  • What font will we use?
  • How large does it need to be?
  • How will it adapt to similar screen sizes?
  • Will we reuse it in other aspects of the design?

Collectively, objects and styles need to be maintained in a way that keeps the design organized, clean, and visually consistent. In this InVision Studio tutorial (following on from the last) we’ll learn how to style our low-fidelity mockup, how to keep our design organized, and how to design/create components that are both reusable and resizable.

Ready to rock n’ roll? Let’s begin! 🎉

Activating the Light Theme

So, first thing first — if our design is/will be somewhat dark, it might be better to switch over to the Light Theme. Generally, though, the dark theme is usually more suitable.

  • View » Theme » Light Theme
Activating the light theme

Organizing the Document

Okay, let’s clean up what we have so far.

Renaming Objects

Maintain a clean document by renaming objects accordingly — this helps the future handoff workflow run a lot more smoothly, and developers will literally love you for it.

  • ⌘R
  • Double-click the object (in the layer list)

Renamed objects are also easier to search for!

Renaming objects

Reorganizing the Object Hierarchy

If we really want to take organization to the next level, we can change the order in which objects appear in the layer list; either by visual order, alphabetical order, or whatever. Here are both the menu and keyboard shortcuts that you need to know:

  • Arrange » Forward: ⌘⌥↑
  • Arrange » Backward: ⌘⌥↓
  • Arrange » Move to Front: ⌘⌥⌃↑
  • Arrange » Move to Back: ⌘⌥⌃↓

We can also drag layer list objects to reorder them manually, but beware: when two objects overlap, the object higher up in the object hierarchy is the layer that will appear on top. This may conflict with our method of organization. Prepare to make exceptions!

Locking Objects

Locking stops a layer from being selectable. Say that we have an object that blocks the view of another object, making us unable to select the object that’s out of view. Locking the blocking object will enable us to select the object behind it while still keeping the blocking object in front, as desired. Locked objects have a lock symbol in the layer list.

  • Arrange » Toggle Layer Lock: ⌘⇧L
Locking objects

Hiding Objects

Why? You’ll know when it happens.

Hidden objects display the eye symbol, which can also be click-toggled.

  • Arrange » Toggle Layer Visibility: ⌘⇧H
Hiding objects

Styling Objects

Ready to get visual? 😍

Fills

In a moment we’ll briefly run through each style/setting, but before that we’ll specifically take a look at Fills. Fills apply to shape layers, text layers, and even artboards, and also have a range of variable options, making them somewhat complex compared to other styles. Let’s understand how these work before moving forward.

After opening up the color widget, it’s fairly evident that there’s a wide range of ways to apply color — RGB, HSL, Hex, manual selection, and of course, the eyedropper tool.

Opening the color widget

We can also switch from Solid Fill to Linear Gradient Fill, Radial Gradient Fill, and Image Fill. Everything here is fairly synonymous with even legacy tools such as Photoshop.

Switching fill types

In order to add or access Document and Global colors, see the bottom section of the color widget — use the dropdown to switch, and the + icon to add a new color.

For those unfamiliar, Global colors are those that exist in the swatch for every new document — Document colors are added to the swatch in only the current document.

Once added to the swatch, we can quickly access commonly used colors.

High-speed high-fidelity! 🎉

Global and document colors

Basic Styles

Basic styles apply to almost all types of objects.

  • Distribute Horizontal: click icon or ⌘⇧⌃H
  • Distribute Vertical: click icon or ⌘⇧⌃V
  • Align Left: click icon or ⌘⌃←
  • Align Center: click icon or ⌘⌃H
  • Align Right: click icon or ⌘⌃→
  • Align Top: click icon or ⌘⌃↑
  • Align Middle: click icon or ⌘⌃V
  • Align Bottom: click icon or ⌘⌃↓
  • X: specify value
  • Y: specify value
  • Width: specify value
  • Height: specify value
  • Rotate: specify value
  • Flip Vertical: click icon button or ⇧V
  • Flip Horizontal: click icon button or ⇧H
  • Fix Position: click icon (keeps object fixed to screen)
  • Maintain Aspect Ratio: click icon (applies to shapes only)
Basic styles
  • Blending: choose from dropdown (a list of image filters)
  • Opacity: specify value, use slider, or use number keys
  • Radius: specify value or use slider (applies to shapes only)
More basic styles

Some of the styles that require a numerical value can be declared using % units, although this doesn’t make the object responsive (we’ll talk more about that later).

Shape Styles

  • Borders
    • Fill: specify via color widget
    • Position: choose from dropdown
    • Weight: specify value (border width)
  • Shadows & Inner Shadows
    • Fill: specify via color widget
    • X: specify value (left offset)
    • Y: specify value (top offset)
    • Blur: specify value (radius)
Shape styles

Text Styles

  • Change Font: specify from dropdown or ⌘T
  • Style: specify from dropdown or see below
  • Bold: specify from dropdown or ⌘B
  • Italic: specify from dropdown or ⌘I (eye, not el)
  • Fill: specify via color widget
  • Size: specify value or ⌘⌥+- (font size)
  • Line: specify value (spacing between lines)
  • Letter: specify value (spacing between characters)
  • After: specify value (similar to Line, but acts more like grid spacing)
  • Left Align: click icon button or ⌘⇧{
  • Center Align: click icon button or ⌘⇧|
  • Right Align: click icon button or ⌘⇧}
  • Justify: click icon button (no shortcut available)
  • Auto: click button (fluid width)
  • Fixed: click button (fixed width)
  • Underline: click icon button or ⌘U
  • Strikethrough: click icon button (no shortcut available)
  • None (default case): click icon button
  • Lowercase: click icon button or ⌘⌃L
  • Uppercase: click icon button or ⌘⌃U
Text styles

Artboard Styles (& Settings)

  • Device: choose from dropdown (changes artboard frame)
  • Portrait: click icon button (switches to vertical orientation)
  • Landscape: click icon button (switches to horizontal orientation)
  • Home: click icon (declares current artboard as the home screen)
  • Scrolling: choose from dropdown (changes scroll direction of the artboard)
  • Background
    • Fill: specify via color widget
    • Include in Export: declare via check box (unchecked = transparent)
Artboard settings

Layouts are used for designing mockups with guidelines. Grids are better suited for designing pixel-perfect illustrations. Neither will appear in exports or previews.

  • Layout
    • Count (number of rows or columns)
    • Gutter (spacing between rows or columns)
    • Size (width of each row or column)
  • Grid
    • Size (size of each square)
Grid and layout settings

We can toggle columns, rows, and grids on and off.

  • View » Layout » Toggle Columns: ⌃L
  • View » Layout » Toggle Rows: ⌃R
  • View » Layout » Toggle Grid: ⌃G

Copying Styles

Copying styles from one object to another saves us bundles of time, and this is something we’ll find ourselves doing quite often. We’ll need the context menu, though…

  • Right-click » Copy Style
  • Right-click » Paste Style

Creating Components

Copying styles can be repetitive, but sometimes it’s necessary. Other times, we might reuse a certain object so many times that it’s worth converting it into a reusable component and adding it to our easily-accessible drag and drop library of assets.

Convert objects into components:

  • Layer » Create Component: ⌘K

Once created, they’ll appear in the library (Toggle Library: ⌘L), and once in the library, we can drag them onto the canvas to reuse them an unlimited amount of times:

Creating components

Editing Components

Click “Edit Master” and make the desired changes to update all instances of the component. To make changes to only one instance of a component, locate it within the mockup itself. This creates an exception, unless we hit the sync icon in the inspector, which will then update all instances of the component throughout the document.

Editing components

Detaching Components

  • Right-click » Detach Component

Studio does not yet support nested components, which enables designers to create alternative states of otherwise visually consistent components. We’ll let you know.

Responsive Resizing

By now our mockup should be looking a little more awesome (and if we were able to conduct any extra rounds of feedback along the way, that’s even better). However, there’s one thing our mockups are still not — responsive. In this next step we’ll make our mockup responsive. Designing for larger screens will require additional artboards, but for similar breakpoints, we can benefit from a feature called responsive resizing.

Open Preview with ⌘P so we can test in realtime.

Change the Viewport setting to something a little larger.

Responsive testing

Pinning

Pinning refers to the method of creating semi-adaptive layouts by fixing objects to one or more sides. Technically speaking, all objects are fixed to the top and left sides of the artboard by default, however a right pin would ensure that an object stays fixed to the right when the screen is resized in Preview mode. Pinning to the left and right would ensure that the object is fluid, and while the concept of responsive design goes way beyond “making it fit”, this feature does enable designers to create adaptive layouts.

  • Toggle Top Anchor: ⌥⌃↑
  • Toggle Right Anchor: ⌥⌃→
  • Toggle Bottom Anchor: ⌥⌃↓
  • Toggle Left Anchor: ⌥⌃←

Or, define anchors either via the diagram or dropdown.

In our example, most objects were set to Left & Right, effectively making them fluid. The nav was set to set Bottom, and the text layers were set to Center (since we wanted to keep them at the same width, as opposed to making them fluid/stretchy).

Responsive resizing

Come back next week to learn how to draw and export graphics with InVision Studio. In the meantime, subscribe to the book and we’ll let you know when.

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.