NXP GUI Guider 2.0.1: Figma-to-Code for Embedded UI
Can a Figma design become a working embedded UI project without rebuilding the interface widget by widget?
NXP is moving toward that workflow with GUI Guider 2.0.1, the latest maintenance release in the GUI Guider 2.0 generation. The release aligns with LVGL 9.4.0 and MCUXpresso SDK 26.03.00, while continuing to provide the tool free of charge.
Download and documentation are available from NXP GUI Guider.
A quick versioning clarification is useful. GUI Guider 2.0.0 was the major release of this generation, reaching general availability in late June 2026. GUI Guider 2.0.1 is a maintenance release built on that foundation, with the workflow and capabilities discussed below representing the current 2.0 generation.
The most interesting change is not simply another collection of widgets or properties. GUI Guider is increasingly turning embedded UI development into a design-to-project pipeline, connecting visual design, interaction logic, generated source code, project metadata, and hardware-accelerated rendering.
🎨 What Is NXP GUI Guider? #
GUI Guider is NXP’s free graphical UI design environment built around LVGL, the widely used open-source embedded graphics library.
Its core workflow is based on drag-and-drop, WYSIWYG editing:
- Design the interface visually.
- Configure widgets, properties, styles, and interactions.
- Generate the corresponding C source code.
- Import the generated project into an embedded development environment.
The generated code can integrate with mainstream toolchains including:
- MCUXpresso IDE
- MCUXpresso for VS Code
- IAR
- Keil
- ARM GCC
GUI Guider targets a broad range of NXP platforms, including MCX, RW, i.MX RT, and i.MX families, covering both MCU- and MPU-oriented embedded applications.
The important distinction is that GUI Guider is not merely a screen mockup tool.
It is designed to turn a graphical interface into deployable embedded UI code and project assets.
GUI Guider 2.0.1 takes this concept further by improving the connection between design tools, interaction logic, project structure, and the underlying LVGL runtime.
🔗 Figma-to-Project: Connecting Design and Embedded Development #
One of the most significant additions in this generation is the official Figma-to-GUI Guider workflow.
From Design Handoff to Editable Project #
Traditionally, the embedded UI workflow between designers and developers can be surprisingly manual.
A designer creates a Figma design and hands over specifications, assets, dimensions, colors, typography, and interaction requirements. An engineer then recreates those details inside the embedded UI framework.
Even when the final interface is visually simple, small discrepancies in spacing, sizing, typography, or widget behavior can generate repeated design-development iterations.
The Figma integration changes the starting point.
With NXP’s official Figma to GUI Guider plugin, a Figma design can be imported and converted into a GUI Guider project while preserving as much of the original structure as the mapping supports.
The workflow can be summarized as:
Figma design → widget/layer mapping → GUI Guider project → generated embedded UI code
Inside the plugin workflow, developers can inspect the automatically generated mappings, adjust widget assignments where necessary, and export the resulting project as a ZIP package for import into GUI Guider.
This changes the role of a design file.
Instead of serving primarily as a visual reference, the design becomes a potential editable project input.
For teams maintaining a separation between UI design and firmware development, this can remove a significant amount of repetitive reconstruction work.
Current Figma Integration Limitation #
The Figma-to-GUI Guider plugin currently has a practical platform limitation: it supports Windows only.
That is worth considering when evaluating the workflow for cross-platform design and firmware teams.
Visual Event Flows #
Designing the interface is only one half of embedded UI development.
The second half is defining what happens when the user interacts with it.
GUI Guider 2.0.1 introduces a more visual event system based on flowchart-style nodes and connections.
Instead of representing every interaction exclusively through manually written callback functions, developers can visually organize:
- Conditions
- State transitions
- Animations
- Event relationships
- Reusable logic
This approach becomes particularly useful for interfaces containing nested menus, multiple UI states, conditional transitions, or animation-heavy interactions.
The benefit is not simply visual appeal.
For complex interaction logic, a graphical representation makes the control flow easier to inspect. When a transition behaves incorrectly, developers can follow the node graph rather than searching through a large collection of callback implementations.
For state-machine-heavy embedded interfaces, this can make the UI logic itself easier to reason about.
🖥️ A New IDE Experience With Real-Time Rendering #
GUI Guider 2.0.1 also substantially changes the development environment itself.
Customizable IDE Layout #
The editor has been reorganized around a more flexible workspace.
The primary editing areas—including the canvas, widget tree, and property panels—can be arranged to match different development workflows.
This matters more than it might initially appear.
Embedded UI development frequently involves switching between several types of information:
- Visual layout
- Widget hierarchy
- Properties
- Styles
- Assets
- Event logic
- Project configuration
A configurable workspace reduces the friction of repeatedly navigating between those views.
Real-Time Rendering and Instant Simulation #
One of the more significant workflow changes is real-time rendering inside the GUI editor.
Previously, an embedded UI development loop could look like this:
Modify UI → generate code → switch IDE → compile → flash → inspect hardware → repeat
That workflow introduces significant latency between a visual change and seeing the result.
With the new rendering mechanism, UI modifications can be previewed directly inside the editor.
The result is a more immediate WYSIWYG workflow:
Modify UI → render → inspect
This is particularly useful during rapid prototyping, where developers may make dozens of small changes to spacing, widget configuration, animation, and interaction behavior before settling on a final implementation.
The value is therefore not merely faster previewing. It is a reduction in the iteration latency between design intent and visual verification.
🧩 Treating UI as a Project Asset #
GUI Guider 2.0 also moves beyond the idea of UI as a collection of visually configured widgets.
The project itself becomes more structured and machine-readable.
Properties, Styles, and JSON Editing #
The updated property and style systems provide more detailed control over widget configuration, states, and appearance.
At the same time, generated source code has been reorganized to improve readability and integration.
For embedded projects, this matters because generated code rarely exists in isolation.
It eventually has to coexist with:
- Application logic
- Hardware drivers
- RTOS components
- Middleware
- Board support packages
- CI/CD systems
- Multiple developers’ changes
Generated code that is easier to understand and integrate reduces the cost of maintaining the UI after the initial design phase.
A More Structured Project Layout #
The new project organization combines a revised directory structure with JSON-based project configuration.
The result is a clearer separation of UI assets, metadata, configuration, and generated implementation.
This becomes particularly useful as a project grows.
A small embedded display project may initially be maintained by one engineer. A production product, however, can involve designers, firmware engineers, UI developers, QA engineers, and manufacturing teams.
A more explicit project structure provides a better foundation for that collaboration.
Defining UI Directly in JSON #
Perhaps the most interesting consequence of the new project model is that developers do not have to rely exclusively on drag-and-drop editing.
The JSON editor can be used to define UI structures directly.
That means UI definitions can become text-based engineering assets.
Once UI structure is represented as JSON, it can potentially be:
- Version-controlled
- Diffed
- Generated by scripts
- Processed through templates
- Validated automatically
- Reused across product variants
This opens a different development model.
Instead of treating every product configuration as an independent visual design, teams can potentially generate families of related interfaces from structured UI definitions.
For products with multiple SKUs, screen variants, regional configurations, or hardware options, this can be particularly useful.
⚙️ LVGL 9.4.0, Zephyr, and Hardware Acceleration #
GUI Guider 2.0.1 also updates the underlying embedded software ecosystem.
LVGL 9.4.0 #
The generation is aligned with LVGL 9.4.0.
The updated integration exposes LVGL’s layer-management capabilities, including the System Layer, Top Layer, and Bottom Layer.
These layers provide a more structured way to organize UI elements that sit above or below normal application content.
That can be useful for interfaces involving:
- System-level overlays
- Global notifications
- Persistent controls
- Modal interfaces
- Background layers
- Complex screen composition
The LVGL upgrade therefore affects more than the version number. It provides access to newer capabilities in the underlying rendering and UI architecture.
Zephyr 4.4 Integration #
The platform ecosystem has also been updated to support Zephyr 4.4.
For embedded teams using Zephyr as the RTOS and software foundation, this improves alignment between GUI Guider-generated projects and a current version of the broader embedded software stack.
The continued support for NXP’s MCU and MPU families also allows the GUI workflow to span multiple classes of embedded hardware.
MCUXpresso, IAR, Keil, and ARM GCC #
Generated projects remain compatible with mainstream embedded development environments, including:
- MCUXpresso IDE
- MCUXpresso for VS Code
- IAR
- Keil
- ARM GCC
This is important for production environments where an organization may already have established compiler, debugger, CI, and firmware-development infrastructure.
A UI generator is much less useful if adopting it requires replacing the rest of the development toolchain.
GUI Guider instead fits into existing embedded workflows by generating code that can be incorporated into those environments.
PXP and VG-Lite Hardware Acceleration #
GUI Guider also supports NXP hardware acceleration technologies including PXP and VG-Lite.
The underlying principle is straightforward:
Move graphics-intensive operations from the CPU to dedicated hardware whenever the platform supports it.
Operations such as animation, compositing, scaling, and layer blending can consume significant CPU resources on embedded systems.
Hardware acceleration can therefore reduce the amount of CPU time spent on rendering and leave more processing capacity available for application logic, networking, control algorithms, sensor processing, and other workloads.
This becomes increasingly important as embedded interfaces become more visually sophisticated.
Linux BSP Support on MPU Platforms #
On the MPU side, the software package is bundled with Linux BSP 6.18.2-1.0.0.
This further reinforces the broader direction of GUI Guider: it is not limited to simple microcontroller display projects but is also positioned within NXP’s more capable MPU-based embedded platforms.
🚀 From Visual Design Tool to Embedded UI Pipeline #
The most important aspect of GUI Guider 2.0.1 is not any individual feature.
It is the way the pieces fit together.
The workflow is moving toward:
Figma design → GUI Guider project → visual event logic → JSON project assets → generated C code → embedded toolchain → hardware-accelerated rendering
Each stage addresses a different source of engineering friction.
- Figma integration reduces manual recreation between designers and developers.
- Visual event flows make complex interaction logic easier to inspect.
- Real-time rendering shortens the design-validation loop.
- JSON-based UI definitions make interface structures easier to automate and version.
- Generated C code integrates the UI into established embedded toolchains.
- LVGL 9.4.0 provides the underlying modern graphics framework.
- PXP and VG-Lite provide hardware acceleration on supported NXP platforms.
This represents a broader shift in embedded UI engineering.
The UI is increasingly becoming a structured software asset rather than a collection of manually implemented screens.
For developers, that can reduce repetitive UI implementation work and leave more engineering time for application logic, hardware integration, performance tuning, and graphics optimization.
For teams, the larger benefit may be the reduced boundary between design and implementation.
A Figma file can become the starting point. A GUI project can become the intermediate representation. JSON can become the machine-readable definition. Generated C code can become the integration layer.
That is a much more automated pipeline than the traditional:
Design → handoff document → manual recreation → code review → hardware test
GUI Guider 2.0.1 therefore represents more than an updated embedded GUI editor. It is a step toward treating embedded UI development as an engineering pipeline that connects design assets, structured project data, generated code, and hardware acceleration.