Adobe XD: Building a Responsive Component Library
1h 4mIntermediate2020-02-26
Authors
Dani Beaumont
Managing innovative apps in the web and design space for 25+ years
Course details
Explore using Adobe XD to build out a component library that can be easily adapted and updated from project to project. Instructor Dani Beaumont covers efficiently designing for multiple screen resolutions, correcting hierarchy and responsive resize behavior to mimic real-world scenarios, creating and managing states (sprites), and more. Plus, Dani shares a variety of tips and tricks along the way.
Topics include:
- Building component masters and instances
- Converting objects to components
- Nesting components
- Atomic Design methodology
- Using repeat grid with components
- Using states and micro-interactions
- Creating component states to organize content
- Using states to represent breakpoints
- Adjusting elements for a tablet layout
Topics include:
- Building component masters and instances
- Converting objects to components
- Nesting components
- Atomic Design methodology
- Using repeat grid with components
- Using states and micro-interactions
- Creating component states to organize content
- Using states to represent breakpoints
- Adjusting elements for a tablet layout
Skills covered
WireframingAdobe XDUX DesignUser ExperienceAdobeWeb DevelopmentDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - Building out a responsive component library
- 02 - About the exercise files
1. Building Component Masters and Instances
- 03 - Components are supercharged symbols
- 04 - Exploring button design variations
- 05 - Converting objects to components
- 06 - Creating and styling component instances
- 07 - Understanding component inheritance
2. Nesting Components and Atomic Design
- 08 - The advantages of atomic design
- 09 - Using Repeat Grid with components
- 10 - Replacing nested components
3. Using States and Microinteractions
- 11 - Introducing states
- 12 - Creating component states to organize content
- 13 - Adding a hover transition between states
- 14 - Adding additional custom states and transitions
4. Using States to Represent Breakpoints
- 15 - Using states for layout variations
- 16 - Building alternate layouts with responsive resize
- 17 - Applying responsive states to a slideshow component
5. Bringing It All Together
- 18 - Using responsive resize at an artboard level
- 19 - Defining responsive resize at an artboard level
- 20 - Adjusting elements for a tablet layout
- 21 - Where to go from here