Propstar
Generate every possible instance for your components, all in a tidy labelled table.
Plugin Preview
About this plugin
Generate all possible instances for your components, including every combination of variants and component properties, all in a tidy labelled table.
Creating tables
- Select one or multiple components or component sets.
- Run Propstar > Create property table.
- That's it! A table of instances will be generated behind your component, displaying your main component alongside all possible instances.
Settings
The settings panel allows you to customise several aspects of your property table. Here's what you can do:
- By default Propstar saves your settings locally on your computer, but you can change it to remember different settings for each file or each individual component.
- Include boolean instances to generate every possible permutation of your component, or disable them to simply organise your component set.
- [★Pro] Enable Nested instances to show the properties of exposed nested instances on the table as well.
- Toggle Standalone to create your property table separately from your source component.
- [★Pro] Customise color, font size, stroke weight, padding, and the opacity that highlights generated instances. Please send a message in the comments if you want to customise other aspects of the table.
Unlock Propstar Pro
Support the development of Propstar by unlocking Pro with a one-time fee of $7.
Ordering
To change the order of instances on the table, reorder the properties and values directly on Figma, using the controls on the right sidebar.
The property values of your default variants are prioritised so that the main components stay on the left, while the generated instances are spread around the rest of the table.
Figma does not currently support mixing the order between variant and component properties.
Plugin Details
Version | 37 |
---|---|
Created | June 7, 2022 |
Last Updated | May 21, 2024 |
Category | design-systems |
Creator | Henrique Gusso |
Stats | 19506 installs, 2266 likes |
Pricing | Paid |
Technical Details
- API:1.0.0
- UI:out/index.html
- main:out/index.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the design-systems category.