Hi All, I'm trying to create this. Do I create it as a layer and populate and duplicate via info in an array? If this is not the best way suggestions are welcome.
Have you seen Sergey Voronov's write up: https://blog.framer.com/reusable-components-from-design-mode-in-framer-6fce6bf4bcdd
one caveat about Layer.copy() is that the event listeners are NOT copied... https://framer.com/docs/#layer.copy
Honestly, if you're more comfortable creating the layers in the Design tab I would keep doing that.
When you go to the Code tab you would make copies and position them as described in the post. Additionally, since you have children and siblings within your card you will need to use the selector methods (Also as described in the reusable components post)
For the events... You will need to wire each component to the appropriate "on" events layer.onClick and otherwise... My recommendation for the events is to code them in functions so that the wiring is consistent and a simple one liner.
I made a very small example that creates a circle with a border in design... then copies that 3 times, the first simply having color and changing opacity onClick... the second with a background image that starts at opacity 50%, which also goes to 100 onClick... and the third with is 100% opacity but changes to a randomColor onClick.
You can find the example here: https://framer.cloud/ikLWy
Or use this module, which should be the perfect fit for this use-case: https://github.com/der-lukas/framer-Symbols
I thought about recommending the Symbols... But thought it might be too much magic just yet... :)
I was thinking Start with design + copy, then jump into the next optimization. Hehe
There you go Kevin: https://framer.cloud/ilNPm
As I said, this was created with the "Symbols"-Module, which is not necessary - you can also do it with the techniques mentioned in the article Alan posted before - but the module gives you more power over the different states and events of your layers!