InVision StudioNEW UX Design

InVision Studio Tutorial: High-Fidelity Prototyping

Scroll down to learn about high-fidelity screen design with InVision Studio or download our InVision Studio ebook 🎉

Download (free)

Quick summary

Learn how to go from low- to high-fidelity while maintaining clean and organized design files.

What you’ll learn

  • Screen design
  • Organization
  • Components

Low vs. High-Fidelity

Designing high-fidelity screens is challenging because we’re moving beyond functional requirements and wireframes as we start to think about surface rather than structure.

For every design element, we need to think:

  • What color does it need to be?
  • What font will we use?
  • How large does it need to be?
  • Will we reuse it in the design elsewhere?

Also…

Objects and styles need to be maintained in a way that keeps the design organized, clean, and visually consistent. In this tutorial we’ll learn how to style our low-fidelity wireframe, how to keep our design organized, and how to create reusable components.

Let’s rock n’ roll! 🤘

Activating the Light Theme

Firstly, if our design is likely to be dark, it’s best to use the light theme.

  • View » Theme » Light Theme

And as you can see, this design does not require the light theme 😅.

Activating the light theme

Organizing the Document

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

Renaming Objects

Maintain a clean document by renaming objects — this will help the design handoff workflow run super-smoothly, and also improve the mood of our dear developers 😉.

Also, renamed objects are easier to search for.

  • Rename Object: ⌘R or double-click the object in the layer list
Renaming objects

Reordering Objects

Organization is tough, but if you really want to take it to the next level, change the ordering of objects in the layer list; order by first appearance, by alphabet, whatever.

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

Objects can also be reordered by dragging them up and down the layer list, but be aware that when objects overlap, the objects higher up in the hierarchy are the ones that will appear literally on top, which may conflict with our method of organization.

Prepare to make exceptions! 😅

Reordering objects

Locking Objects

Locking stops objects from being selectable. Say that an object — like an invisible modal that hasn’t yet transitioned into view — is blocking the view of other objects, making it impossible to select them. Locking the blocking object means we can select those other objects, as desired. Locked objects display the lock symbol in the layer list.

  • Lock/Unlock Object: ⌘⇧L
Locking objects

Note: locked objects can still be selected from the layer list, don’t worry.

Hiding Objects

And finally, delete objects that aren’t needed.

When in doubt, at least hide them temporarily!

  • Show/Hide Object: ⌘⇧H or click the eye icon
Hiding objects

Styling Objects

Layer list organized? Let’s begin styling! 😍

Fills

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

Fills are chosen via a color widget, which you’ll find available when styling text, backgrounds, shadows, and borders. Styling is done via the right-hand side inspector.

After opening up the color widget, we can see that there are a wide range of ways to apply color — RGB, HSL, Hex, the eyedropper tool (⌃C), or we can choose manually.

Color widget

Additionally, we can switch from the default Solid Fill to Linear Gradient Fill, Radial Gradient Fill, and Image Fill, but the real magic happens when we make colors reusable.

Fill types

In order to access Global and Document colors, see the bottom of the color widget — use the dropdown to switch between Global and Document swatches, and the + icon to add a new color to said swatch. For those unfamiliar with swatches, Global colors exist in every document, whereas Document colors exist in only the current document.

And once added to a swatch, we can access these saved colors quickly.

Global and document colors

Common Styles

Common styles apply to almost all types of objects.

Here they are with their keyboard shortcuts, and if needed, an explanation.

  • Align Left (icon): ⌘⌃←
  • Align Right (icon): ⌘⌃→
  • Align Top (icon): ⌘⌃↑
  • Align Bottom (icon): ⌘⌃↓
  • Align Middle (icon): ⌘⌃V
  • Align Center (icon): ⌘⌃H
  • Distribute Vertical (icon): ⌘⇧⌃V
  • Distribute Horizontal (icon): ⌘⇧⌃H
  • X: ←→
  • Y: ↑↓
  • Width: ⌘←→
  • Height: ⌘↑↓
  • Rotate: ⌘⇧R
  • Flip Vertical (button): ⇧V
  • Flip Horizontal (button): ⇧H
  • Fix Position (magnify icon, makes the object sticky)
  • Maintain Aspect Ratio (lock icon, scales objects uniformly)
Common styles
  • Blending (a list of filters)
  • Opacity: 0-100 (e.g. 02, 2, 22, …)
  • Radius (the curvature of corners on rectangles)
Blending, radius, and opacity

Shape Styles

  • Borders
    • Fill (color widget)
    • Position (inside, outside, etc)
    • Weight (the width of the border)
  • Shadows & Inner Shadows
    • Fill (color widget)
    • X (left offset of shadow)
    • Y (top offset of shadow)
    • Blur (the shadow’s solidity)
Shape styles

Typography Styles

  • Font Family (dropdown): ⌘T
  • Font Weight (dropdown): ⌘I ⌘B
  • Fill (color widget)
  • Size: ⌘option- ⌘option+
  • Line (spacing between lines)
  • Letter (spacing between characters)
  • After (like Line, but not the last line)
  • Left Align (button): ⌘⇧{
  • Center Align (button): ⌘⇧|
  • Right Align (button): ⌘⇧}
  • Justify (button): no shortcut
  • Auto (fluid width)
  • Fixed (fixed width)
  • Underline (button): ⌘U
  • Strikethrough (button)
  • Defaultcase (button)
  • Lowercase (button): ⌘⌃L
  • Uppercase (button): ⌘⌃U
Typography styles

Artboard Settings

  • Device
  • X: ←→
  • Y: ↑↓
  • Width: ⌘←→
  • Height: ⌘↑↓
  • Portrait (button)
  • Landscape (button)
  • Home Screen (button)
  • Scrolling (the scroll direction)
  • Background
    • Fill (color widget)
    • Include in Export (unchecked = transparent)
Artboard settings
  • Layout — Rows: ⌃R, Columns: ⌃L
    • Count (the number of rows or columns)
    • Gutter (the spacing between rows or columns)
    • Size (the actual width of each row or column)
  • Grid: ⌃G
    • Size (the size of each square)
Grid and layout settings

Copying Styles

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

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

Creating Components

Repeatedly copying styles can be a little bit mundane, but sometimes it’s necessary. Other times, we might reuse an object so many times that it’s better to convert it into a component, where it’s then added to our easy-to-access drag and drop asset library.

  • Create Component: ⌘K
  • Toggle Layer List/Library: ⌘L
  • Detach Component: right-click » Detach Component

Simply drag objects from library to artboard to reuse them.

Creating components

Editing Components

Click “Edit Master” to make changes to a component at the library level, changes that will reflect on all instances that exist in the design itself. To make changes to only one instance, do this at the document-level, creating what’s called a component override.

An awesome use-case for overrides would be if we were using components for buttons, where each instance of the button would require a different button label.

Click the sync icon under the “Components” section of the inspector to reset any overrides, making the instance a complete clone of the master component once again.

Also in the inspector, use the dropdown to turn a component into a different component — this is especially useful with components nested inside other components, allowing us to create alternative states (i.e. hover states and the like).

Editing components

Nesting Components

Creating nested components can be tricky. Honestly, this is one of workflows I’d love to see improved, but until then, here’s a step-by-step on how to make the magic happen:

  1. Create the nested component in the main document
  2. Create the main component with the nested component inside

So, in case you were wondering, the tricky aspect of this workflow is that we can’t drag-drop components into other components — the main component requires the nested component to exist within it as the main component is actually being created.

Also, here’s how to swap nested components (i.e. create alternative states):

  1. Create each state as a rogue component anywhere in the document
  2. Create the main component with one of the states as a nested component
  3. In the document, swap the nested component for another using the inspector
  4. After that, delete the rogue states from the document (they’re in the library now)

Nice work today kiddo! 🎉

Next up: vectoring and exporting. Get the book!

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.