4 New Ways to Go From Idea to Product With AI Tools | Figma Blog (opens in new tab)

AI tools are reshaping product development by enabling teams to prototype, test, and refine ideas earlier and across both code and design. The article argues that working prototypes can expose problems that static mockups miss, while preserving design context throughout the path to production. It illustrates this shift through examples from FloQast, Merkle, Affirm, and Accor.

AI-enabled product workflows

• Product teams are:
  • Prototyping earlier instead of relying solely on traditional requirements documents.
  • Testing ideas in code before finalizing designs.
  • Exploring more possibilities at greater scale.
  • Carrying design-system context into implementation.
• Figma presents these practices as ways to balance faster iteration with deliberate product decisions.

Testing constraints in code

AI coding tools make it easier for non-developers and product teams to build functional prototypes involving:

• Multi-step workflows.
• Conditional behavior based on user permissions or data.
• Actions that trigger subsequent actions.
• Realistic backend logic and data relationships.

A prototype can then be moved into Figma with Codex to Figma for collaborative exploration and refinement. If implementation work continues in code, teams can move the design back through MCP while retaining the relevant design context.

FloQast’s complex workflow prototype

The challenge

• FloQast needed to redesign an accounting workflow for investigating discrepancies.
• Users previously had to move between multiple pages to:
  • Find an issue.
  • Investigate it.
  • Resolve it.
• The team wanted one page where users could see tasks, identify blocked work, and take action.
• Because the workflow depended on interconnected steps, real data, and business logic, a static mockup could not fully validate the concept.

The unlock

• UX manager Benjamin Ellis built a working prototype with an AI coding tool.
• The prototype included:
  • A simulated backend.
  • Realistic data based on an actual customer’s workflows.
  • Clickable scenarios where completing one task affected the next.
• Testing the workflow revealed interactions that appeared sound in a design mockup but failed when subjected to realistic conditions.

The impact

• The team and designer committed to a direction only after testing it against real scenarios.
• They identified interaction problems earlier.
• The approach reduced later surprises and increased confidence in the final design.

When this approach is useful

• When behavior depends on permissions, data, or sequential actions.
• When a small fix is faster to make directly in code.
• When designers and developers need a working example to scope a complex experience together.

Exploring with AI on the canvas

The next section introduces using AI directly in the Figma canvas to explore product possibilities. The provided excerpt ends before describing the specific workflow or company example.

Teams should use code-backed prototypes when logic and real data are central to the experience, then bring those prototypes into collaborative design tools to refine decisions with greater confidence.