Building User Flow Prototypes

I redesigned my entire UX/UI process with AI. It’s not about “use ChatGPT to brainstorm.” I mean, I rebuilt the whole pipeline. From product idea to prototype. What used to take months? Now gets done in days. Here’s what it looks like step-by-step: 1. Instant User Flows I drop rough product ideas into ChatGPT. (It's not the public one; it's a custom GPT trained on how I think.) It gives me: - Sitemap - User journey - Logic flows All in less time than it takes to make coffee. 2. Wireframes Without Drawing I stopped sketching. I describe the layout in plain English, and Magician does the rest. "Hero. CTA. Testimonials." Boom. Wireframe. No more dragging boxes like it’s 2015. 3. AI-Built Design System Spacing? Typography? Button styles? I just describe the vibe. Tools like Relume and Uizard take that and build me a full design system. This used to take WEEKS. Now it’s done before lunch. 4. Smarter Figma Time Now everything moves to Figma. But I don’t waste time pixel-pushing. AI plugins handle: - spacing - responsiveness - and accessibility. I just make the ideas click. 5. Prototyping = Auto-On Final step? Auto-connect flows with Figma’s AI tools. Clickable. Shareable. Client-ready. Dev-approved. No extra buttons. No guesswork. Here’s the real punchline: AI didn’t replace my work. It replaced the boring parts, so I can focus on design thinking. It’s not about working faster. It’s about designing smarter. We’re not in 2015 anymore. Let’s build like it’s 2030. What part of your UX workflow do you still do manually? Curious to hear.

🍱 “How We Organize 1250+ Design Screens in Figma” (+ File examples) (https://lnkd.in/e7X4fKcj), a practical case study of how to organize design screens in user flows — to reduce repetitive work and still cover all user journeys. Via Lorenzo Palacios Venin. ✅ Divide the product into files based on navigation. ✅ Each navigation section will get its own Figma file. ✅ List user flows for each of these navigation sections. ✅ Divide each file into pages based on these user flows. ✅ Each starting point will get a separate page. ✅ Each flow that departs from it will get a page. ✅ Break heavy, long user flows into separate files. 🚫 Flows rarely exist alone: they redirect to other flows. ✅ Each flow has 1 entry point, but many exit points. ✅ Screens are ordered from left to right for progression. ✅ Screens are vertically stacked (top → bottom) for variations. ✅ Specify each interaction only the first time it appears. ✅ Variations are displayed with conditional blocks. File example (Route search): https://lnkd.in/eXfWHq3P Full workflow (flowchart): https://lnkd.in/e7V8nEi3 I absolutely love the idea of using color coding for file covers to communicate states. The team uses blue 🔵 to indicate work in progress, green 🟢 for the latest validated version and grey ⚪ for older, archived versions. Once a version’s cover is switched to green, this file can no longer be modified. The team describes a very systematic process to something that many of us do instinctively, but perhaps not rigorously enough. Of course we define user journeys and then design screens for them, but often we do so for just a few paths at a time — and it results in redundant flows to cover other paths. In the case above, we organize all design work in nothing but flows. All component variations are designed on the level of the design system, and all screen variations are designed within user flows. An interesting way to keep work well-organized, while exploring both happy and unhappy paths — and keeping them where they belong. ✤ Useful resources: DoctoLib Design System Figma Organization, by Jérôme Benoit Reveau https://lnkd.in/eK7bhQeS Booking.com Figma Organization, by Nicole Saidy https://lnkd.in/e5G53eXP “How We Organize Design Files in Figma” (+ Figma Kits), via Lee Munroe https://lnkd.in/e_tVXsUh How To Organize A Design System (Figma), by Saurav Rastogi https://lnkd.in/dWV-Y6vv Spotify Ways Of Working in Figma (Kit) https://lnkd.in/ek9ZzZQg #ux #figma

No designer wants to waste weeks building the wrong thing. That’s why I lean on a battle-tested prototype progression that saves time, catches problems early, and gets stakeholder buy-in faster. Because smart prototyping isn’t about polish. It’s about asking the right questions at the right level of fidelity. And those last-minute pivots because “the client doesn’t get it”? Most of them are avoidable—with the right prototype at the right time. There are four main stages between napkin sketches and pixel-perfect handoff: 1️⃣ Paper Sketches 2️⃣ Low-Fi Wireframes 3️⃣ Mid-Fi Interactive Prototypes 4️⃣ High-Fi Prototypes The real magic comes from matching fidelity to purpose. → Want to test a new flow? Mid-fi is enough. → Need clean handoff? Go hi-fi. → Exploring 10 ideas? Stick to paper. Every level answers a different question. Skipping steps = solving the wrong problem too late. Smart prototyping lets you fail fast, learn early, and ship experiences that actually work. What’s your prototyping process for UX design projects? #uxdesign #prototyping #uxstrategy ——— 👋 Hi, I’m Dane—I love sharing design tips + strategies. ❤️ Found this helpful? Dropping a like shows support. 🔄 Share to help others (& for easy access later). ➕ Follow for more like this in your feed every day.