Skip to main content
Joseph_Lion
Joseph_Lion
Mar 18, 2024 7:08 PM UTC
Solved

Embed Custom Zoom/Scale

When we embed a FigJam project it defaults to fitting everything on the canvas within the window which means you are forever zooming into embeds.

Are there any parameters that allows us to start at 100% and focus on the center of the canvas?

Cheers

This topic has been closed for replies.
Joseph_Lion
Joseph_LionSolution
Mar 18, 2024 10:20 PM UTC

I’ve worked it out - and actually a more precise method than zoom/center focus.

To achieve a precise zoom and positioning, follow these steps:

  1. Draw a square over the specific area you want to display as your FigJam embed.
  2. Get the node-id of this square.
  3. Make the square transparent and remove its border to hide it from view.
  4. Group all elements on the canvas.
  5. Get the node-id of the entire grouped project.

In this setup, the entire project becomes the parent, while the hidden square becomes the child.

In your embed URL, include the parameters &starting-node-id=XXX:XXX&node-id=XXX:XXX, replacing XXX:XXX with the respective node-ids of the parent (starting-node-id) and the child (node-id).

This means when the embed renders, the hidden square fits the embed window forcing this area into focus regardless of its size or position. Additionally, because the entire group is set as the starting node, elements outside the overflow are not deleted as normal with node-id methods.

View in thread

2 replies

Joseph_Lion
Joseph_LionAuthorSolution
Mar 18, 2024 10:20 PM UTC

I’ve worked it out - and actually a more precise method than zoom/center focus.

To achieve a precise zoom and positioning, follow these steps:

  1. Draw a square over the specific area you want to display as your FigJam embed.
  2. Get the node-id of this square.
  3. Make the square transparent and remove its border to hide it from view.
  4. Group all elements on the canvas.
  5. Get the node-id of the entire grouped project.

In this setup, the entire project becomes the parent, while the hidden square becomes the child.

In your embed URL, include the parameters &starting-node-id=XXX:XXX&node-id=XXX:XXX, replacing XXX:XXX with the respective node-ids of the parent (starting-node-id) and the child (node-id).

This means when the embed renders, the hidden square fits the embed window forcing this area into focus regardless of its size or position. Additionally, because the entire group is set as the starting node, elements outside the overflow are not deleted as normal with node-id methods.

Brett_Combs1
Brett_Combs1
Dec 11, 2024 7:43 PM UTC

There is an easier way.

  1. Place a frame (Figma) rectangle (FigJam) over the area you want to display. I give it a 1% opacity in case the element needs to have properties.
  2. Select it and generate you embed code. Look to make sure the code shows a Node ID that is not a default.
  3. Place the code in your iframe.
  4. Return to the Figma / FigJam file and select all, and group.
Terms & ConditionsAccessibility statement