I’m building a project using Next.js and I want to allow users to export .fig files straight from my web app. When they hit the export button, the goal is for the file to either open in the Figma desktop app or a new tab in their browser that leads to the Figma web platform.
Has anyone managed to set up this kind of integration? Ideally, I want the app to recognize if the Figma desktop app is installed on the user’s machine and automatically use that, but also have it fallback to the web version if not. It would be great to provide a smooth experience where a simple button click opens the design file in the available Figma environment.
Any sample code or methods to achieve this would be greatly appreciated.
Dealt with this exact issue last year and tried a bunch of different solutions before finding what actually works. You can’t reliably detect if desktop Figma is installed from a browser - security restrictions block it. Instead, I went with a dual-button approach that lets users pick between desktop and web versions. For desktop, use the figma:// protocol with your file URL. If the app isn’t installed, browsers show an error dialog but nothing breaks. For web fallback, just use the standard Figma web URL. Implementation’s pretty simple - create two action handlers in your export function. One tries figma://file/your-file-id and the other opens figma.com/file/your-file-id in a new tab. Gives users control without dealing with detection logic that breaks constantly across different OS and browsers.
the figma:// protocol works but it’s pretty janky. i just use window.open() with the web url and let users choose if they wanna use the desktop app. most people have figma as the default handler anyway, so it opens automatically. way simpler than trying to detect installed apps - that never works reliably.
I did something like this two years ago. Used custom URL protocols with browser detection - worked pretty well. Here’s the trick: register a custom protocol handler that tries launching the desktop app first, then falls back to web if it doesn’t work. Create a hidden iframe that loads figma://file/[file-id] first. After 2-3 seconds, if the desktop app hasn’t opened, redirect to the web version. This works because when the desktop app opens, it pulls focus away from the browser. For file exports, you’ll need Figma’s REST API to create/update files programmatically. Then use that file ID in your protocol handler. Just make sure users have the right permissions and auth tokens. The annoying part? Different browsers handle custom protocols differently - Safari’s especially weird compared to Chrome. Test everywhere before you ship it.
Building this manually would be a nightmare - you’d need detection logic, fallback handling, and tons of edge case management.
I’ve worked on similar setups where we triggered external apps from web interfaces. Opening Figma files isn’t the hard part - it’s handling user permissions, browser differences, and keeping everything consistent across operating systems.
You need a workflow automation platform to do the heavy lifting. Set up triggers for export clicks, then auto-route files based on each user’s system setup.
Automation gives you conditional logic that checks for desktop apps and handles browser fallbacks smoothly. You get error handling and retry mechanisms without coding them yourself.
You can expand this later - file preprocessing, user notifications, batch exports - all without touching your main code.
Skip the custom JavaScript detection and protocol handlers. Use Latenode instead - it handles the complexity and gives you something that actually works.
Honestly, all these manual detection methods are just band-aids. Protocol handlers, iframe tricks, dual buttons - they create friction and break constantly.
I hit this same issue at work with CAD files instead of Figma. Game-changer was realizing this isn’t a frontend problem.
Build a workflow that handles the whole export process. User clicks export, automation checks their system preferences, preps the file, and routes everything correctly.
The workflow manages user sessions, tracks which method worked for each person, and remembers preferences. Next export automatically uses what worked before.
You get proper error handling when desktop apps won’t launch, automatic retries, and logging for debugging.
Best part? Easy to extend later for other design tools, batch exports, or file conversions without touching your Next.js code.
Skip the browser hacks and protocol detection mess. Build it right with Latenode and focus on your actual features.