Design bundle for Confluence
Step-by-step installation guide
Log into your Confluence instance as an admin.
Click on settings at the top right of your screen.
Click Find new apps from the left-hand side of the page.
Find Design bundle for Confluence via search.
The appropriate app version appears in the search results.Click Try free to begin a new trial for Design bundle for Confluence
Click Start free trial, Confluence will now download and install our awesome app!
Congratulations, you now have 9 apps in 1 bundle!
Â
Miro for Confluence
After installing the Design bundle for Confluence app, Miro will become available as a Confluence Macro. If you want to embed Miro into a Confluence page, log in to https://miro.com and select the board you want to embed.
Embed using the board URL
Miro for Confluence will automatically detect the board URL. Once you have selected the board in Miro, you can copy the URL from the address bar and paste it directly into your Confluence page. The Miro for Confluence macro will open automatically.
You can edit the macro to adjust the dimensions:
After selecting the macro, click on the Edit button to open the macro editor right side panel
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your Miro board will become visible!
Keep in mind that boards are read-only
Embed using the macro editor
When editing a page, click on the plus button at the top right of your screen and click on Other macro’s or View more
Search for Miro for Confluence. Click on Miro for Confluence
The macro editor right side panel will open, which will allow you to enter the URL of your Miro board
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your Miro board will become visible!
Keep in mind that scene’s are read-only
Using the embed code instead of the URL
In Miro, you can click on the Share button in the top left corner of your screen. This will open a menu. Click Embed. A modal will open with sharing options for free navigation or presentation mode. An iframe embed code is shown for each mode. Copy the embed code.
Embed using the code snippet in the macro editor
When editing a page, click on the plus button at the top right of your screen and click on Other macro’s or View more
Search for Miro for Confluence. Click on Miro for Confluence
The macro editor right side panel will open, which will allow you to enter the URL of your Miro board
Paste the embed code from Miro in the URL field
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your Miro board will become visible!
Keep in mind that boards are read-only
Framer for Confluence
After installing the Design bundle for Confluence app, Framer will become available as a Confluence Macro. If you want to embed Framer prototypes into a Confluence page, log in to https://framer.com and select the prototype you want to embed.
Embed using the prototype URL
Framer for Confluence will automatically detect the prototype URL. Once you have selected the prototype in Framer, click on the play button in the top right corner. Copy the URL from the address bar, or click on the Copy Link button in the top right corner and paste it directly into your Confluence page. The Framer for Confluence macro will open automatically.
You can edit the macro to adjust the dimensions:
After selecting the macro, click on the Edit button to open the macro editor right side panel
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your Framer prototype will become visible!
Keep in mind that boards are read-only
Embed using the macro editor
When editing a page, click on the plus button at the top right of your screen and click on Other macro’s or View more
Search for Framer for Confluence. Click on Framer for Confluence
The macro editor right side panel will open, which will allow you to enter the URL of your Framer prototype
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your Framer prototype will become visible!
Keep in mind that scene’s are read-only
ProtoPie for Confluence
After installing the Design bundle for Confluence app, ProtoPie will become available as a Confluence Macro. If you want to embed ProtoPie prototypes into a Confluence page, log in to https://protopie.io and select the prototype you want to embed.
Embed using the prototype URL
ProtoPie for Confluence will automatically detect the prototype URL. Once you have selected the prototype in ProtoPie, you can copy the URL from the address bar and paste it directly into your Confluence page. The ProtoPie for Confluence macro will open automatically.
You can edit the macro to adjust the dimensions:
After selecting the macro, click on the Edit button to open the macro editor right side panel
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your ProtoPie prototype will become visible!
Keep in mind that boards are read-only
Embed using the macro editor
When editing a page, click on the plus button at the top right of your screen and click on Other macro’s or View more
Search for ProtoPie for Confluence. Click on ProtoPie for Confluence
The macro editor right side panel will open, which will allow you to enter the URL of your ProtoPie prototype
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your ProtoPie prototype will become visible!
Keep in mind that scene’s are read-only
Figma for Confluence
After installing the Design bundle for Confluence app, Figma will become available as a Confluence Macro. If you want to embed Figma files into a Confluence page, log in to and select the project you want to embed.
Embed using the project URL
Figma for Confluence will automatically detect the file URL. Once you have selected the project in Figma, you can copy the URL from the address bar and paste it directly into your Confluence page. The Figma for Confluence macro will open automatically.
You can edit the macro to adjust the dimensions:
After selecting the macro, click on the Edit button to open the macro editor right side panel
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your Figma file will become visible!
Keep in mind that boards are read-only
Embed using the macro editor
When editing a page, click on the plus button at the top right of your screen and click on Other macro’s or View more
Search for Figma for Confluence. Click on Figma for Confluence
The macro editor right side panel will open, which will allow you to enter the URL of your Figma file
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your Figma file will become visible!
Keep in mind that scene’s are read-only
Adobe XD for Confluence
After installing the Design bundle for Confluence app, Adobe XD will become available as a Confluence Macro. If you want to embed Adobe XD documents into a Confluence page, open Adobe XD and select the document you want to embed.
Embed using the project URL
Adobe XD for Confluence will automatically detect the document URL. Once you have selected the document in Adobe XD, click on the share button and generate a link. Copy the link and paste it directly into your Confluence page. The Adobe XD for Confluence macro will open automatically.
You can edit the macro to adjust the dimensions:
After selecting the macro, click on the Edit button to open the macro editor right side panel
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your Adobe XD document will become visible!
Keep in mind that boards are read-only
Embed using the macro editor
When editing a page, click on the plus button at the top right of your screen and click on Other macro’s or View more
Search for Adobe XD for Confluence. Click on Adobe XD for Confluence
The macro editor right side panel will open, which will allow you to enter the URL of your Adobe XD document
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your Adobe XD document will become visible!
Keep in mind that scene’s are read-only
Marvel for Confluence
After installing the Design bundle for Confluence app, Marvel will become available as a Confluence Macro. If you want to embed Marvel prototypes into a Confluence page, log in to and select the prototype you want to embed.
Embed using the project URL
Marvel for Confluence will automatically detect the prototype URL. Once you have selected the prototype in Marvel, click on the Share button and copy the link. Paste it directly into your Confluence page. The Marvel for Confluence macro will open automatically.
You can edit the macro to adjust the dimensions:
After selecting the macro, click on the Edit button to open the macro editor right side panel
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your Marvel prototype will become visible!
Keep in mind that boards are read-only
Embed using the macro editor
When editing a page, click on the plus button at the top right of your screen and click on Other macro’s or View more
Search for Marvel for Confluence. Click on Marvel for Confluence
The macro editor right side panel will open, which will allow you to enter the URL of your Marvel prototype
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your Marvel prototype will become visible!
Keep in mind that scene’s are read-only
Using the embed code instead of the URL
In Marvel, you can click on the Share button in the top left corner of your screen. This will open a menu. Click Embed. An iframe embed code is shown. Copy the embed code.
Embed using the code snippet in the macro editor
When editing a page, click on the plus button at the top right of your screen and click on Other macro’s or View more
Search for Marvel for Confluence. Click on Marvel for Confluence
The macro editor right side panel will open, which will allow you to enter the URL of your Marvel prototype
Paste the embed code from Marvel in the URL field
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your Marvel prototype will become visible!
Keep in mind that boards are read-only
Adobe PDF for Confluence
After installing the Design bundle for Confluence app, Adobe PDF will become available as three separate Confluence Macros. If you want to embed Adobe PDF files into a Confluence page, they need to be externally available as the macro only accepts public URL’s to PDF files. When embedding the PDF file, you can choose between the Adobe PDF Viewer, Adobe PDF Slideshow and Adobe PDF Inline embed macro.
Embed using the macro editor
When editing a page, click on the plus button at the top right of your screen and click on Other macro’s or View more
Search for Adobe PDF
Based on your preference, select the Adobe PDF Viewer, Adobe PDF Slideshow or Adobe PDF Inline Embed macro
The macro editor right side panel will open, which will allow you to enter the URL of your PDF file
Depending on the chosen macro, you can enable/disable additional viewer options
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your Adobe PDF file will become visible!
Keep in mind that scene’s are read-only
Zeplin for Confluence
After installing the Design bundle for Confluence app, Zeplin will become available as a Confluence Macro. If you want to embed Zeplin scene’s into a Confluence page, open and select the project you want to embed.
Embed using the project URL
Zeplin for Confluence will automatically detect the scene URL. Once you have selected the project in Zeplin, click on the share button at the top right off your screen. A modal will open with all sharing options. Click on the triple dot (…) menu next to the scene sharing option and click Copy link. Paste it directly into your Confluence page. The Zeplin for Confluence macro will open automatically.
You can edit the macro to adjust the dimensions:
After selecting the macro, click on the Edit button to open the macro editor right side panel
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your Zeplin scene will become visible!
Keep in mind that boards are read-only
Embed using the macro editor
When editing a page, click on the plus button at the top right of your screen and click on Other macro’s or View more
Search for Zeplin for Confluence. Click on Zeplin for Confluence
The macro editor right side panel will open, which will allow you to enter the URL of your Zeplin scene
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your Zeplin scene will become visible!
Keep in mind that scene’s are read-only
InVision for Confluence
After installing the Design bundle for Confluence app, InVision will become available as a Confluence Macro. If you want to embed InVision screens into a Confluence page, log in to and select the screen you want to embed.
Embed using the project URL
InVision for Confluence will automatically detect the screen URL. Once you have selected the screen in InVision, click on the Share button in the bottom right corner and copy the public link. Paste it directly into your Confluence page. The InVision for Confluence macro will open automatically.
You can edit the macro to adjust the dimensions:
After selecting the macro, click on the Edit button to open the macro editor right side panel
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your InVision screen will become visible!
Keep in mind that boards are read-only
Embed using the macro editor
When editing a page, click on the plus button at the top right of your screen and click on Other macro’s or View more
Search for InVision for Confluence. Click on InVision for Confluence
The macro editor right side panel will open, which will allow you to enter the URL of your InVision screen
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your InVision screen will become visible!
Keep in mind that scene’s are read-only