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
Solved
Embed Custom Zoom/Scale
Best answer by Joseph_Lion
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:
- Draw a square over the specific area you want to display as your FigJam embed.
- Get the node-id of this square.
- Make the square transparent and remove its border to hide it from view.
- Group all elements on the canvas.
- 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.
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:
- Draw a square over the specific area you want to display as your FigJam embed.
- Get the node-id of this square.
- Make the square transparent and remove its border to hide it from view.
- Group all elements on the canvas.
- 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.
There is an easier way.
- 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.
- Select it and generate you embed code. Look to make sure the code shows a Node ID that is not a default.
- Place the code in your iframe.
- Return to the Figma / FigJam file and select all, and group.
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.