XD Plugin Lab: Part Three, Step 2: More Complex 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 STEP 2
////////////////////////////////////////////////////////////

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

function createRectangle(selection) {
    var textNode = selection.items[0];
    var bounds = textNode.boundsInParent;
    console.log(bounds);

    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 continues the introduction to UI in XD
// In this step, we'll create our UI. In the next step,
// we'll make the plugin useful again
////////////////////////////////////////////////////////////

let dialog;

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

// here is where we changed our UI by modifying `innerHTML`
    dialog.innerHTML = `
<style>
    form {
        width: 400px;
    }
    .row {
        display: flex;
        align-items: center;
    }
</style>
<form method="dialog">
    <h1>Create Button Frame</h1>
    <hr />
    <div class="row">
        <label class="row">
            <span>V:</span>
            <input type="text" uxp-quiet="true" id="txtV" placeholder="V padding" />
        </label>
        <label class="row">
            <span>H:</span>
            <input type="text" uxp-quiet="true" id="txtH" placeholder="H padding" />
        </label>
    </div>
    <footer>
        <button id="cancel" type="reset" uxp-variant="secondary">Cancel</button>
        <button id="ok" type="submit" uxp-variant="cta">Apply</button>
    </footer>
</form>`;

    // make sure the cancel button works!
    dialog.querySelector("#cancel").addEventListener("click", () => {
        dialog.close("reasonCanceled");
    })

    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-P2.md

XD Plugin Lab: Part Three, Step 2: More Complex User Interface

Note: This is part of a longer series. In this part, we'll create the actual UI for the button padding plugin. Note the following important sections in main.js:

• Lines 43-69: We've changed this HTML pretty significantly.
• Lines 47-50: There's already a class provided by default called row, but it doesn't have align-items: center on it by default (yet). So we'll override it.
• Lines 56-59: This is the common pattern for creating an input field with a label. This will create the label to the left of the input field. If you want the label on top, omit the class="row".
• Line 58: uxp-quiet is a special attribute that lets UXP know to render the input element less loudly than by default (which includes borders all around the input).
• Line 66: We've added a Cancel button!
• Lines 72-74: ... but we need to make sure it works, too. Notice that we can call dialog.close with the cancelation reason.