STC's ADOBE XD WORKSHOP

Welcome to ADOBE XD WORKSHOP 🥳!

Here, we will learn about a brief intro to Adobe XD

Before we jump straight into the workshops, allow me to introduce ourself, do watch this short 1 minute video to know more 🎇!

Without further ado, let's get started!

• This is a fork from SoyaBean123456/AdobeXD-Workshop

Table of content 📄

1. What Is UI / UX?
2. What is Adobe XD
3. Why Adobe xD?
4. Installation
5. Hands-on Websites, Mobile, Voice and games

What is UI/UX?

“User experience (UX) is the interaction and experience users have with a product... User interface (UI) is the specific asset users interact with. For example, UI can deal with traditional concepts like design elements of a product. (C)

What Is Adobe XD?

Adobe XD is a vector-based user experience design tool for web apps and mobile apps, developed and published by Adobe Inc. It is available for macOS and Windows, although there are versions for iOS and Android to help preview the result of work directly on mobile devices. With Adobe XD, you get one powerful tool for your whole UI/UX design process. Create user flows, wireframes, high-fidelity designs, interactive prototypes, animations, and more.

Why Adobe XD? (Benefits)

Prototyping - UX Designing - UI Development - PlugIns

Installation

Link - https://www.adobe.com/sea/products/xd.html

Awesome Open Source Plugins

• Rename It by Rodrigo Soares - Batch renames layers and artboards. More information
• Data Populator by Precious - Design with real data! More information
• Copy SVG Code by Charlie Hield - Plugin to generate SVG code from selection.
• Artboard Plus by Rodrigo Soares - Artboard tools to speed up your Adobe XD workflow.
• Inker8 by Zack Young - Export artboards to a spec file for developers to measure design, copy css/text and export icons.
• uiLogos by vijay verma - Insert professionally designed dummy logos of companies and 190+ country flags.
• Tunda Image by Satria Aji Putra - Quick fill image to a shape from direct image url
• Export only one size by Nikola Pilipović - Export at the scale you need and ONLY at the scale you need.
• Maps generator by Boopesh Mahendran - A map generator plugin for Adobe XD using google maps API.
• Ready Components by Rohit Methwani - A plugin for generating generally used components for Mobile UI with command clicks.
• Color Desginer by Wojciech Banaś - Build a color palette, generate shades and tints directly in Adobe XD.
• Lorem Ipsum by Pablo Klaschka - A small plugin to insert placeholder text that fits your needs: As simple as you want it to be, yet as advanced as you need it to be… More information
• Favicon Export by Ash Ryan Arnwine - Export icons for your website.
• XD to Flutter by Adobe - Generate assets from XD for use in an existing Flutter project.

Utility Libraries

• xd-storage-helper – A small helper library making key-value-based permanent storage for plugins easy
• xd-plugin-helper - Collection of helpers for development
• xd-json-wrapper - Wrapper for XD Nodes, Artboards and document to convert to json
• xd-localization-helper - A library making localization for plugins for Adobe XD CC easy
• xd-dialog-helper - A library making creating modals/dialogs for plugins incredibly easy, including a WYSIWYG-editor. (Project homepage)

Developer Tools

• Typescript definitions – Adding autocompletion and type definitions
• xdpm - XD plugin manager CLI (useful for watching folders and creating plugin packages)
• xd-manifest-schema – A JSON schema to make editing and validating a plugin's manifest.json (adding capabilities for autocompletion, linting etc. in editors and IDEs)

Templates

• xd-plugin-boilerplate – A template including bundling via Webpack, linting with ESLint as well as the typescript definitions preconfigured for JavaScript autocompletion
• xd-plugin-boilerplate-react – A fork of xd-plugin-boilerplate which includes React Library, Including Babel and necessary lint rules to create plugins with User Interface easily.
• generator-xd-plugin – Yeoman generator for creating Adobe XD Plugin projects

Resources

Complete guide to creating mobile app wireframes https://xd.adobe.com/ideas/process/wireframing/guide-to-creating-mobile-app-wireframes/

Free resources, UI kits, icon sets, plugins https://www.adobe.com/sea/products/xd/resources.html

Create scrollable artboards https://helpx.adobe.com/xd/help/create-scrollable-artboards.html

Blogs and Aggregation

• iOS11 App Store GUI - Adobe XD CC
• XD Freebies
• Adobe XD tutorials

Videos

• Getting Started in Adobe XD with Paul Trani
• Mobile App UI Design in Adobe XD - 1 of 2
• Mobile App UI Animation in ProtoPie - 2 of 2

Downloads

• Adobe App UI Kits

Learning Tutorials

https://letsxd.com/

https://www.mockplus.com/blog/post/adobe-xd-tutorial

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

Assets

• XD Awesome logo – This repo's logo is itself an open source project by our community, created in XD

Forums

• XD developer Forums: Open discussion and support with community experts and Adobe staff.
• Stackoverflow: Developer Q&A using the adobe-xd tag.

News & Blogs

• Adobe Tech Blog: The fastest way to get regular updates that matter to developers.
• CC Developer Newsletter: CC Platform and Ecosystem updates right in your inbox.

(Note: I do not own any of these resources. All these resources have been crowdsourced.)