Expandable Card Design System
Challenge
Build a list of elements with expandable cards that open to the same screen position regardless of touch point
I've always found it annoying when I have a list I'm scrolling, I tap the element and it opens in various locations (Based on touch point). I wanted to design something that when clicked, would always present in the same spot.
Clickable
Prototype
Step 1:
Building Scalable Components
I chose to also work on my Design System skills, including the use of Component Properties in Figma. I focused the project around MLB Scores and Teams since that gave me lots of data and logos to work with.
Step 2:
Designing the Auto-Layout
The core component to making this work was setting an Auto-Layout with all 15 games as my home screen. Since each Scorecard had a "Collapsed" and "Expanded" variant, I could just toggle them as I built out the screens.
Step 3:
Prototyping
Once my home screen was designed, auto-layout added, and with all the properties in place. The next step was, well, step and repeat! The core connections were ensuring that each screen led home if it was being collapsed, or led to the corresponding screen if it was being expanded. Aka, lots of connection points.
Roadblocks
One issue I ran into was having the vertical scroll work with elements above the top of the screen. I solved this by adding a blank frame above that acted as a trick for Figma to think there was something to overscroll too. I adjusted by a set amount as I went along to create the same height each time.
Conclusion
Overall this was a fun, 2-day project. A lot of time spent was in the intial stages. Building out the components, gathering assets, and creating all the properties and ensuring they worked.
​
By doing all that tedious work up-front, I was able to move quickly on the backend and alleviate any inefficient work with changing scores, team names, logos, etc.