Nested flexible design for symbols

Feature Requests
1
  1. What do you want to see in Hype?

Please extend the flexible design to Symbols. This would be a nested behavior behind a checkbox like "enable flexible Symbol". The width and height of the Symbol would then drive the flexible design instead of the Hype document's width and height. Like a nested Hype document.

CleanShot 2022-05-27 at 07.34.20

CleanShot 2022-05-27 at 07.35.24

  1. Have you found a workaround for this problem?

Sort of… I force (!important) and calc width in a symbol using CSS.

  1. Are there examples of other apps with this feature? Or, have you seen examples of this elsewhere on the web? (Please include a URL)

Flexbox or Grid CSS

  1. How high of a priority is this for you?

[ x ] Nice to Have
[ x ] Important
[ ] Can't use Hype without it

2 Likes
2

Thanks for the request and the mockup!

I'm a little uncertain on a couple points, which will help me prioritize:

  • Do you mean for this to be editor only behavior, or you want it to also be in exports? (like when animating width/height)

  • If in exports, what are the real world use cases where you need this? (vs. say just animating the scale width/height)

Thanks!

1 Like
3

Sure also in exports and as this would change existing behavior it would be gated behind a checkbox. It would then be active also on fixed width Hype exports as it would orient itself on the bounding box of the symbol and not the Hype document.

I use Symbols as instances all the time (for tool tips or cards etc). Then I change the text in certain places in these instances in them reassigning inner HTML of some elements, but I have all the animations from the single instance in Hype. Mighty and convenient. Specially when I create the responsive version of my layouts or need different sizes, this currently can only be achieved with CSS and !important on width and is limited. Also, not every responsive version can be tweaked with scale alone.

CleanShot 2022-05-27 at 21.48.33

FeatureRequest-FlexibleLayoutForSymbols.hype.zip (54,3 KB)

1 Like
4

Yeah - it would definitely be checkbox-based, and probably a new setting for all groups (of which symbol elements qualify).

Ah yeah text is a good example. Thanks!

1 Like