Figma Import Pipeline

I had a couple of days off and decided to have a go at making a simple pipeline to import designs from Figma into Unreal as native UMG widgets. It uses python for the most part, with a little bit of C++ for doing some widget modification.

Bear in mind, this is mostly just a first draft to check if the concept works so it’s far from polished or fully tested, but is still fairly useable in this state so I thought others might be interested.

2 Likes

Hi

I am trying to use your plugin, however I am unable to add it to my project. I get an error saying “The following modules are missing or built with a different engine version: FigmaImporter. Would you like to rebuild them now?”
When I say yes, I an error saying my project could not be compiled and I should try rebuilding from source.
Please help!

Hi,
The github repo itself doesn’t include a binary release so to compile the plugin from source you need to have a toolchain installed (eg Visual C++ with Visual Studio).

If you are using UE5.0.2 I’ve added a binary release you should be able to use: Release v0.1.0 Release · Phil-L-101/Figma2Unreal · GitHub

Download “Figma2Unreal_v0.1.0-UE5.0.zip” and extract to your plugins folder and hopefully that should open for you without needing to build anything.

Thanks a ton for the binary! The project opens up now and I was able to set it up to access the figma file. However there seem to be file writing issues now. I tried with both absolute and relative paths. Here’s output log…

LogEditorScripting: Error: DoesDirectoryExists. Failed to convert the path. Can’t convert path ‘C:/Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Content/UETest/Fabric/’ because the PackagePath ‘C’ doesn’t start with a ‘/’.
LogEditorScripting: Error: MakeDirectory. Failed to convert the path. Can’t convert path ‘C:/Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Content/UETest/Fabric/’ because the PackagePath ‘C’ doesn’t start with a ‘/’.
LogEditorScripting: Error: DoesAssetExists. Can’t convert path ‘C:/Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Content/UETest/Fabric//WBP_Fabric’ because the PackagePath ‘C’ doesn’t start with a ‘/’.
LogEditorScripting: Error: DuplicateAsset. Failed to validate the destination. Can’t convert path ‘C:/Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Content/UETest/Fabric//WBP_Fabric’ because the PackagePath ‘C’ doesn’t start with a ‘/’.
LogEditorScripting: Error: SaveLoadedAsset. Failed to validate the source. The Asset is not valid.
LogTemp: Warning: Couldn’t clear content from widget as widget not valid
LogTemp: Warning: Couldn’t set background for frame as widget not valid
LogPython: Error: Traceback (most recent call last):
LogPython: Error: File “C:/Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Plugins/Figma2Unreal/Content/Python/runImportFigmaDoc.py”, line 9, in
LogPython: Error: FileDocument.writeToUnreal()
LogPython: Error: File “C:\Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Plugins/Figma2Unreal/Content/Python\figmaApi.py”, line 183, in writeToUnreal
LogPython: Error: self.Children = createChildren(self.ChildrenDict, self, self) # Recursively creates child assets
LogPython: Error: File “C:\Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Plugins/Figma2Unreal/Content/Python\figmaApi.py”, line 86, in createChildren
LogPython: Error: ChildNode.writeToUnreal()
LogPython: Error: File “C:\Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Plugins/Figma2Unreal/Content/Python\figmaApi.py”, line 235, in writeToUnreal
LogPython: Error: self.Children = createChildren(self.ChildrenDict, self.Document, self)
LogPython: Error: File “C:\Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Plugins/Figma2Unreal/Content/Python\figmaApi.py”, line 102, in createChildren
LogPython: Error: ChildNode.writeToUnreal()
LogPython: Error: File “C:\Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Plugins/Figma2Unreal/Content/Python\figmaApi.py”, line 293, in writeToUnreal
LogPython: Error: InstanceSource = self.Document.Components[self.ComponentID]
LogPython: Error: KeyError: ‘1:3’

No problem :slight_smile:

What have you set ImportDirectory to? “/Game/” is the base content directory so if you want a subfolder in your content directory use “/Game/MySubfolder/”

I definitely need better error handling/more informative messages.

Thanks again! I was giving the full path to the folder. Didnt realise “/Game/” was the base content directory. Its working now but I am getting a blank UMG canvas with some children. The figma I am trying to reproduce is quite complex but I though Id give it a try :slight_smile: some new errors too. Here’s the log…

LogUObjectHash: Compacting FUObjectHashTables data took 6.76ms
LogSlate: Window ‘Delete Assets’ being destroyed
LogUObjectHash: Compacting FUObjectHashTables data took 5.06ms
LogUObjectHash: Compacting FUObjectHashTables data took 2.58ms
LogUObjectHash: Compacting FUObjectHashTables data took 1.01ms
Cmd: py “…/…/…/…/…/…/Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Plugins/Figma2Unreal/Content/Python/runImportFigmaDoc.py”
LogUObjectHash: Compacting FUObjectHashTables data took 2.57ms
Message dialog closed, result: Ok, title: Unable to Check Out From Source Control!, text: The following assets could not be successfully checked out from source control:
/Game/UETest/WBP_UETest
Cmd: OBJ SAVEPACKAGE PACKAGE="/Game/UETest/WBP_UETest" FILE="…/…/…/…/…/…/Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Content/UETest/WBP_UETest.uasset" SILENT=true
LogSavePackage: Moving output files for package: /Game/UETest/WBP_UETest
LogSavePackage: Moving ‘…/…/…/…/…/…/Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Saved/WBP_UETestF0AC9C6A4A8EA15B5E5EF6BCEC43C01C.tmp’ to ‘…/…/…/…/…/…/Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Content/UETest/WBP_UETest.uasset’
Message dialog closed, result: Ok, title: Unable to Check Out From Source Control!, text: The following assets could not be successfully checked out from source control:
/Game/UETest/WBP_UETest
LogUObjectHash: Compacting FUObjectHashTables data took 2.32ms
Message dialog closed, result: Ok, title: Unable to Check Out From Source Control!, text: The following assets could not be successfully checked out from source control:
/Game/UETest/Fabric/WBP_Fabric
Cmd: OBJ SAVEPACKAGE PACKAGE="/Game/UETest/Fabric/WBP_Fabric" FILE="…/…/…/…/…/…/Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Content/UETest/Fabric/WBP_Fabric.uasset" SILENT=true
LogSavePackage: Moving output files for package: /Game/UETest/Fabric/WBP_Fabric
LogSavePackage: Moving ‘…/…/…/…/…/…/Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Saved/WBP_FabricBA264D69428A27946B3947975C9837A2.tmp’ to ‘…/…/…/…/…/…/Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Content/UETest/Fabric/WBP_Fabric.uasset’
Message dialog closed, result: Ok, title: Unable to Check Out From Source Control!, text: The following assets could not be successfully checked out from source control:
/Game/UETest/Fabric/WBP_Fabric
LogPython: Error: Traceback (most recent call last):
LogPython: Error: File “C:/Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Plugins/Figma2Unreal/Content/Python/runImportFigmaDoc.py”, line 9, in
LogPython: Error: FileDocument.writeToUnreal()
LogPython: Error: File “C:\Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Plugins/Figma2Unreal/Content/Python\figmaApi.py”, line 183, in writeToUnreal
LogPython: Error: self.Children = createChildren(self.ChildrenDict, self, self) # Recursively creates child assets
LogPython: Error: File “C:\Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Plugins/Figma2Unreal/Content/Python\figmaApi.py”, line 86, in createChildren
LogPython: Error: ChildNode.writeToUnreal()
LogPython: Error: File “C:\Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Plugins/Figma2Unreal/Content/Python\figmaApi.py”, line 235, in writeToUnreal
LogPython: Error: self.Children = createChildren(self.ChildrenDict, self.Document, self)
LogPython: Error: File “C:\Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Plugins/Figma2Unreal/Content/Python\figmaApi.py”, line 102, in createChildren
LogPython: Error: ChildNode.writeToUnreal()
LogPython: Error: File “C:\Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Plugins/Figma2Unreal/Content/Python\figmaApi.py”, line 293, in writeToUnreal
LogPython: Error: InstanceSource = self.Document.Components[self.ComponentID]
LogPython: Error: KeyError: ‘1:3’
AssetCheck: New page: Asset Save: multiple assets
LogContentValidation: Display: Validating WidgetBlueprint /Game/UETest/Fabric/WBP_Fabric.WBP_Fabric
LogContentValidation: Display: Validating WidgetBlueprint /Game/UETest/WBP_UETest.WBP_UETest
LogAssetEditorSubsystem: Opening Asset editor for WidgetBlueprint /Game/UETest/WBP_UETest.WBP_UETest
LogChaos: FPhysicsSolverBase::AsyncDt:-1.000000
LogChaos: FPhysicsSolverBase::AsyncDt:-1.000000
LogSlateStyle: Warning: Unable to find Slate Widget Style ‘None’. Using FToolbarStyle defaults instead.
LogSlateStyle: Warning: Unable to find Slate Widget Style ‘None’. Using FToolbarStyle defaults instead.

I got one of the simpler frames to work! Some alignment errors but all the elements are there :slight_smile:

Getting the same error for most of the other screens - Unable to Check Out From Source Control!

LogSavePackage: Moving output files for package: /Game/UETest/RC_3/WBP_RC_3
LogSavePackage: Moving ‘…/…/…/…/…/…/Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Saved/WBP_RC_347C3E59149F2D1067878C2B2B043959E.tmp’ to ‘…/…/…/…/…/…/Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Content/UETest/RC_3/WBP_RC_3.uasset’
Message dialog closed, result: Ok, title: Unable to Check Out From Source Control!, text: The following assets could not be successfully checked out from source control:
/Game/UETest/RC_3/WBP_RC_3
LogPython: Error: Traceback (most recent call last):
LogPython: Error: File “C:/Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Plugins/Figma2Unreal/Content/Python/runImportFigmaDoc.py”, line 9, in
LogPython: Error: FileDocument.writeToUnreal()
LogPython: Error: File “C:\Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Plugins/Figma2Unreal/Content/Python\figmaApi.py”, line 183, in writeToUnreal
LogPython: Error: self.Children = createChildren(self.ChildrenDict, self, self) # Recursively creates child assets
LogPython: Error: File “C:\Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Plugins/Figma2Unreal/Content/Python\figmaApi.py”, line 86, in createChildren
LogPython: Error: ChildNode.writeToUnreal()
LogPython: Error: File “C:\Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Plugins/Figma2Unreal/Content/Python\figmaApi.py”, line 235, in writeToUnreal
LogPython: Error: self.Children = createChildren(self.ChildrenDict, self.Document, self)
LogPython: Error: File “C:\Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Plugins/Figma2Unreal/Content/Python\figmaApi.py”, line 102, in createChildren
LogPython: Error: ChildNode.writeToUnreal()
LogPython: Error: File “C:\Users/geeti/Documents/UnrealProjects/UnrealProjects/FigmaTest/Plugins/Figma2Unreal/Content/Python\figmaApi.py”, line 293, in writeToUnreal
LogPython: Error: InstanceSource = self.Document.Components[self.ComponentID]
LogPython: Error: KeyError: ‘3:3’

Hi,

Thanks for the logs, I’ll try and take a look over the weekend.

These lines:
LogPython: Error: KeyError: ‘1:3’

LogPython: Error: KeyError: ‘3:3’

Are referring to a Dict entry that can’t be found. It’s looking for the source component for a component instance but can’t find it. It may be to do with the order the API reads back components eg. If it finds an instance of a component before it has read in the source component it doesn’t know what to do.

If that is the issue, it hopefully shouldn’t be too difficult to fix.

That did seem to be the issue and I was able to replicate. I’ve updated the python script to write the instances after the rest of the document and that seemed to work for my little test so hopefully works for you too.

I’ll not update the release until I’ve done some more testing but since I’ve only changed the python code, the binaries from the 0.1.0 release should still work fine with the updated script.

Thanks a ton! its working now :slight_smile: