Create components

When to create a component

Create a component when you have a UI element — a button, card, icon, input field, navigation bar — that appears in more than one place in the project, or that you expect to reuse in the future. Keep the master component as the source design, then create linked instances from it.

How to create a component

From the keyboard:

Select one layer, frame, or group you want to turn into a component. If the component needs multiple layers, wrap or group them first.
Press ⌘⌥K (Mac) or Ctrl+Alt+K (Windows).

From the context menu:

Select one layer, frame, or group on the canvas.
Right-click to open the context menu.
Choose Create component.

From the right inspector:

With one layer, frame, or group selected, click the Create component button in the node settings section.

After creating a component

The selected layers are converted into a master component in place. The layer icon in the layers panel changes to indicate it is now a component master.

You can:

Double-click the master component to enter it and edit its structure.
Rename the component by double-clicking its name in the layers panel.
Copy and paste the master to create instances.
Move the master component to a dedicated frame to keep the canvas organized.

Naming conventions

Use a clear, hierarchical naming format for components you plan to manage at scale. For example: Button / Primary / Default or Card / Product / With Image. Lovision uses / as a separator to group components visually.

Tips

Rename all child layers before creating a component — layer names become property names in the inspector.
Keep the master component structure simple. Deeply nested groups inside a component are harder to update.
Create components from finished, working designs rather than works-in-progress.