Las Vegas Slots Online

Project Overview

The design team was using Sketch, which had become difficult to scale as the product grew. Some pain points included:

• Hard to maintain consistency across components (buttons, cards, modals, etc.).
• Collaboration issues: multiple designers and developers needing to access, update, and share the same libraries/design assets.
• Time-inefficiency when updating interactions and prototyping.
• Limitations in cross-platform or cross-device prototyping and version control.

They decided to migrate to Figma, to get better component reuse, easier collaboration (designers + devs), and more powerful interactive prototyping.

Scope

My goals in this migration were:

1. Recreate all interactive components from the Sketch version in Figma, preserving visual fidelity and interaction behavior.
2. Establish a component library / design system in Figma: buttons, cards, banners, modals, dropdowns, filters, toggles, etc.
3. Ensure responsiveness: components must adapt to desktop & mobile layouts.
4. Set up interactive prototyping in Figma so that flows (e.g. filtering casinos, selecting game previews, opening modals) worked identically (or as close as possible) to the old designs.
5. Facilitate easier hand-off to developers: well-organized components, documentation of states, variants, and interactions.

Approach/What I did

Here’s how I contributed:

• Audit & Inventory: First I made a full audit of interactive components in the Sketch files: listing every kind of UI element that had interactions (hover states, click states, modals, filters, toggles, cards, banners).
• Define Component Variants: For each component, I designed variants (e.g. button default / hover / pressed / disabled; cards with different badges or labels; modals open / closed; banners with close buttons).
• Recreate Visuals in Figma: Transferred all visual styling (fonts, colors, shadows, border radius etc.) into Figma, matching the original Sketch look. Ensured pixel fidelity, using styles for text, color, effects.
• Set Up Interactive Prototypes: For key flows (filtering games, browsing casinos, opening game cards, viewing bonus details), I created interactive prototypes using Figma’s prototyping tools (transitions, overlays, modals) so that stakeholders could test the behavior.
• Responsive / Adaptive Layouts: Designed layouts to adapt to different screen widths: particularly mobile vs desktop. Ensured components reflow, adapt (e.g. navigation menus collapse, cards adjust).
• Component Library & Documentation: Organized all components into a Figma library with naming conventions, variant usage, documented interaction details (e.g. “on hover: change background color”, “on click: open modal overlay”). Also documented how developers should implement them.
• Collaboration & Feedback Loop: Collaborated with other designers & front-end developers for review cycles: checking that interaction behavior is feasible, styling matches, performance is reasonable.

Lessons Learned / Challenges

• Some interaction behaviors in Sketch (especially custom transitions) were not exactly replicable in Figma, so we had to compromise or find creative alternatives.
• Keeping responsiveness in mind from the start is crucial; otherwise components made for desktop may misbehave on mobile.
• Maintaining the component library (versioning, updates) requires discipline: every change must propagate to all variants.