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>
Plugin 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
- Select one or more components and/or variant sets
- Run the plugin
- 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
Version | 2 |
---|---|
Created | December 28, 2021 |
Last Updated | January 12, 2022 |
Category | Software development |
Creator | Frank Johnson |
Stats | 1404 installs, 48 likes |
Pricing | Free |
Technical Details
- API:1.0.0
- main:code.js
- Editor Types:figma
More Like This
Discover other plugins in the Software development category.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more)
Export designs to responsive code (React, HTML, Vue, Tailwind, etc) with AI
SkewDat
Skew any layer or group with all layers preserved to edit.