Prototype links

Link a button to another frame and pick a transition.

A prototype link says what happens when someone acts on a layer: open another frame, show it as an overlay, go back, scroll to something, or open a web page. Links are stored on the layer, so duplicating a layer copies them and deleting it removes them.

Link a layer to a frame

1. Select a frame, then a layer inside it.
2. In Properties, find Prototype and press Link to frame.
3. Click the target frame on the canvas. A dashed arrow follows the pointer until you click.

An arrow now runs from the layer to the target frame, labelled with its trigger.

Add an interaction to an element

Select any element inside a frame, such as a button, in Design or Play mode. In Prototype, press Add interaction: it adds On click, Navigate to the first frame (or Open URL when the canvas has no other frame). Change the action to Open URL and type the address; feega.app/pricing becomes https://feega.app/pricing. Only http and https links are kept.

When an element and the layer around it both react to a click, the element wins.

In Play mode

Switch the header to Play. Arrows show every link; the lines between canvas nodes hide until you leave Play.

• Select a layer: a round handle appears on its right edge. Drag it onto a frame to link.
• Click an arrow to open that link in the right panel and change trigger, action, transition and duration.

Edit a link

Each link has three rows in Prototype.

Part	Options
Trigger	On click, While hovering, On drag, After delay (milliseconds)
Action	Navigate to, Open overlay, Close overlay, Back, Scroll to, Change to, Open URL
Transition	Instant, Dissolve, Slide in, Push, Smart animate; slide and push take a direction; every transition but Instant takes an easing and a duration in milliseconds

Navigate to, Open overlay and Scroll to need a target. Pick re-aims a link on the canvas; the Target frame list does the same by name. Back and Close overlay need none. Open URL opens its address in a new browser tab and leaves the prototype where it was. Open overlay adds three settings: Position (Centre, Top, Bottom, or Manual with X and Y in pixels from the frame’s top left), Close when clicking outside, and Background, the colour and opacity that dims the frame behind (black at 45% by default). Change to works on a layer inside a component (or on an instance) and picks one of the set’s variants, such as State: Open: in the player the instance around the layer switches to it, as Figma interactive components do. A layer holds up to 16 links. Remove deletes one.

A new link is On click, Navigate to, Instant.

Agent and MCP

The motion agent has three tools, also reachable through motion_tool in MCP and feega motion tool:

• add_interaction with clip_id, trigger, action and an optional transition; pass interaction_id to replace a link. An open_overlay action takes overlay { position, x, y, closeOutside, backdrop }; close_overlay takes nothing.
• list_interactions lists every link of a frame.
• remove_interaction with clip_id and interaction_id.

{
  "tool": "add_interaction",
  "input": {
    "clip_id": "cta",
    "trigger": { "kind": "click" },
    "action": { "kind": "navigate", "target": "<frame node id>" },
    "transition": { "kind": "slide", "direction": "left", "easing": "enter", "durationMs": 300 }
  }
}

Run it on a saved frame with the MCP motion_tool (node_id, tool, input), or from the CLI:

feega motion tool <nodeId> add_interaction --input '{"clip_id":"cta","trigger":{"kind":"click"},"action":{"kind":"navigate","target":"<frame node id>"}}'
feega motion tool <nodeId> list_interactions

change_to takes the variant instead of a target:

{ "clip_id": "question", "trigger": { "kind": "click" }, "action": { "kind": "change_to", "variant": { "State": "Open" } } }

open_url takes a url:

{ "clip_id": "cta", "trigger": { "kind": "click" }, "action": { "kind": "open_url", "url": "https://feega.app/pricing" } }

Clips also show their interactions in get_motion_doc.

Limits

Links are played in the Prototype player. Code export does not emit prototype links yet. A link whose target frame was deleted is kept on the layer but no arrow is drawn.

Viewport in the player

The bar under the player title sets how the frame is shown. The choice is remembered per frame.

• Fit: the whole frame fits the window.
• Fill width: the frame is scaled to the window width; scroll to see the rest.
• 100%: actual size, with scroll.
• Responsive: drag the handle on either edge, pick Desktop 1440, Tablet 768 or Phone 390, or type a width. The frame re-lays out live and the breakpoint view applies as the width crosses it. The bar shows the width and the active breakpoint.

On a phone, pinch to zoom.