A component can have only props or only state, but also both. So what’s the difference between them?What are props? What is state? Props are like a library book; state is like your diary Where to save the state?The useState() hook Example: CarProps State Animation Example: KidState Props Thy prop shalt not changeth thy state… […]

Layers on the canvas have a connector that signals they have events to trigger an interaction (often used to transition to another screen). With the event handler property control, you can add the same type of events to a code component.K1_Event_handler.tsxHere’s the above button. It has label and tint properties, and also an onTap() event […]

Here are some examples of Instant NPM imports. I found three open-source design systems whose components can be imported and reused inside Framer.MUIA few Buttons Making a component Motion-compatibleThe code override Rating Radio buttons SliderThe code override Chakra UIButton Adding the <ChakraProvider>On the canvas In the preview Motion-compatible Button Tabs Popover Skeleton React BootstrapButton Adding […]

open in CodeSandbox (You can also tap the indicators to directly go to a page.) Code component We use React’s useState() hook to keep track of the current page. Pro tip: When using the <Page> component in a React project (like in the CodeSandbox above), set the box-sizing of all elements to border-box. Like this, […]

Here, an onTap() event and Framer’s useCycle() hook are used to cycle between two visual states. open in CodeSandbox Code component Code override

With an override, you can dynamically change a code component’s properties, and by overriding its events, you can have it talk to other layers on the canvas.Which properties can you override?HandoffEvents Testing for events First example: Framer’s Toggle plus Ticker Making a component readable by HandoffToggle Slider Why do they react to onTap() and onClick()? Making a wrapped […]

You can override a canvas component’s variables, make it animate between variants, and use events to let it talk to other layers on the canvas.Changing the current variant Changing variables Overriding eventsEvent variables Native browser events Events exampleHow are the widgets animated? Switching to another variant automatically Example Home app prototypeThe components The data Scene […]

With the useState() hook, we gave our override its own state. Framer’s CreateStore function also provides a state, but one that you can share between overrides.Local state versus shared state Local state: in the override Shared state: use CreateStore Communicating between overrides How to use CreateStoreImport it Create a store Call useStore() inside the overrides […]

Some overrides with animation basics, how to add ‘state’, and how to animate between two animation states.1. Animating the background color 2. Simply changing the background colorExtracting style from the props Frames had top-level properties 3. Animating when tapped (adding state)Adding an event Wrapping the function call Optional: adding an event handler function 4. Toggle […]

With code overrides, you can make layers on the canvas interactive, animate them, have them react to user gestures, and let them share data.Applying an override to a layer Editing override files What are you ‘overriding’? HOC versus legacy overrides A closer look at a legacy overrideImporting another file An override is a functionA function […]