Archive » Design Components

Design Components

Design components were replaced by Smart Components in the February 2 update. When you create a new component now (⌘K), it’ll be a smart one. But already existing design components will continue to work as before.

Design components are reusable building blocks for your design. You could compare them to ‘Symbols’ in Sketch, or Figma’s ‘Components.’

Creating a design component

You can turn any frame on your canvas into a design component by right-clicking it and selecting ‘Create Component’ (⌘K).

You can only turn a Frame or Stack into a component; you can’t create one from a Graphic or Text layer. To quickly wrap something (or a selection of things) in a frame, type ⌘↵ (‘Add Frame’ in the right-click menu).

Primary and instances

The component you just created will be labeled ‘Primary’ in the Layers Panel, and the copies you make of it will be labeled ‘Instance’.

I often keep the primary somewhere on the canvas so that I can find it easily (and not, for instance, in a Stack, together with a bunch of its instances). But you can always right-click an instance and select ‘Show Primary.’

Changing properties

When you change something on the primary, all the instances will follow suit, except for properties you already changed on an instance.

Say you changed the color of a text layer in one of the instances. Changing the color of that text in its primary will now be ignored by that instance, but changing the text’s position still has an effect.

Child layers

You can change all properties of an instance, including those of its child layers (Frames, Text Layers, Graphics,…). However, you cannot add layers to an instance or delete them there — that has to be done in the primary.

But, of course, you can hide children. And when the child is inside a Stack, other layers will move over to occupy the vacated space.

Right-click a layer (on the canvas or in the Layers Panel) to ⌘; ‘Hide’ it. It will be grayed out in the Layers Panel.

Reset Overrides

Accidentally changed something on an instance? Right-click it and select ‘Reset Overrides’. The instance will again be a clone of its primary.

Pro Tip: Reset Overrides works on the currently selected element. This means that, when you changed a child layer, you must first select that child and then choose Reset Overrides.

Text and image properties

You can add property controls for every image or text layer in the component (anywhere in the parent-child hierarchy).

Select the primary to see a list of text layers and images in the Properties Panel.

Activate image and text properties by clicking their checkbox. You can also set the names they should have in an instance’s panel (here: ‘Picture’, and ‘Name’).

Detach From Primary

Right-click an instance and select ‘Detach From Primary’ to turn it into a regular frame, a simple copy of its former primary.

Pro tip: Not all public packages contain code components. Edoardo Mercati’s iOS Kit, for instance, is 100% design components. They can all be detached from primary to customize them.

Organizing in folders

You can organize your design components in folders by putting a / in the name.

When you rename a component, for instance, to cards/city (you do this the Layers Panel), it will appear as a city card inside a cards folder (under Project Components in the Insert Menu).

Also code components

You’re not limited to using only frames, graphics, text layers, stacks,… inside a design component. They can also contain code components (your own or from public packages).

It’s all React

You can use code components in design component (and also the other way round) because every layer on Framer’s canvas — even a simple frame — is actually a React component.

Pro tip: You can inspect any layer’s React code (its JSX) with Steve Ruiz’s FrameSpy component.

Leave a Reply