Skip to content
Adobe XD Plugin Samples
Branch: master
Clone or download
dkstevekwak Merge pull request #42 from basawyer/fix-network-example
Fix requiring localFileSystem in network example
Latest commit 8d349b2 Apr 3, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.meta Added missing readme files for all the samples. Aug 4, 2018
e2e-adobe-stock icon names changed Mar 4, 2019
e2e-colorize-text icon names changed Mar 4, 2019
e2e-customize-banner icon names changed Mar 4, 2019
e2e-stock-chart icon names changed Mar 4, 2019
how-to-create-path-objects icon names changed Mar 4, 2019
how-to-display-an-alert icon names changed Mar 4, 2019
how-to-draw-lines icon names changed Mar 4, 2019
how-to-export-a-rendition icon names changed Mar 4, 2019
how-to-integrate-with-OAuth icon names changed Mar 4, 2019
how-to-make-network-requests Fix storage usage Apr 3, 2019
how-to-read-a-file
how-to-style-text
how-to-work-with-scenenodelist icon names changed Mar 4, 2019
i18n-pojo Updated readme. Mar 27, 2019
quick-start-react icon names changed Mar 4, 2019
quick-start icon names changed Mar 4, 2019
sg-chart-generator
sg-dummy-data icon names changed Mar 4, 2019
sg-dynamic-button
sg-fit-to-object icon names changed Mar 4, 2019
sg-lots-of-lines icon names changed Mar 4, 2019
sg-lots-of-rects icon names changed Mar 4, 2019
sg-margin-guides icon names changed Mar 4, 2019
sg-meme-me icon names changed Mar 4, 2019
sg-repeater icon names changed Mar 4, 2019
sg-turtle
sg-update-weather
ui-button-padding-hyperscript icon names changed Mar 4, 2019
ui-button-padding icon names changed Mar 4, 2019
ui-buttons-galore icon names changed Mar 4, 2019
ui-context-menu addressing #41 Apr 3, 2019
ui-create-chart
ui-datagrid-react icon names changed Mar 4, 2019
ui-dialog-variations icon names changed Mar 4, 2019
ui-hello-h icon names changed Mar 4, 2019
ui-hello-react icon names changed Mar 4, 2019
ui-hello-vue icon names changed Mar 4, 2019
ui-hello icon names changed Mar 4, 2019
ui-html-playground addressed #10 Mar 15, 2019
ui-html icon names changed Mar 4, 2019
ui-jquery icon names changed Mar 4, 2019
ui-playground
ui-rename-artboards icon names changed Mar 4, 2019
ui-simple-form icon names changed Mar 4, 2019
ui-tabs-react icon names changed Mar 4, 2019
ui-trello icon names changed Mar 4, 2019
ui-typography icon names changed Mar 4, 2019
ui-vectorize icon names changed Mar 4, 2019
.gitignore removed yarn-error logs and added to gitignore Aug 7, 2018
CODE_OF_CONDUCT.md Contribution stuff Aug 4, 2018
CONTRIBUTING.md Update CONTRIBUTING.md Oct 2, 2018
COPYRIGHT Create COPYRIGHT Oct 2, 2018
LICENSE
README.md min version number changed to two parts Feb 28, 2019
package-lock.json security warning addressed: Nov 27, 2018
package.json
yarn.lock first commit Aug 4, 2018

README.md

Plugin Samples

This repository contains a library of sample XD plugins to help you on your journey. You can use these samples to learn more about how to build plugins for Adobe XD.

For each sample, be sure to read the README as well as code comments. Note that samples that start with how-to- have companion tutorials in the plugin-docs repo, which can be viewed live on our developer portal at:

https://adobexdplatform.com/plugin-docs/tutorials/

Samples list

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

Recommended development setup

  1. Go to the directory that stores your development plugin folder:

    • Mac: ~/Library/Application\ Support/Adobe/Adobe\ XD\ CC/
    • Windows: C:\Users\%USERNAME%\AppData\Local\Packages\Adobe.CC.XD_adky2gkssdxte\LocalState\
  2. Rename the develop directory, if it already exists:

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

    If you don't have a develop directory yet, simply create one.

  3. Clone this repository as the develop directory:

git clone git@github.com:AdobeXD/plugin-samples.git develop
  1. Launch XD, or if already open, use COMMAND+SHIFT+R to reload plugins.

  2. Run the plugins from XD's Plugins menu.

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

You can’t perform that action at this time.