peterflynn

Adobe XD Plugin Development - Important Links

Part 1: Understanding plugin basics

• Starter project files

Part 2: Creating a "button frame" plugin

• Adobe XD API Reference
• Finished code from this part

peterflynn

Adobe XD Plugins Lab at MAX

Important Links

Part 1: Understanding plugin basics

• Starter project files

Part 2: Creating a "button frame" plugin

• Adobe XD API Reference

peterflynn

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

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

var dialog;

peterflynn

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

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

function createRectangle(selection) {
    var textNode = selection.items[0];

peterflynn

var fs = require("uxp").storage.localFileSystem;

function loadStyleguideFile(selection) {
    return fs.getFileForOpening()
    .then(function (file) {
        console.log("User chose file: " + file);
        return file.read();
    })
    .then(function (text) {
        var json = JSON.parse(text);

peterflynn

var dialog;

function createDialog() {
    dialog = document.createElement("dialog");
    dialog.innerHTML = `
        <form method="dialog">
            <h1>Hello, world!</h1>
            <hr>
            <footer>
                <!-- Ok button is special: it will automatically close the dialog for us -->

peterflynn

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

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

function createRectangle(selection) {
    // Insert a red square in the current artboard or group/container

peterflynn

diff --git a/Base.lproj/Main.storyboard b/Base.lproj/Main.storyboard
index 5344907..1f78691 100644
--- a/Base.lproj/Main.storyboard
+++ b/Base.lproj/Main.storyboard
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.Cocoa.Storyboard.XIB" version="3.0" toolsVersion="9060" systemVersion="14F1021" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES" initialViewController="B8D-0N-5wS">
+<document type="com.apple.InterfaceBuilder3.Cocoa.Storyboard.XIB" version="3.0" toolsVersion="9532" systemVersion="15C50" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES" initialViewController="B8D-0N-5wS">
     <dependencies>
-        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="9060"/>

peterflynn

// If "const" is to the LEFT of "*" it applies to the object being pointed at
// If "const" is to the RIGHT of "*" it applies to the variable holding the pointer address

const T* ptr;  // object is immutable
T const* ptr;  //   "

T* const ptr;  // 'ptr' cannot be changed to point to a different address, but object is not immutable
               // (i.e. the variable is const, not the thing it points to)

const T* const ptr;  // object is immutable AND 'ptr' cannot be changed to point to a different address

peterflynn

// Can omit the whole @interface section if no private fields/properties to declare
@interface MyClass ()  // parens are almost always empty - used only to define a "Category" when adding mixins to existing class definition
{
    int foo;  // private field (not common) - access as 'foo'
}  // can omit these {}s if no private fields

@property (nonatomic) int foo2;  // private property - access as 'self.foo2'
// Any property (private or public) can also be accessed within the class as "_foo2" (without "self"). This bypasses the getter/setter
// methods and accesses it directly like an ivar. Since the getter/setter are usually auto-generated stubs, there's usually no behavior
// difference with this syntax.