A Figma plugin that converts Figma designs into BabylonJS GUI JSON format, enabling seamless transfer of UI designs to BabylonJS applications.
- Full Screen ADT Export: Export entire frames as BabylonJS Advanced Dynamic Texture (ADT) JSON
- Control Export: Export individual components/frames as standalone BabylonJS GUI controls
- Image Export: Automatically exports images used in your design as a ZIP archive
- Auto-Layout Support: Converts Figma auto-layout to BabylonJS StackPanels
- Grid Layout Support: Converts Figma grid layouts to BabylonJS Grids
- Style Preservation: Maintains colors, gradients, shadows, strokes, and rounded corners
- Interactive Controls: Tag layers to create BabylonJS Buttons, ScrollViewers, and Checkboxes
Install directly from the Figma Community Plugin Page or search for "FigmaToBabylonJS" in the Figma Community plugins.
- Clone this repository
- Install dependencies:
npm install
- Build the plugin:
npm run build
- In Figma, go to Plugins > Development > Import plugin from manifest
- Select the
manifest.jsonfile from this repository
- Select a Frame, Component, Instance, or Group in Figma
- Run the plugin via Plugins > FigmaToBabylonJS > Export & Settings
- Configure your export options:
- Background Color: Include the frame's background color
- Export Images: Bundle images in a ZIP file
- Click Export Fullscreen ADT or Export Control Only
The plugin provides quick export commands accessible from the plugin menu:
- Quick export full screen ADT - Export as ADT without UI
- Quick export control - Export as control without UI
- Quick export ADT with images - Export ADT + images without UI
- Quick export control with images - Export control + images without UI
Add these tags to layer names to convert them to BabylonJS interactive controls:
| Tag | Control Type | Description |
|---|---|---|
-bjs |
Button | Creates a clickable button |
-scroll |
ScrollViewer | Creates a scrollable container |
-chk |
Checkbox | Creates a checkbox control |
Example: A layer named Submit-bjs will be exported as a BabylonJS Button.
- Image Scale: Export images at 1x, 2x, 3x, or 4x resolution
- Image Folder: Customize the path prefix for image sources (default:
./images/)
- ✅ Frames, Groups, Components, Instances
- ✅ Rectangles, Ellipses, Text
- ✅ Lines and Vectors (straight segments)
- ✅ Auto-layout (Horizontal & Vertical)
- ✅ Grid layout
- ✅ Solid colors and gradients (linear & radial)
- ✅ Drop shadows
- ✅ Rounded corners
- ✅ Strokes/borders
- ✅ Images (as fills)
- ✅ Text styling (font, size, weight, alignment, decoration)
- ✅ Opacity and visibility
- ✅ Rotation
- ✅ Clip content
⚠️ Bezier curves in vectors (converted to straight lines with warning)⚠️ Gradient strokes (uses first color as fallback)⚠️ Mixed stroke weights (uses single value)
- ❌ Boolean operations (Union, Subtract, etc.)
- ❌ Video fills
- ❌ Pattern fills
- ❌ Blur effects
- ❌ Multiple fills (only topmost visible fill is used)
import { AdvancedDynamicTexture } from "@babylonjs/gui";
const adt = AdvancedDynamicTexture.CreateFullscreenUI("UI");
await adt.parseFromURLAsync("path/to/exported.json");import { AdvancedDynamicTexture, Control } from "@babylonjs/gui";
const adt = AdvancedDynamicTexture.CreateFullscreenUI("UI");
const response = await fetch("path/to/exported.json");
const json = await response.json();
const control = Control.Parse(json, adt);
adt.addControl(control);npm run build # Development build
npm run production # Production build (minified)
npm run watch # Watch mode for developmentThe src/ directory contains two HTML test files for manually testing plugin exports:
- fullscreenADTTest.html - Tests full-screen ADT exports
- controlTest.html - Tests individual control exports
See TESTING.md for detailed usage instructions.
├── src/
│ ├── code.ts # Main plugin logic
│ ├── fullscreenADTTest.html # ADT test file
│ └── controlTest.html # Control test file
├── ui.html # Plugin UI
├── manifest.json # Figma plugin manifest
├── package.json
├── tsconfig.json
├── webpack.config.js
├── LICENSE
├── README.md
└── TESTING.md # Testing documentation
This projects code is licensed under the MIT License with a Figma Community Redistribution Restriction.
Important: This software may NOT be redistributed through the Figma Community plugins marketplace without explicit written permission, see Contributing for more details.
Contributions are welcome! This is an open-source project, and we encourage community involvement! Here are some ways you can contribute:
- Submit Issues: Found a bug or have a feature request? Open an issue
- Pull Requests: Improvements and bug fixes are always appreciatedm if the plugin doesnt do something you need, add it!
- Marketplace Updates: Accepted contributions will be published to the official Figma Community plugin
Please note that while this code is open source under the MIT license, the Figma Community marketplace distribution is restricted to maintain quality and consistency for users, the orginal author will work to make sure pull requests are reviewed and merged in a timely manner and keep the plugin up to date with the latest BabylonJS and Figma API changes. If this changes, the redistubution limitation will be removed and updated here.
If you find this plugin helpful, consider buying me a coffee ☕ You can discuss the plugin and get support on the dedicated BabylonJS Forums thread.