React + Framer Tips

Commenting In JavaScript And React

Preview 1:1 in any browser window

Framer

Select multiple text in Visual Studio Code

Code

VSCode

Define a code component that does not appear in the Components panel

Code Component

Code

Framer

Debug with React Developer Tools

Code

Framer

Use git to version control a Framer X file

Framer

Page transition hint

Code

Code Overrides

Framer

Play an animation on load, not just onTap

Code

Code Override

Framer

Make a splash screen with the Page component

Code

Code Override

Framer

Use local custom fonts, that work in mobile preview

Schedule something to happen, and make it cancelable

Code

Code Override

Framer

Make a button/card with on hover state, Method 4: react-spring

Code

Code Component

Framer

Why do all buttons bounce? Part 1

Code

Code Override

Framer

Why do all buttons bounce? Part 2

Keep Page and Slider in sync, without getting stuck

Link to another overlay from an overlay (Attempt 1)

Link to another overlay from an overlay (Attempt 2)

Code

Code Override

Framer

Fix editor error when importing a local JSON file

TypeScript

Code

Framer

Text input: change text by clicking a button

Export web preview and host it yourself

Framer

Children connectors

Code

Code Component

Framer

Text input: handle mobile keyboard

Ship a code component that points to a local resource (e.g. an image)

Code

Code Component

Framer

Fluid grid component

Integrate text input: "Press enter" keyboard event

Integrate text input: get its value out when it's changed.

If you work with code components a lot, it's better to create a symbol link to the Framer directory

Code

Framer

Render Vue.js components

Code

Framer

Make a button/card with on hover state, Method 3: pose

Code

Code Component

Framer

Make a button/card with on hover state, Method 2: styled-components

Make a button/card with on hover state. Method 1: Vanilla CSS.

Hold option key and drag a vector control point to toggle between "Mirrored handles" and "Disconnected handles"

Vector Drawing

Framer

Make a dropdown menu

Code

Code Overrides

Framer

Add anchor point to anywhere on a path by holding CMD

Vector Drawing

Framer

View your preview in any browser by going to http://localhost:4567.

Framer

ThemeProvider and styled-components

Code

Code Component

Framer

Get canvas width/height of a code component

Code

Code Component

Framer

Layout with Stack and then remove it.

Layout

Framer

Hold CMD to ignore position pins

Layout

Framer

Press ESC key to select the parent of the current selection

Layout

Framer

The unit of duration in "transition" is second, not millisecond.

Code

Code Overrides

Framer

Staggered animation?

Code

Code Overrides

Framer

How to create Material app bars with varying number of action items/icons?

Design Component

Layout

Framer

Just found out that the vectors in a FramerX component instance can be overridden. Neither Figma or Sketch seems to support this at this point.

Vector Drawing

Design Component

Framer

#FramerXTip (or UX issue?): Holding SHIFT while drawing on oval

Vector Drawing

Framer

Command key to select an item regardless of hierarchy. Big time saver!

Framer

control-C for Color picker

Framer

Pasting a long line of text on the canvas => "what? No text soft wrapping?!"

Framer

Framer X doesn't have [insert drawing feature in Sketch]!

Framer

Day mode and night mode.

Framer

CMD key to disable auto-reparenting

Layout

Framer

How to install an NPM package?

Code

Code Component

Framer

How to change the default code editor?

Code

Framer

What's the fastest way to add a frame with predefined size?

Framer

The fastest way to add a frame that's the same size as the ones on the canvas?

Framer

There's no image component in @framer X. How to use images?

Framer

How to crop an image?

Framer