Design Tools: Separating Design and Engineering for Better Collaboration

Cursor is eating Figma’s lunch. And how. Here is why the new design offerings by Cursor change things. So, Tech product teams live on three disconnected islands. (Pardon me for the oversimplification) 1️⃣ Island : PMs write documents. 2️⃣ Island : Designers design with shapes. 3️⃣ Island : Developers build with code. Work flows from words → shapes → software. Every step is translation. Every translation is loss. Slightly off intent. Slightly different UI. Slightly mismatched implementation. This isn’t collaboration. It’s rework. Figma’s bet was that vectors could become code. But vectors aren’t real. They don’t have state, logic, or constraints, only approximations. That’s why we built design systems, tokens, specs, handoff tools. An entire industry to manage a flaw. Cursor flips that. There’s nothing to translate. You design inside code, visually. What you see is what runs. Constraints are real. States exist. The artifact ships. Cursor doesn’t need to become Figma. It already contains everything downstream. That asymmetry is the story. This isn’t about tools. It’s about islands disappearing. The uncomfortable truth is that many roles were built around translation. When translation dies, so does the justification. It is not about design to code. It’s design as code. PS : I love figma, but I also loved sketch.

🤩 Figma's new feature is a GAME-CHANGER. I’ve been using Figma’s Generate Image and Edit Image features with Nano Banana 3, and I can confidently say they’re some of the most powerful AI tools I’ve worked with for image creation and editing. One thing I always wished for was the ability to edit specific areas of an imagesimilar to how we do it in Photoshop. And now… Figma just delivered. The new update finally allows precise, localized edits, and it changes everything. This upgrade is a true game-changer. I no longer need to jump into Photoshop every time I want to adjust a small part of an image. Figma is becoming a complete creative workspace on its own. 🚀 Loving this direction. Can't wait to see what comes next.

Product design isn’t limited to Figma anymore. With tools like Cursor, Lovable, and AI, designers can think like PMs and actually build things end-to-end. It’s all about creating real value now, not just polished screens.

Today, we shipped our first design directly in Cursor, without touching Figma. It was a small, tactical feature, so the execution was fairly straightforward. I really liked how seamless it was to plan and prompt in Cursor, test quickly in the dev environment on Coder, and then move straight to a PR. I can see Cursor making its place in our design tool stack! That said, this worked largely because the scope was small. When a problem requires ecosystem-level or architectural thinking shaping a strategic user experience, designing & iterating purely in Cursor is not ideal. You need a big canvas to sketch out ideas, principles, and relationships. Cursor offers incredible agency for small, obvious, incremental features, but we’re still missing a framework that helps designers use it to think & build coherent, end-to-end products. Till then, we’ll keep using both Figma & Cursor. One more thing, Companies asking designers to build products directly in IDEs like are quietly asking them to do two people’s job. A hidden tax no one is talking about. Please be considerate there. Vibe coding is not magic, it is highly iterative, takes real time, & expecting this from designers without adjusting scope or timelines can result burnouts. I’m really excited about what’s ahead in the world of software!!

From pixels to production in 27 hours ! Me and my design team at Adda Education just shipped a fully coded website for the "School of AI" in under 3 working days using Figma Make. Here's how it went down: 1. Designed everything in Figma 2. Converted it all with Figma Make 3. Added micro-interactions and animations 4.Handed clean code to our devs (who only needed minor tweaks) The result? A polished, bug-free site in a fraction of the usual time. Design-to-dev handoff has never been this smooth. Curious to know—what AI tools are you using in your design process? 👇 #ai #design #figmamake

Today was very different for me as a designer, I attended ⚡️Zander Whitehurst's workshop on Figma MCP & Cursor: Design & Code Components, and I think it's pretty wild how much things will change for designers in the next year. Here's some of my kew takeaways: 1. AI Coding Tools: Not Quite There AI coding tools aren’t mature enough for designers to fully own design system code. But the pace of progress is wild. 2. Figma MCP + Cursor Imagine generating production-ready button code straight from your Figma component sets. That’s exactly what’s possible when you connect Cursor with Figma MCP. 3. Cursor for UI Animation If you want your designs to move, feel, and function like the real thing, Cursor might just be your new best mate. 4. Figma vs Component Library Web App Here’s a pro move: build a ‘Figma vs Component Library’ web app in Cursor. Instantly compare your Figma assets with live code components, flag inconsistencies, and keep your design system tight. You can check-out Memorisely for AI design training here: https://lnkd.in/eNpfBzjm Any thoughts? Let me know! #Memorisely #FigmaMCP #CursorApp #DesignSystems #AIDesignTools #DesignToCode

My design workflow for 2026: For years, my workflow looked like this: Idea → Figma → “handoff” → wait… → wait… → ship (eventually) Now it’s: Idea → WeekendMVP → production Because in 2026, design isn’t a file. It’s a working product. Here’s the exact flow I’m using: Step 1: Strategy (Claude / GPT) Before I touch UI, I force clarity. I ask Claude to: • break down competitors (what they do well + where they’re weak) • map the user journey end-to-end • list the minimum set of features needed for the first shippable version • suggest the simplest “magic moment” I can demo in 15 seconds This becomes my WeekendMVP scope. Not a giant PRD. Not a 40-screen roadmap. Step 2: Design in code (Cursor) I’m all-in on designing in code with AI. I’ve done the whole tour: Corel Draw → Photoshop → Sketch → Figma → you name it. But the fastest path to impact now is: • prototype in real components • work in a git/branching workflow • Stay close to engineering constraints from day one I use Cursor for the build and Aura https://lnkd.in/eCaU-HgB for UI foundations, rather than starting in Figma. Step 3: Ship (Vercel) This is the mindset shift: My designs don’t sit in Figma waiting to be “picked up.” They go live. I ship early, test with real users, then iterate based on behaviour, not opinions. That’s why WeekendMVP works: it forces you to design for reality. If you want the exact prompts and the WeekendMVP checklist I use (strategy, competitor research, scope cutting), comment "WEEKEND", and I’ll send them.

Some quick experiments with Figma Make over the last couple of days. Coding has always been something I’ve struggled with — lots of false starts, bouncing between tools, never quite building the muscle memory. I’m not totally new to it, but getting from an idea to something tangible has often felt hard due to a skill gap. Tools like Make have started to change that for me. They let me stay in a "designer’s" mindset — experimenting, breaking things, tweaking parameters — while still ending up with something that actually works. A few examples I made. • Image Scrambler — splits an image into a grid, shuffles it, and randomly drops shapes into cells • Glitch Constructor — a generative tool for building abstract, mathematical visual graphs • Sample Slicer — pushing Make into audio domain: slice a sound into 64 parts, click cells to define playback order, loop cells to create rhythmic patterns None of these are polished products, but that’s kind of the point. The speed at which you can go from “what if?” to “oh wow, that actually works” feels like the real unlock for me personally. (this is by no means a "hot take") Curious how other designers are using tools like this, especially outside of traditional UI prototyping.

If you spent hours in Microsoft Paint as a kid, you’re probably a designer now. Before tutorials. Before Figma. Before “best practices.” There was Paint. Clicking every tool just to see what it did. Dragging shapes that never lined up perfectly. Undoing. Redoing. Starting over again. No briefs. No deadlines. No imposter syndrome. Just curiosity. And that’s the part people forget. Most creatives didn’t start with talent. They started with play. They weren’t trying to be good. They were trying to figure things out. That habit stayed. Exploring instead of waiting for permission. Learning by doing. Breaking things and fixing them. The tools changed. The curiosity didn’t. That’s why the best designers, creators, and builders are rarely afraid of new software or new problems. They’ve been experimenting since day one. So if your career today involves: Designing Creating Building Problem-solving There’s a good chance it started with a clunky mouse, a color palette at the bottom of the screen, and a lot of free time. Turns out, those “wasted hours” weren’t wasted at all. They were training.

Ik Last week, Bram Vanhaeren shared a LinkedIn post about his experience at the very first n8n event in Belgium in Wintercircus Ghent (see https://lnkd.in/eDGU4dpv). He expressed some mixed feelings that I can relate to, but he also raised an intriguing idea that I want to summarize as follows: 👉🏻 Could we automatically document the version history of a Figma design file? The reactions on the post triggered me, so over the weekend, I built a proof of concept using n8n, Lovable, OpenAI API and Nano Banana Pro. Here is what it currently does: 1. Using the Figma API, I fetch a design file and extract all version meta data. 2. In this POC, the n8n workflow considers the last two versions and identifies the differences between them (JSON). 3. Next, these differences are sent to an LLM to transform them into a designer-friendly narrative while preserving all change entries and their pathIds. 4. Another AI step uses the pathIds to generate structured page-level and section-level summaries. 5. Nano Banana Pro using the API of krea.ai generates annotated images of the new design version, adding a post-it containing the summary of changes. 6. Finally, all annotated images are combined into a single whiteboard-style overview. 📺 Check the (accelerated) video below to see how it works in Lovable. Extra challenges and next steps? 🎯 I needed to add a polling mechanism and the use of n8n data tables to avoid time-outs as the entire analysis can take some minutes. ⛳️ Nano Banana Pro produces the best visuals, but text rendering and exact image manipulation remain inconsistent. I’m considering generating the final annotated image directly inside Figma in a future version. ⏱️ This workflow is not cheap in tokens and not the fastest either. Plenty of room for optimisation. 🎳 The POC deals with added/modified/deleted elements. Integrating comments (🎤 or ⌨) and full file history could make it much richer. What do you think? Would there be demand for a tool that helps designers automatically document Figma version history? Or maybe you’re running into similar questions or challenges in your own workflows → the kind that could be solved with a smart combination of n8n and Lovable. Feel free to DM me if you’d like to explore how I can help 🤓