How To Use Code Components in Framer

How To Use Code Components in Framer

Learn how to add FramerFuel's Code Components to your Framer projects with ease.

How to add Code Components into your Framer project, easily.

Within Framer, Code Components are used to extend Framer's capabilities. Creating additional features that aren't accessible natively.

But what makes them so special, is how easy they are to import. In fact, it's so easy it only takes three simple steps! You certainly do not need to be a Framer Expert to be able to do so!

Step 1: Copy the Code Component

Simply find the component you're looking for within the FramerFuel library, from there hit the orange 'Copy Component' button.

Step 2: Paste the component into Framer

Once you have copied the component that you want to include within your project, simply navigate back over to Framer, select the canvas and hit paste!

The component will the render into your project.

Step 3: Customize

Customizing FramerFuel components has never been easier, you simply just click on the component (either on the canvas or within the layers panel), then on the right hand menu, scroll down and you'll see all of the adjustable properties, play around with these to get your desired effect.

And that's it!

That's how easy it is to import & customize FramerFuel components within Framer. If you ever receive a 'Failed to import' toast message, simply restart the Framer app & re-copy the component.