はじめに
UnityFigmaBridgeを使ってFigmaからUnityの画面を作っています。
使用にあたって、
- アクセストークンはツールバー
- FigmaページのURLはInspector
- 画面取り込みはツールバーのSync Documentから
とあっちこっちに散らばっていて不便だったので何とかできないかと考えました。
対応
別のScriptableObjectを作って、そのEditorを作成。
そこからUnityFigmaBridgeのCustomEditorを参照する形にしてInspector内で完結できるようにしました。
ScriptableObject
新しく作成するScriptableObjectで、アクセストークンをSerializeするようにしています。
メニューの「New Figma Bridge Settings」でCustomUnityFigmaBridgeSettingsというファイルが作成されるようにしています。
[CreateAssetMenu(fileName = "CustomUnityFigmaBridgeSettings", menuName = "New Figma Bridge Settings")]
public sealed class CustomUnityFigmaBridgeSettings : ScriptableObject
{
[SerializeField] string _accessToken;
public string AccessToken {
get => _accessToken;
set => _accessToken = value;
}
}
ScriptableObjectのEditor
作成したCustomUnityFigmaBridgeSettingsのEditorです。
OnEnableで設定を書いてしまえばプロジェクトメンバー間で設定が違うみたいなことを防げると思います。
[CustomEditor(typeof(CustomUnityFigmaBridgeSettings))]
public sealed class CustomUnityFigmaBridgeSettingsEditor : Editor
{
UnityFigmaBridgeSettingsEditor _unityFigmaBridgeSettingsEditor;
void OnEnable()
{
var unityBridgeSettingsAsset = UnityFigmaBridgeSettingsProvider.FindUnityBridgeSettingsAsset();
unityBridgeSettingsAsset.BuildPrototypeFlow = false;
unityBridgeSettingsAsset.RunTimeAssetsScenePath = "Assets/Base.unity";
unityBridgeSettingsAsset.ScreenBindingNamespace = string.Empty;
unityBridgeSettingsAsset.ServerRenderImageScale = 3;
unityBridgeSettingsAsset.EnableGoogleFontsDownloads = true;
unityBridgeSettingsAsset.CreateScreenNameCSharpFile = false;
unityBridgeSettingsAsset.GenerateNodesMarkedForExport = true;
unityBridgeSettingsAsset.OnlyImportSelectedPages = true;
_unityFigmaBridgeSettingsEditor = CreateEditor(unityBridgeSettingsAsset, typeof(UnityFigmaBridgeSettingsEditor)) as UnityFigmaBridgeSettingsEditor;
}
static string FigmaAccessTokenKey()
{
var unityFigmaBridgeImporterType = typeof(UnityFigmaBridgeImporter);
var field = unityFigmaBridgeImporterType.GetField("FIGMA_PERSONAL_ACCESS_TOKEN_PREF_KEY", BindingFlags.NonPublic | BindingFlags.Static);
if (field != null) return field.GetValue(null) as string;
return "";
}
static CustomUnityFigmaBridgeSettings FindUnityBridgeSettingsAsset()
{
var assets = AssetDatabase.FindAssets($"t:{nameof(CustomUnityFigmaBridgeSettings)}");
return AssetDatabase.LoadAssetAtPath<CustomUnityFigmaBridgeSettings>(AssetDatabase.GUIDToAssetPath(assets[0]));
}
public override void OnInspectorGUI()
{
base.OnInspectorGUI();
_unityFigmaBridgeSettingsEditor.OnInspectorGUI();
GUILayout.Space(15);
if (GUILayout.Button("Sync"))
{
var savedAccessToken = PlayerPrefs.GetString(FigmaAccessTokenKey());
var customUnityFigmaBridgeSettings = FindUnityBridgeSettingsAsset();
if (customUnityFigmaBridgeSettings.AccessToken != savedAccessToken)
{
PlayerPrefs.SetString(FigmaAccessTokenKey(), customUnityFigmaBridgeSettings.AccessToken);
PlayerPrefs.Save();
}
typeof(UnityFigmaBridgeImporter).GetMethod("Sync", BindingFlags.Static | BindingFlags.NonPublic)
?.Invoke(null, null);
}
}
}
Menuの隠蔽
本来のUnityFigmaBridgeのメニューを押して、Syncボタンがないんですけど？と言われないように、CustomUnityFigmaBridgeSettingsEditorでメニューを押せなくするメソッドと、CustomUnityFigmaBridgeSettingsのInspectorが表示されるメソッドを書いておきます。
[MenuItem("Figma Bridge/Sync Document", true)]
static bool SyncDocumentOff()
{
return false;
}
[MenuItem("Figma Bridge/Select Settings File", true)]
static bool SelectSettingsFileOff()
{
return false;
}
[MenuItem("Figma Bridge/Set Personal Access Token", true)]
static bool SetPersonalAccessToken()
{
return false;
}
[MenuItem("Figma Bridge/Settings File")]
static void SelectSettings()
{
var bridgeSettings = FindUnityBridgeSettingsAsset();
bridgeSettings.AccessToken = PlayerPrefs.GetString(FigmaAccessTokenKey());
Selection.activeObject = bridgeSettings;
}
さいごに
何度も実行することになるSync Documentなので少しでも煩わしいところが解消できているのではないかと思います。
Discussion