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