Managing Steps
Steps are the individual screens that make up your demo. Each step is a screenshot of your product, which you can annotate and narrate.
Adding steps
There are two ways to add steps to your demo:
Upload from your computer
Click the Upload button (or drag and drop images) onto the step list. Preface accepts PNG, JPG, and WebP files.
For the sharpest results, capture your screenshots at 1:1 pixel ratio (no retina scaling). If your screenshots look blurry in the demo, try exporting them at a lower resolution.
Bulk upload
You can upload multiple screenshots at once. Drag a selection of image files onto the step list and Preface will add them all in one go, preserving the order they were selected.
A screenshot showing the bulk upload drag-and-drop in action will go here.
Reordering steps
Drag any step thumbnail in the left panel to a new position. The demo player will always follow the order shown in the step list.
Deleting steps
Click a step to select it, then use the delete option in the step toolbar. Deletion is permanent, so make sure you don't need the step before removing it.
Step titles
Each step can have an optional title. Titles appear in the editor for your reference but are not shown to viewers by default. They're useful for keeping track of which screen is which, especially in longer demos.
To set a title, click on the step and edit the title field at the top of the canvas.
Transition types
Each step has a transition type that controls how the viewer moves to the next step:
| Type | Behaviour |
|---|---|
| Click anywhere | The viewer clicks anywhere on the screen to advance |
| Hotspot click | The viewer must click a specific hotspot annotation to advance |
| Auto | The step advances automatically after a set delay |
| CTA only | Only a CTA button annotation can advance the step |
You can set the transition type and delay (for Auto) in the step's settings panel.
A screenshot showing the transition type selector will go here.
Tips for great screenshots
- Crop consistently — keep the same dimensions across all steps so the player doesn't jump between different aspect ratios
- Highlight what matters — plan your annotation zones before you start capturing
- Hide sensitive data — use the Blur annotation to obscure anything confidential
- Capture real flows — step through the actual user journey rather than jumping between unrelated screens