Project Overview
Experimenting with AI in real design work
I took part in a 2-day design workshop organized by Figmaistor, where we experimented with new AI tools to see how they can make UX prototyping faster and more flexible.
Instead of focusing on classic UX deliverables, this case study shows how I used AI to move from a basic starting point to a fully functional prototype in just two days, and what this approach makes possible compared to traditional Figma prototyping.
Context & Task
Designing a "FigJam for ChatGPT" experience
We were asked to rethink ChatGPT’s Canvas feature and turn it into a large, flexible board that offers a better user experience than a linear chat, where users can easily get lost in long conversation threads or large blocks of text.
The goal was to design something closer to "FigJam for ChatGPT": an infinite space where AI-generated content lives in cards that can be created, moved, edited, grouped, and updated over time.
The research and problem framing were already defined, so the focus was entirely on concept creation and prototyping, not discovery.
As a starting point, we were provided with a basic screen showing ChatGPT’s default layout, which served as the foundation for exploring how the Canvas experience could evolve.
Working with Figma Make
Adopting AI-powered prototyping
Using Figma Make shifts the focus away from design screens and toward real interaction and behavior.
It is an AI-powered prototyping tool that lets designers describe interactions and behaviors in natural language and turn them into working prototypes.
Compared to traditional Figma prototyping, it dramatically reduces the time needed to build realistic prototypes and makes it possible to simulate complex interactions that were previously very hard or impossible to achieve.
Instead of manually wiring screens and transitions, it gives the freedom to focus more on logic, states, and how a product actually behaves.
Prototyping through prompting
How the prototype evolved
Most of the work happened through prompting and iteration. In fact, the whole prototype took around 250 prompts.
Rather than designing everything upfront, I built the prototype progressively, adding layers of behavior step by step. Each stage made the system more usable and more realistic.
Canvas foundations
Infinite board setup, panning with mouse and keyboard, zoom controls, and basic navigation.
Canvas zooming and panning.
Empty states
Clear starting states for both the canvas and individual cards to guide first-time use.
Empty states of the canvas and the cards.
Card behavior and constraints
Creating, editing, resizing, and freely moving cards across the canvas, while defining limits for size and truncation.
Card creation, resizing and moving.
Advanced card actions
Text formatting, deleting cards, and controlling card order (front and back).
Formatting, ordering and deletion.
Content types
Support for different card content such as text, images, and code snippets.
Creating a multi-content card.
Focus and ergonomics
A full-screen card mode to make writing and editing large amounts of content more comfortable.
A card in full-screen mode.
Chat to canvas interactions
Simulating how prompts in the chat could update a single card or generate multiple cards on the canvas. For better real-world simulations, loading times have also been simulated.
Card generation through prompting simulation.
Layout exploration
Docked and floating chat modes to offer alternatives between chat-focused and canvas-focused views. Floating mode frees up screen space and better supports large canvases.
Docked vs. floating chat bar.
Early collaboration tool
Commenting on cards as a foundation for future collaboration features.
Comment functionality.
Full Prototype Showcase
Preview the prototype in action and see how these behaviors come together by watching the video below.
Why Figma Make made a difference
Faster prototyping, deeper interaction
Two things stood out while working with Figma Make.
First, it saved a huge amount of time. Building a prototype with this level of interaction would normally take at least a week in traditional Figma prototyping. Here, it took two days.
Second, it allowed interactions that are extremely hard or impossible to simulate with standard Figma tools, such as free canvas panning, complex card behaviors, and system-like states.
Pixel-perfect screens
Visual refinement alongside functional prototyping
Because the workshop was limited to two days, the priority was to go deep on Figma Make and fully understand what the AI-powered prototyping tool makes possible. The focus was deliberately on behavior, interactions, and system logic, even if the prototype itself was not visually polished.
After completing the functional prototype, I also created several pixel-perfect screens in Figma to show how the interface could look once refined visually. In a real-world workflow, combining pixel-perfect design with AI-powered prototyping tools like Figma Make allows visual quality and realistic interaction to evolve together.
Final outcome and learnings
A new way of thinking about prototyping
This project changed how I think about prototyping. AI tools like Figma Make make it possible to communicate complex ideas much more clearly to stakeholders and developers, faster and with fewer compromises.
This feels like a glimpse into the future of UX prototyping, where designers spend less time fighting tools and more time shaping how products actually work.