Mirrors_UI_SDK/lvgl
1
0
Fork 0
mirror of https://github.com/lvgl/lvgl.git synced 2026-05-10 04:37:55 +08:00
Code Issues Actions 23 Packages Projects Releases Wiki Activity

docs(editor): improve installation and figma docs (#8998)

Browse Source 
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
Co-authored-by: Victor Wheeler <vwheeler63@users.noreply.github.com>
This commit is contained in:
Gabor Kiss-Vamosi
2025-10-09 09:28:15 +02:00
committed by GitHub
parent 9c3e5ace43
commit f3e5d6ebee
5 changed files with 153 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/_static/images/figma_to_lvgl_menu.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

docs/src/_static/images/figma_to_lvgl_plugin.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

docs/src/details/xml/editor/install.rst
+54 -14
View File
@@ -5,28 +5,57 @@
Installation
============
Here are the guides to download and install |lvglpro| Editor appropriate for your platform:
Here are the guides to download and install |lvglpro| Editor appropriate for your
platform:
Windows
*******
Navigate to https://pro.lvgl.io/#download and press the [Download] button and save the
resulting image to your workstation. Then execute the downloaded installer to install
|lvglpro|.
Install WSL
-----------
Before using the Editor ``WSL`` (Windows Subsystem for Linux) needs to be installed.
Open a Terminal and type ``wsl.exe --list --verbose`` to see if it's already installed.
If it's not, just type ``wsl --install`` and hit Enter.
Install the Editor
------------------
Navigate to https://pro.lvgl.io/#download and press the [Download] button and save
the resulting image to your workstation. Then execute the downloaded installer to
install |lvglpro| Editor.
Linux
*****
Installing |lvglpro| Editor on Linux is as simple as downloading the AppImage, making it
executable (``chmod +x LVGL_Pro_Editor.AppImage``), and running it.
Install Podman
--------------
The Editor is capable of recompiling the preview to use and run your C code as well.
We handle the compilation in a container using `Podman <https://podman.io/>`__
(similar to Docker).
The simple way of installing Podman is via Terminal:
- **Debian, Ubuntu, Linux Mint**: ``sudo apt-get install podman``
- **Fedora**: ``sudo dnf -y install podman``
- **Arch, Manjaro Linux**: ``sudo pacman -S podman``
For other distos check out https://podman.io/docs/installation#installing-on-linux
Install the Editor
------------------
Installing |lvglpro| Editor on Linux is as simple as downloading the AppImage, making
it executable (``chmod +x LVGL_Pro_Editor.AppImage``), and running it.
Troubleshooting
---------------
:Problem: Some users have experienced trouble launching Editor on some Linux
distributions. If you double click the ``.AppImage`` file and nothing
happens, try running it from the terminal. If you see this error:
:Problem: If you double click the ``.AppImage`` file and nothing happens, try
running it from the terminal. If you see this error:
.. code-block:: bash
@@ -34,16 +63,27 @@ Troubleshooting
Using GTK 2/3 and GTK 4 in the same process is not supported
Trace/breakpoint trap (core dumped)
:Solution: Specify the gtk version of the application with ``--gtk-version=3``.
:Solution: Specify the GTK version for the application with ``--gtk-version=3``.
.. code-block:: bash
./path/to/editor.AppImage --gtk-version=3
MacOS
*****
Just download either the ARM for Apple Silicon (AMD) version) and drag the application
to your Applications folder in Finder.
Install Podman
--------------
The Editor is capable of recompiling the preview to use and run your C code as well.
We handle the compilation in a container using `Podman <https://podman.io/>`__
(similar to Docker). The simplest way to install Podman is via ``brew`` using
``brew install podman``.
For more information visit https://podman.io/docs/installation#macos
Install the Editor
------------------
Just download either the ARM (for Apple Silicon) or AMD version and drag the
application to your Applications folder in Finder.
docs/src/details/xml/editor/user_interface.rst
+3 -9
View File
@@ -29,21 +29,15 @@ won’t need to do anything manually, it stays up-to-date in the background.
Login
*****
.. TODO
hints:
- enter your email address
- you will receive an email with an OTP (On Time Password)
- it will create a user for you
- no password is needed
1. enter your email address
2. you will receive an email with an OTP (One-Time Password)
3. it will create a user for you (no password is needed)
Licence Selection
*****************
.. TODO
After logging in you need select a licence for the list.
docs/src/details/xml/tools/figma.rst
+96 -22
View File
@@ -1,3 +1,4 @@
.. include:: ../editor/substitutions.txt
.. _editor_figma:
=================
@@ -7,15 +8,89 @@ Figma integration
Overview
********
When Figma is used to create a UI design, parts of it can be directly imported (or
updated).
|lvglpro|\ 's `Figma <https://www.figma.com/community/plugin/1362005814860504095/
figma-to-lvgl>`__ plugin displays the style properties of selected UI elements in
Figma.
These properties can be easily copy-pasted as style attributes in the Editor,
enabling pixel-perfect design implementation.
Usage
*****
The plugin also shows the "Figma node ID" of the selected element, which allows
style synchronization. This means that, with a single click in the Editor or with
a CLI command, style properties from Figma can be downloaded and updated in the
XML files.
To enable sync-ing with a Figma project, add a ``project_local.xml`` file if it isn't
already there and add this to its content:
Since this is not a magical auto-importer, the developer retains full control
over how files, styles, components, etc., are organized. At the same time, the
designer is free to work in Figma without constraints. The developer should
take responsibility for restructuring the design with a developer mindset to
ensure a maintainable, clean, and optimal structure.
The Figma to LVGL Plugin
************************
The Figma to LVGL Plugin is available publicly in Figma's plugin store and can
be added to both public and private projects, even without a Figma subscription.
To install the Figma to LVGL Plugin, go to the Figma menu -> Plugins -> Manage
plugins and find it in the list.
.. figure:: /_static/images/figma_to_lvgl_menu.png
:align: center
:alt: Figma to LVGL Installation
:scale: 75
Click "Manage Plugins ..." to find and install Figma to LVGL
If you used it earlier, it will appear among the "Recents".
Once it's installed, a small window will appear showing the style properties of
the selected element.
.. figure:: /_static/images/figma_to_lvgl_plugin.png
:align: center
:alt: Figma to LVGL listing style properties of the selected UI element
:scale: 75
Figma to LVGL listing style properties of the selected UI element
Usage in the Editor
*******************
The style properties listed by the plugin can be copy-pasted into any XML style
section.
For example:
.. code-block:: xml
<component>
<styles>
<style name="style_from_figma"
figma_node_id="1:2" bg_color="0xfb0000"
border_color="0x4e3535"
border_opa="255"
border_width="14"
width="200"
height="177"
radius="13"
/>
</styles>
<view>
<style name="style_from_figma" />
</view>
</component>
Synchronizing Style Properties
******************************
If you copied the ``figma_node_id="..."`` part from the plugin, the style in the
XML is connected to a specific element in Figma, and the Editor can download the
style properties.
To enable synchronization, add a ``project_local.xml`` file with the following
content:
.. code-block:: xml
@@ -25,27 +100,26 @@ already there and add this to its content:
where:
:XXXXXX: is the string after "design" in the Figma URL. For example, if the Figma
URL is ``https://www.figma.com/design/P8NM0qOqgWfYpbENhAKqYb``, then the
:XXXXXX: is the string after "design" in the Figma URL. For example, if the Figma
URL is ``https://www.figma.com/design/P8NM0qOqgWfYpbENhAKqYb``, then
XXXXXX would be "P8NM0qOqgWfYpbENhAKqYb".
:YYYYY: is the Personal Access Token that you can generate as described in the
`Manage Personal Access Tokens <https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens>`__
article in Figma documentation.
`Manage Personal Access Tokens <https://help.figma.com/hc/en-us/articles/
8085703771159-Manage-personal-access-tokens>`__ article in Figma
documentation.
Then, for each target style you want to be linked to a style from the Figma design,
include a ``figma_node_id=...`` attribute in it. Thereafter, clicking the FigmaSync
button will update each respective style from the updated Figma design.
Because ``project_local.xml`` contains a personal token, it should be added to
``.gitignore`` and stored only locally.
After that, clicking the FigmaSync button (top right-hand corner) will update each
style with a ``figma_node_id`` from the latest Figma design.
LVGL Figma Plugin
-----------------
Connecting Figma to the Editor
------------------------------
Synchronizing Data
Using with the CLI
------------------
The :ref:`CLI tool <editor_cli>` can also synchronize styles from Figma in CI/CD:
.. code-block:: bash
lved-cli.js figma-sync path/to/project --start-service