Edit and switch component states in Lunacy

Learn how to create, manage, and switch component states in Lunacy for seamless interactive design. Quick steps, easy workflow, big impact.

Lunacy makes it easy to create, edit, and manage different states of your components. By default, every new component you create in Lunacy starts as the default (main) component. From there, you can add additional states—such as hover or pressed—with just a few clicks. Here’s how it works:

Creating a new component state

1. Select a component instance.
   This could be the default (main) component or any of its instances on the canvas.
2. Add a new state.
   In the Component section of the right panel, click the + button (or press Ctrl + Alt + P / ⌘ + ⌥ + P on macOS).
3. Adjust and name your new state.
   Modify the component’s design (color, size, style—you name it) for the new state. Then, rename it so you can distinguish it from the default state.
4. Click on any empty area on the canvas.
   Lunacy will create a new component near the main component, defining your newly added state.

Tip: Lunacy automatically arranges components into categories when you create new states (e.g., Button/Default and Button/Hover). You can edit these categories anytime in the Components tab.

Switching through component states

1. Select a component instance on your canvas.
2. Choose the new state from the dropdown in the right panel.

That’s it—your component instance will instantly switch to the new state!

Note on Overrides

Switching a component state doesn’t affect any existing overrides. For example, if you’ve customized text or colors on a button instance, those overrides remain intact even if you change its state from Default to Hover.