Framer allows you to create full-fledged, interactive prototypes without using any code whatsoever. However, as Framer is built on the web and made with web technologies itself, you can also leverage code if you’d like to add extended capabilities to your prototypes.By default, the ability to add code within your projects is hidden. Though if you are working on 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.
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. Find out more about code components