Set of problems:
- components need to be the right size relative to each other → I often found myself saying: „Damn I made that component too small, now I need to resize it, so this other component inside it has enough space”
- a component might need a different size in a different context (can of course be solved with variants)
- the size of a container of a component or a list of components may vary (dynamically) based on screen size and and you want the children to adjust
Idea:
put a factor on it
Personal solution:
I’m passing down the ideal factor that I have determined in the parent component
(eg. like this:
let rect = useElementSize(contentRef)
<ParentComponent sizeFactor={Math.round(rect?.width) / baseWidth} />
and set the fontSize like this:
<ChildComponent root={{ref, style: {fontSize: calc(${sizeFactor}*16px)}}} />
And when the ChildComponent uses em values exclusively, the entire component will scale.
Resulting problems:
-when the ChildComponent has it’s own sub-components with em values, they will continue using 16px as their fontSize. So they wont scale unless they also get a factor passed down.
-takes some effort to convert every px value to em
While my personal solution is working for the most part(sourceButton… 
), it requires some explanation and I’m pondering if it might be useful to introduce an optional universal prop for every component named sizeFactor.
Who’s default value is set inside the Plasmic UI (can also inherit). And can be manually set in code for dynamic use cases (eg. I want three columns of so I’m giving each a factor of ((containerWidth-gaps) / 3 )/defaultCardSize so they resize and fit in there without too-large gaps or disproportional resizing).
If I’m allowed to dream, in the long run I’d like to see resizing like in Figma with the K button activated to resize everything within the thing you’re resizing. But I guess the prerequisite ability to edit multiple elements simultaneously is among the more daunting features on your roadmap 
.