Snapshot widgets are used to display screenshots of other diagrams (pages and components) on pages in your prototype. Whenever the referenced page or component is updated, the image in the snapshot widget is automatically updated to match.
You can display the entire diagram or just a portion of it. You can also apply interactions to the diagram before the snapshot image is captured, such as hiding or showing a widget or changing the state of a dynamic panel.
The snapshot widget is available in the Markup section of the Default widget library.
Snapshot widgets are handy for diagramming user flows and for adding thumbnails to flow diagrams.
Reference Pages and Components
To select a reference page or component for a snapshot widget, click Add Reference Page in the Snapshot section of the Style pane. In the Reference Page dialog that appears, select the button for either Page or Component and then choose a target from the list below.
You can also click Clear Reference at the top of the dialog to leave the snapshot blank.
Scale and Offset
Scale to Fit
Snapshots start in "Scale to Fit" mode, which scales the image of the referenced page or component to fit inside the bounds of the snapshot widget.
You can turn off this option in the Snapshot section of the Style pane. After unchecking the box for Scale to Fit, you will be able to adjust the offset and scale of the captured image.
To scale the image in a snapshot widget, use the Scale field in the Snapshot section of the Style pane. You can also double-click the snapshot and then use the scroll wheel on your mouse to zoom in or out. If your mouse doesn’t have a scroll wheel, you can hold CTRL or CMD while scrolling.
The snapshot's X and Y offset values let you shift the position of the referenced page or component shown in the snapshot. You can set these in the Snapshot section of the Style pane or by double-clicking the snapshot and then dragging the image within the widget.
Applying an action in a snapshot widget triggers that action in the snapshot's thumbnail image. (It does not affect the referenced page or component.)
To apply an action, select a snapshot widget on the canvas and click Applied Actions in the Snapshot section of the Style pane. In the dialog that appears, you can build interactions that target widgets in the referenced page or component.
Use the Fire Event action if you want to trigger interactions you've already set up in the referenced page or component. For example, if you've configured a button to show a message when clicked, you can fire the button's Click or Tap event to show that message in the snapshot's thumbnail image.