Design bundle for Confluence

Owned by Remie Bolte
Last updated: Jul 14, 2021
13 min read

Step-by-step installation guide

  1. Log into your Confluence instance as an admin.

  2. Click on settings at the top right of your screen.

  3. Click Find new apps from the left-hand side of the page.

  4. Find Design bundle for Confluence via search.
    The appropriate app version appears in the search results.

  5. Click Try free to begin a new trial for Design bundle for Confluence

  6. 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:

  1. After selecting the macro, click on the Edit button to open the macro editor right side panel

  2. 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)

  3. Publish your Confluence page & your Miro board will become visible!
    Keep in mind that boards are read-only

Embed using the macro editor

  1. 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

  2. Search for Miro for Confluence. Click on Miro for Confluence

  3. The macro editor right side panel will open, which will allow you to enter the URL of your Miro board

  4. 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)

  5. 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

  1. 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

  2. Search for Miro for Confluence. Click on Miro for Confluence

  3. The macro editor right side panel will open, which will allow you to enter the URL of your Miro board

  4. Paste the embed code from Miro in the URL field

  5. 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)

  6. 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:

  1. After selecting the macro, click on the Edit button to open the macro editor right side panel

  2. 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)

  3. Publish your Confluence page & your Framer prototype will become visible!
    Keep in mind that boards are read-only

Embed using the macro editor

  1. 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

  2. Search for Framer for Confluence. Click on Framer for Confluence

  3. The macro editor right side panel will open, which will allow you to enter the URL of your Framer prototype

  4. 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)

  5. 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:

  1. After selecting the macro, click on the Edit button to open the macro editor right side panel

  2. 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)

  3. Publish your Confluence page & your ProtoPie prototype will become visible!
    Keep in mind that boards are read-only

Embed using the macro editor

  1. 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

  2. Search for ProtoPie for Confluence. Click on ProtoPie for Confluence

  3. The macro editor right side panel will open, which will allow you to enter the URL of your ProtoPie prototype

  4. 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)

  5. 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 https://figma.com 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:

  1. After selecting the macro, click on the Edit button to open the macro editor right side panel

  2. 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)

  3. Publish your Confluence page & your Figma file will become visible!
    Keep in mind that boards are read-only

Embed using the macro editor

  1. 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

  2. Search for Figma for Confluence. Click on Figma for Confluence

  3. The macro editor right side panel will open, which will allow you to enter the URL of your Figma file

  4. 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)

  5. 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:

  1. After selecting the macro, click on the Edit button to open the macro editor right side panel

  2. 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)

  3. Publish your Confluence page & your Adobe XD document will become visible!
    Keep in mind that boards are read-only

Embed using the macro editor

  1. 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

  2. Search for Adobe XD for Confluence. Click on Adobe XD for Confluence

  3. The macro editor right side panel will open, which will allow you to enter the URL of your Adobe XD document

  4. 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)

  5. 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 https://marvelapp.com 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:

  1. After selecting the macro, click on the Edit button to open the macro editor right side panel

  2. 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)

  3. Publish your Confluence page & your Marvel prototype will become visible!
    Keep in mind that boards are read-only

Embed using the macro editor

  1. 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

  2. Search for Marvel for Confluence. Click on Marvel for Confluence

  3. The macro editor right side panel will open, which will allow you to enter the URL of your Marvel prototype

  4. 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)

  5. 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

  1. 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

  2. Search for Marvel for Confluence. Click on Marvel for Confluence

  3. The macro editor right side panel will open, which will allow you to enter the URL of your Marvel prototype

  4. Paste the embed code from Marvel in the URL field

  5. 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)

  6. 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

  1. 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

  2. Search for Adobe PDF

  3. Based on your preference, select the Adobe PDF Viewer, Adobe PDF Slideshow or Adobe PDF Inline Embed macro

  4. The macro editor right side panel will open, which will allow you to enter the URL of your PDF file

  5. Depending on the chosen macro, you can enable/disable additional viewer options

  6. 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)

  7. 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 https://zeplin.io 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:

  1. After selecting the macro, click on the Edit button to open the macro editor right side panel

  2. 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)

  3. Publish your Confluence page & your Zeplin scene will become visible!
    Keep in mind that boards are read-only

Embed using the macro editor

  1. 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

  2. Search for Zeplin for Confluence. Click on Zeplin for Confluence

  3. The macro editor right side panel will open, which will allow you to enter the URL of your Zeplin scene

  4. 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)

  5. 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 https://www.invisionapp.com 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:

  1. After selecting the macro, click on the Edit button to open the macro editor right side panel

  2. 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)

  3. Publish your Confluence page & your InVision screen will become visible!
    Keep in mind that boards are read-only

Embed using the macro editor

  1. 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

  2. Search for InVision for Confluence. Click on InVision for Confluence

  3. The macro editor right side panel will open, which will allow you to enter the URL of your InVision screen

  4. 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)

  5. Publish your Confluence page & your InVision screen will become visible!
    Keep in mind that scene’s are read-only