The Variant Interaction feature in [[Figma]] allows you to set standard interaction changes at the component level. ![[Screenshot 2021-07-16 at 11.11.04.png|500]] #### Steps for Standard Controls ##### [[Default State]] Component - Change to hover state on mouse over - **Trigger:** Mouse Enter - **Type:** Change To: - **State:** Hover ##### [[Hover State]] Component - Change to default state on mouse leave - **Trigger:** Mouse Leave - **Type:** Change To: - **State:** Default - Change to [[active state |active]]/[[focus state|focus]] state on mouse click - **Trigger:** On Click - **Type:** Change To: - **State:** Active ##### [[Active State]] Component ```ad-note Figma doesn't (currently) deal with replicating a real world trigger for changing an Active component state off. The real world trigger would be clicking outside of the component, or triggering an active state on another component. In [[Prototyping]] one way to simulate this is to use 'after delay' to return an active state back to default state after a short amount of time. ``` - Return to Default State - **Trigger:** Mouse Leave - **Type:** Change to: - **After Delay:** 800ms - **State:** Default