Framer
  • Support
  • Using Framer
Framer
  • Why Framer
  • Teams
  • Learn
    • Tutorials
    • Examples
    • Templates
    • Sessions
    • Speedruns
  • Pricing
  • Blog
  • Updates
  • Support
  • Support
  • Using Framer

Related Articles

  • Screens
  • Components
  • Frame
  • Graphic
  • Custom SVG’s

Code Component

A Code Component is an advanced type of component. It is similar to a Design Component, except that its primary is written in code.

To create an Instance of a Code Component, open the Insert Menu from the Toolbar and find your component under the Project Components category.

Using Code Components

Anyone can use a Code Component. Framer's Scroll and Page components are both Code Components. You do not need to code in order to use a Code Component—but you can use code to create new ones.

Framer includes a default set of Code Components that you can find in the Insert Menu. Many of Framer's community Packages also include Code Components.

Using the insert menu to insert a code component

Using the insert menu to insert a code component

Property Controls

Like Design Components, Code Components can expose Property Controls that change certain properties in the component. If a Code Component has Property Controls, then the Properties Panel will list these inputs in a section with the component's name as its header.

Setting properties on a code component

Setting properties on a code component

A Code Component's Property Controls are written in code by the component's author. The controls themselves may be more complex than those found in Design Components, and it's up to the component's author to determine how their values are used.

To learn more about a Code Component's properties, open the Insert Menu and select the component to read its description.

Learn more in our article on using Property Controls with Code Components.

Helpful?Was this article helpful?

0

0

Framer

  • Why Framer
  • Teams
  • Pricing
  • Blog
  • Updates
  • Motion

Platforms

  • Web
  • macOSbeta
  • WindowsBeta
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing

Learn

  • Tutorials
  • Examples
  • Templatesnew
  • Sessions
  • Speedruns

Resources

  • Packages
  • API
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement