Thanks for the kick in the butt on clarifying this process in the docs Iāve added some more detail in there but essentially, the migration algorithm is creating a page thats a column of row containers. This maintains the legacy behavior of height growing to fit dynamic or re-sizing content while wrapping elements that are on the same row. In the legacy responsive, we created row containers behind the scenes by aggressive implicit grouping. These are now explicit and even better, controlled by the user. The algorithm also maintains alignment, hiding, and collapsing settings as well.
There have been a few reports of wonkiness in apps with a lot of popups (currently chasing this down) but other users with complex apps have also reported a pretty seamless migration. The best way to find out for sure is to give it a try. When you upgrade a page, there is the option (selected by default) to create a copy of the page pre-upgrade. If the migrated page is a nightmare, youāll always have this as a backup
It would be great to hear from vendors like Airdev Canvas @AirDev whether and how they are going to upgrade their framework for new engine and Chrome Extensions builders like @gregjohnkeegan aka Frames on how these extensions compare to the new engine.
There is bug with reusable element visibility during animation Slide[Side]Big[In/Out] with new responsive. If element on old responsive them works well. Bug appears in Microsoft Edge in Google Chrome everything works well.
To reproduse you can make steps bellow:
Create FIRST reusable leave it old responsive, background = None, put some text in reusable
Create SECOND reusable upgrade it to new responsive, background = None, put some text in reusable
Create page, upgrade it to new responsive
Create group CONTAINER, set it ot āAlign to parent modeā
Put FIRST and SECOND reusables in CONTAINER and set them align to top-left corner
Set SECOND is not visible on load
Make button SHOW_FIRST, set workflow for it - When button clicked ā Animate SECOND(SlideBigRightOut)->Animate FIRST(SlideBigLeftIn)->Wait For(5000 ms)->Hide(SECOND)
Make button SHOW_SECOND, set workflow for it - When button clicked ā Animate FIRST(SlideBigRightOut)->Animate SECOND(SlideBigLeftIn)->Wait For(5000 ms)->Hide(FIRST)
Click SHOW_SECOND, you will see that FIRST is transparent after about 500ms and parrallel same time SECOND is opaque. Its normal behaviour as it work in old engine
Click SHOW_FIRST, you will see that FIRST not start to showng before action Hide not executed on SECOND, and just after this FIRST start animation.
This bug just appear in Microsoft Edge, Google Chorome work well, another browsers not tested
@nick.carroll One thing Iāve been trying to figure out that seems like it might be impossible to do without code right now is having both a dynamic number of rows and columns for repeating groups. Trying to design something that looks like this:
I think what Iām looking for is an overflow: wrap property instead of scroll. When I uncheck both fixed number of columns and fixed number of rows on my repeating group, though, some strange stuff seems to happen (I can send a video of this if it helps). Donāt know if Iām missing something obvious.
What the new engine solves way better is adding more rows and columns to a RG. However, it seems columns will take the width of the widest element, same as the height of rows.
@nick.carroll can there be a feature added to allow the margins to be dynamic?
I know we already have an ability to set a margin property to be a different set value in the conditional tabs, which is great, but that is still just allowing us to say go from 20px to 10px in one fell swoop.
Would be great to set the margin to be dynamic to say it is originally 20px and it will incrementally be contracting from 20, to 19, to 18 and so on, so that it moves and shrinks the same way normal elements would.
Also, in terms of the properties to change on our conditionals, it would be optimal to have access to all of the formatting options. As of right now, the only Layout properties we can change conditionally are the margins. It would be very useful to have access to all of the layout properties from the conditionalsā¦having access to them will enable us to create layouts that donāt require āduplicatedā elements when the alignments need to be adjusted.
One use case is that in the past we needed custom code to alter the default behavior of a container moving to the next line if it was on the right and had another container to itās left. The custom code allowed us to make it so the right container was stacked above the left container rather than the default of the right being underneath the left. This was especially useful when there was a set of icons on the right that when page resized it was pushed underneath and inaccessible, so the custom code allowed it to go to the top and remain accessible.
Another use case is not duplicating content. A recent video demonstrating a messaging system when we need right alignment for messages from the current user and left alignment for messages from the other conversation participants. The only way at this point would be to duplicate the content, set visibility conditionals and collapse height and have the two containers stacked on top of each other within the repeating group. If we could conditionally change the alignments we could achieve the setup with a single set of elements.
@nick.carroll Itās awesome to see that we can align vertically and use percentages, but will the new responsive engine support view height (vh) anytime soon?
THIS!! Group Focus is broken >.< Though I just used a regular group and set relative to parent group. Kinda gave the same result without the automatic closing when clicking outside the group.
Yes!!! Migration is a nightmare. The best thing to do is build again from zero, coping and pasting the elements and groups from the old version into the new one
Will the figma autolayout function also be integrated with bubble? They look so similar and this can be huge for bubble to focus in the userbase of figma hereā¦
The import is already there so do you guys have plans on this?
Iāve added some more detail in there but essentially, the migration algorithm is creating a page thats a column of row containers. This maintains the legacy behavior of height growing to fit dynamic or re-sizing content while wrapping elements that are on the same row. In the legacy responsive, we created row containers behind the scenes by aggressive implicit grouping. These are now explicit and even better, controlled by the user. The algorithm also maintains alignment, hiding, and collapsing settings as well.
