Building with AI

Figma Make gets backend power with Supabase integration

Supabase is a ready-to-use, open-source backend that handles data storage, user accounts, file uploads, and lightweight server logic. It's becoming increasingly popular to use Supabase with vibe coding tools to add functionality that requires storing and managing data (for example, creating a to-do app that actually saves the to-dos!).

The good news is that Figma Make now integrates with Supabase, enabling Figma Make to create much more fully functional prototypes. With Supabase you can:

• Maintain the state of an app across different browsers

• Create working authentication flows (logins)

• Store data entered into forms

• Store API keys and tokens for making requests to servers

The fine folks at Figma have a great Figma Learn article to step you through the process of using Supabase with Figma Make.

Add a backend to a functional prototype or web app
☕ Medium Read (7 minutes) | 💡Bookmark for reference

AI and the Design Process

A compelling vision of the design future with AI

As I read what designers are writing about AI and its impacts, the fears that are sometimes expressed are understandable, but there is also excitement for what lies ahead:

"It’s not that AI is replacing us. Rather, it allows us to design more thoughtfully. A well-equipped product designer — or product manager — can now move from problem to prototype to validated solution faster, not because they work harder — but because the environment finally allows them to work smarter...The point is this: change is happening. And the better we understand it, the better we can shape what comes next." - Ludēk Cernocký

In his article, Ludēk lays out key elements of this future:

• Smaller, more effective product development teams, with the removal of noise, overhead, and unnecessary hand-offs

• "Full stack" designers who can cover a broader range of product development activities, not to replace other roles, but to reduce friction and keep momentum

• The increased importance of creativity, visual identity, and craft for differentiation

I love how Ludēk frames the idea of the full stack designer as returning to the early days of digital design, when we necessarily "did it all." Though this time we are doing it with better tools (and hopefully more mature design judgment)!

He wraps up with six actionable ways designers can prepare for the future ahead. Designer friends, I consider this article a must-read.

The shape of design to come
☕ Medium Read (10 minutes)

AI for Research

A research nerd's guide to AI-assisted personas and journey maps

In her talk at UXPA Boston, Kyle Soucy, a self-described "research nerd" who was initially skeptical of AI in UX research, shares a practical approach to using generative AI for creating personas and journey maps.

Key to the approach: AI shouldn't fabricate personas from thin air but instead act as your creative writing assistant, transforming your research data into polished deliverables.

Kyle demonstrates specific prompts for both proto-personas (assumption-based) and research-based personas, emphasizing that while AI excels at synthesizing information and crafting narratives, researchers must still do the heavy lifting of validating accuracy and deciding what elements to include. The talk includes excellent examples of prompts, as well as tips on data privacy, avoiding bias amplification, and maintaining research rigor.

Using AI to streamline persona and journey map creation
Watch Time: 42:40

Building with AI

From Figma to code in 30 seconds: the design system structure that makes it work

Are you wondering how to convert your Figma Design components into fully functional, coded components?

Angel Sole, writing at Neural Covenant, shares his experience doing exactly that:

"Last week, I watched an AI tool generate a perfectly responsive React component from a Figma design in under 30 seconds. But here’s the kicker: it wasn’t magic. The secret was in how the design system was structured from the beginning. After diving deep into this rabbit hole, experimenting with various tools, and yes, making plenty of mistakes, I’ve discovered that making your Figma design system AI-friendly requires rethinking almost everything. The good news? The payoff is massive—we’re talking 60-80% reduction in design-to-code time."

Angel goes on to explain the three foundational pillars that make this happen:

• Semantic component structuring with auto-layout

• Comprehensive token systems with AI-parseable JSON formats

• MCP (Model Context Protocol) integration for seamless AI access to design data

His article includes optimal component naming conventions, proven tools, and pitfalls to avoid.

Creating AI-optimized Figma design systems for Cursor AI, MCP, and Claude
☕ Medium Read (8 minutes) | 💡Bookmark for reference

That’s it for this week.

Thanks for reading, and see you next Wednesday with more curated AI/UX news and insights. 👋

All the best, Heidi