mmertama/figmaqml

Converts Figma designs to QML/QtQuick

figmaqml's Issues

Component Set

please add an ability to be compatible with component sets

Does not build binary files under Windows.

Does not build binary files under Windows.
Hi !

I am trying to build a project under Windows. All dependencies are installed.
In the msvc_build.bat file I specified the correct path to my version of QT.
In x64 Native Tools Command Prompt for VS 2019 I run msvc_build.bat, but I get an error when building.

>cmake .. -DCMAKE_BUILD_TYPE=Release
-- Building for: Ninja
-- The CXX compiler identification is MSVC 19.29.30151.0
-- Detecting CXX compiler ABI info
-- Detecting CXX compiler ABI info - done
-- Check for working CXX compiler: C:/Program Files (x86)/Microsoft Visual Studio/2019/Enterprise/VC/Tools/MSVC/14.29.30133/bin/Hostx64/x64/cl.exe - skipped
-- Detecting CXX compile features
-- Detecting CXX compile features - done
-- Performing Test CMAKE_HAVE_LIBC_PTHREAD
-- Performing Test CMAKE_HAVE_LIBC_PTHREAD - Failed
-- Looking for pthread_create in pthreads
-- Looking for pthread_create in pthreads - not found
-- Looking for pthread_create in pthread
-- Looking for pthread_create in pthread - not found
-- Found Threads: TRUE
-- Performing Test HAVE_STDATOMIC
-- Performing Test HAVE_STDATOMIC - Success
-- Found WrapAtomic: TRUE
-- Found WrapVulkanHeaders: C:/Toolchains/msys64/clang64/include
Project is Qt6
-- Configuring done (0.0s)
-- Generating done (0.0s)
-- Build files have been written to: D:/Personal/Repos/FigmaQML/build

d:\Personal\Repos\FigmaQML\build>msbuild FigmaQML.sln /property:Configuration=Release
Microsoft (R) Build Engine version 16.11.2+f32259642 for .NET Framework
Copyright (C) Microsoft Corporation. All rights reserved.

MSBUILD : error MSB1009:Project file does not exist
Switch: FigmaQML.sln

d:\Personal\Repos\FigmaQML\build>C:\Qt\6.3.2\msvc2019_64\bin\windeployqt --qmldir ../qml Release
"Release" does not exist.

What could be the reason ?

Linux CMake Build failed - Rename fontCache.h at include directory

i tried to compile from sources the FigmaQML project on Linux but I had a problem with CMake build errors about fontCache.h header file.

It should be renamed to fontcache.h on directory include since it is being used on some source files with lowercase letters and as well as on CMakeLists.txt file too.

figma parser exception: unsupported object type 'COMPONENT SET'

I'm trying to convert my figma project at https://www.figma.com/file/VnN352ZUMh54Okc16r6msl/Robotics-Attendance?node-id=0%3A1 to qml. However, when converting, a pop-up appears saying figma parser exception: unsupported object type 'COMPONENT SET'

Are components still supported? If not, is there a workaround for figma components? (i.e. export qml without the figma components)
Any help is appreciated.

JSON parse error

Hello.
I've entered my tockens as told in README.
After pressing the "Connect" button i'm getting JSON parse errors.

Am i missing some intermediate steps?

"COMPONENT_SET" (component variants) unsupported

When attempting to access a project with component variants, application raises the error:

FigmaParser exception: Non supported object type: "COMPONENT_SET"

App data:
Figma to QML generator, version: 1.0.0, Markus Mertama 2020

Exporting individual layers

Hello.
I tried exporting a figma project I have to QML. what I'm getting is the whole page made as a single image, instead of having individual elements put together (as in figma)

Is that the right way the app is intended to work in? or there is a way to make things indiviual?

Do you have a demonstration tutorial video? It looks very complex to use

error QNetworkReply::ProtocolInvalidOperationError

Hi, first of all, excellent project.

I ran the application (also compiled it from source to be sure) and got the output below. Any idea what I'm doing wrong? I think I have the correct user and project token. It keeps showing me the spinning wheel with an interrupt button (that doesn't do anything) and then goes into some infinite loop saying write componets! write elements

My figma project is a very simple project with some rectangles with gradient color and some colored text.

Thanks!

qrc:/QtCheckBox.qml:15:17: QML Rectangle: The current style does not support customization of this control (property: "background" item: QQuickRectangle(0x12b9e93dfb0, parent=0x0, geometry=0,0 0x0)). Please customize a non-native style (such as Basic, Fusion, Material, etc). For more information, see: https://doc.qt.io/qt-6/qtquickcontrols2-customize.html#customization-reference
qml: Save 1 1
qml: Frestore 1 1
write componets!
write elements
doRequestRendering "1:3" "RENDERING"  error QNetworkReply::ProtocolInvalidOperationError
qml: too many requests
qrc:/qt-project.org/imports/QtQuick/Dialogs/quickimpl/qml/MessageDialog.qml:120:25: QML Rectangle: The current style does not support customization of this control (property: "background" item: QQuickRectangle(0x12ba1e4c9d0, parent=0x0, geometry=0,0 0x0)). Please customize a non-native style (such as BaTimeout "1:4_timeout", etc). For more information,
Timeout "1:3_timeout"io/qt-6/qtquickcontrols2-customize.html#customization-reference
write componets!
write elements
doRetrieveImage "RENDERING" "1:3" false QUrl("")
qml: Rendering 1:3 Url not valid ""
qrc:/qt-project.org/imports/QtQuick/Dialogs/quickimpl/qml/MessageDialog.qml:120:25: QML Rectangle: The current style does not support customization of this control (property: "background" item: QQuickRectangle(0x12ba1e4e6b0, parent=0x0, geometry=0,0 0x0)). Please customize a non-native style (such as Basic, Fusion, Material, etc). For more information, see: https://doc.qt.io/qt-6/qtquickcontrols2-customize.html#customization-reference
doRetrieveImage "RENDERING" "1:4" false QUrl("")
qml: Rendering 1:4 Url not valid ""
write componets!
write elements
write componets!
write elements
<ad infinitum>

Connecting signals in FigmaQmlInterface.hpp to another class

Thank you for this great project. The recent updates are fantastic and the project is making my Qt app development much quicker.

I am relatively new to Qt/C++, so forgive me if the answer is obvious.
I am trying to use the eventReceived signal in FigmaQmlInterface.hpp to run a function in another file. I have connected it to a slot in my Landing class constructor:

Landing::Landing(QObject *parent) :  QObject(parent) {
    bool connected = connect(FigmaQmlSingleton::instance(), &FigmaQmlSingleton::eventReceived, this, &Landing::onEventReceived);
}

However, my function onEventReceived never gets called. Printing connected returns true.

Am I doing this properly?

Button changes like color

Good day,

Thank you for this application!

I wanted to find out whether we could add a property to a button for example to be able to 'change' the color when clicked on. In figma I can make a component where the button is not pressed and pressed and they have a different look to them but I'm not sure if it's possible to get it into this program.

I see that I can get the Events when pressing on the button and I can change the text or even the entire 'component'.

In the readme you mention properties like qml?topic_subscribe.text where I can then change the text but I'm not sure what else could be used. (I've used onClicked,text,asLoader)

Thank you!

ptoject token

the way to get the project token is very unclear. all I got from it is to copy the URL and that didn't work.

module "QtGraphicalEffects" is not installed

i try to run qml generated by FigmaQML using qt 6.2 in qt creator and get error QQmlApplicationEngine failed to load component
qrc:/Test/main.qml:3:1: module "QtGraphicalEffects" is not installed what i make to do?
main.cpp code
`#include
#include

int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);

QQmlApplicationEngine engine;
const QUrl url(u"qrc:/Test/main.qml"_qs);
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                 &app, [url](QObject *obj, const QUrl &objUrl) {
    if (!obj && url == objUrl)
        QCoreApplication::exit(-1);
}, Qt::QueuedConnection);
engine.load(url);

return app.exec();

}
`
I also attached qml file in qml.zip
qml.zip

cant use qml file with qtquick

python code :

import os
from pathlib import Path
import sys

from PySide2.QtGui import QGuiApplication
from PySide2.QtQml import QQmlApplicationEngine


if __name__ == "__main__":
    app = QGuiApplication(sys.argv)
    engine = QQmlApplicationEngine()
    engine.load(os.fspath(Path(__file__).resolve().parent / "Page_1_figma_Card_figma.qml"))
    if not engine.rootObjects():
        sys.exit(-1)
    sys.exit(app.exec_())

it showed nothing after i run this code

how should i fix this problem ,is there any mistake in my code?

data(qml,code,imgae):
Page_1_figma.zip

Component Type

Hello,

First of all, the work is perfect. I've tested it on several projects. I am new to Figma. However, I'm wondering this. Can we identify the components in the Figma by QML what their equivalents are? For example, I want the "Rectangle" component in Figma to be "Window" in a QML. Is there such a feature or any trick?

Can't install on linux (Depencies file ? )

Trying to install on Linux (Ubuntu 22) , tried install different modules that were missing . however i still get some missing .
are there any apt / list install that includes all the requirements ?

cmake .. -DCMAKE_BUILD_TYPE=Release
Compiling for ~/Qt6
Compiling pre 
Compiling tcn 
-- Could NOT find WrapVulkanHeaders (missing: Vulkan_INCLUDE_DIR) 
-- Could NOT find WrapVulkanHeaders (missing: Vulkan_INCLUDE_DIR) 
-- Could NOT find Qt6Core5Compat (missing: Qt6Core5Compat_DIR)
CMake Error at CMakeLists.txt:41 (find_package):
  Found package configuration file:

    "MY PATH"/Qt6/6.6.2/gcc_64/lib/cmake/Qt6/Qt6Config.cmake

  but it set Qt6_FOUND to FALSE so package "Qt6" is considered to be NOT
  FOUND.  Reason given by package:

  Failed to find required Qt component "Core5Compat".

  Expected Config file at
  "MY PATH"/Qt6/6.6.2/gcc_64/lib/cmake/Qt6Core5Compat/Qt6Core5CompatConfig.cmake"
  does NOT exist

  

  Configuring with -DCMAKE_FIND_DEBUG_MODE=TRUE might reveal details why the
  package was not found.

  Configuring with -DQT_DEBUG_FIND_PACKAGE=ON will print the values of some
  of the path variables that find_package uses to try and find the package.



-- Configuring incomplete, errors occurred!
See also "MY PATH"/Downloads/FigmaQML-3.1.0/build/CMakeFiles/CMakeOutput.log".

Parse error

FigmaQML have helped me a great deal in converting graphical elements to QML. Thank you for your dedication and hard work on FigmaQML.

Using the attached file, FigmaQML fails with a error message which could be somewhat more helpful. Please let me know if you require any further information or if there is anything else I can do to assist in resolving this issue. I appreciate your attention to this matter and look forward to a resolution.

The Figma-file is attached to this bugreport:

ContactWindow.fig.gz