Convert to Variant
<p>Select multiple instances and convert them into variants of their main component, then seamlessly swap the variants into your design.</p><p><br></p><p>Video Demonstration: <a href="https://youtu.be/YEsHiadBWhs" rel="noreferrer noopener nofollow ugc" target="_blank">https://youtu.be/YEsHiadBWhs</a></p><p><br></p><p><strong>How to Use</strong></p><ol><li>Select 1 or more instances which you have modified from the original component. (it works best if you have named them descriptively as the variant will use this name)</li><li>Right click and run the <strong>Convert to Variant</strong> plugin from your Plugin menu.</li><li>Enjoy your new variants, ready for you to reuse elsewhere in your design.</li><li>Tidy up your property name, the variations will be created in the first property which defaults to 'Property 1'</li></ol><p><br></p><p><strong>Requirements</strong></p><ul><li>Main Component must be local</li></ul><p><br></p><p><strong>Notes</strong></p><ul><li>Native 'Combine as Variants' feature is similar but the main difference is that this plugin creates the variants as children of the existing main component rather than under a new component. Cheers <strong>Alexandre Soares</strong> for sharing this feature.</li></ul>
Plugin Preview
About this plugin
Select multiple instances and convert them into variants of their main component, then seamlessly swap the variants into your design.
Video Demonstration: https://youtu.be/YEsHiadBWhs
How to Use
- Select 1 or more instances which you have modified from the original component. (it works best if you have named them descriptively as the variant will use this name)
- Right click and run the Convert to Variant plugin from your Plugin menu.
- Enjoy your new variants, ready for you to reuse elsewhere in your design.
- Tidy up your property name, the variations will be created in the first property which defaults to 'Property 1'
Requirements
- Main Component must be local
Notes
- Native 'Combine as Variants' feature is similar but the main difference is that this plugin creates the variants as children of the existing main component rather than under a new component. Cheers Alexandre Soares for sharing this feature.
Plugin Details
| Version | 1 |
|---|---|
| Created | April 13, 2022 |
| Last Updated | April 13, 2022 |
| Category | Software development |
| Creator | James McKennay |
| Stats | 355 installs, 29 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 - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
SkewDat
Skew any layer or group with all layers preserved to edit.