Although Embedded Wizard Studio can function as an interface design application, it is often not the primary source of design data. A modern and proper development process usually involves UX/UI designers who may create an initial mockup or even the entire GUI using their preferred application. A common choice among UX/UI designers is Figma.

Once a design is approved and ready for development, the designer typically hands over the design data by providing direct project access or sharing it as PDFs or images with an embedded software engineer. The engineer is then responsible for bringing the user interface to life. Design projects often include a static collection of screen states, called frames, that the user interface can present. Despite containing every screen state, these projects lack the interactive changes between states and the resource-optimized construction of reusable UI components.

Typically, the final GUI implementation is carried out by embedded software engineers who are familiar with the specific hardware environment and any potential limitations of the target platform. These engineers use a graphical user interface tool that also addresses target platform aspects and is generally closer to the hardware. The tool for this task is Embedded Wizard Studio. Since the native design data output from common interface design applications like Figma is not compatible with Embedded Wizard, embedded software engineers often face tasks similar or identical to those already performed by the UX/UI designer. These tasks may include converting image resources, creating color and string constants, and the initial component design.

To address this issue, Embedded Wizard offers an automatic design-to-code feature available in the Professional edition. The following illustration outlines how an embedded software engineer can streamline tasks by leveraging the advanced automatic conversion feature from Figma designs to an Embedded Wizard Studio unit.

Design-to-code principle.

By help of a Figma Plugin it is possible to export a .ewx (Embedded Wizard Exchange) file. This file contains all necessary resources and information to replicate the design in Embedded Wizard. The .ewx file can then be imported into Embedded Wizard Studio to complete the process. The entire design can be initially imported, fully re-imported, or partially updated. With these options, the Embedded Wizard Studio user can quickly convert and update an Embedded Wizard user interface. This not only saves a lot of initial work but also simplifies the process of responding to design changes in later development stages. Once the design data is converted into an Embedded Wizard unit, the components can be extended and modified for optimal reusability and interactivity.

The next subchapter provide a comprehensive guidance to prepare for using the automatic design-to-code feature.

The following versions of the Embedded Wizard Connect for Figma plugin have been released. Please note that this plugin is updated independently from Embedded Wizard Studio. The version for the Figma plugin and Python import script is identical.