Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


Working with Freehand in InVision V7

This article provides answers for InVision V7. If you’re on InVision V6, read this article instead. Not sure which version you're using? Find out now.

Freehand in InVision lets you rapidly capture feedback throughout the product design process in a real-time, flexible, and collaborative way. You spend less time exporting work into presentable formats and more time creating meaningful experiences for users in collaboration with your team. Like prototypes and boards, Freehand lets anyone on your team join, from anywhere, on any device to weigh in on your concepts and designs.

Stay up to date on the most recent Freehand enhancements by following our Freehand Release Notes.

Guided Video Tour

To get more familiar with Freehand, we also recommend taking a guided video tour, led by one of our experienced InVision product experts:

Creating a Freehand document

To create a freehand in InVision V7:

  1. Sign in to your InVision V7 account.
  2. Click the + Create button, and then click Freehand.
  3. In the Create new freehand dialog, enter a name, and then click the Create button.
  4. In the template gallery, click Blank to create an empty freehand, or browse the gallery and select the perfect starter template.
    invision-v7-create-new-freehand.gif
You can also create freehands from prototype screens. To learn more, check out this article: InVision V7: Can I add prototype screens to a Freehand document?

Navigating a Freehand document

To navigate through your freehand, click the Pan tool icon(invision-freehand-pan-canvas-icon.png) in the bottom-right corner. Alternatively, place two fingers on your trackpad or hold the spacebar while you click and drag. To zoom, hold the Command key while scrolling, use pinch gestures on your trackpad, or use the +/- controls (also in the bottom-right corner.

Using Freehand tools

At the top of the canvas, you'll see the More menu icon (•••) and the Present icon (invision-freehand-present-icon.png).

More menu

Clicking the More menu icon (•••) in Freehand opens a dropdown menu with these options:

  • Version history: Click this option to revert to a previous version of the freehand document you're working in.
  • Export to image: Click this option to export the entire freehand document as a still image—complete with sticky notes.
  • Create new Freehand: Click this option to create a new freehand document from scratch, without needing to first leave the freehand you were working in.

Present

Click the Present icon (invision-freehand-present-icon.png) to present the freehand to your fellow collaborators from your perspective.

Toolbar

To the left of the canvas, you'll notice the Freehand toolbar. Use this table for a quick overview of each tool, and learn more about each tool below.

Icon

Tool Name

Shortcut

Purpose

invision-freehand-pointer-tool.png

Pointer

V or 1

Select objects to edit, resize, or move.

invision-freehand-pencil-tool.png

Pencil

P or 2

Draw any shape on the canvas.

If the Eraser tool is selected, you'll need to click the Eraser icon again and select the Pencil tool.

 invision-freehand-eraser-tool.png

Eraser

E

Erase entire objects by dragging the eraser over them.

To use, click the Pencil tool and select the Eraser tool.

invision-cloud-v7-freehand-text.png

Text

T or 3

Enter text on the canvas.

invision-cloud-v7-freehand-shape-tool.png

Shape

S or 4

Quickly draw basic shapes: squares, circles, or lines

invision-cloud-v7-freehand-image.png

Image

I or 5

Upload images directly to the canvas.

invision-freehand-sticky-note-tool.png Sticky Note N or 6

Add color-coded notes anywhere on the canvas.

invision-freehand-reaction-tool-icon.png Reactions N/A

Add one of seven animated emojis to the canvas.

 

Contextual menus

Depending on which tool you are using and/or which type of object you have selected, you'll notice different contextual menus that include the additional fine-tuning tools described below.

Pointer tool

The pointer tool (invision-freehand-pointer-tool.png) lets you select an object or group of objects, including lines, shapes, text boxes, images, and sticky notes. Whether working with one object or a group, you'll move it by dragging and dropping it elsewhere on the canvas. To scale any object or group of objects you have selected, drag a corner of the bounding box in any direction.

Pencil tool

The pencil tool (invision-freehand-pencil-tool.png) lets you draw on your canvas. To draw straight lines, hold Shift while you click and drag (if using a Windows machine, hold Alt instead).

With a pencil-drawn object selected, you'll see additional tools in the contextual menu that appears above the object:

Icon

Purpose

Related Shortcuts

Description

invision-freehand-contextual-menu-shape-color.png

Color

  • Shape fill: ⌘E

Select your color, opacity, and whether to fill the object.

invision-freehand-contextual-menu-line-weight-icon.png

Line Weight

  • Thin: ⌥1
  • Medium: ⌥2
  • Thick: ⌥3

Select one of 3 line-weight options.

invision-freehand-contextual-menu-line-end-points-icon.png

Line Caps

  • Change Start: ,
  • Change End: .
  • Remove Start: ⇧,
  • Remove End: ⇧.

Select one of 4 caps for both the start-point and end-point of your line:

invision-freehand-line-no-caps.png invision-freehand-line-start-arrow.png invision-freehand-line-start-circle.png invision-freehand-line-start-bar.png
invision-freehand-line-no-caps.png invision-freehand-line-end-arrow.png invision-freehand-line-end-circle.png invision-freehand-line-end-bar.png

invision-freehand-refine-grid-alignment-icon.png

Refine Alignment

N/A With two or more objects selected, refine the alignment of objects in the group.
invision-freehand-contextual-menu-lock-object-icon.png

Lock Object 

N/A

Lock an object on the canvas to prevent other collaborators from moving or editing it.

   invision-freehand-arrange-objects-grid-icon.png

Arrange to Grid

N/A

With two or more objects selected, click the icon and, without releasing the click, drag the mouse to arrange the objects as wanted along the grid.

You'll see the Arrange to grid icon in the top-right corner of the object group rather than in the contextual menu.

 

Text tool

The text tool (invision-cloud-v7-freehand-text.png) allows you to enter text on your canvas. When you select the text tool, a contextual menu appears at the top of the page so you can select a color for the text. Then, click anywhere on the canvas and begin typing. Use the text tool to leave feedback on individual screens, flows, or specific features. Pressing Shift + Enter creates a line break.

Switch to the pointer tool to reformat your text or drag it to a different point on the canvas.

With a text box selected, you'll see these additional tools in the contextual menu:

Icon

Purpose

Related Shortcuts

Description

invision-freehand-contextual-menu-text-icon.png

Text or
Note

N/A 

Convert a text box to a sticky note or vice versa.

invision-freehand-contextual-menu-color-icon.png

Color

N/A 

Edit the text color.

invision-freehand-text-bold.png

Bold

⌘B

Toggle bold text on (pink) or off.

invision-freehand-text-italic.png

Italic

⌘I

Toggle italic text on (pink) or off.

invision-freehand-text-highlight.png

Highlight

⌘E

Toggle highlighted text on (pink) or off.

invision-freehand-text-left.png

Left Align

⌘ ⇧ L

Left align your text.

invision-freehand-text-center.png

Center Align

⌘ ⇧ C

Center your text.

invision-freehand-text-right.png

Right Align

⌘ ⇧ R

Right align your text.

invision-freehand-refine-grid-alignment-icon.png

Refine Alignment

N/A

With two or more objects selected, refine the alignment of objects in the group.

invision-freehand-contextual-menu-lock-object-icon.png

Lock Object

N/A

Lock an object on the canvas to prevent other collaborators from moving or editing it.

   invision-freehand-arrange-objects-grid-icon.png

Arrange to Grid

N/A

With two or more objects selected, click the icon and (without releasing the click) drag the mouse to arrange the objects as wanted along the grid.

You'll see the Arrange to grid icon in the top-right corner of the object group rather than in the contextual menu.

 

Shape tool

Use the shape tool (invision-cloud-v7-freehand-shape-tool.png) to quickly draw basic shapes. Click the shape tool to reveal and select a rectangle, oval, or straight line. After selecting the type of shape, use the contextual menu at the top of the page to select a color and line weight for the outline. Then, click anywhere on the canvas and drag your mouse to add a shape.

To create a perfect square, circle, or angled line, hold Shift while using the shape tool.

With a shape selected, you'll see the following tools in the contextual menu that appears above the shape:

Icon

Purpose

Related Shortcuts

Description

invision-freehand-contextual-menu-shape-color.png

Color

  • Shape fill: ⌘E

Select your color, opacity, and whether to fill the object.

invision-freehand-contextual-menu-line-weight-icon.png

Line Weight

  • Thin: ⌥1
  • Medium: ⌥2
  • Thick: ⌥3

Select one of 3 line-weight options.

invision-freehand-contextual-menu-line-end-points-icon.png

Line Caps

  • Change Start: ,
  • Change End: .
  • Remove Start: ⇧,
  • Remove End: ⇧.

Select one of 4 caps for both the start-point and end-point of your line:

invision-freehand-line-no-caps.png invision-freehand-line-start-arrow.png invision-freehand-line-start-circle.png invision-freehand-line-start-bar.png
invision-freehand-line-no-caps.png invision-freehand-line-end-arrow.png invision-freehand-line-end-circle.png invision-freehand-line-end-bar.png

invision-freehand-refine-grid-alignment-icon.png

Refine Alignment

N/A

With two or more objects selected, refine the alignment of objects in the group.

invision-freehand-contextual-menu-lock-object-icon.png 

Lock Object  

 N/A

Lock an object on the canvas to prevent other collaborators from moving or editing it.

   invision-freehand-arrange-objects-grid-icon.png

Arrange to Grid

N/A

With two or more objects selected, click the icon and, without releasing the click, drag the mouse to arrange the objects as wanted along the grid.

You'll see the Arrange to grid icon in the top-right corner of the object group rather than in the contextual menu.


Image tool

The image tool (invision-cloud-v7-freehand-image.png) lets you upload images directly to the canvas. Once you upload an image, switch to the pointer tool to resize your image or drag it to a different point on the canvas.

When you drop an image over something drawn with the pencil tool, the image will automatically be placed behind the drawing.

With an image selected, you'll see just one option in the contextual menu: Click the Lock Object icon (invision-freehand-contextual-menu-lock-object-icon.png) to prevent other collaborators from moving or editing it.

Sticky Note tool

Use the sticky note tool (invision-freehand-sticky-note-tool.png) to add notes anywhere on the canvas. When you select the Sticky Note tool, a contextual menu appears at the top of the page so you can select a color for the note.

With a sticky note selected, you'll see the following tools in the contextual menu that appears above the note:

Icon

Purpose

Related Shortcuts

Description

invision-freehand-contextual-sticky-note-icon.png

Text or
Note

N/A

Convert a text box to a sticky note or vice versa.

invision-freehand-contextual-menu-sticky-note-color-icon.png

Color

N/A

Select your color, opacity, and whether to fill the object.

invision-freehand-text-bold.png

Bold

⌘B

Toggle bold text on (pink) or off.

invision-freehand-text-italic.png

Italic

⌘I

Toggle italic text on (pink) or off.

invision-freehand-text-highlight.png

Highlight

⌘E

Toggle highlighted text on (pink) or off.

invision-freehand-text-left.png

Left Align

⌘ ⇧ L

Left align your text.

invision-freehand-text-center.png

Center Align

⌘ ⇧ C

Center your text.

invision-freehand-text-right.png

Right Align

⌘ ⇧ R

Right align your text.

invision-freehand-refine-grid-alignment-icon.png

Refine Alignment

N/A

With two or more objects selected, refine the alignment of objects in the group.

invision-freehand-contextual-menu-lock-object-icon.png

Lock Object 

 N/A

Lock an object on the canvas to prevent other collaborators from moving or editing it.

   invision-freehand-arrange-objects-grid-icon.png

Arrange to Grid

N/A

With two or more objects selected, click the icon and, without releasing the click, drag the mouse to arrange the objects as wanted along the grid.

You'll see the Arrange to grid icon in the top-right corner of the object group rather than in the contextual menu.

 

Reactions tool

Use the reactions tool (invision-freehand-reaction-tool-icon.png) to add one of 7 available emojis anywhere on the canvas. After adding a reaction, the tally mark next to it will increase each time another collaborator clicks the reaction; that makes reactions perfect for voting during Freehand sessions. For example, your team might use reactions to vote on the best ideas from a brainstorming session.

invision-freehand-add-reactions.gif

It isn't possible to select a reaction on the canvas; therefore, there is no contextual menu for the tool.

Starting with Freehand templates

Starting with a thoughtfully designed, completely editable Freehand template can save you considerable time while ensuring design thinking best practices that facilitate powerful collaboration.

invision-freehand-template-gallery.gif

The Freehand template gallery showcases a curated set of 20+ templates carefully created by design industry thought leaders—including Atlassian, AWS, IBM, InVision (of course!), Xbox, and many others. Each template in the gallery includes pre-built stickers (or other building blocks) you can copy & paste as needed to re-build the freehand for your team's needs.

Search the gallery

When viewing templates in the gallery, click the Search icon (invision-freehand-template-gallery-search-icon.png) to find a template by name, or click a tab on the left to browse by category:

  • All templates
  • Brainstorming
  • Wireframes and flowcharts
  • Effective meetings 
  • Strategy and planning
  • Custom templates

All templates

Not quite sure how to solve a design problem? Rather than selecting a specific category, browse the entire gallery for just the right template to kick off your collaboration and find the solution.

Brainstorming

Select one of our curated brainstorming templates to generate free-form ideas together with your team:

  • Brainstorming, created by Xbox: Generate ideas quickly as a team.
  • Design Sprint Template, created by Design Sprint Ltd: Build and test a prototype in just 5 days.
  • Empathy Map, created by Dave Gray: Help your team develop a better understanding of your customer.

Wireframes and flowcharts

Build your wireframes and flowcharts in no time—well, a lot less time—with the pre-built UI elements in these templates:

  • Customer Journey Map, created by American Express: Create a shared vision for your customer experience.
  • Wireframe, created by InVision: Visualize your ideas faster.
  • Flowchart, created by InVision: Create diagrams quickly.

Effective meetings

Bad meetings happen. These templates are specifically designed to correct that problem and keep your meetings on a productive path:

  • The Good Partner Map, created by Ryan Rumsey: Better understand the value of your team and become a better collaborator.
  • Problem Prioritization, created by New Haircut: Transform a problem into your team's next big opportunity.
  • Icebreaker, created by InVision: Get to know one another better or simply spark your team's creativity with fun and easy icebreaker games.
  • Retrospective, created by InVision: Collect stakeholders' thoughts on a recent project, sprint, or other initiative.
  • Daily Standup, created by InVision: Perfect for daily or weekly standup meetings, this template is designed to let teams share updates in a simple, straightforward format.

Strategy and planning

What do the world's most successful products have in common? They typically start with effective strategic and planning practices to form a solid foundation on which to build. One of our strategy and planning templates will help you start planning your product—productively:

  • Sprint Planning, created by Atlassian: Centralize your agile process.
  • Product Launch, created by LaunchDarkly: Unify your process from beginning to end.
  • Persona Profile, created by Brillo: Develop a deeper understanding of your users.
  • Product Planning, created by IBM: Create a cohesive strategy for new and existing products.
  • Affinity Diagram, created by UserTesting: Make sense of your data by organizing ideas with a virtual affinity diagram.
  • Marketing Project Plan, created by Asana: Prep to kick off your marketing campaign.
  • Card Sorting, created by KPMG Digital Village: Capture a variety of diverse perspectives.

Custom templates

When you strike gold with an especially effective freehand of your own, you can save it as a custom template the rest of your Enterprise can use to start new freehands!

Creating, sharing, and editing custom Freehand templates

While archiving and deleting a custom Freehand template works just like archiving and deleting InVision V7 documents, the steps for creating, sharing, and editing custom templates are different than for documents.

Create a custom Freehand template

To create a custom template:

  1. Open the freehand you want to use as a template.
  2. At the top-right of the canvas, click the More menu icon (•••) and select Save as template.
  3. In the Save as template dialog, enter a name, select a category, add a description, and upload a custom thumbnail (if wanted).
  4. Click the Save as template button.
    invision-freehand-create-custom-template.gif

All custom templates you create will automatically be added to the Custom tab in the gallery, so other people on your Enterprise can use them.

Share a custom Freehand template

To share your custom template with others on your Enterprise, so they can view and/or edit it:

  1. Open the template you want to share.
  2. At the top-right of the canvas, click Share template.
  3. Enter the name or email of each person you want to invite.
  4. Restrict access rights to the template per individual, as needed: Click the Can edit dropdown and select Can review.
  5. Click Invite.
    invision-freehand-share-custom-template.gif

Edit details of a custom Freehand template

To edit the details of a previously created custom Freehand template:

  1. Open the template.
  2. At the bottom of the screen, click Edit details.
  3. Edit as wanted.
  4. Click Done.
    invision-freehand-edit-custom-template.gif

When working in a previously saved custom template, all changes you make will automatically be saved to the template itself.

Using your Freehand keyboard shortcuts

At the bottom right of your freehand project, you'll notice a keyboard icon (invision-v7-freehand-keyboard-icon.png). To expand a list of shortcut keys for Freehand, click the icon.

invision-freehand-expand-shortcuts-list.gif

Getting help with Freehand

Located in the bottom-right corner of your freehand is a help icon (invision-cloud-v7-freehand-help-icon.png). Click the icon to reveal a few different options:

  • Review the Freehand Guide: Watch an introductory video or read up on using Freehand.
  • See what's new: Check out the latest release notes for Freehand.
  • Send feedback: Reach out to us directly with any feedback for Freehand.

Renaming a freehand

To rename a freehand:

  1. Open the freehand.
  2. In the upper-left corner, hover over the current name until the mouse pointer changes to a cursor, and click the name.
  3. Edit the name, and then press Enter.

Exiting a freehand

To exit your freehand and return to all your documents, navigate to the top-left corner and click the InVision (v7-freehand-invision-icon.png) icon. Any changes you made to your freehand will save automatically.

Sharing a freehand

Inviting others to join your freehand takes just a moment, and there are two ways to share:

  • Add people to your freehand
  • Share a document link to the freehand

Invite people

To invite people to a document:

  1. Open the freehand and, at the top right, click the Share button.
  2. In the To: field, enter the name of the person you want to invite.
    If you want to add someone who isn't yet a member of your team, enter their email address.
  3. To the right of the To: field, click the drop-down and select Can edit or Can review.
  4. Click the Invite button.
share-freehand.gif

Share a document link

Document links are the main URLs for prototypes, boards, and freehands.

To share a document link to your freehand:

  1. While viewing the Freehand, navigate to the top-right corner and click Share.
  2. To the right of Copy Link, click Settings.
  3. Under Who can Open this Document?, choose an option:
    • Anyone with the link
    • Members of [your team] with the link
    • People invited
  4. Under What can they do?, choose between:
    • Edit, draw and view
    • View only
  5. Click Save.
  6. To the left of the Settings link, click Copy Link.

You can now send that link to anyone you want to join your freehand.

invision-cloud-v7-freehand-share-document-link.gif

Presenting a freehand

Presenting a freehand allows others to see the project from your perspective. If you are presenting, anyone currently viewing the freehand will follow the actions you take.

To start a presentation, go to the top of the page and click the present icon (invision-freehand-present-icon.png). To stop presenting, click the stop icon (invision-cloud-v7-freehand-stop-presenting-icon.png).

You can independently follow a specific collaborator's actions by navigating to the top-right corner of the page and clicking their avatar. To stop following a collaborator, click their avatar again. Click the present icon to take over as presenter at any time.

invision-freehand-follow-individuals-actions.gif

Deleting a freehand

If you choose to delete a prototype or other document, you cannot restore it—nor can InVision restore it on your behalf. Please proceed with caution.

If you're the person who originally created a freehand, you can delete it at any time.

To delete a freehand in InVision V7:

  1. Open the Documents page (or the space that stores the document you want to delete).
  2. Hover over the document thumbnail to reveal and click the More menu icon (invision-cloud-v7-document-thumbnail-more-icon.png) in the lower-right corner, and then click Delete.
  3. On the confirmation screen, click the Delete button.
invision-v7-delete-freehand.gif

Currently, only the original creator of a InVision V7 freehand has the ability delete it; therefore, even if they've transferred the freehand to a new owner, only the creator will see a Delete option after clicking the More menu.

Using Freehand on tablets and mobile devices

If you're trying to view or use Freehand on a tablet, please see our information about Freehand for the InVision iOS app or about Freehand for the InVision Android app.


Learn something new

Craft for design

With Craft designers can speed up their design workflow in Sketch. You can use Craft tools to quickly populate your designs, prototype, and sync design files to InVision.

Learn Craft

Intro to Design System Manager

InVision Design System Manager gives you one centralized place to maintain all of your brand and UX components across design and code–providing the speed and confidence to power design at scale.

Learn DSM

Getting started with InVision Enterprise V7

InVision Enterprise provides a connected workflow that brings together the tools, people and processes needed to build great digital experiences at scale.

Learn InVision V7

Organization setup and team management

Let’s get your organization set up right. You can modify account settings, and integrate with the tools your team already uses. Then invite your team and set permissions.

Learn setup & management

Image of Craft Logo