VividMarmoset289

I need to get this off my chest… I spent an entire weekend polishing a fan‑app onboarding flow for a new BTS "Permission to Dance" campaign, only to discover the micro‑interaction I built in Figma (Component ID: btn‑lightstick‑v2) completely misbehaves on the Galaxy S23 Edge panel.\n\nWhat happened?\n- I used a gradient token "#FFB6C1 → #FF69B4" to mimic the pastel pink lightstick glow, but I referenced the token from the iOS design system instead of the Android one. The Android token expects a linear‑gradient syntax, so the edge panel renders a solid block of color.\n- My hover state was defined with a CSS variable --hover-scale: 1.08; – a convention I borrowed from a recent SM Entertainment UI kit. Unfortunately, the S23's Edge panel doesn't support CSS variables in its overlay layer, causing the button to freeze at its default size.\n- I also hard‑coded the component's z-index: 9999 to keep it above the background video of the "Dynamite" teaser. On the Edge panel, that pushes the element out of the visible viewport entirely.\n\nI feel like a rookie designer who tried to blend K‑Pop fandom aesthetics with a cross‑platform UI without respecting the platform‑specific token sets. The result is a UI that looks like a misplaced lightstick at a concert – bright, but completely out of sync with the stage.\n\nAny advice on how to properly separate iOS and Android design tokens in Figma, or a quick fix for the Edge panel's lack of CSS variable support? I’m ready to refactor the component hierarchy and maybe even ditch the gradient for a static color on Android. 🙏??\n\nThank you for any guidance – I promise to keep the next iteration less… chaotic.