Components are re-usable elements of a design. Framer X supports two kinds of components: components that you create on the canvas, called design components, and components that you write in code, called code components. Both design components and code components are available on the components panel

Design Components

All design components have a master component. Each of your master components live on the canvas. Removing a master component from the canvas will also remove them from the Components panel. 

If you paste, duplicate or drag a component from the panel to the canvas, you’ll create an instance of that component. Any changes you make to the master will be reflected within each instance. However, you can override the properties of any instance, customizing properties like color, opacity and radius, or layout options like position and size. To remove these overrides, right-click the instance and select Reset Overrides to revert its properties back to match its master component.

Code components

While design components have the same limitations as traditional design tools, Code components are virtually limitless. Code components are React components that you may use anywhere in your project, and that can interact with other components in many ways. 

If you're an experienced React designer, code components should be very familiar. If you're new to programming (or new to React), code components are a great way to get started. In our documentation, we assume a basic knowledge of HTML/CSS/Javascript. For a refresher or more information, please read React’s Getting Started guide.

Components from the Framer X Store

If you've installed a package from the Framer X store, that package may include design components, code components, or both.

Did this answer your question?