search

mmertama / FigmaQML

Converts Figma designs to QML/QtQuick
MIT License
200 stars 38 forks source link

readme

FigmaQML

(FigmaQML)[https://github.com/mmertama/FigmaQML] is an application to generate QML sourcecode from Figma designs for QtQuick applications. FigmaQML will let designer to compose the UI without need of programmer to reproduce design using UI code. Omitting that tedious, redundant step, will dramatically decrease development effort. FigmaQML will provide a QML code that is ready programmer to focus on implementing functionality. You can inject tags in you Figma Design that enables seamlessly assign functionality so that there is no need to implement any QML UI code.

FigmaQML supports both Desktop and Qt for MCU development.

Quick steps

  1. Make figma design.
  2. Start FigmaQML.
  3. Enter your user and personal tokens to access your project.
  4. Press Update.
  5. Press QtQuick Tab.
  6. Select you 1st view (use those [1][1] widgets).
  7. Go File/Export Qt Desktop.
  8. Add View... to add your application views in the included views (if any).
  9. Save... save in your application folder. Here a folder is created (MY_PROJECT below)
  10. In your application CMakeLists.txt - MY_PROJECT and Page_1 may vary.
    • add_subdirectory(${CMAKE_SOURCE_DIR}/MY_PROJECT/Page_1/FigmaQmlInterface)
    • target_include_directories(${PROJECT_NAME} PRIVATE MY_PROJECT/Page_1/FigmaQmlInterface")
    • target_link_libraries(${PROJECT_NAME} PRIVATE FigmaQmlInterface
  11. Add FigmaQmlInterface::registerFigmaQmlSingleton(QQmlEngine) before loading a QML code in your C++ code.
    • Needed only for dynamic code.

  12. Insert in QML code

        FigmaQmlUi {
        id: figmaUi
        anchors.fill: parent
        }

FigmaQML UI

File

Tabs

Views

Connect

Settings

Components

Export Qt for Desktop

Execute

Save

Store generated files in your application folder.

Export Qt for MCU

(available only on Linux)

Qt for MCU dialog

Execute

For UI verification "Execute" builds a dummy UI and execute it on the connected MCU device.

Save

Store generated files in your application folder.

API Documentation

FigmaQML Documentation

Dynamic code

The FigmaQML generated code is exported into application code where it is used like any QML item. FigmaQmlUi Item takes charge of rendering the UI graphics. You can inject the FigmaQML generated UI in your application just by adding a FigmaQML item.


FigmaQmlUi {
        id: figmaUi
        anchors.fill: parent
        }

That code renders the UI on the parent space, that is typically the full screen rectangle.

Displaying is only part of the UI: Any useful applications would be able to change its content and interact with user. Therefore, the new FigmaQML adds concept for dynamic functionality, and introduces few methods to act with FigmaQML generated code.

The special innovation is to use a special naming in the Figma document, i.e. tagging. The naming is simple and practical – name targeted Figma element format is with “qml?name.command” - the name identifies the element in QML and command tells what to do:

Besides of those methods you can include multiple views in your application, and navigate between them using FigmaQmlSingleton::setView that changes entire view.

FigmaQmlSingleton.setView(1);

Integrate for Desktop project

  1. Add FigmaQmlInterface into target_link_libraries

    target_link_libraries(${PROJECT_NAME} PRIVATE` FigmaQmlInterface)

  2. In your application QML file

    • Import FigmaQmlInterface and add FigmaQmlUi
    import FigmaQmlInterface

...

FigmaQmlUi {
    anchors.fill: parent
}

  3. Register singleton

    Call registerFigmaQmlSingleton before loading your UI.

    
#include <QtGui>
#include <QtQml>

#include "FigmaQmlInterface/FigmaQmlInterface.hpp"

int main(int argc, char** argv) {
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    FigmaQmlInterface::registerFigmaQmlSingleton(engine);
    engine.load("qrc:/qml/main.qml");
    return app.exec();
}

Integrate for MCU project

  1. CMake

    • See also injecting source for loader above
    • Add FigmaQmlInterface into target_link_libraries 
      target_link_libraries(${PROJECT_NAME} PRIVATE` FigmaQmlInterface)

  2. qmlproject file

    • Add import path to FigmaQmlInterface (the path is in the generated code, and depends Figma naming) 
      importPaths: ["path_to/FigmaQmlInterface"]
    • Apply Spark See Qt doc

  3. In your application QML file

    • Import FigmaQmlInterface and add FigmaQmlUi
    import FigmaQmlInterface

...

FigmaQmlUi {
    anchors.fill: parent
}

Run

Binaries

Build and deploy

Example

[QMQTTI] (https://github.com/mmertama/qmqttiapp) is an example application UI composed using Figma. It is a Messaging application on top of MQTT protocol. The UI is ugly, but its purpose is how easy it is update when FigmaQML is used to decouple visuals from functionality.

FAQ

Other info

Testing

There are few scripts in the [test]() folder that are used for testing. Since the test data itself is under a personal Figma account, there are no automated tests provided along the FigmaQML sources. However if you have a good set of Figma documents available you can execute tests using next example:

 export IMAGE_COMPARE="python ../figmaQML/test/imagecomp.py"
 export IMAGE_THRESHOLD="0.90"
 token=123456-aaaabbbbb-cccc-dddd-8888-1234567890
 echo "Test time: $(date)" >> test_log.txt 
 {
 echo Test_no: 1
 ../figmaQML/test/runtest.sh ../figmaQML/Release/FigmaQML $token Nku226IVrvZtsRc71QJyWx
 if [ $? -ne 0 ]; then echo fail; exit; fi
.....
 echo Test_no: 3 
 ../figmaQML/test/runtest.sh ../figmaQML/Release/FigmaQML $token OZcdWgROy0Czk0JASRF21v "2-10"
 if [ $? -ne 0 ]; then echo fail; exit; fi
 echo Test_no: 4
 ../figmaQML/test/runtest_image.sh ../figmaQML/Release/FigmaQML "2-3"
 if [ $? -ne 0 ]; then echo fail; exit; fi
 echo Test_no: 5 
 ../figmaQML/test/runtest_image.sh ../figmaQML/Release/FigmaQML "2-4"
 if [ $? -ne 0 ]; then echo fail; exit; fi
 echo Test_no: 6 
 ../figmaQML/test/runtest.sh ../figmaQML/Release/FigmaQML $token bZDWbBfInVrD1ijuIJZD88WG
 if [ $? -ne 0 ]; then echo fail; exit; fi
.... 
 echo Test_no: done
 } 2> test_errors.txt | tee -a test_log.txt