Adobe XD Essentials: Workspace Setup and UX File Foundations

Why workspace setup matters in a UX file

In Adobe XD, your workspace choices directly affect how fast you can design, prototype, and hand off work. A well-structured file makes it easier to: scan screens at a glance, keep components consistent, avoid “mystery layers,” and collaborate without breaking links or styles. This chapter focuses on the core XD environment elements you’ll use daily—Home screen, document creation, artboards, layers, assets, and properties—and how to set up a clean foundation for a UX project.

Core Adobe XD environment for UX workflows

Home screen: starting points and file access

The Home screen is where you typically: create a new document from presets, open recent files, and access shared cloud documents (if your team uses them). For UX work, presets are useful because they set common screen sizes and pixel density assumptions. Your goal is to start with the correct artboards and a predictable naming structure from the first minute.

Document creation: one file, many screens

XD documents usually contain multiple artboards representing screens, states, or flows. Treat the file like a “single source of truth” for a feature or product area. Keep related flows together (e.g., browsing + checkout) and avoid mixing unrelated experiments into the same production file.

Artboards: screens, states, and flows

An artboard is a canvas that represents a screen (mobile) or page (web). In UX workflows, you’ll commonly create: key screens (Home, List, Detail), variants (empty state, error state), and responsive breakpoints (mobile vs desktop). Artboards can be arranged spatially to reflect the user journey (left-to-right or top-to-bottom).

Layers panel: structure, selection, and sanity

The Layers panel is where you control hierarchy: groups, components, and individual objects. A clean layer structure makes selection faster and reduces accidental edits. In collaborative files, layers are also documentation—names should describe purpose, not appearance.

Continue in our app.

• Listen to the audio with the screen off.
• Earn a certificate upon completion.
• Over 5000 courses for you to explore!

Or continue reading below...

Download the app

Assets panel: reusable design tokens and components

The Assets panel is where you manage reusable items such as colors, character styles, and components. Even early in wireframing, establishing a small set of reusable elements (e.g., buttons, headers) prevents inconsistencies across artboards.

Properties/Inspector: editing what you selected

The Properties panel (Inspector) changes based on what is selected. You’ll use it to adjust size, position, constraints, text styling, fills, borders, shadows, and more. In practice, you’ll switch between Layers (to select the right thing) and Properties (to edit it) constantly—so a tidy layer structure is essential.

Creating a new XD file with the right artboards

Step-by-step: start a project file

1. Open Adobe XD and go to the Home screen.

2. Create a new document using an artboard preset that matches your target platform:

   • Mobile: choose a common phone preset (e.g., iPhone/Android equivalent) for your primary mobile experience.

   • Web: choose a desktop web preset (e.g., 1440px wide) if you’re designing a desktop-first layout.

3. Decide your approach:

   • Single-platform file: one file for mobile only or web only (simpler for beginners).

   • Multi-platform file: both mobile and web artboards in one file (useful when comparing flows, but requires stricter organization).

4. Save immediately with a clear filename that supports collaboration.

Recommended file naming conventions

Use a filename that communicates product, platform, and purpose. Examples:

• ShopApp_Mobile_Wireframes_v01.xd

• ShopApp_Web_CheckoutFlow_v02.xd

If your team uses versioning, keep it consistent (v01, v02) and avoid “final-final” naming.

Artboard and layer naming conventions (practical and scalable)

Artboard naming pattern

A good artboard name answers: what screen is it, what state is it, and what platform/breakpoint is it (if needed). Suggested pattern:

[Platform]-[Flow]-[Screen]-[State]

Examples:

• MKT-Checkout-Home-Default (if you’re separating marketing vs app flows)

• APP-Browse-List-Default

• APP-Browse-Detail-Loading

• APP-Checkout-Checkout-Error

If that feels too heavy for a small project, simplify to:

• Home, List, Detail, Checkout

• and add states only when needed: Checkout - Error

Layer naming rules that prevent confusion

• Name by function: Primary Button is better than Blue Rectangle.

• Use consistent casing: pick Title Case or sentence case and stick to it.

• Prefix repeated UI groups when helpful: Header/, Card/, Footer/ (or group names like Header containing layers inside).

• Number repeated items: Card 01, Card 02 (especially in lists).

• Avoid “Rectangle 123”: rename key objects you’ll reuse or reference.

Suggested layer/group structure per artboard

For most screens, a predictable structure speeds up navigation:

• BG (background)

• Header

• Content

• Footer (if applicable)

• Overlays (modals, toasts, dropdowns)

Within Content, group by UI patterns: Filters, List, Summary, Form.

Setting up a clean structure for collaboration

Organize artboards spatially to match the user journey

Place artboards in reading order (left-to-right) to represent the primary flow. Keep related screens aligned in rows. For example:

• Row 1: Primary flow (Home → List → Detail → Checkout)

• Row 2: Alternate states (Empty, Error, Loading) aligned under the screen they belong to

Use consistent spacing and alignment between artboards

Even spacing between artboards makes the canvas easier to scan and reduces accidental selection. Choose a standard gap (e.g., a few hundred pixels) and keep it consistent.

Keep reusable UI as components and store them predictably

When you identify repeated UI (navigation bar, product card, primary button), convert it into a component and reuse it. This reduces drift across screens and makes updates safer. Name components clearly (e.g., Button / Primary, Card / Product).

Minimize clutter: separate exploration from the main flow

If you need to explore alternatives, place them in a clearly labeled area of the canvas (e.g., a column titled “Explorations”) or use a separate file. This prevents stakeholders from reviewing the wrong screens.

Exercise: create a project file, sitemap, key artboards, and structure

Goal

Create a new XD file, define a simple sitemap, build four key artboards (Home, List, Detail, Checkout), and organize them with consistent naming and grouping.

Step 1: Create the project file

1. Create a new document using a mobile preset (or web preset if your project is web-first).

2. Save the file as: DemoShop_UX_Foundations_v01.xd (or a similar structured name).

Step 2: Define a simple sitemap (inside the XD canvas)

1. Create a small area to the left of your artboards titled Sitemap (use a text label).

2. Add a simple sitemap as a bulleted list:

   • Home

   • List (Category/Product List)

   • Detail (Product Detail)

   • Checkout

3. Optional: add arrows between items to show the primary path.

Step 3: Create the key artboards

1. Create four artboards using the same preset size.

2. Name them exactly:

   • APP-Browse-Home-Default

   • APP-Browse-List-Default

   • APP-Browse-Detail-Default

   • APP-Checkout-Checkout-Default

3. Arrange them left-to-right in the order of the user journey: Home → List → Detail → Checkout.

Step 4: Add a basic wireframe skeleton and layer structure

On each artboard, create simple placeholder shapes (rectangles and text) to represent layout regions. Keep it minimal—this exercise is about structure.

1. On each artboard, create these groups in the Layers panel (top-level):

   • BG

   • Header

   • Content

   • Overlays

2. Inside Header, add placeholders and name them:

   • Title

   • Back Button (if applicable)

   • Cart Icon (if applicable)

3. Inside Content, add screen-specific groups:

   • Home: Hero, Category Shortcuts

   • List: Filters, List containing Card 01, Card 02, Card 03

   • Detail: Gallery, Product Info, CTA

   • Checkout: Address Form, Payment, Order Summary, Place Order Button

4. Rename any default layers that matter (avoid leaving key elements as Rectangle or Text).

Step 5: Quick consistency check (collaboration-ready)

• All artboards use the same naming pattern.

• All artboards have the same top-level groups: BG, Header, Content, Overlays.

• Repeated items are numbered consistently (e.g., Card 01, Card 02).

• Artboards are aligned and evenly spaced in flow order.

Optional extension (if you finish early)

Create one additional state artboard for Checkout:

• Duplicate APP-Checkout-Checkout-Default

• Rename to APP-Checkout-Checkout-Error

• Add an Error Banner layer inside Overlays