Merge branch 'max' of https://github.com/AdobeXD/Plugin-Docs into max

Steve Kwak · Steve Kwak · commit 1c3bc7983763 · 2019-10-31T12:40:15.000-04:00
diff --git a/SUMMARY.md b/SUMMARY.md
@@ -167,7 +167,7 @@
       * [show() callback](./reference/ui/panels/show.md)
       * [hide() callback](./reference/ui/panels/hide.md)
       * [update() callback](./reference/ui/panels/update.md)
-    * [UI kit Design GitHub Repo](./design/user-interface/sticker-sheet.md)
+    * [Plugin sticker sheet](./design/user-interface/sticker-sheet.md)
 * [Share](./distribution/index.md)
   * [Packaging your plugin](./distribution/packaging.md)
   * [Distribution options](./distribution/options.md)
diff --git a/design/index.md b/design/index.md
@@ -4,43 +4,33 @@ These guidelines will help you define the best user experience for your plugin.
 
 Plugins can interact with the user at different levels, for example, some plugins will have quick actions which in some use cases won’t render UI, and some will include multiple actions that need UI. 
 
-- Panel UX
-- Modal UX
-- Onboarding
-- Navigation
-- Messaging
-- Branding
-
 ----------
 
  <br />
  
-# Plugins in XD
-
-### Specs and UX Requirements
+## Plugins in XD
 
-Learn more about the types of Adobe XD plugins you can build.
+**Learn more about the types of Adobe XD plugins you can build.**
 
-![Panels and modals](ux-images/Design-xd-plugins-1.png)
 
-**Plugins Panel (Non-Blocking UI)**  
-This surface is best used when the user should have access to the canvas while using the plugin.
+![Plugin entry points and UI](ux-images/Design-xd-plugins-1.png)
 
-**Modal Dialog (Blocking UI)**  
-This surface is best used when the plugin needs to run an action and the user shouldn’t modify or change selection of objects on the canvas.
+| **Plugins Panel**   | **Modal Dialog**   |
+|---------------------------------------|----------------------------------|
+| Non-Blocking UI - this surface is best used when the user should have access to the canvas while using the plugin.   | Blocking UI - this surface is best used when the plugin needs to run an action and the user shouldn’t modify or change selection of objects on the canvas.   | 
 
  <br />
 
-# UX Patterns
+## UX Patterns
 
 User Experience patterns will provide guidence on how to interact with your plugin users within XD, this will highlight UX requirements and best practices.
 
-> [View UX Patterns](ux-patterns/index.md)
+[View UX Patterns](ux-patterns/index.md)
 
  <br />
  
-# User Interface
+## User Interface
 
 UI Resources will have information on UI components, examples and a sticker sheet you can use to build your plugin 
 
-> [View User Interface](user-interface/index.md)
+[View User Interface](user-interface/index.md)
diff --git a/design/user-interface/index.md b/design/user-interface/index.md
@@ -7,7 +7,7 @@ XD plugins can display UI in the form of modal dialogs, built with JavaScript an
 The tutorials contained in this section will give you an in-depth look at UI features available to your plugin through the API.
 
 ----------
-## Documentation
+### Documentation
 
 In this section you can see what styles you can use in the UI, how to build a modal layout and the UI elements you can use.
 
diff --git a/design/user-interface/sticker-sheet.md b/design/user-interface/sticker-sheet.md
@@ -1,11 +1,11 @@
-# Resources - Sticker Sheet
-This sticker sheet will cover the different UI surfaces available to plugins. It also includes examples of UI elements and high level guidelines you can use to build your own plugin. Download the latest version from the Plugin Design Assets Github repository. 
+# Plugin sticker sheet
+This sticker sheet will cover the different UI surfaces available to plugins. It also includes UI kits (MacOS and Windows) you can use to build your own plugin. Download the latest version from the Plugin Design Assets Github repository. 
 
-## [Download from GitHub](https://github.com/AdobeXD/plugin-design-assets/blob/master/Sticker_sheet_XD_plugins.xd?raw=true "Download from GitHub repo")
+#### [Download from GitHub](https://github.com/AdobeXD/plugin-design-assets/blob/master/Sticker_sheet_XD_plugins.xd?raw=true "Download from GitHub repo")
 
 ---
 
-**Plugin UI Kits - available in the sticker sheet**
+**UI kits**
 
 ![MacOS UI Kit](../ux-images/Plugin-MacOS-UIKit.png)
 ![Windows UI Kit](../ux-images/Plugin-UWP-UIKit.png)
diff --git a/design/ux-images/Design-xd-plugins-1.png b/design/ux-images/Design-xd-plugins-1.png
diff --git a/design/ux-images/Plugin-MacOS-UIKit.png b/design/ux-images/Plugin-MacOS-UIKit.png
diff --git a/design/ux-images/Plugin-UWP-UIKit.png b/design/ux-images/Plugin-UWP-UIKit.png
diff --git a/design/ux-images/panel-messaging-example.png b/design/ux-images/panel-messaging-example.png
diff --git a/design/ux-patterns/index.md b/design/ux-patterns/index.md
@@ -2,20 +2,25 @@
 
 UX Patterns will include UX requirements and/or UX best practices these will ensure your plugin follows XD user experience patterns.
 
-- [Panel UX](panel-ux.md)
-- [Modal UX](modal-ux.md)
-- [Onboarding](onboarding.md)
-- [Navigation](navigation.md)
-- [Messaging](messaging.md)
-- [Branding](branding.md)
+[Panel UX](panel-ux.md)
+
+[Modal UX](modal-ux.md)
+
+[Onboarding](onboarding.md)
+
+[Navigation](navigation.md)
+
+[Messaging](messaging.md)
+
+[Branding](branding.md)
 
 ----------
 
  <br />
  
 ## Documentation
 
-#### Specs and UX Requirements
+#### UX Requirements
 
 Requirements highlight key XD patterns all plugins need to follow to get approved by Adobe. 
 
diff --git a/design/ux-patterns/messaging.md b/design/ux-patterns/messaging.md
@@ -2,12 +2,12 @@
 
 These are the guidelines and best practices on when and how to provide users with feedback as they interact with your plugin.
 
-- Examples
 - Alerts
 - Success
 - Output
 - Permission dialogs
 - Loaders and Progress bars
+- Examples
 
 Provide users with feedback as they interact with your plugin, this can be alert and success messaging, permission dialogs or loaders and progress bars to let them know something is running in the background. Below is a guide to help determine where to render plugin messages.
 
@@ -17,30 +17,6 @@ Provide users with feedback as they interact with your plugin, this can be alert
 ----------
  <br />
 
-## Examples
-
-![Operation failed to complete](../ux-images/Error-alert-example.png)
-
-**Operation failed to complete**  
-Error dialog - when a plugin can’t complete an operation, render an error dialog to let the user know the operation failed and why it failed.
-
-
-![Network connectivity issue](../ux-images/Alert-Information-example-2.png)
-
-**Network connectivity issue**  
-Information dialog - if the plugin is unable to connect to the internet to complete an action, then use an information modal dialog to communicate that to the user.
-
-
-![Message example](../ux-images/Messaging-example.png)
-
-**Unable to share**  
-“An error occurred while sharing your project. Please verify the email. address and try again”.
-
-**Network connectivity**  
-“Please connect to WiFi to sync your tasks to your product management tool”.
-  
- <br />
-
 ## Alerts
 
 **Use case**  
@@ -143,16 +119,43 @@ Esc key or Enter key Dismisses the dialog when the “Cancel” button is in foc
 ## Loaders and Progress bars
 Let the user know when something is happening in the background in the plugin UI. 
 
-#### Determinate
-**Use case**  
+#### Best practices
+
+**Determinate use case**  
 Use case If the progress can be reflected on a loader. 
 
 ![Determinate example](../ux-images/Determinate-loader-example.png)
 
-
-#### Indeterminate
-**Use case**  
+**Indeterminate use case**  
 If the progress can’t be determined then provide a loader to let the user know something is loading.
 
 ![Indeterminate example](../ux-images/Indeterminate-loader-example.png)
 
+## Examples
+
+![Operation failed to complete](../ux-images/Error-alert-example.png)
+
+**Operation failed to complete**  
+Error dialog - when a plugin can’t complete an operation, render an error dialog to let the user know the operation failed and why it failed.
+
+
+![Network connectivity issue](../ux-images/Alert-Information-example-2.png)
+
+**Network connectivity issue**  
+Information dialog - if the plugin is unable to connect to the internet to complete an action, then use an information modal dialog to communicate that to the user.
+
+
+![Message example](../ux-images/Messaging-example.png)
+
+**Unable to share**  
+“An error occurred while sharing your project. Please verify the email. address and try again”.
+
+**Network connectivity**  
+“Please connect to WiFi to sync your tasks to your product management tool”.
+
+#### Panel UI messaging
+
+![Panel Messaging example](../ux-images/panel-messaging-example.png)
+  
+
+
diff --git a/design/ux-patterns/modal-ux.md b/design/ux-patterns/modal-ux.md
@@ -2,7 +2,7 @@
 
 This section will have recommendations when using a Modal Dialog -  Blocking UI. If the plugin needs to run an action before the user starts a new action then the modal would be recommended for that use case. 
 
-- Specs and UX Requirements
+- Overview
 - Modal Dialog UI
 - Dialog Buttons and Key Commands
 
@@ -12,13 +12,13 @@ This section will have recommendations when using a Modal Dialog -  Blocking UI.
 
  <br />
 
-## Specs and UX Requirements
+## Overview
 
-### MacOS example
+MacOS example
 
 ![Modal Specs](../ux-images/Modal-UX-2-Specs.png)
 
-### Specs
+#### Specs
 
 **Padding**  
 The modal will have padding built-in (ex: MacOS modal will have a 40px padding). Additional padding shouldn’t be added.
@@ -27,7 +27,7 @@ The modal will have padding built-in (ex: MacOS modal will have a 40px padding).
 This is what the user can interact with before executing the plugin action. 
 
 
-### UX Requirements
+#### UX Requirements
 
 **Header**  
 Have a clear header for the dialog. e.g. “name of plugin”, “description of workflow”
@@ -37,7 +37,7 @@ Have a clear header for the dialog. e.g. “name of plugin”, “description of
 Include a modal dismissal button to allow the user to cancel/close the modal and a call to action button (blue) to highlight the primary action. 
 
 
-### Best Practices
+#### Best Practices
 
 **Plugin Icon**.  
 You can include a plugin icon to let the user know they are interacting with your plugin in the modal dialog
@@ -46,23 +46,23 @@ You can include a plugin icon to let the user know they are interacting with you
 
 ## Modal Dialog UI
 
-### Modal dialog plugin UI
+#### Modal dialog plugin UI
 
 ![Modal Dialog](../ux-images/Modal-UX-3-Modal-Dialog.png)
 
-### Step process three buttons
+#### Step process three buttons
 
 ![Step Process](../ux-images/Modal-UX-4-Step-Process.png)
 
-### Step process loader
+#### Step process loader
 
 ![Loader](../ux-images/Modal-UX-5-Loader.png)
 
  <br />
 
-# Dialog buttons and key commands
+## Dialog buttons and key commands
 
-### Buttons
+#### Buttons
 
 ![Buttons](../ux-images/Modal-UX-6-Buttons.png)
 
@@ -79,7 +79,7 @@ The secondary button is for low emphasis. It is meant to be paired with other bu
 **Negative**  
 The negative button is for high emphasis on negative or destructive actions. It should be used sparingly. It can be displayed either in standard style (visible stroke) or in quiet style.
 
-### Best practice
+#### Best practice
 
 **Button Group Overflow**  
 When horizontal space is limited, button groups stack vertically. 
@@ -89,13 +89,13 @@ at the bottom.
 **Use 2 button styles maximum**  
 The top-level action within a button group should be a call to action, primary, or negative button. The subsequent buttons should always be secondary buttons of the same style (standard or quiet). Don’t combine more than 2 button styles in a button group.
 
-### Button labels
+#### Button labels
 
 Button labels should be clear about the intention of the action. Button text should be 1 to 2 words and consider the number of characters.
 
 ![Button labels](../ux-images/Modal-UX-7-Button-Labels.png)
 
-### Key Commands
+#### Key Commands
 
 **Esc key**  
 Dismisses the dialog. This is equivalent to choosing “Cancel”.
diff --git a/design/ux-patterns/panel-ux.md b/design/ux-patterns/panel-ux.md
@@ -2,7 +2,7 @@
 
 This section has recommendations when using a Plugins Panel - Non-Blocking UI. If the user needs to have access to the canvas then the plugin panel would be the best option, since it’s contextual to the users selection and allows the user to modify items on their canvas while interacting with the plugin UI. 
 
-- Specs and UX Requirements
+- Overview
 - Plugin Launch Pad and UI
 - Contextual Feedback
 - Adaptive layout
@@ -13,7 +13,7 @@ This section has recommendations when using a Plugins Panel - Non-Blocking UI. I
 ----------
  <br />
 
-## Specs and UX Requirements
+## Overview
 
 MacOS example
 
@@ -112,7 +112,7 @@ This can also be a great opportunity to brand your empty states.
 
  <br />
 
-# Adaptive Layouts
+## Adaptive Layouts
 
 Since the user can resize the panel, content should adjust to accommodate for scrolling, responsiveness and footer actions. 
 
diff --git a/package.json b/package.json
@@ -63,4 +63,4 @@
     "gh-pages": "^2.1.1",
     "gitbook-cli": "^2.3.2"
   }
-}
+}
