Components

Components are reusable, interactive building blocks that you can compose into larger ones to make up entire apps.

In most other graphics tools, components are visual — a picture of a button, slider or toggle. The big difference is that in Framer X, components can be interactive. They scroll, click, move and handle input, all backed by the popular React JavaScript framework for building interfaces.

Creation

To create a new component, you can navigate to the Components panel and click the New button located at the top. There are two types of components: design and code. Here, you can create new design components. A design component is created by selecting a Frame on your canvas. Code components are created via the Code panel.

Instances

First, give your design component a unique name in the Layer Panel. Then, right click on the layer and select Create Component. You can also create new design components from selection by hitting CMD + K.

The design components you see in the panel are referred to as a master components. All of your own master components live on the canvas: removing them 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. All changes made to the master will be reflected within each instance. You can still override the properties of any single instance and customize things like color, opacity and radius, or layout options like position and size. Don’t like the end result? Right-click and hit Reset Overrides to revert styling back to match the master component.

Start your free 14‑day trial.

Enter your email and we‘ll send you a download link for later.

We recently introduced Frames and Shapes, so some information in these videos may be outdated. To learn more visit our Help Center.