Text Link
<path fill-rule="evenodd" d="M4.115 21h15.77C21.913 21 23 19.898 23 17.815V6.196C23 4.102 21.913 3 19.885 3H4.115C2.068 3 1 4.112 1 6.196v11.619C1 19.898 2.068 21 4.115 21zm16.877-3.398c0 .9-.451 1.325-1.273 1.325H4.272c-.813 0-1.273-.425-1.273-1.325V6.398c0-.89.46-1.325 1.273-1.325h15.447c.823 0 1.273.435 1.273 1.325v11.204zm-5.397-1.122c0 .647.411 1.072 1.019 1.072h2.037c.607 0 1.019-.425 1.019-1.072V7.52c0-.647-.411-1.072-1.019-1.072h-2.037c-.607 0-1.019.425-1.019 1.072v8.96zm-9.189-2c0 .647-.411 1.072-1.019 1.072h-.037c-.607 0-1.019-.425-1.019-1.072V9.52c0-.647.411-1.072 1.019-1.072h.037c.607 0 1.019.425 1.019 1.072v4.96z" fill="currentColor"/>
The Interface

The Interface

The Vectornator interface is designed to speed up your workflow and keep your project in focus with essential tools and a minimalist design.

Follow Along!
Learn Vectornator from A to Z with this downloadable sample file.
Download File

The iPad Document Interface

The document interface refers to the Vectornator workspace as a whole. This is where you create your artwork and design projects. It's designed to be as unobtrusive as possible so you can focus on your project.

The interface is divided into three main parts:

  • At the top left of the screen you'll find the Widget Area ~key~ A ~key~ and the Action Bar ~key~ B ~key~ that appear when at least one object is selected.
  • Centered on the left is the Toolbar ~key~ C ~key~ where you can access all of Vectornator's Tools.
  • On the right you'll find the Inspector ~key~ D ~key~ which allows you to control all the properties of your in-document objects. The Inspector is also accompanied by the Help Menu ~key~ E ~key~, which you can access by simply tapping the button.
Vectornator Interface on ipad screen view

Short Video Introduction

Vectornator has a minimalistic interface. Watch the video below for an overview of the main bars on iPad.

The Widget Area

At the top left of your screen, you'll find the Widget Area, which is divided into three parts:

Widget area screenview of Vectornator software

%table(1,2)%

~ic-exit-doc~~ic-exit-doc~ The Close Button | The x button closes your current document and takes you back to the Gallery

~ic-settings~~ic-settings~ The Document Settings | Tap to open the Quick Settings menu. You can access the Settings Panel in this tab and set your Artboard's Size, Grid, and Snapping options.

~ic-export~~ic-export~ Export | Tap here to export your project in various formats, or choose a new location to save your document. You can also export your document's Time-Lapse video, print it, save it quickly as an image, duplicate it, or preview it in Augmented Reality.

~ic-undo~~ic-undo~ ~ic-redo~~ic-redo~ Undo & Redo | Tap these buttons to undo or redo your last actions. You can also speed up your workflow with these gestures.

~ic-zoom-indicator~~ic-zoom-indicator~ The Viewfinder | Displays the Canvas Zoom and the Rotation. Tap once to open the Zoom options. Tapping the Viewfinder button will open its menu, where you can Zoom to Fit (A) on your iPad Screen and set the Rotation back to default, Zoom In (B), or Zoom Out (C).

%table%

Zoom options on Vectornator
Pro Tip – Discover more ways to zoom in and out of the canvas →

The Action Bar

This is an expandable menu that offers different contextual options when you select an element in the canvas.

Action Bar in Vectornator

%table(1,2)%

1 Select All ~ic-select-all~~ic-select-all~ / Deselect All ~ic-deselect-all~~ic-deselect-all~ | Tap this button to select all of the document elements at once. Tap it again to deselect them all.

2 Cut ~ic-cut~~ic-cut~ | Tap this button to cut any element you currently have selected.

3 Copy ~ic-copy~~ic-copy~ | Tap this button to copy any paths or elements you currently have selected to your clipboard. Once you tap this button, the Paste button will show up.

4 Paste ~ic-paste~~ic-paste~ | Tap this button to paste any paths or elements you currently have copied or cut.

5 Copy Style ~ic-copy-style~~ic-copy-style~ | Tap this button to copy the same style properties of any selected element. Once you tap this button, the Paste Style (5b) button will appear. Tap this button to paste the copied style onto any selected paths or elements.

6 Delete ~ic-delete~~ic-delete~ | Tap this button to delete any paths or objects you currently have selected.

%table%

Pro Tip – You can always copy an element and paste it into a different document.

Video Recap | The Action Bar

Located in the upper left corner of our user interface, the Action Bar features a host of useful functions that are going to be instrumental in your workflow. Watch the video to learn all the functionalities contained in this bar.

The Toolbar

On the left side of your interface, you'll find the Toolbar. Here, you can access all of Vectornator's built-in tools for selecting objects, drawing and creating shapes, and adding text. Depending on the tool you select, different tool options will be displayed.

Toolbar in Vectornator

%table(1,3)%

1  Selection Tool | Select and move paths.

2  Node Tool | Select, move, and edit Anchor points.

3  Scissors Tool | Cut existing paths.

4  Pen Tool | Create smooth paths with Bézier Curves.

5  Pencil Tool | Draw freeform paths.

6  Brush Tool | Draw freeform paths with variable widths.

7  Text Tool | Create text objects.

8  Shape Tool | Create shapes like Straight Lines, Rectangles, Circles, Polygons, Stars, or Spirals.

9  Eraser Tool | Delete objects along the path you draw.

10  Hand | Pan the Canvas. This function requires >iOS 13.4 and a macOS system.

11  Zoom | Zoom in and out of the Canvas. ****This function requires >iOS 13.4 and a macOS system.

%table%

When the Selection Tool is active, you can also have access to the:

%table(1,3)%

Multi Select Mode ~ic-multiselect~~ic-multiselect~ | Tap multiple objects to select them individually.

Duplicate Mode ~ic-duplicate~~ic-duplicate~ | Tap and drag any selected object to create a duplicate of it.

Rotate Mode ~ic-rotate~~ic-rotate~ | Tap and drag anywhere on the canvas to rotate your selected shape with a selected Pivot Point.

Scale Mode ~ic-scale~~ic-scale~ | Tap and drag anywhere on the canvas to scale your selected shape with a selected Pivot Point.

Click-Through Mode ~ic-click-through~~ic-click-through~ | Select directly what you see or tap onto, inside nested groups or masks.

%table%

Video Recap | The Toolbar

Located at the left side of our user interface on iPad, the Toolbar features all of Vectornator's built-in tools for selecting, drawing and creating vector paths. Watch the video to learn how to use each tool.

The Quick Actions Bar

The Quick Actions Bar is a part of our iPad and iOS interface. It takes the most useful options from the Inspector and puts them right below the selected object to speed up your workflow.

Actions Bar in Text mode in Vectornator

The options in the Quick Actions Bar are context-sensitive, meaning they will change depending on what type of object you have selected. This lets you work up to 30% faster!

Actions Bar with shape selected in Vectornator

If you want to be fully immersed in your work, you can close the Inspector and enjoy working in full-screen mode and still have access to key options such as editing the stroke width of your path, changing the text alignment, and more.

👀 The Quick Actions feature is available only on iPadOS and iOS.

The Inspector

This sidebar appears when you select a document element. It allows you to view and edit the properties of your selected elements, as well as manage your layers ~ic-add-layer~~ic-add-layer~, Artboards ~ic-add-artboard~~ic-add-artboard~, import options, and more.

Learn more about the Inspector Tabs ➞

The Help Menu on iPad

At the left of the Inspector Bar on your iPad, you'll find the Help button, which gives you access to important resources such as:

  • Activating our in-app Help Tooltip by long-pressing on any button
  • Submitting a new Feature Request directly through our Feedback Page
  • Examining the list of Gestures & Shortcuts
  • Accessing the Learning Hub
  • Starting the Quick Tour to help you discover Vectornator's interface and tools
Long Press for Help in Vectornator

The Mini Joystick

The Mini Joystick will appear at the Interface's bottom-right corner whenever you select an object. It enables you to move paths or objects around easily, giving you more precise control over your creations.

Tap the Mini Joystick to expand it.

Highlighted Mini Joystick in Vectornator

The iPadOS Widgets

iPadOS and iOS Widgets let you add a permanent shortcut to Vectornator News on your iPad and iPhone's Home Screen.

They come in three sizes: Small, Medium, Large, and Extra-Large. And they support both Dark and Light themes. Tapping the Widget will bypass the Vectornator News Tab and jump straight to the Blog article you're interested to.

⚠️ To use iOS Widgets you will need to be on iOS / iPadOS 14 or higher.
Learn Vectornator
Learn how to create your next design by using this Vectornator sample document.
Download
Download the PDF version here.
Last Updated on Jul 26, 2022
Master the Power of Vectornator

Expand your skills and tackle the next challenge, our tutorials and courses will help you to master vector design on a professional level.

Go to Academy