Let’s be honest. There is no straight answer to this question. I’m not trying to be a smart ass or anything like that. Code Overrides are a thing in Framer X. They exist. Okay?
Okay. Good. Now let’s ask ourselves a slightly different question. What can I do with Framer X Overrides?
The short answer is a lot. Let me tell you why.
You can download and try Framer X for 14 days free.
Step 1: Framer X Visual Design Without Code Overrides
You see, Framer X is a visual design tool for the most part. You have a canvas where you draw frames. Stuff like beautiful rectangles and perfect circles.
On the very left you see are a few icons for features and design options. Next to it, there is the list of frames you draw in the canvas. Stuff like, profilePhoto, buyButton and iPhoneXOnBoardingScreen1. This is the content of the canvas. You can also organize the hierarchy of things. Which frame is on top of another, which frames are nested and stuff.
On the right panel you see a bunch of properties for each of those beautiful frames you design. You click on profilePhoto from the list and all its properties appear on the right. Stuff like position and size, color and rotation, shadows and effects. The list of props is long.
Yeah. I wrote props. You know. Properties but props. So… props.
Step 2: Props With Code Overrides
Okay. Back to Framer X. Here’s the thing. You can set and change all these props in Framer X right from the visual canvas. That’s pretty straight forward in all design tools.
Being the smart and creative person you are you want to do more. That’s exactly what Code Overrides allow you to do. You can override properties set in the canvas through code. Props with code.
Here’s how it works. You select a frame from the list on the left or through the canvas. Find Code in the frame’s properties on the right. Click the + icon. Two options appear. File and Override.
Here’s what you just did. You told Framer X that you want this frame to do something different and interesting. The File makes it different. An Override makes it interesting.
The file makes it different. An override makes it interesting.
Framer X will read the code from a File and execute your interesting idea through an Override. Be it an animation, an interaction, component communication and stuff.
The file contains JavaScript code and each Override is a JavaScript function which executes the code for a prop. That’s it.
As you would expect, JavaScript doesn’t run in the canvas where your beautiful but static rectangles and perfect circles are. Animations and interactions love their cute little private space in the Preview window or Framer Preview app on iOS. So you can only see and test Code Overrides in Preview or on your iPhone.
So, don’t scratch your head when a beautiful buy button with a Code Override in canvas appears as orange in Preview. It might wait for a tap to change color.
Just keep that in mind.
This is Part 1 of a tutorial series for Framer X Code Overrides.
Many thanks to Panos for proofreading and making suggestions.
This article was originally posted here
