XD Plugin Lab: Part Three, Step 1: User Interface

main.js

/*
 * Sample plugin code for Adobe XD.
 *
 * Visit http://adobexdplatform.com/ for API docs and more sample code.
 */

//
// Note: all of this is from prior steps
////////////////////////////////////////////////////////////

var {Rectangle, Color} = require("scenegraph");

function createRectangle(selection) {
    var textNode = selection.items[0];
    var bounds = textNode.boundsInParent;
    console.log(bounds);
    const padding = 10;
    var shape = new Rectangle();
    shape.width = bounds.width + 2*padding
    shape.height = bounds.height + 2*padding;
    shape.stroke = new Color("blue");

    selection.insertionParent.addChild(shape);
    shape.placeInParentCoordinates(
        {x: 0, y: 0},
        {x: bounds.x - padding, y: bounds.y - padding}
    );
}

//
// This begins the introduction to UI in XD
////////////////////////////////////////////////////////////

let dialog;

function createDialog() {
    dialog = document.createElement("dialog");

    dialog.innerHTML = `
<style>
    form {
        width: 400px;
    }
</style>
<form method="dialog">
    <h1>Hello, World</h1>
    <hr />
    <footer>
        <button id="ok" type="submit" uxp-variant="cta">Close</button>
    </footer>
</form>`;

    document.appendChild(dialog);
}

async function showDialog() {
    if (!dialog) {
        createDialog();
    }

    const response = await dialog.showModal();

    console.log(`Dialog response: ${response}`);
}

module.exports = {
    commands: {
        myPluginCommand: showDialog
    }
};

manifest.json

{
    "name": "Sample Plugin: Create Button Frame",
    "id": "YOUR_ID_HERE",
    "version": "1.0.0",

    "description": "Sample plugin code for Adobe XD. Creates a rectangle around the selected text, with fixed padding.",

    "host": {
        "app": "XD",
        "minVersion": "13.0.0"
    },

    "uiEntryPoints": [
        {
            "type": "menu",
            "label": "Create Button Frame",
            "commandId": "myPluginCommand"
        }
    ]
}

XD-UI-P1.md

XD Plugin Lab: Part Three, Step 1: User Interface

Note: This is part of a longer series.

This demonstrates the creation of very simple UI in XD -- essentially, this is our UI equivalent of "Hello World"!

Important sections in main.js:

• Line 34: It's advised to reuse dialogs whenever you can. Otherwise you have to remember to remove them from the DOM manually, and if you aren't careful, you can end up with a lot of hidden dialogs cluttering your DOM.
• Line 37: Dialogs are created using dialog.createElement using standard DIALOG HTML elements.
• Line 39: Here we're setting the dialog's HTML using innerHTML. There's many ways you can do the same thing. You can use document.createElement manually or use a framework, like React.
• Line 42: You should always specify some size on your dialogs. Heights are automatically inferred, but if you have elements that appear or disappear, or change size, or a lot of elements, set a height as well. It's important to remember that dialogs don't scroll by default, and their size may be limited by the size of XD or the screen.
• Line 45: All dialogs should contain a single form with method="dialog". This applies some default styling that simplifies UI development.
• Line 46: Dialogs should use h1 for their titles.
• Line 47: Dialogs should use hr for the separator between title and content.
• Line 48: Dialogs should have a footer, where the dialog's buttons will go. These will automatically be sorted by OS-preferred order
• Line 49: Buttons with type="submit" will automatically submit the dialog form and close the dialog.
• Line 53: Dialogs must be in the DOM before we can show them.
• Line 61: Showing a dialog returns a promise, which we can await. The response will indicate if the dialog was canceled.
• Line 68: Instead of calling createRectangle, we call showDialog. It will return a promise (because it's async), which will hold XD's scenegraph open for manipulation.