I’m working on a JavaFX project where we want to use Figma for our design workflow. The idea is to let our designer make changes and easily export components for documentation.
We’re using JavaFX and have existing FXML files with custom components. I know you can export from Figma to JavaFX, but I can’t find a way to import existing FXML files back into Figma.
This would be really useful because when developers update the FXML files, the designer could import those changes back into Figma to keep everything in sync.
I have a few questions:
Can you import FXML files into Figma?
Does Figma support custom components from JAR files?
Are there other tools that might work better for this kind of workflow?
Any advice would be helpful since we’re trying to figure out the best approach for our team.
been there - Figma doesn’t handle FXML at all. try exporting screenshots from Scene Builder, then rebuild the visuals in Figma while keeping your functional code separate. not perfect, but way better than redoing everything from scratch each time.
No direct way to import FXML into Figma - they’re completely different formats. I’ve tried this before with a similar setup. What worked for our team was going one-way from Figma to development instead of trying to sync both directions. Designer creates components in Figma, developers reference those designs when building FXML. For documentation, we used screenshots and automated UI tests to capture component states, then fed that back to the design team. Not perfect, but bidirectional sync between design tools and code usually creates more headaches than it’s worth. Try a shared component library where both teams reference the same design system docs instead.
Figma and FXML don’t play nice together - there’s no direct import. But I’ve hit this wall on several JavaFX projects and found a workaround that actually works better than forced integration. Skip trying to make incompatible tools talk to each other. Instead, set up a clean handoff process: designers mock up in Figma, devs build in FXML, then we screenshot the running app for design review. When FXML changes, we grab new screenshots and overlay them in Figma for comparison. For custom JAR components, we create matching Figma symbols with detailed behavior specs. This kills the sync headache completely. The trick is treating design and code as separate workflows that coordinate, not merge.
exactly! u can’t just pull FXML into Figma, but recreating components is the way to go. using Scene Builder as a guide is clever. design tokens can help your team stay in sync without needing those file imports, so good call!
No native support for importing FXML into Figma - they’re built for different things. But we found a workaround at my company that works pretty well. Developers keep FXML as the source of truth for functionality, designers stick to Figma for visual work and prototyping. We built a simple script that reads FXML structure and spits out basic wireframes in Figma through their REST API. It’s not great with complex layouts, but gives designers something to start with when components change. For custom JAR components, we just documented them as Figma components and noted how they behave. The trick was accepting you can’t get perfect sync between the tools. But this semi-automated bridge beats recreating everything by hand every time.