I tried Figma the day the beta launched October 2016, but didn’t fully embrace the collaborative design tool until the following Spring. At first I was the sole user at our ADP Payroll Innovation Group, but recently teamed up with another UXD to work on specific product features. I convinced her to give Figma a try in place of Sketch or Illustrator.
Prior to Figma, our workflow looked something like this:
We use a variety of tools at ADP, and are allowed to use whatever tools get the job done, typically based on comfort level and expertise. Prior to Figma I used Sketch, but became disenchanted with the performance, plugin update snags, and lack of platform flexibility. (Plus, at the time they did not have cross file symbol updating.)
After the Figma live-embed feature was launched in September, I investigated using it in Confluence, which is used across ADP within departments. I realized if we could embed our Figma design files directly into our design pages in Confluence we would cut out the PNG update hell loop and streamline stakeholder consumption.
How do you embed Figma files/pages in Confluence?
In Confluence while you are editing a page you can access the “Insert > Other macros” menu:
A dialog will let you select “HTML” as an option in the “Development” section:
Once you have selected “Insert” (you can select it immediately after choosing HTML and don’t have to wait for the processing to stop) you will see the following control in your Confluence page:
You can keep the Figma iframe embed code shown below handy, like I do on my desktop, or just go to their live embed page and copy it.
<html> <head> <style> #content { width: 800px; margin: auto; height: 100%; display: flex; align-items: center; } </style> </head> <body> <div id="content"> ...Paste <iframe> code here... </div> </body></html>
Once you have it copied into your clipboard, paste it into the Confluence HTML box.
Now you just need to copy the embed code from any Figma file/page or frame. You use the “Share Prototype” button in the top-right of the Figma UI to do so:
Figma gives you a few options after you open the Share dialog:
- If you do NOT have any frame selected on a page you will see this dialog:
2. If you DO have a frame selected on a page you will see this dialog:
If you select “Public embed” in #1, you will see the entire file page embedded into the Confluence page and you can pan/zoom to see it all. The code copied from the Figma dialog looks as follows:
<iframe style=”border: none;” width=”800" height=”450" src=”https://www.figma.com/embed?embed_host=share&url=https://www.figma.com/file/FnX0a7WxgZ7zaa272usLyot0/Figma-Medium-Posts" allowfullscreen></iframe>
If you select “Public embed” in #2 you have a checkbox to “Link to selected frame” which will embed only that frame in the Confluence page. The code copied from the Figma dialog looks as follows:
<iframe style=”border: none;” width=”800" height=”450" src=”https://www.figma.com/embed?embed_host=share&url=https://www.figma.com/file/FnX0a7WxgZ7zaa272usLyot0/Figma-Medium-Posts?node-id=1%3A27" allowfullscreen></iframe>
I added the bolding in the latter case to show the difference. In the second case a “node-id” is specified, which references the frame ID in that Figma page. This ID is generated by the app, so don’t change it.
Either way you choose, you need to paste that string into the Confluence HTML control as shown here:
The other things you may want to change:
- The “border: none” parameter can be set to “1” to show the iframe border as rendered by that browser. Best practice — use the default.
- The “width” and “height” can be set to whatever you like; I recommend you set it to the same size as the frame size in your Figma file. (Author note: I’ve written to Figma about making this happen automatically but it always defaults to 800x450.)
- The “allowfullscreen” parameter can be removed to not show the expand to fullscreen control; best practice in my experience is to leave it as it helps during reviews.
Once you have the iframe embed string as desired, save or preview the Confluence page and you will see the live Figma embedded file:
- There is a Figma watermark in the upper-left (Author note: I’ve also written Figma to ask if paying customers have the option to remove it.)
- There is a Fullscreen control in the upper-right, great for expanding the view in presentations and UX reviews.
- There is a direct link to the Figma file in the bottom-left which opens a tab in your browser to the Figma file (it does not open the desktop app, perhaps it should if it is running).
- There is a zoom affordance in the bottom-right.
This all works with Figma prototypes as well. You can run a Figma prototype and use the same Share button to follow the same instructions to get a live frame to frame prototype embedded in Confluence.
TIPS
- You can embed multiple iframes inside the Div:
<div id=”content”>
…Paste <iframe> code here…
…Paste <iframe> code here…
…Paste <iframe> code here…
…Paste <iframe> code here…
</div>
2. You can embed any HTML you like within the iframe code. For example I add <h1> Feature View Title </h1> before each iframe to help delineate features in the Confluence page:
<div id=”content”>
<h1>Feature 1 Title</h1>
…Paste <iframe> code here…
<h1>Feature 2 Title</h1>
…Paste <iframe> code here…
<h1>Feature 3Title</h1>
…Paste <iframe> code here…
<h1>Feature 4Title</h1>
…Paste <iframe> code here…
</div>
Caveats
- You cannot have other Confluence elements in the same page as the Figma live embed, only the live embed will display aside from the title of the Confluence page. This will probably change when Figma has negotiated an official embed with Atlassian (Confluence and Jira company).
- You cannot leave comments on a page with Figma file embedding (at least not to my attempts; if anyone figures it out, please let our audience know).
Why is all this so great?
- You always have the latest version of any mockup or prototype in Confluence. Our PO’s love this — no more “is this the latest mockup for the [fetzer] feature”? After I answered this a few times with “It’s always the latest mockup for the [fetzer] feature.” You set it and forget it.
- Likewise, development and other stakeholders never has to ask the PO to ask you if “this is the latest mockup”…
- There is no PNG export/import loop to Confluence pages — a HUGE time saver.
- Reviewers do not need a Figma account — any file shared via public access can be viewed but not edited. So there’s no downstream stakeholder “I can’t see it” hassle.
- It’s cross platform; no matter what the stakeholders are using (Mac, Windows, or Linux) their browser will show the file or prototype.
- Remember that Figma works as shown without direct Confluence support — it will only get better when the Figma team works with Atlassian to create a Figma component for their pages.
Conclusion
For our UX team, Figma live embedding in Confluence eliminates the need for other tools, reduces costs, improves workflow, and saves time and energy. You can give it a try and I hope this helps you discover Figma’s benefits as a design collaboration tool using Confluence.
Cheers!
Ben
