Designing together

Edit one design with other people at the same time through VS Code Live Share: pointers, selections and changes signed with each person's name.

Esta página está em inglês; a tradução está a caminho.

Two people in one design: each pointer and selection in the person’s colour.
  • The host runs UI Designer: Start Live Share
  • A guest opens the .design file from the shared workspace
  • Each person’s pointer and selection show in their colour
  • Changes appear on both canvases as they are made

Everyone sees the same canvas, the other people’s pointers and selections, and every change as it is made. The host’s editor is the only one that writes the .design file; the guests’ changes go through it, so there is one history and nothing to merge.

Hosting a session#

  1. Open the design in UI Designer.
  2. Run UI Designer: Start Live Share. With no Live Share session running it starts one (Live Share asks you to sign in the first time and copies the invitation link), then shares every design open in the workspace. If you already host a session, the designs you open are shared automatically.
  3. Send the invitation link.

The status strip says Live Share · 2 guests on the host and Live Share · guest of Ada on a guest.

Joining as a guest#

Join the session in VS Code and open the .design file from the shared workspace: it opens in UI Designer and joins the host’s design. A guest with edit access uses the editor as usual: the tools, the canvas, the panels, undo and redo. Each change is sent to the host’s editor, which runs it as the guest’s command:

  • It is signed “Grace (Live Share)”, so History and the agent badge show who changed what.
  • It is one undo step of its own: the guest’s Undo undoes the guest’s last change, not someone else’s.
  • The host can stop one guest like an agent: Stop next to “Grace (Live Share) editing” in the status strip, or UI Designer: Stop Agent. The guest’s next changes are refused until the host allows them again.

Multiplayer cursors#

Everyone sees the others’ pointers (an arrow with the person’s name) and selections (outlines in the person’s colour). Each person gets one of eight colours in the order they joined. Turn them off in the main menu (☰) with Multiplayer cursors.

Read-only guests#

A guest whose Live Share access is read-only sees the design under the read-only card: “Ada shares this design read-only through Live Share.”

Stopping#

UI Designer: Stop Live Share (or Stop next to “Live Share · 2 guests”) stops sharing the designs. The guests are told, their editors become read-only (“Ada stopped sharing this design through Live Share”), and their cursors go away. Live Share itself keeps running; Start Live Share shares the designs again. Ending the Live Share session stops everything.

Limits#

  • One writer. Only the host’s editor writes the file. The guest’s design is saved when the host saves it; a guest’s Save does nothing.
  • Canvas and panels only on a guest. Scripts, the AI panel’s proposals, ud in a guest’s terminal and other agents edit the host’s copy: run them on the host’s machine. On a guest they answer that the design is shared from the host.
  • A guest’s History shows the saved file plus the changes made since the guest joined.
  • Network. Changes and cursors go through Live Share’s relay; cursors are sent at most twenty times a second, and a guest that misses changes catches up by reloading the host’s state.
  • Prototype preview and export run on each machine with its own copy of the design.