What is a Prefab?
A prefab is a custom-coded component designed for Framer projects. Unlike many components, prefabs have no style or animations and don't dictate how something should look. Their sole purpose is to provide functionality and apply accessible patterns. Prefabs act as a "power box" that plugs into your components via nesting and Framer interactions.
Prefabs are designed to be powerful and easily adopted. You could use them in any Framer component you want. However, each prefab is designed with a specific intention and should be used within its intended context for the most accurate and accessible result.
Prefabs work by nesting within a component or layer. They provide native Framer interactions to power transitions between variants, a range of properties to power the functionality, and use DOM targeting/selectors to apply the correct accessible attributes. All prefabs are a single <span> with the exception of our text controls like (inputs, textarea and others) that isn't visually perceptible or detectable by a screen reader.
In this diagram, the prefab indicated by the lighting bolt demonstrates how the general framework functions in Framer. It is nested within the targeted parent layer of the component or layer and the events control when and what variant to show. The way it works is it looks for the first layer that has data-framer-name. This means any stack, or frame that nest the prefab will be the targeted parent. As of right now, there is no better way to target the layers. Whenever possible is helpful to keep the prefab at the highest parent layer whenever possible.
These prefabs create an underlying framework that operates as the middle layer between Framer, the browser, and your designs. They work together, complementing each other and augmenting each other's functionality. Prefabs are built to minimally disrupt your creative workflow in Framer, allowing you to continue designing, building, and creating in Framer the way you want.