Liam Sheppard's Avatar

Liam Sheppard

@limsipix.bsky.social

Design @ Microsoft Clipchamp

508 Followers  |  430 Following  |  7 Posts  |  Joined: 25.01.2024
Posts Following

Posts by Liam Sheppard (@limsipix.bsky.social)

For me it’s definitely been a helpful skill, it makes working with engineers much easier and can sometimes give you more control over delivery.

But I still don’t think ALL designers should code, but I think at least one designer on a design team should code.

09.01.2025 22:56 β€” πŸ‘ 2    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
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'.

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'.

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)

02.01.2025 02:08 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
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.

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.

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)

02.01.2025 02:08 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 1    πŸ“Œ 0

Hi @rog.ie / anyone at @figma.com

Is it likely that Variables will be more integrated into the Component experience? (1/3)

02.01.2025 02:08 β€” πŸ‘ 2    πŸ” 0    πŸ’¬ 1    πŸ“Œ 0

Looks nice!

I’m not sure if the dashed area needs a drop shadow

If you definitely want a shadow though for the drop zone, I wonder if an inset drop shadow might be nicer? More like a container you’re dropping things into

03.12.2024 12:55 β€” πŸ‘ 1    πŸ” 0    πŸ’¬ 1    πŸ“Œ 0

The pastels are nice, slick site πŸ‘

03.12.2024 12:49 β€” πŸ‘ 1    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0

I’ve followed everyone here! Would love to be added too 🀝

19.11.2024 14:35 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0