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
()
Ex_Files_Adobe_XD_Responsive_Component_Library.zip
(24.8 MB)