Properties
You can enumerate and display visual attribute differences across each element of each variant in a Properties section.
What it includes
A subsection for each Variant property that has all options defined for it relative to the selected configuration
A subsection for each Boolean property included in the selected item (for instance and component types) or default instance (for a selected component set)
How it works
For component instances, the plugin iterates through each property to highlight differences per option. For variant props, the plugin compares a default with each alternative option by traversing layers and comparing relevant attributes of each layer to find and display differences.
Boolean props are simplified displays to highlight the property type, default value, and impacted layers marked with a blue highlight. While nearly all boolean props are associated with a single layer in practice, the list of associated layers scales to potentially list two or more.
FAQs
What if variants vary together, such that combinations of two variant properties result in different visual attributes?
This is referred to as a "compound props" case, where property combinations (such as type and color mode) are required to fully document how styles changes. The plugin's Pro version supports two way comparisons to enumerate across each combination of two properties.