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

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>

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
+Install WSL
-resulting image to your workstation.  Then execute the downloaded installer to install
+-----------
-|lvglpro|.
 
+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
+Install Podman
-executable (``chmod +x LVGL_Pro_Editor.AppImage``), and running it.
+--------------
+
+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
+:Problem:   If you double click the ``.AppImage`` file and nothing happens, try
-            distributions.  If you double click the ``.AppImage`` file and nothing
+            running it from the terminal. If you see this error:
-            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
+Install Podman
-to your Applications folder in Finder.
+--------------
+
+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

@@ -29,21 +29,15 @@ won’t need to do anything manually, it stays up-to-date in the background.
 Login
 *****
 
-.. TODO
+1. enter your email address
-
+2. you will receive an email with an OTP (One-Time Password)
-hints:
+3. it will create a user for you (no password is needed)
-- 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
 
 
 
 Licence Selection
 *****************
 
-.. TODO
-
 After logging in you need select a licence for the list.
 
 

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
+|lvglpro|\ 's `Figma <https://www.figma.com/community/plugin/1362005814860504095/
-updated).
+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
+Since this is not a magical auto-importer, the developer retains full control
-already there and add this to its content:
+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
+: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
+           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>`__
+           `Manage Personal Access Tokens <https://help.figma.com/hc/en-us/articles/
-           article in Figma documentation.
+           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,
+Because ``project_local.xml`` contains a personal token, it should be added to
-include a ``figma_node_id=...`` attribute in it.  Thereafter, clicking the FigmaSync
+``.gitignore`` and stored only locally.
-button will update each respective style from the updated Figma design.
 
+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
+Using with the CLI
------------------
-
-
-Connecting Figma to the Editor
-------------------------------
-
-
-Synchronizing Data
 ------------------
 
+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