Framer X + React

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

Or buy now if you are already convinced!
Thank you for making it so easy to learn 😊

- Kaitlyn Vu, User Experience Designer


  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


This course is great at explaining React concepts with visuals.

- Patrick Multani, Product Designer


Quick! Get 50% off of your first year annual Framer X subscription! (First 100 students, new Framer users only. )

🔥 Framer X + React

Available Now!
  • Stream or download 28 lessons, 4.5 hours of videos
  • Exercises and solutions
  • Network with other designers in private Slack
  • Life time access, unlimited updates

Launch special end soon

🔥🔥 Framer X ⇾ React.js

Available Now!
  • Stream or download 59 lessons, 8 hours of videos
  • Includes 2 courses: Framer X + React and React 101.
  • Learn to build web apps as a designer!
  • Life time access, unlimited updates

Launch special end soon

🔥 Framer X ⇾ React Native

Available Now!
  • 117 lessons, 15.5 hours of videos
  • 3 courses: Framer X, React 101, React Native 101.
  • Learn to build web and mobile apps as a designer!
  • Life time access, unlimited updates

Launch special end soon

Ask me about team pricing if you want to buy 3 or more licenses


If you are not completely satisfied with the courses, you can get 100% refund within 30 days of your purchase. No hard feelings!

Linton comes across like a really nice programmer that wants to help us designers.

- Lincoln Mitchell, Senior UX Architect


Why should a designer learn coding?

I encourage you to check out this post to hear other designers’ opinions.

Learning to code will help you become better at design. Armed with a better understanding of how things work, you will find the communication with developers much more efficient. Your design ideas would be more convincing and more respected. You can even design with code.

New skills you learn will open new doors. Trust me, it will be a new world of creativity!

What are the prerequisites of the course?

If you are familiar with design tools such as Sketch or Figma, know HTML and CSS, tried to copy and paste JS code, you are good to go! You will do some coding in the course but prior experience in programming isn't required.

My point is that, before you can do something useful as a designer, you don't really need to understand a whole lot about React and even JS. You could learn coding concepts little by little WHILE doing useful design work, especially when building prototypes. Framer X seems to be a perfect tool for that. Do you agree?

Also, it's a good idea to sign up this 6-week free email course that I've prepared for you. It'd be useful to learn JS basics along the way (and also helps if you get bored of hearing my perfect Canadian accent all the time 😝).

What if I am not satisfied?

If you are not completely satisfied with the courses, you can get 100% refund within 30 days of your purchase. No hard feelings!

I have other questions!

Feel free to email me, or tweet at me, anytime!
Linton Ye
Hi! I'm Linton!

Super excited to create these courses to help you become a better designer!

I'm a full-stack developer who's learning design. I have 10+ years of experience in mobile, development/design tools and web development. I've been working on React Native since 2015, and building Android apps since 2007 before the first Android phone, HTC G1, was even available. I also contribute to React Navigation project, and write a blog about React.

I love teaching. I've authored a few courses at Treehouse and Lynda. My dark little secret: 😈 creating this course is also my special way to learn all things about design and React -- trying to explain things clearly has taken my understanding of the concepts to a whole new level.

Thrilled to be on this journey with you!

Beebee Ye
Hey! I'm Beebee!

I'm a designer and animator. I draw inspiration from my dream diaries.

In my dreams, I saw mammoths chasing little bears on a circus. I managed to turn missiles launched from North Korea into splendid firework shows. I convinced the Emperor of Qing Dynasty to stop killing. I chatted with Prince Edwards in Chinese. I was left in awe by the weirdly breathtaking scenes made up of lily pads, lotus, water grass and pale dead fish...

What's in your dreams?

© 2018 jimu Labs, Inc.