Code is the true power of Framer X. It’s the ultimate tool that we can use to express and communicate our creative ideas. But like any advanced tool, it requires a lot of learning and practice to master.
How would you successfully learn Framer X when you are busy?
I’ve been thinking about this question a lot. I want to find the most efficient and effective path for you. Ideally, you would learn only what’s necessary. You would get productive and start prototyping real work as soon as possible. You wouldn’t have to block off days or worry about running behind in the rest of your work.
With these goals in mind, I prepared a 4-week learning plan for you.
For a month, you would spend 1-2 hours per day or up to 10 hours per week. You would study tutorials, write code and build prototypes. Take a break from Netflix (or video games, Youtube spirals or social media), my friend. It’s good for you.
Ready to dive in?
I recommend you to learn the following topics in this order:
In this post, I’ll spread these topics over a schedule of four weeks so that you can keep a good pace.
To make it easier for you, I created a “drip course”. It includes video tutorials and exercises that are released gradually every week. The course platform remembers your progress and takes you to the right spot whenever you sign in.
Of course, feel free to go over the topics in 2 weeks or 8 weeks or whatever works for you. As long as you take the time to study consistently, your future self will thank you!
Here are what you should know before starting the 4-week journey. Feel free to skip this section if you’ve already done these steps.
In terms of learning the UI of Framer X (or of any design tool), personally I’d just open it and start exploring. IMHO if the team has done their job, the UI should be automatically intuitive and users would not need a manual. It should just feel familiar.
But if you prefer tutorial videos, check out the official crash course.
This 17-minute video by Meng To is a good overview of Framer X’s advanced features. Watch it at 1.25x speed and you can get a good glance of what’s possible.
Overrides are a defining feature of Framer X. It’s good to get a first impression early on. Typically you’d need to write code to use overrides. Fortunately, to try it out, you can just point and select some examples.
You can think of the code editor as an enlarged, fancy property control. I find this to be a useful mental model.
Remember, you don’t need to be an expert. Knowing below is enough to get started:
Start your journey by imagining what you want to achieve by the end of the month. What prototype do you want to build? What kind of interactions would it include? It could be for your work or a personal project. The closer it is to your real work, the better. If you need inspiration, check out this page of showcases.
Build a static version of the prototype in Framer X. Perhaps try Page, Scroll, Link or some components from Framer Store to make it interactive.
After you learn something later on, come back and see if you could apply it to this prototype. This is going to be the motivation you need to finish the program.
But don’t panic! You only need to learn a little bit at a time to get going:
You don’t have to learn all of the above before moving on to next steps. Instead, do it on-demand. Always look at your goals and go backwards to learn what you need. You also want to see the visual result right after you write some code. Faster feedback loop means more effective, engaging learning.
Learn the code in isolation. Use CodeSandbox for exercises to prevent distraction from the design tools. Bonus: later you’d be able to prototype with just React!
The easiest way would be the drip course I built with exactly these ideas in mind.
Frame is just a glorified
div. It includes default settings for quick prototyping. E.g. It’s a blue square positioned absolutely. We can position a
Frame by setting its
y props. The latter is often used for animation. Try various props to change its look.
variants props define an animation with the target values of animatable properties. Specify the before and after values. The computer creates what’s in between.
transition props allow customization of the generated animation.
useCycle, when combined with events like
onTap, makes the animations interactive. We can use it to cycle through animation states defined with
A typical use case is a toggle which has “on” and “off” states, but we can do a lot more!
When a target value in
variants is an array instead of a number, it defines keyframes.
We can use
times to control the precise timing of these keyframes. Or use keyframes to coordinate the timing of multiple animations: delay, sequence, stagger etc.
Also try things like
This will take you surprisingly far. You’ll be able to create fairly complex interactions.
Dig a little deeper to discover what JSX actually is. This is tremendously useful for understanding overrides.
Hint: it’s just JS code.
Did you realize overrides are just a way to set the props of components on the canvas?
Overrides are a clever idea. It leverages both the convenience of design canvas and the power of code.
We can use overrides on components downloaded from Framer Store too!
This is what makes a prototype live. We want to expand a menu when the button is clicked. Or we want to use the slider to dim the background.
Overrides/Data are Framer-specific things. It’s different from how to do similar things in React.
What else can you build with
useCycle and Overrides? Can you add some interactions to the static design you created in Assignment 0?
Again, the drip course is perhaps the easiest path. I broke down these topics into short videos and introduce them to you in a just-in-time manner.
It’s incredibly easy to add drag gesture to a
Frame: just add the
drag prop. You can also customize the gesture:
useAnimation is another hook that Framer provides. We can use it to create “animationControls” that allows us to start/pause/stop an animation at specific times. It’s usually used together with events.
If you are coming from Framer Classic or jQuery, this way of creating animations should feel familiar.
useAnimation is “imperative” whereas
variants props are “declarative”.
Don’t forget that most of what you are doing here is setting props of a React component. What does this mean? You can use these in Overrides too!
This means you can draw things visually on the canvas, and add animation and logic with code. Use the right tool to do the right thing.
What else can you build with
useAnimation? Can you add some interactions to the static design you created in Assignment 0?
“Set it and forget it”. All we need is to define how to transform values and set it via props.
When combined with gestures such as drag or scroll, we can create advanced interactions such as card swiping, parallax.
We can uses these in overrides too!
We’ve used two different hooks to create animations:
useMotionValue. What’s the difference between them? When to use which one? As designers, it’s important to understand the pros and cons of the tools we have and choose them wisely.
At a high level, useAnimation offers a lot of flexibility. We can customize the animation with the
transition configuration. We can easily make a sequence of animations. On the other hand,
useMotionValue combined with
useTransform is most likely useful when there’s a logical link between different values, such as the
x offset of the card and its rotation angle.
In fact, it’s interesting and common to combine the two approaches in real world use cases.
What else can you build with
useAnimation? Can you complete the prototype you started in Assignment 0?
What you’ve seen is obviously just a small subset of what Framer X is capable of. There’s always more to learn. But the good news is that, by going through this 4-week program, you’d have:
Armed with the principles you’ve learned, you’ll go far and beyond!
Send me what you build, I’d be extremely thrilled to see!
Don’t forget to check out the “drip course” I prepared for you that should save you even more time!
If you like what you are reading here, join my newsletter, which is all about React and design. See you next time!
© 2020 jimu Labs, Inc.