Framer X + React (Retired) – Linton Ye

Get productive in Framer X. Learn React fundamentals. No coding experience required!

Course Curriculum

1. Getting started

• 1.1 Welcome (1:50 )
• 1.2 What Can You Do With Framer X? (2:48 )
• 1.3 All Source Files

2. Wireframing

• 2.1 Link Paper Prototypes (12:20 )

3. Visual design

• 3.1 An Overview Of Visual Design Tools (1:46 )
• 3.2 Frames, Images And Graphic (8:17 )
• 3.3 Draw a bird – from hand sketch to vector (16:17 )
• 3.4 Text (4:01 )
• 3.5 Layout The UI – Frame & Stack (11:05 )
• 3.6 Design Faster With Components (14:59 )

4. Interactive design / High-fidelity Prototyping

• 4.1 Add interactions without coding (10:27 )
• 4.3 Don’t Poke Mr. Skinny In The Face – Add Code Override (8:16 )
• 4.4 Skinny Spin-around – Animate Another Property (8:53 )
• 4.5 Code Component (6:23 )
• 4.6 Animate Code Components (8:35 )
• 4.7 useCycle (13:22 )

5. Build your own React components!

• 5.1 Hello World! – Build A Code Component (10:05 )
• 5.2 Skinny Wants More Colors – Add A New React Prop (12:33 )
• 5.3 The Coloring Buttons – Components And Code Override (8:31 )
• 5.4 Attack Of The Clones – Components Made Up Of Components (11:45 )
• 5.5 Color The Squad – React Data Flow (8:24 )
• 5.6 Real World Example- Feed Components With Data (16:51 )
• 5.7 Design With Production Components – Environment Setup (8:46 )
• 5.8 Design With Production Components – Wrap A Lottie Component (16:36 )

Your Instructor