Design Canvas

Link Frames into a clickable Prototype, review the design together, and hand it to developers.

A Prototype Flow starts at one Frame, and interactions on its Layers move between Frames, open overlays, scroll and change Variables. Present makes a link that anyone can open without signing in. In the file, comments pin to the canvas, Versions and Branches keep earlier and alternative designs, and Inspect gives developers CSS and exports.

Get started free

Flows and interactions

In the Prototype tab of the Inspector, create a Flow from a starting Frame, then add interactions to its Layers.

Triggers
Click, hover, mouse enter, mouse leave, press, release, drag, a key, or a delay.
Actions
Navigate, Back, Open, Close or Swap overlay, Scroll to, Open URL, Set Variable, Set Mode and Set Component Variant.
Transitions
Instant, Dissolve, Slide, Push, Move or Smart, for moving to a Frame or opening an overlay.
Overlays
An overlay Frame can dim the screen behind it, close when someone clicks outside it, and appear centred or at an edge.
Scrolling
A Frame whose content is larger than itself scrolls during playback, and a Layer in it can be Sticky or Fixed.
Conditions
An interaction can run only when a Variable equals, differs from, or is greater or less than a value, so a Prototype can respond to an earlier choice.

The Prototype link

Present Flow, or Present in the page bar, will make a link to the Flow as it is at that moment, without the editor, and open it in a new tab. Each link keeps showing the Flow as it was when it was made, so present again after further changes.

Anyone with the link can open it in a web browser without signing in, with Back, Restart and Full screen, and a pointer, keyboard or touch. It shows only the Frames the Flow can reach, not other Pages, comments or history.

Sharing a file, and who can do what

Each Design file is in Personal or one team, and the team's members have the access the team gives them. Share Design adds anyone else by handle, to that one file.

Viewer
Looks around the file, uses Inspect and exports.
Commenter
Can also start and reply to comment threads.
Editor
Can also change the design.
Managing the file
People who can edit the file through its team also manage collaborators, present Prototypes, restore Versions, merge Branches, archive the file and move it to Trash. Publishing a Library and offering a Team starter need a team administrator.
People outside the team
Someone outside the team will be invited, and once they accept they join as a guest who can open this file and nothing else in the team. Guests are limited to 10 on the free plan and 100 on Pro and the Team plan.

Comments and editing together

Pinned comments
With the Comment tool, click the canvas to pin a comment to that spot; otherwise it is pinned beside the selected Layer. Numbered pins mark each open thread on the Page.
Replies and Resolve
Reply in a thread and Resolve it when it is done; Show resolved brings it back to Reopen.
Several people at once
Everyone with the file open is shown in the page bar, with their cursors and selections on the canvas. Changes to different things are combined; when two people change the same property, the later change is reported to the person who made it.
Working offline
Changes made offline are kept in the browser and sent on reconnecting. Recovery can retry them, download them as a JSON file or discard them.

Versions and Branches

History in the page bar lists the file's Versions and Branches.

  1. Name a Version

    Keep the file as it is now, for example before a review or handoff. History also has automatic checkpoints taken as changes add up.

  2. Restore

    Restoring a Version will make it the current design as a new Version, and the Versions after it stay in history.

  3. Branch

    Try a redesign in a Branch, with its own changes, comments and Versions, without changing Main. Update from Main brings in Main's changes; a property both changed is reported as a conflict, and the Branch is left as it was.

  4. Merge

    Merge brings the Branch into Main and keeps Versions from before and after. The merged Branch stays available, read-only.

Inspect, handoff and export

Inspect shows a selected Layer's position, size and appearance, with its CSS, Auto Layout included as flexbox or grid. Copy CSS copies it.

Developer handoff
Each Layer can have a status (Design ready, Ready for development, In progress or Implemented), a developer note, an implementation path and a documentation link.
Export
SVG, PNG, JPEG, WebP or PDF at 1×, 2×, 3× or 4×, of the selection or the whole Page, with a filename suffix such as -dark.
Vectors and pictures
SVG keeps shapes and text as vectors. PNG, JPEG, WebP and PDF are one picture at the chosen scale, drawn with fonts installed on your computer.
Save to Images
Save Page to Images saves a PNG to Your images, for a Social Media post, a Note or anything else that uses images.

Build your first Prototype.

Create a Magpie account, open Design Canvas, draw two Frames and link them in the Prototype tab.

Create account