From Figma to GUI Guider: Accelerating Embedded GUI Development

[#1]

Bridging design and engineering to move embedded GUI projects from concept to implementation faster

1. Why a Smoother Path from Design to Embedded GUI Matters

In embedded GUI projects, the interface design is often completed in Figma, while the engineering implementation still needs to be rebuilt in GUI Guider by creating widget hierarchies, configuring resources, and validating the final result. For projects with many screens or frequent design iterations, this process can be repetitive and may introduce gaps between the design intent and the implemented interface.

Figma to GUI Guider offers a structured workflow that helps convert Figma designs into GUI Guider project assets. It maps Figma layers and components to LVGL widgets, generates GUI Guider project JSON, and exports a project package that can be imported into GUI Guider. The converted result provides a practical engineering starting point, while developers can continue editing, simulating, and validating the project in GUI Guider.

Positioning

This plugin is designed to shorten the initial conversion path from design handoff to engineering implementation. Figma designs should be treated as implementation references, rather than a complete guarantee of embedded runtime behavior. Actual projects still need to be adapted and validated against the resource constraints and rendering capabilities of the target platform.

2. How the Plugin Connects Design and Engineering

Capability	Description
Read the Figma design tree	Displays the Figma Design Tree in the plugin panel, helping developers review the node hierarchy of the design.
Configure LVGL type mapping	Sets the appropriate LVGL widget type for each design node and controls whether the node is included in conversion.
Generate GUI Guider project JSON	After conversion, previews the generated GUI Guider project JSON in the output area.
Export the project package	Exports a zip package via Download, including the converted project files and related image resources.
Import into GUI Guider	After extracting the exported package, import the .guiguider file in GUI Guider through Import Project and continue development.

3. Quick Start: Running the Plugin in Figma

The Figma to GUI Guider plugin is available on Figma Community and can be launched directly from the Figma desktop app or browser version, without manually downloading a plugin package. The current release supports Windows.

1. Open the Figma desktop app or browser version and sign in to your Figma account.
2. Go to the Figma to GUI Guider plugin page, or search for the plugin name in Figma Community.
3. On the plugin page, click Open in… to run it directly, or save it to your account for future use.
4. Open the target design file and launch the plugin from the Plugins menu. You can also right-click on the canvas and run it from the Plugins menu.

4. Understanding the Plugin Interface

After the plugin is launched, it appears as a panel inside the Figma workspace. For first-time users, we recommend becoming familiar with the key areas of the interface before configuring mappings and running the conversion.

1. Figma Design Tree: Shows the layer and component hierarchy of the current design file. Each node can be configured with an LVGL type and conversion status.
2. Design Node: Displays the node name and Figma type, and uses the LVGL Type Selector to define the widget type after conversion.
3. Refresh / Convert: Refresh reloads the current Figma file structure, while Convert generates the output based on the current mapping configuration.
4. About: Provides plugin information, version details, support contacts, and reference links.
5. GUI Guider Project JSON: Shows the generated project JSON after conversion, making it easy to quickly review the structure.
6. Clear / Copy / Download: Clears the output, copies the JSON, or exports the project zip package and image resources.

5. Recommended Workflow: Review Mapping Before Generating the Project

When the plugin is opened for the first time, it generates an initial mapping based on the Figma nodes. Instead of converting immediately, reviewing and adjusting the node mappings first usually produces a project structure that better matches engineering expectations.

1	Review the automatic mapping Browse the design tree and confirm that text, buttons, images, and other nodes are assigned appropriate LVGL widget types.

2	Adjust widget types If the automatic mapping does not meet expectations, update the node type through the Type Selector. Mapping settings are saved in the Figma project.

3	Control the conversion scope Use Disable in Conversion for nodes that should not be included in the output. Disabled nodes will not appear in the generated JSON, while their child hierarchy is preserved.

4	Run Convert After configuration is complete, click Convert to generate the GUI Guider project JSON and review the result in the output area.

6. Generate the Project and Import It into GUI Guider

After conversion is complete, first review the structure in the GUI Guider Project JSON area. If the node type, hierarchy, or disabled status does not match expectations, return to the design tree, adjust the mapping, and run Convert again.

Once the result is confirmed, click Download to export the zip package. The exported package includes the converted project files and related image resources. Extract the zip file, open GUI Guider, select Import Project on the home page, and choose the .guiguider file from the extracted folder to complete the import. If the design uses custom fonts, copy the font files to the resources/font folder in the project directory.

After import, developers can continue editing the interface in GUI Guider and validate the project using the JS simulator, the C simulator, or the target platform.

7. Use Cases and Best Practices

This plugin is especially useful for teams that already have Figma designs and want to quickly create a GUI Guider project starting point. It can support projects with clear page structures, frequent design iterations, or a need to reduce repetitive communication between design handoff and embedded GUI development.

• Keep the design structure close to the widget hierarchy: The closer the Figma layer structure is to the parent-child relationship of LVGL widgets, the easier the converted result is to understand and maintain.
• Treat the converted result as an engineering starting point: The plugin helps reduce initial setup work, but resources, fonts, rendering capabilities, and runtime behavior still need to be validated on the embedded platform.
• Keep the import environment clean if import fails: If the project cannot be imported successfully into GUI Guider, remove the previously imported design project and retry from a clean state.

8. Summary: Bringing Design into the Engineering Workflow Faster

The Figma to GUI Guider plugin provides a more direct connection between Figma designs and GUI Guider projects. Through design tree parsing, LVGL type mapping, node-level conversion control, JSON preview, and project package export, developers can bring existing design assets into the GUI Guider workflow faster, then continue with engineering edits, simulation, and target-platform validation.

For teams that already use Figma for interface design, this plugin helps reduce repetitive interface-building work and enables smoother collaboration between design handoff and embedded GUI development.

Search for Figma to GUI Guider in Figma Community to try the plugin, then use GUI Guider to continue editing, simulation, and target-platform validation. We welcome your questions, suggestions, and practical feedback as we continue improving the workflow from design to embedded GUI implementation.