Belar

A Mini Guide to Framer's Code Components

0 Preamble

1 Components in Framer

From user’s perspective, there are 2 types of components in Framer - no-code and code. No-code components are build within the canvas editor, utilising predefined building blocks and a set of customisation settings. Code components (also known as custom components) are React components coded in Framer’s in-app code editor - you can of course code elsewhere, but at the moment that’s the official way.

2 Overrides

Components are not the only way to apply custom logic to an element. Overrides are code component-like snippets that receive the element they are set on, as a prop.

Their benefit is an operation on Framer’s native element, something that in a code component requires an element attachment from outside the canvas. However, overrides, don’t support controls (here customisation means code changes), are not rendered in canvas (effect is only visible in a preview and live), and an element can only have one override applied to it.

Considering the above, overrides are suitable for tiny, universal modifications that are not worth UX disturbance in the canvas.

3 Official resources, start here

The very first place to get yourself familiar with Framer’s code components is the official documentation for developers. It’s available at: https://www.framer.com/developers/

As mentioned in the official docs, if you ever decide to add transitions or animation to your component, there is a high chance that you will reach for Motion, Framer’s animation library. Its documentation is available separately, at https://www.framer.com/motion/. It’s worth mentioning that the “motion” component is also available through the “framer” package, dedicated to code components.

4 Component with style

There are many options to style a component in React, but you need to keep in mind that Framer projects are initially server rendered, so not every solution will work without issues, and you have no control over architecture running components. Here are techniques that should provide minimal friction:

5 Here be dragons

There are areas of Framer that are uncharted territories, hiding undocumented, perhaps unfinished, features. Resources on the topic that you may find helpful are: