To rename a component state, double click the existing name and then type in the new one. To remove a component state, right click on it and go to Delete. To easily get to the master component, right click on one of your component instances and go to Edit Main Component or select that component instance and click the Edit Main Component button from the Property inspector. Once you’re done you can click the Preview button and check the animation of your component.Ĭomponent states can only be added or removed when you have the Master Component selected. For this example, you can also apply an interaction with a Tap trigger that gets you to the Active state of the toggle button. You can apply more than one interaction for the same component state. Select Hover as the trigger, set the interaction to Auto-Animate and for the Destination select the component state that you want to show up when you hover over the component. Select your component and switch to Prototype mode. We’ll use this toggle button to exemplify prototyping for component states. You can learn more about prototyping on the dedicated chapter. Wiring component states interactions is a real time saver as you don’t need separate artoards because you’re setting a state as a destination instead of an artboard. In Prototype mode you can animate the Hover and Tap interactions between components states. Switch between states in the Property inspector, select the one that you need to edit and make the changes. Once added, component states can be easily edited. You can learn more about prototyping in the dedicated page. Hover State to change the appearance when you hover over the Component in your Prototype. New State to show variations of a Component such as a disabled or clicked version. You will always start with a Default State and you can add multiple state for one component.Ĭlick the “ +” button next to the master component’s Default State in the Property Inspector, and select: Using the Component section in the Property inspector you can add states to saved components.