Back to Plugins
Make Hover State

Make Hover State

<p>Take any component or variant set and quickly scaffold hover states for them with interactive components.</p><p><br></p><p>By the mad scientists at Shift Lab. Want to work with us? <a href="https://shiftlab.co/careers" rel="noreferrer noopener nofollow ugc" target="_blank">We're hiring!</a></p><p><br></p><h2>Get Started</h2><ol><li>Select one or more components and/or variant sets</li><li>Run the plugin</li><li>Style your new hover state variants!</li></ol><p><br></p><p>This will generate a clone of the existing component (or each variant in a component set), create a variant property group called Hovered with True and False values, and connect the new variant up to the original with a hover interaction trigger.</p><p><br></p><h2>Limitations</h2><p>There is currently a limitation with variant sets, where the plugin doesn't work if there is already a property group with the word "hover" in it. This is built in so that in future the plugin can support intelligently completing half-built variant sets, but it seems like it would be very prone to edge cases so I'm not sure if I'll ever support it. For now, use the plugin on either sole components or variant sets without hover states defined.</p>

hover stateinteractive componentsrollover statevariantscode-generators

Plugin Preview

Make Hover State preview

About this plugin

Take any component or variant set and quickly scaffold hover states for them with interactive components.


By the mad scientists at Shift Lab. Want to work with us? We're hiring!


Get Started

  1. Select one or more components and/or variant sets
  2. Run the plugin
  3. Style your new hover state variants!


This will generate a clone of the existing component (or each variant in a component set), create a variant property group called Hovered with True and False values, and connect the new variant up to the original with a hover interaction trigger.


Limitations

There is currently a limitation with variant sets, where the plugin doesn't work if there is already a property group with the word "hover" in it. This is built in so that in future the plugin can support intelligently completing half-built variant sets, but it seems like it would be very prone to edge cases so I'm not sure if I'll ever support it. For now, use the plugin on either sole components or variant sets without hover states defined.

Plugin Details

Version2
CreatedDecember 28, 2021
Last UpdatedJanuary 12, 2022
CategorySoftware development
CreatorFrank Johnson
Stats1404 installs, 48 likes
PricingFree

Technical Details

  • API:1.0.0
  • main:code.js
  • Editor Types:
    figma