Thread by @lintonye

How to learn @Framer X?

The true power lies in code but it's a mountain to climb. Learn in this order:

1. Try overrides
2. A bit HTML/CSS
3. A bit JS/React
4. animate, variants, transition
5. useCycle
6. Revisit overrides
7. motionValue
8. More cool stuff

Thread (14 posts) 👇

1. Try overrides

Add a Frame. Add an "override" from properties panel. Preview it. Click "Edit code". Relax if the code looks scary. Change some values and see how it affects the result.

Useful mental model: think of the code editor as an enlarged, fancy property control.

2. Learn some HTML and CSS

Chances are that you've already done this step.

No need to be an expert. Knowing below is enough to get started:

- What do HTML and CSS do?
- The format of HTML tags
- inline styles
- common CSS properties such as opacity, width, height, transform

3. Learn a bit JS and React

- JS: variables, objects, arrays, functions
- React: JSX, components, props (no need to learn state yet)

There's a lot here. But don't panic! You only need to learn a little bit at a time to get going.

Learn the code in isolation. Use CodeSandbox for exercises to prevent distraction from the design tools.

Create a component that draws a blue square (Frame). Try various props to change its look.

Bonus: later you'd be able to prototype with just React!
codesandbox.io

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 "left"/"top" or "x"/"y" props. The latter is often used for animation.

4. Incredibly useful props: animate, variants, transition

"animate" and "variants" define an animation with the target values of animatable properties. Specify the before and after values. The computer creates what's in between.

"transition": customize the generated animation.

When a target value in "animate" or "variants" is an array, it defines keyframes.

We can use "times" to control the precise timing of these keyframes. Or coordinate the timing of multiple animations: delay, sequence, stagger etc.

Also try things like "staggerChildren" or "yoyo"

5. useCycle

useCycle, when combined with events like onTap, makes the animations interactive. We can use it to cycle through animation states defined with "animate" and "variants" props.

A typical use case is a toggle which has "on" and "off" states, but we can do a lot more!

Steps 3-5 don't have to be done sequentially. Mix them up as needed. The idea is to see the visual result soon after writing code. Faster feedback loop = more effective, engaging learning.

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.

6. Revisit Overrides

Did you realize overrides are just a way to set the props of components on the canvas?

Overrides are a clever idea: leverage both the convenience of design canvas and the power of code.

We can use overrides on components downloaded from Framer Store too!

Learn how to let overrides communicate.

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 thing. It's different from how to do similar things in React

7. motionValue

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

8. More cool stuff

There's always more to learn. The good news is that by going through the 7 steps above, you have:

1) learned enough to do useful, compelling work
2) built a solid foundation

Armed with the principles you've learned, you'll go far and beyond!