Hi Figma community,
I’m building a card-style button component for a web/mobile prototype with:
-
Background fill (image)
-
Icon + text stacked vertically above the background
-
Hover state with background change and Smart Animate
Problem:
- Unsure if my Default + Hover frames are structured correctly
- Hover animation on 'Delivery' catches the animation on 'Catering'
- Auto Layout keeps forcing itself on the outer frame
- Adjusting frame size breaks layout
- Hover animation doesn’t trigger correctly on ‘Carryout’ (this is broken with me trying to fix it)
- The Carryout icon component currently does not match the intended structure
Intended structure for the other cards:
Card Frame (background fill) └─ Content Frame ├─ Icon └─ Text
I want to make sure all card-style components follow this structure so hover, animation, and resizing behave predictably when reused. I’ve probably have spend 30+ hours trying to figure this out, and I’ve realized I’ve hit a brick wall.
Here’s my live desktop doc with instances so you can inspect everything:
Desktop Layout Figma Link
I have been trying to recreate this in Figma to learn the program more thoroughly: Anaheim Cookie Plug
Thanks in advance for any advice on properly structuring the components and hover variants. This girl needs help, and I’d also pay to learn! 😓
Jenn