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

Can you clarify how you do it? Sorry to be obtuse.

I also want to be lazy. Why do you think I do all this work to try to use components?

Do you have any specific questions? I feel like I provided fair bit of details here ➡️ Guesstimate: the % of time you spend actually designing or product managing / (divided by) % of time trying to get Figma to work - #9 by Pavel_Kiselev

What would you like to clarify?

Okay, so here’s a second much easier one to digest and potentially do something about.

I’m often needing to stretch a gradient over a series of shapes or components. Like this:

I can do this two ways. I can systematically take the start and end point for the nested shape or component, and make Styles for each. It’s really painstaking and then if you want to change the angle or points of the gradient, you then have to redo every single one. This gradient and shape combo is supposed to represent three weeks and 19 days. So, changing the “parent” gradient will then require changing 19 gradients.

That sucks, so I choose a faster route. I can create a frame the dimensions of the container of this series, and then flatten all the nested shapes… and I can fill the frame with the gradient and then use mask.

That looks cool.

But the problem is then one of further manipulation. First, I had to flatten all of the nested shapes. So, that can be limiting by itself. For instance, at certain dimensions I want to be able to change the corner radius. Second, I can’t export as an SVG and keep the mask (and more importantly neither can my engineers.).

For the record, this is what an SVG export looks like of this object:

And if I flatten, both the gradient layer and the mask layer, I lose the gradient. Here’s an attempt at me using every type of boolean operation:

@Pavel_Kiselev again, thank you for your time and thought. If you’re still paying attention, I’m not sure I can clarify but I will try.

It seems instead of trying to resize nested instances and frames and groups and autolayout containers you simply create an array of size variants upon developing the component. So, a few questions arise when I’m thinking about our workflow:

1. how do you name sizes to make sense to your remote team? Do you have a convention that works for you?

2. How do you manage ambient awareness within your team if you or someone changes a nested object? So, say the linework stroke is too big. You want to go reduce the line size. How does this change then propagate throughout your designs? If you’re not propagating changes through the Component publish and update feature, how are you making others aware and assuring org wide design standards? Or do you then change the stroke on all of your variants across all sizes?

I’m not sure if those questions are clear or not. But this is the complexity overkill that goes through my head.

This one seems easier to address 🙂

Here you go - https://www.figma.com/file/YunsCn3An0HeBnDD3xAQoD/Fixed-Background-Hack?type=design&node-id=0%3A1&mode=design&t=3I7IdxhqCx84je4K-1

And it is much much easier in CSS - https://codepen.io/oxn-krtv/pen/bGJbjWN

how do you name sizes to make sense to your remote team? Do you have a convention that works for you?

it’s all about defining some design tokens in the first place. t-shirt size, indexed whatever.
something like

and then you apply them to graphical objects to fit their size into the standard.

for dynamic nested instances, I use the technique described above

How do you manage ambient awareness within your team if you or someone changes a nested object?

it depends. if that’s a custom artwork and the way for your team to get it via export then who cares what you did to it to make it work? you just export an asset with all the amendments you made

if it is a standard graphics object, component-like and you have an instance with amendments and these amendments are envisioned in code, then you have to document it. something like “This is Image A with a thinner stroke on layer F”