WebGL Demo Here - created with a 1-Click Import from this Figma Community file or view live Figma document here.
Example Unity Project Here - showing what gets generated by the tool
Easily bring your Figma Documents, Components, Assets and Prototypes to Unity! This package makes it super simple to connect a Figma document to your Unity project and import all of your assets as native Unity UI.
It's great for game jamming, quick prototyping and easily bringing your Figma designs into Unity. Tested on Unity 2021.3.X (other versions untested as yet)
Warning This is a very early release, so there's a lot that is missing, and probably a lot of bugs - feel free to send over any PRs or drop me a message on 🐤Twitter or 🐘Mastodon.
Please note - currently only supports Unity 2021.3 and later!
https://github.com/simonoliver/UnityFigmaBridge.git
https://www.figma.com/file/..../...
)By default, the importer will recreate the prototype flow found in the Figma File (as defined in the prototype tab). You can disable this by turning off "Build Prototype Flow" which will just generate Figma assets.
It also supports Figma sections, implementing Figma's Sections behaviour here. Active screens in each section will be remembered during prototype play.
If Build Prototype Flow is selected, it will create required assets (Canvas, ProtoTypeController, EventSystem) and instantiate the default screen in the active scene. Hit play to start the prototype flow and buttons will transition to the specified screen as per the Figma document. Currently there is a dew
If you only want to import specific pages from the Figma document (for example if you use a page for design notes or brainstorming), you can tick "Select Pages to import" in the settings file. It will then download the document and show you a list of pages to choose from. This can help speed up import time and reduce the number of assets imported. Any page that is not selected will have the following rules:
Node Type | Unity Mapping |
---|---|
Frames | Any frame placed on the root of a page is considered a "screen" and turned into prefab, stored in the Screens Folder |
Image fills | These are downloaded as PNGs and imported as sprites and stored in the ImageFills folder with the name of Figma ID |
Components | Theses are created as prefabs, and stored in the Components Folder |
Component Instances | The matching component prefab is instantiated, and any modified properties are applied |
Pages | Prefabs of each complete page are stored in the Pages folder |
Vectors | Rendered on the server as a PNG (see Server Rendering nelow) |
With the goal of trying to make it 1-click sync, if the font doesnt exist in your project it will try and download a matching TTF font from Google Fonts ( from Jonathan Neal's google-fonts-complete project) and generate a new TextMesh Pro Font to match.
There are fallbacks to matching fonts if this can't be done
To apply shadow and stroke settings, the importer will generate material presets as required.
As a result of the way that TextMeshPro handles outlines, the package will apply a custom shader (Fima/TextMeshPro) which uses "outside" positioning for strokes (the default in Figma), rather than "center" which TMPro usually uses (in future we'll support all three positions)
The package supports both Gamma and Linear rendering, but there are some things to bear in mind:
When the document is loaded, it will look for nodes that should be rendered on the server. Rendering is done at a scale set in the settings file (Server Render Image Scale, defaults to 3). Currently these are when any of the following are true:
If you are seeing a lot of server rendering, check your Figma doc to see how you might be able to optimise (for example making sure all vectors are in a component so only rendered once)
Screens will behave according to constraints setup in the constraints panel, with the exception of "Scale" constraint. You can use the SafeArea component to automatically adjust the safe area for devices that use them (eg iPhone), as mentioned in Binding Behaviours
Vertical or Horizontal layout groups will be added to mirror the auto layout settings of a given object in the Figma document. Please note this is disabled by default (enable in settings) as it can cause issues with complex layouts.
As syncing with Figma replaces existing components and screens, the package makes it easy to automatically add behaviours at sync time, to prevent you having to manually add them each time you sync.
MonoBehaviours can be automatically bound to components and screens, and methods bound to button clicks. The importer uses reflection to do the following:
public TextMeshPro_UGUI Title
and if there is a text object called Title then it will
be assigned to that field.[[BindFigmaButtonPress("PlayButton")]]
attribute to a method, then it will add an onClick
listener to a button with that name (searching within a depth of 2)Some special case components are automatically added:
If a Button is added, it will look for a child node called "selected". If this is found, it will use this for rollover state.
The FigmaScreenController can have a TransitionEffect which implements transitions in and out animations. By default a template fade to black effect is created but can be replaced and assigned.
These should be imported automatically when the package is added
If you need to change your personal access token, use Figma Bridge → Set Personal Access Token
Uses:
Big thanks for making those available online!
Contributions are very welcome! There's a lot that is missing, and probably a lot of bugs - feel free to send over any PRs or drop me a message on 🐤Twitter or 🐘Mastodon.