mcpField
A
adobe-xd

adobe-xd

github.com/partme-aiDesign & UI71681 installsUpdated 3w ago
Repository

About adobe-xd

A skill for creating and editing Adobe XD UI/UX designs, interactive prototypes, and developer handoff materials. It guides designers and teams through artboards, components, responsive layouts, and shared libraries; the README notes that Adobe has deprecated XD in favor of Figma.

Key features

  1. 01Create artboards and reusable components
  2. 02Build prototypes with transitions and voice triggers
  3. 03Use repeat grids and responsive resize
  4. 04Prepare developer specs and asset exports
  5. 05Manage shared libraries and design tokens

Use cases

  1. 01Design screens for an app or website
  2. 02Prototype interactions between artboards
  3. 03Share spacing, typography, and assets with developers

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/partme-ai/full-stack-skills --skill adobe-xd

After installing, type/adobe-xdin Claude Code to confirm it loaded.

Bundled filesLICENSE.txt

Details

From the project README

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

Comments

Markdown supported