Adobe XD: Building a Responsive Component Library

Learn how to use Adobe XD to design and prototype responsive layouts that can adapt to a variety of screen sizes and types.

Introduction

• Building out a responsive component library
• About the exercise files

1. Building Component Masters and Instances

• Components are supercharged symbols
• Exploring button design variations
• Converting objects to components
• Creating and styling component instances
• Understanding component inheritance

2. Nesting Components and Atomic Design

• The advantages of atomic design
• Using Repeat Grid with components
• Replacing nested components

3. Using States and Microinteractions

• Introducing states
• Creating component states to organize content
• Adding a hover transition between states
• Adding additional custom states and transitions

4. Using States to Represent Breakpoints

• Using states for layout variations
• Building alternate layouts with responsive resize
• Applying responsive states to a slideshow component

5. Bringing It All Together

• Using responsive resize at an artboard level
• Defining responsive resize at an artboard level
• Adjusting elements for a tablet layout
• Where to go from here