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
Disclaimer: With the current iPadOS 16 update, Vectornator has a different document interface. If you haven’t updated yet, check the information here →

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 discreet as possible so that you can focus on your project.

At the top left of the screen, you can check your document's title, rename it, export it, and more.

At the top, you can find the Action Bar (A), where you can access all the editing options. This Bar can also be customized on iPadOS 16. Read more here

You can access the Help Menu (B), located at the left of the Inspector, and the Settings.

Located on the left side of your screen and centered is the Toolbar (C), where you can access all of Vectornator's Tools.

On the right, you'll find the Inspector (D), which allows you to control all the properties of your in-document objects.

To exit the document and be directed back to the Gallery, tap on the left top arrow button.

Vectornator Interface on ipad screen view

The File Menu

To the left side of the Action Bar, the name of your currently opened document is displayed. Tap on the arrow to the right of the document name. In the drop-down menu, you can Share ~ic-share~~ic-share~, Duplicate ~ic-duplicate-2~~ic-duplicate-2~, Copy ~ic-copy-2~~ic-copy-2~, Rename ~ic-rename~~ic-rename~, Export to ~ic-export-to~~ic-export-to~, and Print ~ic-print-2~~ic-print-2~ the document.

File Menu in Vectornator screen view

The Action Bar

Since the iPadOS 16 update, you can customize the Action Bar by adding specific operations to speed up your workflow.

How to Customize the Action Bar

To do so, tap on the three dots button ~ic-settings-2~~ic-settings-2~ on the right of the Help Button ~ic-help~~ic-help~. In the drop-down menu, select Customize Toolbar ~ic-customize-toolbar~~ic-customize-toolbar~. Here you can access the operations that can be added to your Action Bar. You can drag & drop to add or remove the items from the Toolbar.

Note: The customizable Action Bar is only available for iOS 16 and up users.

The Action Bar Default Tools

These are the operations that are displayed by default within the Action Bar:

%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.

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 & Paste 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 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.

7  Redo ~ic-redo~~ic-redo~/ Undo ~ic-undo~~ic-undo~ |Tap this button to undo or redo a step in your document. Click on the left-orientated arrow to undo and the right-oriented arrow to redo your last operation.You can set the Do/Undo History in the document settings to Default or Optimized.

Zoom ~ic-zoom-indicator~~ic-zoom-indicator~ |On the circular zoom icon, a percentage indicates the current zoom level of a document. Tap on the icon to access the three following zoom options:

9  Zoom to Fit ~ic-zoom-fit~~ic-zoom-fit~ |Automatically zooms in or out of your document to fully display all canvas elements on the screen.

10  Zoom In ~ic-zoom-in~~ic-zoom-in~ |Automatically zooms into your document.

11  Zoom Out ~ic-zoom-out~~ic-zoom-out~ |Automatically zooms out of your document

%table%

The Action Bar Customizable Tools

Since the iOS 16 update you can customize the Action Bar by adding the following operations:

%table(1,2)%

Grid On/Off ~ic-zoom-out~~ic-zoom-out~ |Switch the display of the classic perpendicular square grid or the triangle-based isometric grid on or off.

Snap to ~ic-snapping~~ic-snapping~ |Enable or disable different snapping options for your shapes, such as Guides, Points, Edges, Grid, and Smart Guides.

Guides ~ic-snapping~~ic-snapping~ |Switch the display of Guides on or off that help you to control the exact position of your document elements and to align them with other objects on or off.

Rulers ~ic-rulers~~ic-rulers~ |This toggle will show or hide the fixed Rulers attached to each Artboard.

Isolate Active Layer ~ic-isolate-active-layer~~ic-isolate-active-layer~ |The Isolate Active Layer feature will focus on the layer you’re working on and hide all other layers from the view.

Outline Mode ~ic-rulers~~ic-rulers~ |The Outline Mode feature will show the document elements as wireframe outlines without color or texture.

Dimensions ~ic-dimensions~~ic-dimensions~ |Toggle the Dimension Indicator of each selected object on or off.

%table%

The Settings

In the Settings Menu ~ic-settings~~ic-settings~, you can customize your Vectornator experience by setting your personal app preferences. In this menu, you can organize the different options such as Document ~ic-document-tab~~ic-document-tab~, Canvas ~ic-canvas-tab~~ic-canvas-tab~, Appearance ~ic-style-tab~~ic-style-tab~, Input, Notifications, and iCloud ~ic-icloud~~ic-icloud~.

Learn more about Settings in Vectornator

The Artboard & The Grid

In this menu, you can edit the size of the currently selected Artboard and toggle the option Show Grid on or off.

Learn more about Artboards in Vectornator

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 the following helpful features:

  • The Help Mode, which activates helpful in-app Tooltips.
  • The Learning Hub with detailed software documentation, and The Academy and Tutorials with custom-tailored exercises for all skill levels.
  • An extensive list of Gestures & Shortcuts to speed up your workflow significantly.
  • The Ask the Community option, where you can ask questions, and you have the opportunity to Give us feedback and submit a new feature request via the Feedback Page.
  • The Contact Support form if you have product-related questions.
  • The Release notes from your installed Vectornator version and a summary of the newest features.
  • The Restart Onboarding option will give you an overview of the interface of Vectornator and the available tools.

Tap and long-press on any highlighted tool in Help Mode to discover how it works.

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 screen view

%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.

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

9  Shape Builder Tool | Merge or erase different parts of intersecting shapes.

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

%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 Inspector

In the Inspector, you'll find the controls for the currently activated tool. Additionally, you can view and edit the properties of selected objects, Layers, Artboards, import options, and more.

Read more about the Inspector in the corresponding LH section →

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 a lot 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.

Video Recap | The Quick Actions Bar

Watch the recap video to learn all about Quick Actions - the fastest way to put your creative ideas on canvas.

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

The Document Interface (before iPadOS16)

If you haven’t updated to the latest iPadOS 16 there are some features like the Custom Action Bar that are not accessible to you. In this case

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

The Widget Area

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

%table(1,2)%

The Close Button |The x button closes your current document and takes you back to the Gallery

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.

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.

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

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%

The Action Bar

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

%table(1,2)%

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

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

3 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 |Tap this button to paste any paths or elements you currently have copied or cut.

5 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 |Tap this button to delete any paths or objects you currently have selected.

%table%

Video Recap | The Action Bar

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 Dec 01, 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