Figma2UMG

Summary

Figma2UMG is a powerful plugin designed to seamlessly integrate Figma designs into Unreal Engine projects by generating Unreal Motion Graphics UI Designer (UMG) files. With Figma2UMG, developers and designers can easily import Figma assets, including UI designs, icons, and graphics, directly into their Unreal Engine environment. The plugin simplifies the workflow between design and development teams, allowing for efficient collaboration and rapid prototyping. Figma2UMG supports the import of Figma files while preserving frames, components, groups, and other design elements, ensuring fidelity and accuracy during the transition from design to implementation. Whether creating immersive experiences or interactive applications, Figma2UMG empowers developers to bring their Figma designs to life within Unreal Engine with ease. This plugin utilizes the Figma REST API and requires an access token for authentication.

Key Features

Integration of Figma designs into Unreal Engine projects by generating UMG files.
Enables rapid prototyping and iteration within Unreal Engine environment.
Layout accuracy
Figma Component Support
- Each Figma component generates a UWidgetBlueprint
- Libraries - https://help.figma.com/hc/en-us/articles/360041051154-Guide-to-libraries-in-Figma
- Properties - https://help.figma.com/hc/en-us/articles/5579474826519-Explore-component-properties
- Variants - https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants
- InstanceSwap - https://help.figma.com/hc/en-us/articles/360039150413-Swap-components-and-instances
Figma Flow - Generates the logic to follow the prototype flow in Figma
Fonts - It will look for fonts installed in unreal but if not found can download from Google Fonts - https://fonts.google.com/
Override - Switch from the UMG standard classes to use your own. Note that they need to derived from the UMG UClasses
Patch - Can patch the downloaded data into the Blueprints so you don't loose any work done locally.

Compatibility

Compatible with Unreal Engine 5.2+
Fully tested with Google design layout.
Imports fonts from Google Fonts

Get Started

We are thrilled to announce that Figma2UMG is now available for sale on the Unreal Marketplace!

MarkedplaceURL: https://www.unrealengine.com/marketplace/en-US/product/figma2umg

Support: figma2umg@buvi.games

Bug report: Please share a figma file for testing when reporting bugs. If the issue in on the layout, please share also an UMG with the expected result.

Join the Discord channel for more information.

Usage

Install the Figma2UMG plugin into your Unreal Engine project.
Obtain an access token from Figma for authentication. - https://www.figma.com/developers/api#access-tokens
[Optional] Obtain an google font access token to download required fonts. - https://developers.google.com/fonts/docs/developer_api
You can use https://www.figma.com/community/plugin/1368487806996965174/figma2umg as a playground to test the import.

Save your options in the Project Settings
- You can add your Access Token, File Key and Library File Keys to share with your team, so multiple developers can import.

From the Content Browser's Context Menu access the import Widget
- You can add IDs to import only elements of your file
Hit the Import button and wait while Figma2UMG request the files from Figma and import it into your Unreal Engine project with ease, generating UMG files for easy integration into your project's UI.

Documentation

Before importing your own Figma file, take the time visit the https://www.figma.com/community/plugin/1368487806996965174/figma2umg and open the plugin to see how to setup components, instances and flow.

Components

A figma Component will generate a UWidgetBlueprint.

Each property on your Component will be a member variable of the UWidgetBlueprint.

Instances

A figma Instance will generate a UUserWidget from the UWidgetBlueprint of it's component.

Each member variable from the component's properties will be set here. This is how you control the values of your instance, not by changing the value directly on the instance. This will not work as no member variable was created when the UWidgetBlueprint, therefore, they are not accessed.

Some Properties are more comples, like InstanceSwap and Variant. They will generate functions on the UWidgetBlueprint and those will be called from the PreConstruct of the Blueprint owning the UUserWidget.

Buttons

A button is created either by forcing an frame to be a button or by creating a component set.

ComponentSet button

By creating a component with variants and naming the variants Default, Hovered, Pressed and Disable, the importer will create a UButton and each of the variation will be used to setup the FSlateBrush. Not that only the FSlateBrush can change between the button states, so, the base layout of the Default is used while the color

Frame to Button

The importer has the option to make a UButton out of a Figma Frame based on name comparison. This will generate an UButon where all the states (Normal, Hovered, Pressed and Disable) are going to be the same.

Non-Button Variants

Variants where the name do not match the button ones will create a UWidgetSwitcher with all the instances as children Widgets.

Fill and Stroke

Anything that is not a solid color will create an UTexture2DBuilder or UMaterial.

Gradient Fills

Any gradient will require a UMaterial to be create. The UMaterial will contain a shader with the value from Figma. All types of Gradient are supported. But keep in mind that as Thick Borders are also requitring a custom UMaterial, both are not supported currently together. Gradient fills only supports borders with 1 px currently.

Thick Border - UPDATE: Rounded box supports thicker borders. The plugin will be updated with this feature soon.

UBorder and UImage only support borders with 1pixel. To get thicker borders the plugin creates an UMaterial for that.

Shapes and Images

Only Rectangles and Circles are supported to have Image in the brushes. For other shapes Figma2UMG request Figma to render the node as an image and the whole Figma's node will become an image.

Buvi

Kävlingevägen 104, 226 50

Lund, Sweden

(+46) 703 89 81 81

beto@buvi.games

Page updated

Google Sites

Report abuse