Figma to LVGL

About this plugin

Unlock the power of LVGL with our Figma plugin, designed to bridge the gap between design and development. This plugin allows you to export your Figma designs into LVGL-compatible XML, paving the way for seamless integration with the upcoming LVGL Editor.

Plugin modes

Use our plugin in two ways:

1. As a standalone plugin for quick style exports
2. In Dev Mode as a CodeGen plugin, seamlessly integrated into your development workflow alongside other code generation tools

Current version

Our initial release focuses on the basics: exporting XML style attributes from your Figma designs. While currently limited in scope, this is just the beginning! In the coming months, we'll be rolling out extensive features that align with the LVGL Editor's development, including full component export, nested structures, and more sophisticated styling options.

About LVGL Editor and XML format

The LVGL Editor is crafted to accelerate the visual development of UIs while maintaining the flexibility of code where it matters most. Our XML format is tailored for developers, offering a declarative approach to UI design that emphasizes component-based thinking.

Key features of the XML format:

1. Component-based design: Think in components to create modular and reusable UI elements.
2. Declarative widget description: Define widgets in a clear and structured manner.
3. Nesting support: Easily nest widgets to build complex interfaces.
4. Developer-friendly code generation: Produce clean and efficient code that developers can easily work with.
5. Runtime widget loading: Load widgets dynamically at runtime for flexible UI updates.
6. Real-time preview: Get instant feedback with a live preview of your components.
7. Component testing: Test new components to ensure quality and performance.

Not a no-code tool

The Editor is designed for developers who are comfortable with coding. The XML format aids in defining the view and provides a preview for rapid design iterations. While visually intensive parts can be crafted using XML, more complex interactions and logic should be handled through code, leveraging the widget's API and defining callbacks as needed.

Embrace the future of UI development with the LVGL Figma Plugin, where design meets code in perfect harmony.