Components

Increase the speed and productivity of your design workflow with reusable components

Components are reusable design elements that speed up your workflow and keep your designs consistent.

The main advantage of using components is that you can edit multiple instances of an element at once. For example, if you need to make a change to a button that appears in several places in your design, you can update the button component and the change will apply to all its instances:

Component basics

These are the basic terms related to components and their functions:

• Main component. The original element that you convert into a component.

• Component instance. You create a component instance any time you duplicate a main component. When you edit a main component, the changes apply to all of its instances at once.

• Override. When you modify an instance, you create an override. The main component won’t be affected, and if you edit it later, the changes won’t apply to instances with overrides.

• Component page. A dedicated document page used for storing main components. Lunacy adds it automatically.

  Note: Starting from v.12, the Component page appears only in two cases:

  • When you copy a component from another file to a local file
  • When you drop on the canvas an element from the GUI tool (button, checkbox, etc.)

• Component state. A component can have different variants (Default, Hovered, Pressed, etc.). These variants are called component states.

• Nested components. You can nest several components in a more complex component. This gives you the most freedom and flexibility in editing your designs, and it’s an even more powerful feature when coupled with nested auto layouts.

Creating components

To create a component:

1. Select the element you want to convert into a component.
2. Click in the context toolbar at the top of the canvas or press Ctrl + Alt + K / ⌘ + ⌥ + K.

Components and instances in the Layer list

Main components are bold and colored pink in the Layer list, and there’s a component symbol () in front of their name.

Сomponents with more than one state come with a dashed border around the symbol.

Component instance names aren’t bold but have the instance symbol () and the same pink color. When they’re selected, their properties and options appear in the Component section of the right panel.

Reusing components

All the components in your document appear in the Components tab in the left panel.

To add a component instance to the canvas, you can:

• Drag it from the Components tab to where you want to place it.
• Duplicate the existing instance on the canvas.

Right-click a component in the Components tab to bring up the context menu with these options:

• Rename component
• Edit component
• Delete component
• Duplicate component
• Group
• Expand all
• Collapse all

Component states

You can create multiple states for a component and switch between them as needed. States let you define variations like Default, Hover, or Pressed.

To create a component state:

1. Select a component.
2. Click in the context tool bar or press Ctrl + Alt + P / ⌘ + ⌥ + P. A dashed frame will appear around the component, and the new state will be added below the original.
3. Make the required changes to the new state.
4. To create additional states, select the original component or any existing state and click + again.

Lunacy automatically assigns names to states (Default, Hover, Pressed, etc.).

To rename a state:

1. Select the state.
2. Press F2 and type the new state name after the slash (for example, Button / Hover > Button / Disabled).

Alternative workflow

You can also create a new component state from any instance on the canvas.

See both methods in the video below.

To switch through component states:

1. Select a component instance.
2. Choose the new component state in the right panel.

Editing components

You can edit a component:

• Right on the canvas like any other design element. This is the most straightforward and convenient way to edit components.
• In the Component editor.
• On the Components page.

Making edits in the Component editor

1. Select a component instance and press Enter or choose Edit component in the context menu.
2. You’ll see a pink frame around the canvas and the contents of the component will appear in the Layer list.
3. Use the right panel to make the required changes.
4. Click anywhere over the canvas, or press Esc to exit the component editor.

Making edits on the Components page

1. Right-click on an instance and select Go to Component in the right panel or manually switch to the Components page.
2. Edit the required component.
3. Once you’re done:
   • If you used the Go to Component option, click the Back to instance button at the top left corner of the canvas.
   • If you manually opened the Components page, simply switch back to the previous page to continue working with the document.

Swapping components

You can swap between instances of different components. Simply select an instance you want to replace and use one of the following methods.

Method 1:

1. Go to the Components tab.
2. Find the required component and click next to it:

Method 2:

1. In the right panel, open the Component list.
2. Select the required component (and its state).

The video below shows both these merthods.

Deleting components

Delete components from the Components tab (using the context menu) or the Components page (simply delete the component frame).

When you delete a component, all of its instances turn into frames.

Managing instances

Creating instances

To add a component instance to the canvas, you can:

• Drag it from the Components tab to where you want to place it.
• Duplicate the existing instance on the canvas.

See the video in the Reusing components section.

Instance properties

When you select a component instance, the right panel shows an additional section that looks like this:

• Component list. A dropdown menu displaying the name of the component. When open, it shows all other components available in the document. By choosing items in the list you can swap components.
• Component states. Previews of all availalable component states.
• Detach from component. Use this button (or Ctrl + Alt + D / ⌘ + ⌥ + B) to detach an instance from its component. Once detached, the instance will no longer reflect changes made to the original component.
• Go to Component. This button will bring you to the instance’s main component.
• Reset overrides. Use this button to remove all overrides and restore the instance to the component’s original appearance.
• Component type. This setting currently has no visible effect.

Overrides

To reiterate, an override is any edit you make to a component instance. Let’s go over them in detail.

Click ▾ next to the title of a component instance in the Layer list to expand its contents. You can modify all the layers inside it to apply the changes to this component instance only, creating an override:

Some basic overrides you can make are changes to layer color, text, or image content.

Here’s a simple example of a card component made up of an image (an oval with an Image fill) and a labeled button. We applied three overrides: changed the button color, updated the button label, and replaced the image.

You can easily reset all of these overrides by pressing in the instance properties.

Here’s a full list of layers and properties you can create overrides for:

• Fills and images
• Text content and properties
• Layer and text styles
• Auto layouts
• Tints
• Hotspots

Component-related shortcuts and menu options

To recap, here’s a list of context menu options and shortcuts you can use to work with components, along with corresponding shortcuts, if available.

Main component options

Option	Description	Windows and Linux Shortcut / Menu Option	MacOS Shortcut / Menu Option
Create Component	Create a new component from a layer. You can also click in the context toolbar at the top of the canvas.	Ctrl + Alt + K	⌘ + ⌥ + K
Convert Component to Frame	Right-click a main component and select the option to convert it into a frame. All of its instances will also turn into frames.	Ctrl + Shift + Y	⌘ + Shift + Y

Component instance options

Option	Description	Windows and Linux Shortcut / Menu Option	MacOS Shortcut / Menu Option
Create New Component State	Add a new state for the component.	Ctrl + Alt + S	⌘ + ⌥ + S
Go to Main Component	Brings you to the main component of the selected instance. To return to the instance from the main component, click the Back to instance button that appears at the top-left corner of the canvas.	Ctrl + Alt + E	⌘ + ⌥ + E
Detach from Components	When you detach an instance from its main component, it becomes a group. All further changes to the main component will no longer apply to the detached instance.	Ctrl + Alt + D	⌘ + ⌥ + B
Detach from Library	This command only applies to components from UI kits. Detached components become native to the document and appear on the Components tab and the Components page.	-	-
Reset Instance Size	Restore the original size of any component instance.	Ctrl + Alt + R	⌘ + ⌥ + R
Reset Overrides	Use this command to undo all overrides and revert the instance to the style of its main component. You can also use the Reset overrides button in the Component section of the right panel.	-	-
Send to Component page	This command only applies to main components and becomes available when a component isn’t on the dedicated Components page.	-	-