Figma Dev Mode paid seats

[lopi-py]

On January 31, 2024, the Dev Mode beta will end and Dev Mode, including plugin use and development, will require a paid seat.

We rely on dev-mode because we're making usage of the codegen capability which is only available for plugins within dev-mode, we need to create an external UI to include code preview and whatnot, that way we don't rely on dev-mode and the plugin development/usage becomes free again, thats what open source is for!

[LawMixer]

Question, could you use the Figma files REST API to get the frame and it's data?

[lopi-py]

Hmm, it could work, I think I could move the core functionality (backend) to convert Figma nodes into a npm package, then create new frontends, like a Figma plugin (without devmode), a roblox plugin (using js-to-lua?) and why not a cli. Sounds like a great idea! I'll take look into that soon

[LawMixer]

I'll give you an idea on how I would imagine it will go:

1. Export file (or group) from Figma,
2. Turn it into a RBXM file with Lune
3. Completed!

For extra features, you could maybe implement it as an API, so people can get creative on what they use it for! I'm watching over this thread very very closely. Good luck and I'll help if you need it!

[lopi-py]

My original idea was to create a figblox-core package and provide a binary using deno compileor pkg, but I think that I could use js-to-lua to distribute a luau of figblox-core version so it can be used with lune and wally (for a roblox plugin)

[LawMixer]

I don't recommend using a roblox plugin for this, as plugins are generally extremely limited on what we can do.

What I suggested, is doing it through rbxm, so 1) the user will have a backup incase something goes wrong 2) we wont have to touch roblox plugins ever for the most part.

[lopi-py]

What limitations are you talking about? I imagine something like this

local tree = figmaHttp(token)
local result = Figblox.stringify(tree, {
  -- options
})
-- display `result`(string) in a textbox with boatbomber's highlighter

However it is not a priority, just a thought on the benefit of using js-to-lua. I see what you mean with lune now, but I'm not sure how to handle that as it would require a luau implementation of the core, maybe use js-to-lua and expose a method like this

local tree = figmaHttp(token)
local root = Figblox.instancify(tree)

that would return a figblox roblox instance, then convert that to rbxm using lune (which shouldn't be too difficult i think)

I want the core to be in typescript so I can use the figma typings and use it with the new figma plugin ui

[LawMixer]

Having a REST API to pass through figma data, and then outputs roblox instance data or something like that would be cool.

I'm not sure how a Roblox plugin would work?

[lopi-py]

I want to try to avoid users having to run a local server. Figblox-core (typescript) would have two methods I think:

• stringify(tree, options): receives a figma tree (node) and returns the code snippet (string) depending on the options, one option could be "framework"
• instancify(tree) receives a figma tree (node) and returns a figblox roblox instance

Just to clarify: a tree can be the documentfield result of the figma rest api

Details

curl -sH 'Authorization: Bearer <TOKEN>' 'https://api.figma.com/v1/files/...' | python -m json.tool

# output:
{ "components": {}, "document": { "children": [ { "backgroundColor": { "a": 1, "b": 0.8980392156862745, "g": 0.8980392156862745, "r": 0.8980392156862745 }, "children": [], "exportSettings": [], "id": "0:1", "name": "Page 1", "type": "CANVAS", } ], "id": "0:0", "name": "Document", "type": "DOCUMENT", }, "schemaVersion": 0 }

Figma plugin:

// get the current selected node 
const node = figma.getSelectedNode() 
// convert the node to string
const result = figblox.stringify(node, options)
// display `result` (string) in the plugin ui

If we had a luau version (using js-to-lua) of figblox-core, we would be able to use lune and Figblox.instancify with figma's rest api; however, I still need to look into it

Lune:

-- get the whole figma file
local result = net.request("figma-rest-api")
-- convert the result to json 
local tree = net.jsonDecode(result.body)
-- select the node we want to convert
local node = tree.document.children[1]
-- convert the figma node to a table like this: { className = "Frame", properties = { BackgroundTransparency = 0.5 }, children = {} } 
local root = figblox.instancify(node)
-- convert that table to lune.roblox.Instance
local instance = convertNodeToInstance(root)
-- save to rbxm
roblox.writeInstanceModel("foo.rbxm", { instance }) 

And yeah, a roblox plugin isn't actually needed

[LawMixer]

if figblox could wrap it up in a rbxm, we could keep this all in a figma plugin.

[LawMixer]

theres also this figma to roblox converter, though its kinda meszy

https://github.com/LawMixer/Figma-to-Roblox

[lopi-py]

Yeah, I think we could have a rbxm serializer and translator 🙂

[LawMixer]

I know a big problem that other plugins have is, if the ui design has multiple elements, it skips some and messes everything up.