Wireframing in Adobe XD: Layout, Grids, and Low-Fidelity Screens

Wireframe rules: what to include and what to omit

A wireframe is a structural blueprint of a screen: it shows layout, hierarchy, and interaction intent without visual styling. In Adobe XD, low-fidelity wireframes are fastest when you commit to a limited set of building blocks (rectangles, lines, text) and rely on alignment and spacing tools for consistency.

Include

• Information hierarchy: what is primary vs. secondary (headings, key actions, supporting content).
• Layout structure: columns, margins, gutters, sections, and content grouping.
• Core UI patterns: headers, navigation, cards, lists, forms, dialogs—represented with placeholders.
• Interaction intent: what is clickable, what expands, what navigates, what is disabled.
• Content constraints: approximate text lengths, image aspect ratios, and list density.

Omit

• Brand styling: final colors, gradients, shadows, and decorative imagery.
• Pixel-perfect typography: exact fonts and weights; use a simple type scale and keep it consistent.
• Detailed iconography: use simple shapes or a single generic icon placeholder.
• Micro-animations: note them as annotations instead of building them now.

Low-fidelity visual language (recommended constraints)

• Palette: 2–4 grays (e.g., background, surface, border, text) plus one accent for interactive elements (optional).
• Strokes: 1px borders for components; avoid shadows.
• Radii: one corner radius value (e.g., 8) for all rounded elements.
• Type scale: 3 sizes (e.g., H1, body, caption) with consistent line height.

Layout aids in Adobe XD: grids, guides, spacing, and distribution

Consistency is the main reason wireframes feel “designed” even without visuals. Use layout aids to make spacing repeatable and alignment effortless.

Using layout grids for consistent structure

Apply a layout grid to each artboard to define columns and gutters. This helps you place cards, form fields, and content blocks with predictable widths.

• Column grid: best for responsive layouts and card-based screens.
• Square grid: useful for quick alignment and spacing checks.

Practical steps:

1. Select an artboard.
2. In the right panel, enable Layout Grid.
3. Choose a grid type (commonly Columns).
4. Set Column count, Gutter, and Margins to match your target device pattern (keep the same values across screens).
5. Duplicate the artboard so the grid settings carry over to new screens.

Guides and safe areas

Guides are helpful for repeated alignment points such as left/right margins, header height, and content max width. Treat them as “rules” for where content can start and end.

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

Practical steps:

1. Create a rectangle that represents your content area (e.g., full width minus margins).
2. Align it to the artboard, then use it as a reference to place guides (or keep it locked as a non-exporting helper).
3. Repeat for key horizontal bands: header, subheader, sticky action bar, etc.

Spacing, alignment, and distribution tools

When you have multiple elements selected, Adobe XD can align them and distribute spacing evenly. This is essential for lists, nav items, and form stacks.

• Align: left/right/center/top/middle/bottom to snap elements into a clean edge.
• Distribute: equalize gaps between elements horizontally or vertically.
• Repeat Grid: turn one row/card into a list or grid with consistent spacing.

Practical steps (even spacing for a vertical stack):

1. Create three rectangles (e.g., list items) with slightly different spacing.
2. Select all three.
3. Use Align Left to create a clean left edge.
4. Use Distribute Vertical to equalize the gaps.
5. Adjust the overall group position to match your grid/margins.

Creating a wireframe kit from basic elements

A wireframe kit is a small library of reusable low-fidelity components you can assemble quickly. Build it once, then reuse across screens to maintain consistency.

Core primitives (the only shapes you need)

• Surface: rectangle for cards, panels, modals.
• Divider: 1px line or thin rectangle.
• Image placeholder: rectangle with an “X” (two diagonal lines) or a simple icon placeholder.
• Button: rounded rectangle + label.
• Input: rectangle + label + helper/error text placeholder.
• Avatar: circle.
• Chip/Tag: small rounded rectangle + short label.

Type styles for wireframes (simple and consistent)

Define a minimal set of text styles so headings and labels look consistent across all screens.

• Heading: for screen titles and section headers.
• Body: for paragraphs and list item titles.
• Caption: for metadata, helper text, timestamps.
• Button/Label: for controls and form labels.

Practical steps:

1. Create sample text objects for each style (e.g., “Heading”, “Body text”, “Caption”).
2. Set size and line height; keep them readable but neutral.
3. Save them as reusable styles (so you can apply consistently).

Build low-fidelity components (headers, cards, forms)

Construct components from primitives, then convert them into reusable components so edits propagate.

Header component (mobile)

Structure: left icon (back/menu), centered title, right icon (search/more).

Practical steps:

1. Draw a full-width rectangle for the header background (light gray).
2. Add a text title centered vertically.
3. Add two small square placeholders for icons (or simple lines) on left and right.
4. Select all header elements and create a Component.
5. Create variants if needed (e.g., “Back”, “Menu”, “Search”).

Card component

Structure: image placeholder, title, 1–2 lines of body text, optional metadata row and a primary action.

Practical steps:

1. Create a rectangle with a border for the card container.
2. Add an image placeholder rectangle at the top (fixed aspect ratio).
3. Add a title text block and a smaller body text block below.
4. Add a thin divider line if the card has sections (e.g., content vs. actions).
5. Group and convert to a Component.
6. Use Repeat Grid to create a list of cards; adjust vertical spacing once.

Form field component

Structure: label, input box, helper text (optional), error state (optional).

Practical steps:

1. Create a label text (caption/label style).
2. Draw an input rectangle with a 1px border.
3. Add placeholder text inside the input (lighter gray).
4. Add helper text below (caption style).
5. Convert into a Component and create variants: default, focused, error, disabled (use border color changes only, still low-fidelity).

Organize the kit for speed

• Keep a dedicated “Kit” artboard with all components and common patterns.
• Name components clearly (e.g., Header/Mobile, Card/Basic, Form/Input).
• Use consistent padding tokens (e.g., 8, 16, 24) and apply them everywhere.

Building a multi-screen low-fidelity flow with hierarchy and annotations

Now assemble a small flow (example: browse → details → checkout/sign-up). The goal is to validate structure and behavior before visual design.

Step 1: Define the flow and screens

Write a quick map of screens and key actions. Keep it to 3–5 screens for a first pass.

• Screen A: Home/List (user browses items)
• Screen B: Details (user evaluates one item)
• Screen C: Form (user submits info or completes an action)
• Optional: Confirmation/Success

Step 2: Create artboards and apply the same layout grid

Practical steps:

1. Create the first artboard for Screen A.
2. Enable the layout grid and set your columns/margins.
3. Duplicate the artboard for Screens B and C so grid and baseline structure remain consistent.
4. Rename artboards clearly (e.g., A-Home, B-Details, C-Form).

Step 3: Establish hierarchy on each screen

Hierarchy in wireframes comes from placement, size, and spacing (not color). Use these rules:

• One primary action per screen (e.g., “Continue”, “Add to cart”, “Submit”). Make it the most visually prominent control.
• Section headings separate content blocks; keep consistent spacing above/below headings.
• Group related items using containers, dividers, and whitespace.
• Keep scanning patterns: top-to-bottom for mobile, left-to-right for desktop.

Step 4: Build Screen A (Home/List) using Repeat Grid

Goal: a header + search/filter row + list of cards.

Practical steps:

1. Drag in your Header component at the top.
2. Create a simple search bar placeholder (input rectangle + magnifier placeholder icon).
3. Place one Card component below.
4. Turn the card into a list with Repeat Grid and drag to create multiple items.
5. Adjust the spacing between repeated cards once; keep it consistent.
6. Use alignment tools to ensure all cards share the same left/right edges aligned to the grid.

Step 5: Build Screen B (Details) with clear content sections

Goal: hero image placeholder, title, key facts, description, and a sticky primary action.

Practical steps:

1. Reuse the Header component (variant with back icon).
2. Add a large image placeholder rectangle at the top (consistent aspect ratio).
3. Add a title (heading style) and a short metadata row (caption style).
4. Create 2–3 “fact” chips or a small table-like block using rectangles and text.
5. Add a description block with 3–5 lines of body text placeholders.
6. Add a full-width primary button at the bottom (or a bottom action bar placeholder) and keep its height consistent with other screens.

Step 6: Build Screen C (Form) using stacked fields and distribution

Goal: a short form with labels, inputs, validation notes, and a submit action.

Practical steps:

1. Place the header (back + title).
2. Insert multiple Form field components (e.g., Name, Email, Address).
3. Select all fields and apply Align Left, then Distribute Vertical to equalize spacing.
4. Add a checkbox row (small square + label) and a secondary link (caption).
5. Add a primary submit button; keep it aligned to the same margins as inputs.
6. Create an error-state example by swapping one field to the “error” variant and adding a short error message (still low-fidelity).

Step 7: Add annotations for behavior (without over-designing)

Annotations clarify what happens when users interact. Keep them short, consistent, and placed near the element they describe.

Annotation patterns

• Tap/Click: “Tap card → opens Details screen.”
• Validation: “Email required; show inline error on blur.”
• States: “Button disabled until required fields complete.”
• Loading: “Show skeleton placeholders for list while loading.”
• Edge cases: “Empty state when no results; show ‘Clear filters’.”

Practical steps:

1. Create a small annotation style: a numbered circle (or small label) + a text note in caption style.
2. Place annotations in the margin area outside the main content so they don’t compete with layout.
3. Use consistent numbering across the flow (e.g., 1–10) and keep each note to one sentence.

Step 8: Connect the flow (wireframe-level prototyping)

Even in low fidelity, linking screens helps validate navigation and task completion.

• Link each card on Screen A to Screen B.
• Link the primary action on Screen B to Screen C.
• Link the back icon to the previous screen.

Quality checklist for low-fidelity wireframes