Skip to main content
InVision Support Home Page

Getting Started

Loading...

[[ rootSection.name === "Studio" ? "InVision Studio" : rootSection.name ]]

Freehand Tools

At the top of the canvas, you'll see the More menu icon (•••), the Present icon (), the avatars of active collaborators, and the Share button. For details on presenting and sharing a freehand, check out the Freehand Collaboration guide.

More menu

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

  • Version history: Revert to a previous version of the freehand document you're working in.
  • Export to image: Export the entire freehand document as a still image—complete with sticky notes.
  • Save as template: Save your freehand as a custom template the rest of your Enterprise can use to kick off new freehand sessions.
  • Create new Freehand: Create a new freehand document from scratch, without needing to first leave the freehand you were working in.

Toolbar

As you navigate your freehand, change zoom levels, and pan the canvas, you'll notice the Freehand toolbar remains visible on the far-left of the screen, so your primary tools are always right there as you work.

Use this table for a quick overview of the tools you'll see in the Freehand toolbar, along with their respective icons, shortcuts, and functions. Then, learn details about each tool in the Contextual menus section below.

To the left of the canvas, you'll notice the Freehand toolbar.

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.

With an object or group of objects selected, you'll see additional tools in the contextual menu that appears above the object/s:

Icon

Purpose

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-group-objects-icon.png Group Objects
  • Group Objects: ⌘G
  • Ungroup Objects: ⌘ ⇧ L

With two or more objects selected, create an object group.

To revert to multiple objects, select the object group and click the Ungroup icon (invision-freehand-ungroup-objects-icon.png).

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

Lock Object

N/A

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

To unlock the object or group, select it and click the Unlock icon (invision-freehand-unlock-icon.png) at the bottom of the screen.

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.

•••

More Options

N/A

Reveal the following options:

  • Copy link: Copy a deep link, which will open the freehand zoomed in to the object or image.
  • Export to image: Download the object as an exported PNG file.
  • Copy: Copy the object or image to paste in another freehand.
  • Duplicate: Duplicate the object or image in the same freehand.
  • Delete: Delete the object or image.

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

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 or object group on the canvas to prevent other collaborators from moving or editing it.

To unlock the object or group, select it and click the Unlock icon (invision-freehand-unlock-icon.png) at the bottom of the screen.

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

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 or object group on the canvas to prevent other collaborators from moving or editing it.

To unlock the object or group, select it and click the Unlock icon (invision-freehand-unlock-icon.png) at the bottom of the screen.

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

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 or object group on the canvas to prevent other collaborators from moving or editing it.

To unlock the object or group, select it and click the Unlock icon (invision-freehand-unlock-icon.png) at the bottom of the screen.

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 the following tools in the contextual menu that appears above it:

Icon

Purpose

Shortcuts

Description

N/A

Size

N/A

Select whether to display the image at half size or original size.

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

Lock Object

N/A

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

To unlock the object or group, select it and click the Unlock icon (invision-freehand-unlock-icon.png) at the bottom of the screen.

invision-freehand-download-image-icon.png

Arrange to Grid

N/A

Download the image.

•••

More Options

N/A

Reveal the following options:

  • Copy link: Copy a deep link, which will open the freehand zoomed in to the image.
  • Copy: Copy the image to paste in another freehand.
  • Duplicate: Duplicate the image in the same freehand.
  • Delete: Delete the image.

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

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 or object group on the canvas to prevent other collaborators from moving or editing it.

To unlock the object or group, select it and click the Unlock icon (invision-freehand-unlock-icon.png) at the bottom of the screen.

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.

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