mmertama / figmaqml Goto Github PK
View Code? Open in Web Editor NEWConverts Figma designs to QML/QtQuick
License: MIT License
Converts Figma designs to QML/QtQuick
License: MIT License
please add an ability to be compatible with component sets
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 ?
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.
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.
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
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?
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>
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?
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!
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.
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
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
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?
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".
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:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.