Framer allows you to create fully fledged, interactive prototypes without leveraging any code whatsoever.
However, as Framer is built on the web and made with web technologies itself, you can also leverage code yourself if you’d like to learn how to or if you are already familiar with code.
Follow the Coding in Framer tutorial
By default, the ability to add code within your projects is hidden. Though if you are working in an existing project that already contains code, code features are automatically enabled.
To enable code within Framer, follow these steps:
- On the top-left of your interface, open the menu
- Head to the Code section at the bottom
- Select your preferred option regarding showing code
The options from which you can choose are to Show Code When Used, Always Show Code, and Always Hide Code.
Enabling code from the top left menu
Using code in Framer
Framer allows you to use code in two main ways, namely code components and/or code overrides.
Code components are (React) components that you create from scratch or pull in from existing projects/design systems.
These can then be implemented into your project however you want them to be.
An example of a code component
Setting a code override
If you’re looking to create components that you’d also like to use in production, you can use the Framer Motions API. Both API’s are fully functional within Framer, but the Framer Motion API is made to be production ready while the Framer API is not.
Framer Motion is incredibly powerful, and allows you to create simple and complex animations with less code than ever before.