Guesstimate: the % of time you spend actually designing or product managing / (divided by) % of time trying to get Figma to work

Seems like a learning curve issue to me mate. I’d do it a bit differently for your specific example with the “Bullet_Row” thing. For me, it seems like a very common UI pattern. It’s a text label accompanied by either leading or/and trailing icons. And you want to be able to resize icons with little to no effort. I would use a few key ingredients here.

  1. Icon image component, you can use whatever imagery you have, just make sure it does scale properly when you resize it.
  2. Size token component that sets a scale ramp for your icons, bullets whatever.

Size token is a key here.

I made a simple rect and set its size with a variable, you can “hardcode” it though. Then I wrap it with Auto Layout frame that hugs the sizing element. This is important because only auto-sized elements will be able to change their size when you swap instances. Repeat multiple times for multiple sizes you want to support.

Here is what I got for my needs

Then I combine an icon with the size token into a generic icon component with two properties.

image

As you can see the size of the component is set with size token. The image is sitting in absolute positioned frame that grows/shrinks with the main component.

image

I use the icon property to swap the image and the size property to swap the size token.

Finally, I combined the generic icon component with a text layer to make a text label component

Here is how it works

1 Like