AI Workflows That Shorten the Path From Idea to Product

Product teams are rethinking how they move from concept to shipped feature. Instead of a linear handoff from spec to design to code, builders are prototyping in code first, exploring dozens of variations on the canvas, and using AI agents to check work against design systems. We talked to product teams at FloQast, Merkle, Affirm, and Accor about the workflows that are reshaping their process.

Testing Complex Interactions in Code

Some interfaces can't be evaluated from a static mockup. Multi-step flows where one action triggers the next, or UIs that change behavior based on user permissions or underlying data, require real logic to assess properly. Historically, testing those constraints meant a significant developer investment before a team could commit to a direction.

AI coding tools have changed that equation. A product builder can now create a working prototype in code quickly, then bring it into Figma using Codex to Figma to see the full picture with the team. If more code work is needed, they can move back via MCP with design context intact.

FloQast's approach: FloQast builds accounting software where tasks are interdependent, records must reconcile across systems, and sign-offs depend on everything prior being reviewed. The team wanted to consolidate a workflow that forced users to jump between multiple pages just to track down a single discrepancy. They envisioned a single page where accountants could see tasks, spot what was blocked, and act without navigating away.

An early mockup looked promising, but the interconnected steps—each dependent on real data and logic—couldn't be validated from a static design. Benjamin Ellis, UX manager at FloQast, built a working prototype in an AI coding tool with a simulated backend and realistic data modeled on an actual customer's workflows. Clicking through real scenarios where completing one step triggered the next immediately revealed flows that looked sound on the surface but collapsed under real data. The team caught interaction problems a design file alone wouldn't surface, committing to a direction with fewer surprises later.

Consider this workflow when:

  • The UI behaves differently based on conditions you can't evaluate in a mockup, like permissions or multi-step dependencies
  • A fix is small enough that changing it directly in code is faster than round-tripping through design
  • A designer and developer need to scope a complex experience together, and working code makes the conversation concrete

Scaling Exploration With AI on the Canvas

Canvas-based exploration has always been part of design, but AI has expanded how far teams can push it. Figma's AI agent can generate layout variations, write realistic content, and flag gaps—all within the file, grounded in the design system. When a direction firms up, Figma Make turns it into an interactive prototype, and MCP carries context into code for production.

Merkle's wide-to-deep strategy: Easton Thomas, associate creative director of UX at Merkle, faced an information architecture challenge for a telecommunications client: reorganizing how products were displayed on the website. The existing site had limited content, making it difficult to assess whether any layout would hold up with real products on the page.

Thomas designed seven loose layout directions on the canvas, then asked Figma's AI agent to generate variations on one of them: 10, then another 10, until he'd exhausted roughly 50 combinations. He pulled the strongest ideas and continued refining with the agent, using it to write realistic placeholder copy for stakeholders, generate developer spec annotations, and review the finished work for gaps like screen reader accessibility considerations.

From there he moved into Figma Make to prototype the search page with real interactions, generating states for filtering menus and other dynamic elements, then pulled the screens back to the canvas for handoff. Production work that would have taken days took hours, and the real win was the depth of exploration: Thomas exhausted the entire option space instead of committing to one of seven layouts on faith. By the time developers saw it, the work had been through more rounds of iteration and gap-checking than would otherwise have been feasible.

Consider this workflow when:

  • You're building a new surface and need to explore many directions before committing
  • You need to generate and test multiple states and edge cases for a complex flow
  • Before developer handoff, you want detailed interactions specified within your design system

Building Conviction With a Prototype

Some ideas are too nuanced to land through a spec document or slide deck. Tools like Figma Make enable teams to build a working prototype in hours—before a single requirement is written. The prototype itself becomes the source of clarity, shaped further on the canvas, presented to stakeholders, or moved into code via MCP.

Accor's prototype-first pitch: Accor, a global hospitality group, had its design team exploring how AI could elevate the web experience for one of its luxury brands. The challenge wasn't technical—it was defining what the AI experience should actually be. A generic chatbot would undercut the brand's identity and fail its guest expectations.

Justine Grave, lead brand designer, opened Figma Make and prototyped something she wouldn't have built by hand: a webpage that reorganizes itself based on what the user types. Search "golf," and the page reshapes around properties with golf courses, curated outings, and relevant experiences. Figma Make handled the micro-interactions and transitions, while the Figma MCP server kept everything connected to the brand's design system. Within days, she had a working prototype ambitious enough to show leadership what was possible, and concrete enough to start a real conversation about what to build next. The team is now taking it to brand and marketing stakeholders—giving them something tangible to react to and align around instead of a pitch deck.

Consider this workflow when:

  • You need to align stakeholders around a vision that doesn't exist yet
  • The idea is too nuanced to communicate through a document
  • You want to test whether an idea has legs before investing significant design and engineering time

Design systems: keeping AI output on-brand

One of the fastest ways for AI-generated work to go off the rails is when it ignores the design system. Prototypes show up with generic components, and code gets written without the tokens or structure that keeps a product consistent across surfaces and platforms. Figma's answer spans both sides of the design-to-code gap.

Make kits pull a team's real components and styles into Figma Make, so prototypes generated from the first prompt already reflect the product's actual design language rather than default patterns. Make attachments go a step further, letting teams add project-specific context — data, brand guidelines, screenshots — so the output accounts for how the product really behaves in the wild.

The same logic applies when work moves from design into code. Figma argues that AI coding tools need to build from a team's actual design system, not generic best practices. Historically, that meant developers manually referenced specs and rebuilt components by hand. Now, with Figma's MCP server, teams can push components, tokens, and layout structure directly into the coding environment so AI assistants generate from the real system from the outset.

A real-world example: Affirm

Affirm builds checkout products that let shoppers split purchases into payment plans, and the experience has to stay consistent across desktop, mobile web, Android, and iOS. That created an ongoing challenge when the team wanted to add badges to its payment plans — for example, flagging a 0% APR option or the soonest payoff — because it had to determine which variant to show to which customer, on which surface, on which device. All while keeping every variation faithful to the design system.

Previously, taking even a small change from idea to production took about six weeks. One product manager changed that timeline to two days, however, by prototyping the badge variations in Figma Make instead of waiting for a typical build cycle. After designers refined the winning direction on the canvas, the team moved the approved design into production by loading design artifacts into the Figma MCP server and connecting it to Cursor. The MCP layer passed components, tokens, and layout structure to the coding assistant, which generated the front-end implementation. Developers then used that output as a starting point — producing production code that already mirrored the design instead of reinterpreting it from scratch.

The headline result: prototyping time collapsed from six weeks to a couple of days. The deeper win is that the implementation matched the design intent because the design context traveled through MCP, and no one had to manually rebuild components to bridge the design-to-code gap.

This workflow matters most when you're shipping a design into production with fidelity, maintaining consistency across many surfaces, or rolling out system-wide updates that developers should inherit in real time so they're always coding against the latest system. What the organizations that are shipping fast share is not a fixed tool or sequence, but a willingness to start wherever the question is and move between surfaces as the problem evolves.