Turn Figma Designs into Embedded GUIs with Embedded Wizard Connect for Figma
Embedded Wizard Connect for Figma bridges the gap between UI design and embedded GUI implementation. It allows you to export graphical layouts from Figma as an .ewx file, which can then be imported into an Embedded Wizard project. Each Figma frame and component becomes an Embedded Wizard class or resource, forming a solid base for further development and interactivity.
Step 1: Export your design from Figma
Install and open the Embedded Wizard Connect for Figma plugin in your Figma project. Choose which frames to export and adjust any settings (like export paths or image formats).
When you’re ready, export the design — the plugin creates an .ewx file that contains all frames, components, and resources needed for Embedded Wizard.
Step 2: Import the design into Embedded Wizard Studio
In Embedded Wizard Studio, create a new or empty unit (for example, MyImportedUnit). This unit will hold all imported content such as bitmaps, SVGs, fonts, and colors.
Download the provided FigmaDesignImporter.py script and run it using Python 3. You can do this through Embedded Wizard’s generic import/export tool under Project ➤ Export and/or import tool …
After starting the import, Embedded Wizard automatically generates classes for your Figma frames and stores all related resources in a dedicated folder.
Step 3: Review and enhance your UI
The imported design reflects your Figma layout — but it’s still static. Next, open the generated classes in Embedded Wizard Studio to:
- Check that visuals match the design
- Add interaction and behavior (buttons, touch gestures, logic)
- Simplify or merge resources if needed
You can also rename or refactor elements for better project structure.
Step 4: Re-import design updates
If your Figma design changes, you can easily re-import the updated .ewx file. Embedded Wizard compares existing content and updates only what has changed.
For most projects, the default re-import option — “replace existing elements with the same name and remove unused ones” — keeps everything clean and synchronized.
For small adjustments, you can also update only selected components or images.
Summary
With Embedded Wizard Connect for Figma, you can:
- Export designs directly from Figma as .ewx files
- Import them into Embedded Wizard Studio
- Add interactivity and embedded logic
- Re-import updates without starting over
This workflow bridges the gap between designers and engineers, saving time and keeping embedded GUIs visually consistent with the original design.
Ready to Get Started?
We’ve put together a comprehensive technical guide in our Knowledge Base that walks you through best practices, tips, and a step-by-step workflow. Whether you’re a designer or a GUI developer, our documentation has everything you need to start creating GUIs with Embedded Wizard and Figma.
If you want to try out the plugin quickly, simply visit the corresponding Figma Community page, activate Embedded Wizard Connect for Figma, and export your design.