github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-11-15 06:31:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

📚 Document how to order variant properties and values (#12996)

Browse Source 
Users ask how to choose the order of values in the variant property
dropdown. The values follow the order of the variants in the Layers
panel, and this was not documented. Also document that properties can
be reordered by dragging them in the Design tab.

AI-assisted-by: claude-opus-5-5
This commit is contained in:
andrés gonzález 2026-11-12 13:04:13 +01:00 committed by GitHub
parent b5eab6a949
commit 9d42ed29ce
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/user-guide/design-systems/variants.njk
View File

@ -86,6 +86,13 @@ desc: Streamline your design workflow with Penpot's Components guide! Learn to c
<img src="/img/variants/04-variants-properties-edit.webp" alt="Edit variant property" />
</figure>
<h5>Order properties and values</h5>
<ul>
<li><strong>Properties:</strong> In the Design tab, drag a property by its handle to move it up or down.</li>
<li><strong>Values:</strong> The values dropdown follows the order of the variants in the Layers panel, from top to bottom. Each value appears where the first variant that uses it sits. To change the order, reorder the variants in the Layers panel. Empty values always go last.</li>
</ul>
<p class="advice">The variant order applies to all properties at once, so you may not be able to set the value order you want for two properties at the same time.</p>
<h5>Delete properties</h5>
<ul>
<li><strong>From the Design tab:</strong> Select the main component (not an individual variant) and press the minus button next to the property.</li>