I’m developing a project using Nuxt.js and I’m looking for guidance on how to export Figma files effectively. I have a .fig file that needs to be exported so that when an export button is clicked, it can either open directly in the Figma desktop app or redirect to the Figma website in a new browser tab.
I’m facing challenges figuring out the correct way to implement this feature. I’ve experimented with a few methods, yet they haven’t worked as intended. Has anyone experienced something similar? What would you recommend as the best approach to ensure a smooth export and opening process?
I’d greatly appreciate any advice or code snippets you could share. Thank you!
Easiest approach I’ve used: embed the Figma file ID in your Nuxt component data, then build the URL when someone clicks. Skip the complex API stuff - just use https://figma.com/file/{fileId} and Figma automatically detects if you have the desktop app. Works reliably every time.
Been dealing with this exact thing while building design review workflows. The problem is .fig files aren’t for web export - they’re Figma’s proprietary format. You want to export file URLs, not the actual files. I store Figma file URLs in my database with the project data. When users hit export, I build the Figma URL using the file ID and add parameters like node-id if I need them. For desktop vs browser detection, I skip the complicated user-agent stuff and just try figma:// protocol first with a fallback. Key thing I learned - this isn’t about file export, it’s URL redirection with protocol handling.
Managing individual Figma URLs in your database gets tedious with dozens of design files. Plus you’re still handling edge cases manually.
I built something similar for our design system and automated the whole thing with Latenode. Set up a workflow that connects to our project management system, syncs Figma file IDs automatically, and handles export logic without touching the Nuxt code.
When someone clicks export, Latenode checks browser capabilities, validates the file exists, tries desktop protocol first, then falls back to browser. It also tracks which files get used most and sends our design team weekly usage reports.
Best part - it handles bulk exports too. Users select multiple files and Latenode opens them in separate tabs with proper delays so nothing crashes.
No database maintenance, no manual URL building, no protocol detection code cluttering your components.
hey! just went through this too. unfortunately, .fig files can’t directly open in the app. what you need is to generate a figma URL link. try using figma’s REST API to get that file link, then use window.open() for the browser or figma:// for desktop.
Had this exact problem last month building a design handoff system. API works but gets messy with auth tokens and rate limits.
I automated the whole thing with Latenode. Built a workflow that watches for export clicks, grabs the Figma file ID, generates the URL, and handles opening automatically.
Best part - it checks if users have the desktop app first. Desktop installed? Uses figma:// protocol. No desktop? Opens browser version. No manual URL building or API key hassles.
You can add logging for most-accessed files or notifications when exports happen. Much cleaner than doing this manually in Nuxt.
Hit this same problem building a client portal. The thing is, .fig files only work in Figma - you can’t open them anywhere else. Here’s what actually worked for me: store your Figma URLs in your Nuxt database, then use JavaScript to detect what system someone’s on and send them to the right place. I used navigator.userAgent to check their platform, then window.location.href with the figma:// protocol for desktop users and regular https://figma.com/file/ links as backup. The annoying part was when the desktop app doesn’t launch - I threw in a setTimeout that redirects to browser after 3 seconds if the desktop version fails. Got about 95% success rate with this setup.