adobe-xd

When to use this skill

Use this skill whenever the user wants to:

• Create or edit UI/UX designs using Adobe XD artboards and components
• Build interactive prototypes with transitions, auto-animate, or voice triggers
• Work with repeat grids, component states, or responsive resize
• Export design specs or assets for developer handoff
• Manage shared libraries, design tokens, or collaborate via shared links

How to use this skill

1. Design Creation

1. Create artboards: Select device preset or custom size, name artboards by screen (e.g., "Login", "Dashboard").
2. Build components: Select elements -> right-click -> "Make Component". Use slash naming for categories (e.g., Button/Primary, Button/Secondary).
3. Add states: Select component -> "Default State" dropdown -> "New State" to create hover/active states.
4. Use repeat grid: Select element -> "Repeat Grid" to create lists or card grids; drag handles to adjust count and spacing.

2. Prototyping

1. Switch to Prototype mode.
2. Drag a connector from a trigger element to the target artboard.
3. Configure transition: trigger (Tap/Drag/Voice), action (Transition/Auto-Animate/Overlay), and easing.
4. Preview with Play button (Cmd+Enter / Ctrl+Enter).

3. Developer Handoff

1. Click Share -> "Share for Development".
2. Developers access the published link to inspect spacing, colors, fonts, and export assets.

Example prototype link setup:
  Trigger: Tap on "Login" button
  Action: Transition to "Dashboard" artboard
  Animation: Auto-Animate, 0.3s ease-out

Best Practices

• Keep components consistent with a shared design library.
• Ensure prototypes are fully linked with clear interaction annotations.
• Export assets at 1x, 2x, and 3x for multi-density screens.
• Use version history and shared links for team collaboration.
• Note: Adobe has deprecated XD in favor of Figma; evaluate for new projects.

Keywords

adobe xd, UI design, prototype, artboard, components, repeat grid, developer handoff, Adobe