/plugin-samples

Adobe XD Plugin Samples

Primary LanguageJavaScriptMIT LicenseMIT

Plugin Samples

This repository contains several sample XD plugins. You can use these to learn more about how to build plugins for Adobe XD. Make sure to read the README or instructions commented in the main.js file. Note that samples that start with how-to- have their companion guides in the Plugin-Docs repository

Samples list

Extension Main APIs Used Description Minimum Version
e2e-adobe-stock Network I/O (Fetch) Lets users use End-to-end Adobe Stock Photo Search 13.0.0
e2e-colorize-text Scenegraph, ScenenodeList Provides several text color utilities 13.0.0
e2e-stock-chart UI, File I/O, Scenegraph, Network I/O (Fetch) Draws a line chart of the picked stock quote 13.0.0
getting-started Scenegraph Creates a text ("Hello!") object and inserts it into the artboard 13.0.0
how-to-show-an-alert UI Demonstrates how to show an alert and an error dialog 13.0.0
how-to-create-path-objects Scenegraph Demonstrates how to create shapes using path objects 13.0.0
how-to-draw-lines Scenegraph Demonstrates how to create line objects 13.0.0
how-to-generate-an-export-rendition File I/O, Application(renditions) Demonstrates how to generate an export rendition of an object 13.0.0
how-to-import File I/O, Scenegraph Demonstrates how to import a .txt file 13.0.0
how-to-integrate-with-OAuth Network I/O (XHR, openExternal), Node.js server Demonstrates how to integrate with a third-party OAuth 13.0.0
how-to-make-network-requests Network I/O (XHR , Fetch), Scenegraph Demonstrates how to make network requests 13.0.0
how-to-style-text Scenegraph Demonstrates how to create text nodes with styled text 13.0.0
how-to-work-with-scenenodelist Scenegraph Demonstrates how to create various objects and use scenenode list to filter and color 13.0.0
sg-chart-generator Scenegraph, Commands Demonstrates how to generate pie charts and bar charts 13.0.0
sg-dummy-data Scenegraph, Commands Demonstrates how to generate random data 13.0.0
sg-dynamic-button Scenegraph, Commands Updates a frame shape to wrap a text element exactly with a specified amount of padding 13.0.0
sg-fit-to-object Scenegraph, Commands Fits an object (image) to another object (rectangle) with three options- as-is, turn clockwise, turn counter-clockwise 13.0.0
sg-lots-of-lines Scenegraph Draws multiple lines 13.0.0
sg-margin-guides Scenegraph, Commands Create/remove margin guides around the existing objects in artboard(s) 13.0.0
sg-meme-me Scenegraph, Commands Takes text inputs and an image and convert them into a meme 13.0.0
sg-repeater Scenegraph, Commands Duplicates the selection horizontally or circularly 13.0.0
sg-turtle Scenegraph, Commands Draws a series of lines by following "turtle graphics" commands 13.0.0
sg-update-weather Scenegraph, Network I/O (XHR) Finds all text elements that follow a specific pattern and insert the temperatures 13.0.0
ui-button-padding UI Uses h function to create a simple UI with these UI elements: form, labrel, footer 13.0.0
ui-button-padding-hyperscript UI Uses hyperscript to create these UI elements: form, labrel, footer 13.0.0
ui-buttons-galore UI Uses document.querySelector to create these UI elements: different types of buttons 13.0.0
ui-context-menu UI Uses h function to create a context menu with these UI elements: form, footer, button 13.0.0
ui-create-chart UI Uses h function to create a menu optimized for generating charts with these UI elements: form, footer, button 13.0.0
ui-datagrid-react UI Uses React to create data grids 13.0.0
ui-dialog-variations UI Demonstrates several different dialog variations 13.0.0
ui-hello UI Simply shows a dialog with "Hello World" 13.0.0
ui-hello-h UI Used h function to simply show a dialog with "Hello World" 13.0.0
ui-hello-react-jsx UI Used React jsx to simply show a dialog with "Hello World" 13.0.0
ui-hello-react-raw UI Used React to simply show a dialog with "Hello World" 13.0.0
ui-hello-vue UI Used Vue to simply show a dialog with "Hello World" 13.0.0
ui-html UI Creates a dialog showing simple UI elements: title, text, input field, and buttons 13.0.0
ui-jquery UI Used jquery to create a dialog showing simple UI elements: title, text, input field, and buttons 13.0.0
ui-playground UI Shows all the controls in a playground 13.0.0
ui-rename-artoboards UI Shows a sample UI for a plugin that renames artboards 13.0.0
ui-simple-form UI Shows a simple form with these UI elements: input, textarea, select, button 13.0.0
ui-trello UI Uses h function to create a UI that's suitable for a workflow management plugin like Trello 13.0.0
ui-vectorize UI Uses h function to create a simple UI with these UI elements: title, text, button 13.0.0

Recommended development setup

  1. Go to this directory (Mac or Windows):

    Mac: ~/Library/Application\ Support/Adobe/Adobe\ XD\ CC/

    Windows: C:\Users\%USERNAME%\AppData\Local\Packages\Adobe.CC.XD_adky2gkssdxte\LocalState\

  2. Rename the "plugins" directory if any

    Mac: mv plugins oldplugins Windows: (use Windows Explorer)

  3. Checkout this repository as the "plugins" directory.

    git clone https://github.com/AdobeXD/plugin-samples.git plugins

  4. Launch XD and start a new Document.

  5. Use COMMAND+SHIFT+R to reload plugins.

  6. Launch plugins from the Plugins menu.

Make sure to check out XD Plugin Tutorials and XD Plugin References.