Framer X + React

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

Or buy now if you are already convinced!
I read so many articles about ReactJS, but yours is very understandable because of your simple language.
Masood Sadri
Product Designer
👉 More testimonials

Silly Animations, Real Work!

Learn with fun animations. Apply the learnings to real-world micro-interactions and components.

Learn React, Visually

You are a visual animal? We are too! We explain React concepts in illustrations and animations.

Copy-Try-Learn

It's how you learned HTML/CSS. Why can't you learn React/JavaScript the same way?
4
Hours of
HD videos
27
lessons
Professional
Closed Captioning

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 Draw a bird -- from hand sketch to vector
    • 3.4 Text
    • 3.5 Layout the UI - Frame & Stack
    • 3.6 Design faster with components
  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

LEARN WITH FELLOW DESIGNERS

This course is great at explaining React concepts with visuals.
Patrick Multani
Product Designer
👉 More testimonials

FAQs

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!
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!

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.