LVGL Flow for Figma

If you build embedded UIs, you have probably rebuilt a Figma screen by hand more than once. This plugin takes that work off your plate. LVGL Flow reads your Figma design and writes it out as LVGL XML. Design a file today, convert it in minutes and evaluate with Live Preview inside LVGL Pro.

Two ways to use it:

You can use it on its own, or together with LVGL Pro.

On its own, open Inspect mode in any file and copy the LVGL styles for a layer straight from Figma. Nothing to install, nothing to set up.

With LVGL Pro running, you get the full export: your design system and screens come across as a real LVGL project on your machine.

What comes across:

When you export through LVGL Pro, the plugin writes out a structured project:

Your tokens: Colors, fonts, numbers, and styles land in a clean globals.xml.

Your components: Each component and its variants, with the right reset and baseline styles so they look correct in LVGL.

Your screens and flows: Send across a few selected screens or a whole prototype flow, navigation included.

Your intent: Annotate layers to say what they really are (a button, a slider, a switch) and the export follows what you meant, not just what it looked like. You even get to bind them to subjects to get interactive code.

Your assets: Images and fonts are pulled along with everything else and referenced for you.

Everything runs locally through LVGL Pro on your own machine. Your design never leaves your device, and nothing goes to any server.

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:

Component-based design: Think in components to create modular and reusable UI elements.

Declarative widget description: Define widgets in a clear and structured manner.

Nesting support: Easily nest widgets to build complex interfaces.

Developer-friendly code generation: Produce clean and efficient code that developers can easily work with.

Runtime widget loading: Load widgets dynamically at runtime for flexible UI updates.

Real-time preview: Get instant feedback with a live preview of your components.

Component testing: Test new components to ensure quality and performance.

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