Code is a Design Material

A designer’s reflections from Config, and why UX fundamentals matter more than ever

A cursor filled with code points to a vector node on a grid, blending coding and design over a green and blue background.

Katie Jacquez is a Senior UX Designer working on the next generation of merchant tools and consumer experiences for the Google Store. Here, she shares her perspective on how AI is supercharging the design process and the continued importance of fundamental thoughtwork and craft.

At Config (Figma’s annual design conference) this year, the floor was buzzing with shiny new features. Figma Motion is making animation easier than ever, and shaders are giving us unprecedented control over complex blurs, gradients, and effects. But the real headline of the conference wasn’t a specific feature. It was a paradigm shift: code is a design material.

This concept goes against what the majority of designers have practiced for decades. We’ve traditionally treated code as the finish line — an end state primarily owned and maintained by engineering. In the classic product lifecycle, designers push pixels in Figma, hand off the file, and engineers translate those static mocks into code. But now, AI has democratized code.

What previously felt gate kept is now accessible—if you can dream it, you can build it. Want a custom Figma plugin? You can make it yourself using Generative Plugins. Want to create art with code? I watched a creator live-code music and visuals on stage in front of 10,000 people. With several talks collapsing the distance between mathematical concepts like Bézier curves and design, it’s not hard to imagine a world where many designers become design engineers.

A presenter stands on a dark stage in front of a large presentation screen. The top of the screen displays the mathematical equations for infinite Taylor series expansions in clean, color-coded text.

Grant Sanderson’s session, Designing Math, was one of many talks at the intersection of math and design.

Source: Designing Math

A wide shot of a large, dimly lit presentation stage. Two performers stand behind a white, textured booth, working on a laptop and musical equipment. Above and behind them, a massive screen displays complex, glowing blue fractal patterns overlaid with lines of code.

Watching Switch Angel live-code music and visuals on stage in front of 10,000 people made me wonder… “could I do that too?”

Source: Patterns for restraining the world

We’re moving toward a fluid, back-and-forth ecosystem where you design in Figma, bring to life and modify directly via vibe-coding tools, and sync it right back to the design canvas. In my day-to-day work at Google, I’m already experiencing this shift. I use AI tools to produce research guides, synthesize findings, draft decks, generate early concepts, prototype, and make iterations.

When code becomes a design material, the friction of execution is eased dramatically. But in product design, we need to ensure that reduced friction doesn’t translate to a lack of thoughtful strategy.

A Double Diamond product design diagram titled "DESIGN X CODE AFTER AI." It maps various AI design, synthesis, and "vibe coding" tools (such as Gemini, NotebookLM, Figma, and prototype generators) across the Discover, Define, Develop, and Deliver phases, showing how code is now integrated throughout the entire creative process rather than just at the final hand-off.

Previously, code was a static destination at the end of a one-way handoff. With an AI-integrated workflow, the lines are now blurring between Figma and code across discovery, ideation, and delivery.

The danger of perfecting too early

AI-driven tools grant us an undeniable superpower: the ability to spin up high-fidelity prototypes faster than we could previously imagine. These can align product development teams and expose tricky edge cases or workflow gaps that you wouldn’t have uncovered until later in the design process.

On a recent project building an internal tool for the Google store, I used AI to generate an early prototype, which was exactly what we needed to align on the core workflow, draft the PRD, and shape our product strategy.

While vibe coding high-fidelity mocks helped in this case, this approach can also create a false sense of security. Since the concepts look and feel complete, they can lead teams to commit to a specific direction too soon. As designer Catt Small noted in her Config session: “Speed without direction will lead you down a dead end.”

In this case, the high-fidelity concept I made successfully aligned us on the initial workflow. But as the project evolved, we had to support a secondary workflow: a deeper, multi-state approval process we hadn’t considered thoroughly enough. While our early prototype was effective for the first phase, continuing to use high-fidelity mocks to solve this new challenge only generated friction. The conversation kept getting pulled into fine details such as copy, rather than the underlying architecture. Before AI, designers could get trapped by polishing static Figma mocks too early; Today designers risk getting trapped by “vibe coding” a highly polished, interactive prototype before the fundamental questions are actually solved.

To bridge this gap, we had to change our medium. I stepped away from interactive code and shifted gears, mapping out the whole picture using low-fidelity block models, an information architecture map, and abstracted system diagrams. By stripping away the polished UI, the team was able to focus on the foundational structure. The high-fidelity prototype got us off the ground, but returning to the low-fidelity fundamentals ultimately allowed us to scale the system.

A low-fidelity block model and system mapping diagram. It traces the logic flow of "Values" on the left as they split into "standard placements" and "merchandising placements" in the center, which then branch out further to define six distinct, color-coded placement destinations on the right.

Stripping away the high-fidelity UI allowed us to map the system's core logic, with a simple, low-fidelity block diagram tracing how values branch into standard vs. merchandising placements.

Why thoughtwork still matters

This is the core tension of the AI era: raw generation is not the same as design strategy. To build the right thing for the right people, you still need the underlying thoughtwork.

To use an architectural metaphor, AI can easily construct a wing of a house. But the building materials, style, and layout may not match the rest of the home, the needs of the habitants, or its environment. It could build a wing made of heavy, uninsulated concrete blocks for a historic seaside cottage, ignoring the salty air that degrades the material, the structural load of the existing foundation, and the aesthetic history of the home.

When we see a high-fidelity screen generated in seconds, we might mistake this visual completeness for structural integrity. It’s easy to assume AI thought through the architecture and work flows. But behind the facade, it can harbor a broken interaction model, or worse, an experience that completely misses the user’s core pain point.

AI can give you the bricks, and it can lay them down at lightning speed. But it still doesn’t know why you are building the house in the first place. That’s where the tactile, deliberate act of making becomes our greatest asset. Psychologists call this embodied cognition — the idea that our brains don’t just tell our hands what to do, but that our hands actively help our brains think. When you sketch out a concept by hand (or a design canvas), you are forced to deeply think through the problem. As Anni Albers, one of the most important textile artists and designers of the 20th century, said: “We must come down to earth again, from the clouds of our theories and our speculations, and touch the material from which things are made… we learn through our hands.” If code is now a design material, how do we “touch” it and think with our hands before rushing into the next prototype?

Designers’ roles in the future of AI

Our design tools are getting remarkably smart at automating tasks with patterns and interactions that are well-known and documented, such as error states, redlining, or onboarding. But they cannot replicate human empathy, strategic context, or systemic problem-solving.

Design strategy isn’t new to our role as designers. But now, as AI handles more of the execution, we have the space (and need) to focus our energy where it’s always mattered most: on product strategy. We “touch” code not by manually typing every line, but by engaging in a fluid dance - moving from the design canvas to code and back again, using live prototypes to inform and mold our thinking in real time. When the physical act of building is no longer the bottleneck, the blueprint itself becomes infinitely more valuable. To create things that deeply meet the needs of users, we must return to these fundamentals. Leveraging AI as a partner only works if you fiercely protect your time for deep thoughtwork. Keep sketching. Keep wireframing. In an era where building anything is instantly possible, strategic thinking is our greatest asset.