MaxZieb
November 22, 2019, 12:16am
1
Stacked cards using symbols and a sorting function. This is still not a extension but already has the potential for some fun stuff. Doesn’t need to have visible boxes for example or could have a diffrent stacking logic.
Demo: StackedCardsSymbols.html
Download: StackedCardsSymbols.hype.zip
8 Likes
MaxZieb
December 10, 2019, 2:37pm
2
I am converting this into an extension here is a sneak peak:https://forums.tumult.com/uploads/db2156/original/3X/5/4/540e6669215bf0d666572c4338ceb6b24dacf93b.mp4
Works…
horizontal and vertical and can be nested
with symbols, elements (div) and groups
3 Likes
MaxZieb
December 10, 2019, 4:19pm
4
There is an extension for this now also supporting vertical layouts and nesting. Have a look:
[HypeDocumentLoader]
This little extension was initially more primitive and inspired by the following thread . It then turned into a template and now it has become a full extension after reading an article on the Figma auto layout feature.
This extension helps with positioning elements using a stacking order. It should be assigned to a group using data-auto-layout using the value vertical or horizontal. You can use the data-auto-layout-margin to set the margin between elements. This extension …
2 Likes
nice template! thanks for sharing @MaxZieb
Olav
June 5, 2020, 9:48am
6
I love this template!
Is there a way to let the opened card automatically collaps again when another card is clicked?
Thanks!
Olav
MaxZieb
June 5, 2020, 10:19am
7
This script doesn't manage your symbols other than monitoring the dimensions and repositioning the others in a group. So, this means you are in charge of animating open and close behavior by animating the cards. You could use custom behavior to run a close timeline on all symbols listening to the behavior and then run a timeline to expand the currently clicked symbol.
There is a new version here:
[HypeDocumentLoader]
This little extension was initially more primitive and inspired by the following thread . It then turned into a template and now it has become a full extension after reading an article on the Figma auto layout feature.
This extension helps with positioning elements using a stacking order. It should be assigned to a group using data-auto-layout using the value vertical or horizontal. You can use the data-auto-layout-margin to set the margin between elements. This extension …
Olav
June 5, 2020, 10:32am
8
Ok thanks, I’ll check it out to see if I can figure this out.
Cheers, Olav
