FULL CURRICULUM

1. Getting started
   • 1.1 Welcome
   • 1.2 What can you do with Framer X?
2. Wireframing
   • 2.1 Link paper prototypes
3. Visual design
   • 3.1 An overview of visual design tools
   • 3.2 Frames, images and graphic
   • 3.3 How Skinny was born - from hand sketch to vector
   • 3.4 Text
   • 3.5 Layout the UI - Frame & Stack
   • 3.6 Design faster with components
   • 3.7 Go "Ludicrous Mode" with component store
4. Interactive design / High-fidelity Prototyping
   • 4.1 Add interactions without coding
   • 4.2 Get ready to code! - environment setup
   • 4.3 Don't poke Mr. Skinny in the face - add code override
   • 4.4 Skinny spin-around - animate another property
   • 4.5 Skinny from far away - animate multiple properties
   • 4.6 Teach Skinny to fly - chain animations
   • 4.7 The crow controller, part 1 - communicate between overrides
   • 4.8 The crow controller, part 2 - animation options & JS objects
   • 4.9 Skinny joins a relay race - delay animations
   • 4.10 Real world example: the Material FAB interaction
5. Build your own React components!
   • 5.1 Overview
   • 5.2 Hello World! - build a code component
   • 5.3 Skinny wants more colors - add a new React prop
   • 5.4 The coloring buttons - components and code override
   • 5.5 Attack of the clones - components made up of components
   • 5.6 Color the squad - React data flow
   • 5.7 Real world example: feed components with data
   • 5.8 Design with production components - environment setup
   • 5.9 Design with production components - wrap a Lottie component