Get your free personalized podcast brief

We scan new podcasts and send you the top 5 insights daily.

When using AI for development, designers can bypass the traditional Figma-to-code workflow. Figma becomes a specialized tool for the final 20% of the project, used to generate CSS for complex visual details that are difficult to articulate in a text prompt.

Related Insights

Contrary to traditional digital design, the modern AI-assisted workflow involves broad, conceptual exploration on canvas-like tools (e.g., Paper) and sweating the final visual details directly in code. Pixel-nudging in design software like Figma is becoming obsolete for last-mile fit and finish.

The debate over designing in code versus a visual canvas is outdated. The modern workflow isn't about choosing one, but fluidly moving between both tools based on the task: canvas for broad exploration and code for deep, interactive prototyping.

Stop trying to create pixel-perfect designs in Figma; its rendering of type and color will never match the browser. Instead, embrace Figma as a rapid, low-fidelity storyboarding tool. Sketch out interaction flows with simple shapes, then feed those images to an AI to build the real thing.

The design process has shifted from comprehensive Figma mockups to live in-app prototypes built with AI coding assistants. Figma is now used sporadically to explore multiple variations of a specific component quickly, but it's no longer the start or end of the design journey.

AI-powered "vibe coding" is reversing the design workflow. Instead of starting in Figma, designers now build functional prototypes directly with code-generating tools. Figma has shifted from being the first step (exploration) to the last step (fine-tuning the final 20% of pixel-perfect details).

Historically, design workflows moved from low-to-high fidelity due to tool constraints. AI tools like Codex remove these barriers, allowing designers to begin with functional wireframes in code for immediate interaction testing, bypassing static sketches.

AI makes iterating in code as inexpensive as sketching in design tools. This allows teams to skip low-fidelity wireframes and start with functional prototypes, blowing up traditional, linear development processes and reinventing workflows daily.

Instead of designing in Figma first, Ron Goldin used AI to generate a functional but ugly "build wireframe" for his product. This approach allows for rapid iteration on core flows and architecture, ensuring the product feels right before investing in high-fidelity design.

AI co-pilots have accelerated engineering velocity to the point where traditional design-led workflows are now the slowest part of product development. In response, some agile teams are flipping the process, having engineers build a functional prototype first and then creating formal Figma designs and UI polish later.

Previously, designers were valued for their mastery of complex software like Figma. Now, AI allows designers to create their own bespoke, contextual tools on the fly. The new form of creativity is building an optimized personal workflow, not just using a shared one.