Adobe XD Interface & Basics

Adobe discontinued XD in January 2023, citing the competitive landscape and redirecting investment toward integrating AI design features into other Creative Cloud apps. XD files saved as .xd are still openable in the last released version, but Adobe no longer issues security patches, new features, or bug fixes. For teams still on XD: existing files work but new projects should start in Figma (the industry default) or Adobe Illustrator for vector work. Adobe provided an XD-to-Figma migration guide and a file import tool. This lesson teaches XD skills that remain useful for reading and updating legacy files while clearly pointing to Figma for new work.

XD's interface has four zones. The toolbar on the left contains the primary design and prototyping tools. The canvas in the center is the infinite design surface where artboards and free-form design elements live. The layers panel on the left side (toggle with Cmd+Y / Ctrl+Y) shows the document tree. The Property Inspector on the right shows dimensions, fill, border, and effects for the selected element. XD has two modes toggled at the top: Design mode (where you build layouts) and Prototype mode (where you wire interactions). Unlike Sketch, XD runs on both macOS and Windows — a critical advantage for mixed-OS teams that Sketch could never offer.

Artboards in XD are named frames representing screens or breakpoints. Press A to activate the Artboard tool, then pick a preset device size from the Property Inspector (iPhone 14, iPad, Web 1920, and more) or drag a custom size. The pasteboard is the infinite canvas area surrounding artboards — you can place design exploration elements there without them appearing in exports. Unlike Sketch pages, XD uses a single canvas with all artboards visible simultaneously, which makes navigation across a large project easier but can feel crowded on complex files.

1XD artboard organisation example:
2  [Mobile - Home]   [Mobile - Search]   [Mobile - Detail]
3        ↓                   ↓                   ↓
4  [Tablet - Home]   [Tablet - Search]   [Tablet - Detail]
5        ↓
6  [Desktop - Home] ...
7
8All artboards on one canvas, grouped by feature row

XD's toolbar provides the essential design tools. V selects and moves elements. R draws rectangles. E draws ellipses. L draws lines. P opens the Pen tool for vector paths. T activates text. A activates the Artboard tool. Cmd+D (Mac) / Ctrl+D (Win) duplicates the selection — the most-used shortcut. Cmd+G / Ctrl+G groups the selection. Cmd+Shift+G ungroups. Hold Shift while resizing to constrain proportions. Hold Option/Alt while dragging to duplicate. Cmd+0 fits the canvas to the window. These 12 shortcuts cover 80% of daily XD interactions and are worth memorising before anything else.

The Property Inspector on the right is where design intent becomes developer-readable specs. Select any element and it shows: W (width), H (height), X and Y position (relative to artboard top-left), rotation, fill color (with hex, RGB, and HSB options), border color and width, corner radius, and shadow/blur settings. For text layers it adds font family, weight, size, line height, letter spacing, and paragraph spacing — the same values developers need for CSS. All number fields accept direct keyboard entry. XD's Property Inspector inspired Figma's equivalent panel and they share nearly identical information architecture.

1/* XD Property Inspector values -> CSS */
2/* W=160, H=44, Fill=#2563EB, Corner=8, Border=none */
3/* Font=Inter, Weight=600, Size=16, LineHeight=24 */
4.btn-primary {
5  width: 160px;
6  height: 44px;
7  background: #2563EB;
8  border-radius: 8px;
9  font-family: 'Inter', sans-serif;
10  font-weight: 600;
11  font-size: 16px;
12  line-height: 24px;
13}