×

Introduction to Craft Freehand

The Craft Freehand plugin for Sketch and Photoshop by InVision LABS lets you rapidly capture feedback throughout the product design process in a real-time, flexible, and collaborative way. Freehand lets you spend less time exporting work into presentable formats, and more time creating meaningful experiences for users in collaboration with your team. Whether you’re designing in Sketch or Photoshop, the moment you’re ready for feedback, open Freehand and anyone on your team can join, from anywhere, on any device to weigh in on your concepts and designs.

 

Installing the Craft Freehand plugin

If you already have Craft, you’ll need to install the latest update in order to get Freehand in Sketch or Photoshop. Once updated, you’ll see the Freehand logo on the Craft toolbar in Sketch or Photoshop.

If you don’t yet have Craft, you’ll need to install Craft to get access to Freehand and our other plugins. 

Alternatively, you can create a Freehand directly from your InVision account by creating a new project and then selecting Freehand as the type.

Creating a Freehand project

To start using Freehand:

    1. Open your Sketch or Photoshop file, then click the Freehand icon ( in your Craft toolbar.
    2. Click Sign in to InVision. Log in with your InVision credentials. 
      Note for Enterprise users: Sketch Freehand supports SSO and Private Cloud login; once you click Sign in to InVision, click Enterprise sign in to enter your enterprise domain name. If your domain requires SSO login, after you enter your domain name, you will be asked for your SSO login credentials. If your domain supports optional SSO login, after you enter your domain name, you can enter your email address and password to log in, or click Or sign in with SSO to use your SSO login credentials.
    3. Click Add to Freehand to add new artboards to an existing Freehand project, or Create New Freehand to add artboards to a new Freehand project. All your artboards/layers will be mirrored in Freehand in your browser, exactly as they appear in Sketch or Photoshop.
    4. When creating a new Freehand, add the new project name in the Freehand Name” box and select the account you would like to add it to from the drop down menu. Then click Create Freehand. When using a previously created Freehand, select which Freehand you’d like to send your screens to by choosing your prototype from the list, or use the search field to find it by name.
    5. Get started! Zoom, scale, draw, comment, swipe, erase, shift, add, etc. See below for more details on Freehand functionality.

Freehand tools

You’ll see the Freehand toolbar at the top of your browser window:

The Selector tool lets you choose any amount of shapes or objects to move by dragging and dropping on the Freehand canvas. Any object or group of objects selected can be scaled up or down.
The Pencil tool lets you draw on your canvas. Hold down the Option key while you draw to have Freehand assist you in creating neat circles or squares. Holding shift + clicking to start/end of the line creates any-angle diagonal lines.
The Text tool allows you to enter text on your canvas. Once you select the Text tool, click anywhere on your canvas and begin typing. Switch to the Selector tool to resize your text or drag it to a different point on the canvas. Use the text tool to leave feedback on individual screens, flows, or specific features. Pressing Shift + Enter creates a line break. 
The Image tool lets you upload images directly to the canvas. Once you upload an image, switch to the Selector tool to resize your image or drag it to a different point on the canvas.
The Eraser tool lets you hover over drawings you’ve created. Once you hover over a drawing, Freehand will highlight the drawing; clicking the highlighted drawing will delete it.

The ••• menu presents you with the following additional options:

  • Clear my sketches - This will clear all sketches you’ve drawn with the pencil tool.
  • Clear all sketches - This will clear all sketches any collaborators have drawn with the pencil tool.
  • Clear everything - This will clear your entire Freehand project.
The avatars at the top right of your Freehand page will show you who is collaborating on your Freehand project.
Share button generates a link you can copy to invite others to join your Freehand project to collaborate.

Freehand keyboard shortcuts

 The Freehand tools at the bottom of your Freehand project include a Zoom tool and a keyboard icon:

Clicking the keyboard icon expands a shortcut key that will help you save time and effort while using the tools listed above.

 

Additional Freehand functionality

The following additional functionality is available in Freehand in order to make your collaboration process as seamless and simple as possible:

  • Undo/redo: Go back and forward with changes as many times as you need to- your whole history is recorded in Freehand.
  • Follow presenter: Invite other collaborators to your Freehand project, then click on an avatar to have your screen follow their actions.
  • Real-time updates: Make updates in your Sketch or Photoshop file, then click Update Freehand in your Freehand plugin; your newly updated design will appear in your Freehand browser window.
  • Accessing saved Freehand projects: The link to your Freehand project is stored in your Sketch or Photoshop file:

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