Playable Frogger in Figma & Dev Mode 2.0

Figma is bluring the lines behind design and developement. In the rapidly evolving landscape of design and technology, a constant challenge faced by both designers and developers revolves around bridging the gap between creative concepts and functional code. This dilemma, often referred to as the dreaded handoff, has forever had designers and developers butting heads. However, Figma’s innovative Dev Mode marks a significant first step beyond conventional inspect-and-handoff practices. While the future of design-to-code solutions is promising, there’s still a ways to go before we can get to the promise of true automation. There’s significant challenges to go from code snippets to something more meaningful and useful. Translating complex interactive designs that work with your tech stack is no easy task. At Quest AI, that’s the task we’ve set as our north star.

The drive behind developing the playable Frog Jumper game prototype was twofold: to push the boundaries of Figma’s capabilities and to provide a complex case study for the ongoing enhancement of our no-code platform, Quest. Beyond a mere experiment, the project was a deliberate attempt to test the limits of Figma’s potential, unraveling the extent to which intricate interactions, advanced prototyping and clever components could be woven into a functional experience. The prototype stands as a testament to the ever-expanding horizons of design possibilities within Figma’s environment, offering a glimpse into the potential of crafting full-fledged experiences using the platform’s advanced features. This endeavor also plays a pivotal role in our own development of Quest, as the complexity of the Frogger game acts as the baseline for refining the capabilities of our no-code platform. This dual-purpose project underscores the significance of stretching the boundaries of design tools like Figma, not only for experimentation but also as a catalyst for innovation.

Play the Game

You can play the Frog Jumper game here.
Start the game by entering Present mode.

The Setup

For the project feel like a game, specific elements were essential. It needed have both a win and lose state or it would feel merely like a prototype. The frog needed dynamic side-to-side moves, not just forward hops. And most of all, it needed to have collisions with the objects on screen or again, just a prototype. To top it all off, we added a timer and start screen to give it true arcade feel.

To achieve the movement of the cars, we used variables and incrementally increased their position based on time using their component variants with a delay in a loop. We used conditional logic to reset the cars’ position if they moved too far off the screen. We also used conditional logic to check for their X & Y position to see if the X & Y position (using variables) matched the frog. And again, we used the time increased with delay to decrease the timer and conditional logic to check if the timer was at 0 and to then use an overlay and display the Game Over screen. This intricate setup underscores Figma’s development potential and proves how much development can be achieved through Figma itself.

The Why

In the pursuit of crafting the playable Frogger game within Figma, we ventured beyond the conventional boundaries of prototyping and harnessed the platform’s advanced features in a novel way. By integrating unique conditional logic alongside variables — mirroring techniques akin to Unity game development — I introduced a dynamic layer to the experience. This innovative approach not only pushed Figma’s capabilities but also hinted at its untapped potential as a more robust design-to-code solution. While this Frogger style game serves as a foundation for more intricate endeavors, it’s worth recognizing that the current Dev Mode offers a glimpse but not the full brilliance of these advancements. To truly harness the potential of variables and conditional logic, a more comprehensive and thoughtful approach is required — one that constructs entire applications and visualizes the entire codebase and components holistically. Because we aspire to replicate the same setup for more complex applications, this Frogger prototype acts as a beacon, illuminating a path towards a more robust and interconnected design and development ecosystem. If we can make a game, why can’t we use this to develop actual applications from within Figma itself?

With our Quest plugin for Figma, we’re reshaping how designs become code. Inspired by the prototyping features we used in the Frog Jumper game, we’re driven to evolve what code gen is capable of. With Quest, we allow exporting whole apps or pushing them to GitHub, enabling a comprehensive “app gen.” In this journey, Quest transcends code to provide a seamless design-to-code ecosystem, revolutionizing the way designers and developers collaborate.

Dev Mode 2.0

We believe as Dev Mode evolves into 2.0, we’ll start to see these complex interactions and logic evolve in a way where code gen can become app gen. The very idea of styles and their replacement with variables is rooted in the concept of global / theme level settings that apply to an application, not simply existing in quick, disposable code generated snippets. As Figma continues to push the boundaries on design systems, they’ll equally push what’s possible with how that translates into code and truly allow design files to serve as the source of truth. In fact, we’re at a time where we have to question if this is even “just” design anymore when a Figma user is setting up such complex interactions and systems. At Quest, we’re all for it and embrace the idea that we can enable more users to blur the lines of what their roles should and could be.

Convert Design to Code Today

To try Quest out for yourself and to start exporting components from Figma to ReactJS components for free at: http://www.quest.ai