diff --git a/docs/src/_static/images/figma_to_lvgl_menu.png b/docs/src/_static/images/figma_to_lvgl_menu.png new file mode 100644 index 0000000000..625b3d20f3 Binary files /dev/null and b/docs/src/_static/images/figma_to_lvgl_menu.png differ diff --git a/docs/src/_static/images/figma_to_lvgl_plugin.png b/docs/src/_static/images/figma_to_lvgl_plugin.png new file mode 100644 index 0000000000..0204d691be Binary files /dev/null and b/docs/src/_static/images/figma_to_lvgl_plugin.png differ diff --git a/docs/src/details/xml/editor/install.rst b/docs/src/details/xml/editor/install.rst index e16fa9b9eb..1a892fbb3a 100644 --- a/docs/src/details/xml/editor/install.rst +++ b/docs/src/details/xml/editor/install.rst @@ -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 `__ +(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. \ No newline at end of file +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 `__ +(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. diff --git a/docs/src/details/xml/editor/user_interface.rst b/docs/src/details/xml/editor/user_interface.rst index 6bb1722481..c5cdeaa303 100644 --- a/docs/src/details/xml/editor/user_interface.rst +++ b/docs/src/details/xml/editor/user_interface.rst @@ -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. diff --git a/docs/src/details/xml/tools/figma.rst b/docs/src/details/xml/tools/figma.rst index 62023f00b6..ca1d3b906a 100644 --- a/docs/src/details/xml/tools/figma.rst +++ b/docs/src/details/xml/tools/figma.rst @@ -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 `__ 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 + + + +