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


Freehand

Collaborate in real-time with Freehand, InVision’s digital whiteboard. Map out user experiences, run design sprints, or create low-fidelity ideations. From anywhere, on any device, teammates can view or collaborate on a freehand.

Creating a freehand

To create a new freehand:

  1. Sign in to InVision and navigate to the Projects page.
  2. Near the top right of the page, click the + button.
  3. Click Create new freehand.
  4. Enter a name for the freehand and click Create.
  5. Select a template, or click Blank to create an empty freehand.
invision-v6-create-freehand.gif
You can also create freehands from prototype screens. Learn more.

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-pointer-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-convert-to-sticky-note.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

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.

Exploring the Freehand template gallery

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. In the Share dialog, set access rights as needed: Click the Can edit dropdown and select Can view only.
  4. Click Copy Link and share as wanted.
    invision-V6-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.

As a reminder, if you do not save your freehand before exiting, your changes will not be saved, and InVision cannot retrieve your work. Before exiting, ensure that your freehand is named and the Save Draft button no longer appears.

Sharing a freehand

Inviting others to join your freehand is simple. To share your freehand:

  1. Navigate to the top right of the canvas and click the Share button.
  2. Click the drop-down arrow and set the permissions to Can edit or Can view only.
    Only the Freehand owner can edit this setting.
  3. Click Copy Link.
invision-v6-share-freehand.gif

The share link will be copied to your clipboard. Anyone who visits the share link will be prompted to sign in to InVision V6 or sign up for an account. They can choose to continue as a guest, but they will still be required to enter an email address.

The first person to save a freehand becomes the owner, even if that person did not originally create the freehand. Therefore, we recommend saving your freehand at least once before sharing with others.

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

Archiving or deleting a freehand

Depending on your needs, you can either archive or delete a freehand. Archiving a freehand removes it from the projects view, but you can restore it at any time. Deleting a freehand permanently removes it—you cannot undo this action.

If not on an Enterprise account, only the freehand owner can archive or delete a freehand. For a full list of Enterprise permissions, check out the following article: Enterprise roles and permissions

Archiving a freehand

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

To archive a freehand in InVision V6:

  1. Sign in to your account and navigate to the Projects page.
  2. Click the Freehands tab.
  3. Hover over the desired freehand and click the ••• (more) icon.
  4. Click Archive.
  5. Click Yes, Archive Freehand.
invision-v6-archive-freehand.gif

Deleting a freehand

If you choose to delete a prototype, 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 V6:

  1. Sign in to your account and navigate to the Projects page.
  2. Click the Freehands tab.
  3. Hover over the desired freehand and click the ••• (more) icon.
  4. Click Delete.
  5. Click Yes, Delete Freehand.
invision-v6-delete-freehand.gif

  

Freehand on tablets and mobile devices

Freehand is also available for your mobile device. Check out our help center for information on using Freehand for the InVision iOS App or the InVision App for Android.

Currently, Freehand is unavailable on Android unless you're on InVision V7.

Freehand for Craft and Studio

You can also create Freehand documents from Craft or Studio. To learn more, check out these topics:

Getting help with Freehand

Located in the bottom-right corner of a Freehand document is the help icon (v6-freehand-help-icon.png). Click the icon to reveal a few different options:

  • Read the Freehand Guide: Watch an introductory video or read up on tips for using Freehand.
  • See what's new: Check out the latest release notes for Freehand.
  • Send feedback: Reach out to InVision directly with any feedback for Freehand.
v6-freehand-help-menu.png

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