Figma user macro for Confluence

README.md

Figma user macro for Confluence

This user macro is a simple way to embed Figma files using Confluence macros.

The macro accepts 3 parameters:

• Url: The URL of the Figma file (not embed link!). This value is required and is validated using RegEx. If it is invalid, an error will render.
• Height: Height of the embed window. Defaults to 450px
• Width: Width of the embed window. Defaults to 100%.

figmaConfluenceMacro.vm

## Macro title: Figma for Confluence
## Macro description: Embed Figma files.
## Categories: External content, Visual & images
## Macro has a body: N
##
## Developed by: Joseph Le <hello@josephle.me>
## Date created: 24/03/2021

## Params
## @param Url:title=Figma File URL|type=string|required=true|desc=Link to your Figma file
## @param Height:title=Embed Window Height|type=string|required=false|desc=Height of the embed window|default=450px
## @param Width:title=Embed Window Width|type=string|required=false|desc=Width of the embed window|default=100%

## ---
## Check if URL is valid
## ---
#set ($figmaUrlRegex="https:\/\/([\w\.-]+\.)?figma.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$")
#set ($isValidUrl = $paramUrl.matches($figmaUrlRegex))

## ---
## Render
## ---
#if ($isValidUrl)
<iframe src="https://www.figma.com/embed?embed_host=confluence&url=$paramUrl" allowfullscreen style="height: $paramHeight;width: $paramWidth;border: 1px solid #e8ebed;"></iframe>
#else
<div class="aui-message aui-message-error">
<p class="title"><strong>The Figma URL embedded is invalid!</strong></p>
</div>
#end