Liam Sheppard
LightNews LightNews
limsipix.bsky.social
Liam Sheppard
@limsipix.bsky.social
420 followers 430 following 7 posts
Design @ Microsoft Clipchamp
Posts Replies Media Videos
limsipix.bsky.social
I think an approach similar to nested instances could work great here, so I've added a proposal based off that existing UX (3/3)
UI flow diagram for a proposed new UX. The first item shows the current Figma UI for adding component properties. The second item shows an addition to this UI, adding 'Expose variable modes' as an option to the existing dropdown. The third item shows a new UI where the user can select which variable mode they want to expose in this component. 'Button shape' is selected. The final item shows the component settings UI from the previous tweet, with an additional dropdown for 'Button shape'.
January 2, 2025 at 2:08 AM
limsipix.bsky.social
Right now, Variable modes add an extra layer of confusion to components, as they're set in two different places. This is worse when clicking "Simplify instances" which hides variable modes entirely. (2/3)
Two examples of the Figma component UI. In the first example, with 'Simplify all instances' turned off, component properties are at the top and variable settings are in a different section. There is a 'Button shape' dropdown here with an annotation stating 'This is essentially a component variant but it's in a completely different spot.' In the second example, with 'Simplify all instances' turned on, component properties remain at the top, but the 'Button shape' dropdown is hidden. A 'Show more properties' button is present with an annotation stating 'No easy/visible way to change the variable, easy to miss.
January 2, 2025 at 2:08 AM