Skip to main content
The Visual Designer has four sets of controls: the header, the floating canvas toolbar, the canvas aids and the keyboard shortcuts. Press Cmd or Ctrl + / in the Visual Designer to see every shortcut.

​
Visual Designer header

The header holds everything about the visual as a whole. Old animations shows in the header for a visual made before the animations timeline. Click it to convert the animations, see Convert old animations.

​
Canvas toolbar

The floating toolbar on the canvas holds the tools:
  • Select and Hand tool to select layers or pan the canvas
  • Add text, Add shape, Add image and All layers, which opens the layer catalog
  • Undo and Redo
  • Zoom to fit and the zoom menu, with Zoom in, Zoom out and 50%, 100% and 200%
  • Play to preview the visual going on air, Back to editing to stop
The zoom menu also holds the canvas aids and the Backdrop: a checkerboard, or a camera still from your studio, so you see the graphic over the real picture.

​
Rulers, guides and snapping

The canvas aids are in the zoom menu of the canvas toolbar. Your choices are kept in this browser. Drag a guide to move it. Drop it outside the canvas, or select it and press Delete, to remove it. Guides are kept per visual in this browser. Layers snap within 8 px. Hold Cmd or Ctrl while dragging to turn snapping off. Safe margins in More actions shows the safe areas, 5% and 3.5% in from the edges.

​
Keyboard shortcuts

Cmd on a Mac, Ctrl on Windows. Hold Cmd or Ctrl and scroll, or pinch on a trackpad, to zoom. Scroll to pan.

​
Code editor

The code editor has two tabs, JS and CSS, for the whole visual. The animations timeline writes its animations into the JS tab, and supported hand-written animation code shows on the timeline. For writing your own code, see Develop visual graphics. HTML and SVG layers have their own Code Layer Editor in the inspector.