Guide

One canvas, three modes.

The tools work the same in every mode. What a mode changes is how your edits are recorded and which panel appears at the bottom of the screen.

ConceptBeginnerAbout 3 min

Switch modesEach press of Tab moves to the next mode, from Design to Animation to Interaction, and one more press returns to Design mode. Video: In Design mode, each press of Tab switches to Animation mode and then Interaction mode, and the panel at the bottom of the screen changes with it. The third press returns to Design mode.

  1. Design mode

    This is the default mode, where you draw, arrange, and style. Your changes stay on the objects themselves, and the scene’s layers show in the Objects list at the bottom left.

    Pressing R and dragging on the scene draws a rectangle, and a new row appears in the Objects list at the bottom left. Video: In Design mode, pressing R and dragging on the scene draws a gray rectangle, and a Rectangle 1 row appears in the Objects list at the bottom left.

  2. Animation mode

    Press Tab in Design mode, and the Objects list spreads wide across the bottom of the screen and becomes the timeline. ⇧Tab returns to Design mode. The canvas shows the moment where the playhead sits. When you change a value that can animate, such as position, size, opacity, or color, it becomes a keyframe at that moment. Work with keyframes lists which values become keyframes.

    Pressing Tab spreads the Objects list across the bottom into the timeline, and pressing ⇧Tab returns to Design mode. Video: Pressing Tab spreads the Objects list across the bottom of the screen into the timeline, and clicking the Ellipse 1 row selects the circle. Pressing Shift+Tab returns to Design mode.

  3. Interaction mode

    Press ⇧I, and the Interactions panel appears next to the Objects list at the bottom. Press it again to return to Design mode. To set what happens on a click, a hover, or a key press, choose from Recipes or write a sentence with Make your own.

    Pressing ⇧I docks the Interactions panel at the bottom, and pressing it again returns to Design mode. Video: With the rectangle selected, pressing Shift+I docks the Interactions panel next to the Objects list, with “What should it do?” and recipes on the right. Pressing it again returns to Design mode.
Design mode Pressing R and dragging on the scene draws a rectangle, and a new row appears in the Objects list at the bottom left. Video: In Design mode, pressing R and dragging on the scene draws a gray rectangle, and a Rectangle 1 row appears in the Objects list at the bottom left.
Mode 1 / 3

If a timeline suddenly appeared at the bottom

When you’re not editing text, pressing Tab switches the mode. The editor remembers the last mode and opens in that mode next time too. To go back to Design mode, press ⇧Tab, or choose Design mode from the mode button at the top left.

The mode button menu and timeline height

Tip

To make Tab skip a mode. Click the mode button at the top left and turn off Tab to Animation mode or Tab to Interaction mode. Tab skips any mode you turn off. With both off, pressing Tab in Design mode doesn’t change the mode.

Tip

If the mode name doesn’t show. Turn on Show mode name in the same menu. In a narrow window, the name hides and only the icon remains, even with it on.

Tip

If the timeline covers the scene. Press ⌘0 to fit the whole scene into the space above the timeline. You can also drag the top edge of the timeline down to make it shorter.

Was this page helpful?

Updated 10/13/2026 · The videos on this page were recorded in the current editor.

Popular