Using Figma design in B4X ! Possible ?

zed said:

Figma: automated export from it to .bal layout file

Hi, All Who uses Figma for designs? It has the export API https://www.figma.com/developers/api I guess, it would be super to export from it to B4X project layouts. Q: no one tried ?

www.b4x.com

Click to expand...

zed said:

Since generating a true .bal file isn't possible, the best solution would be to transform the Figma JSON into B4X code.
This automatically generates a .bas module that instantiates all the views.

Something like this :

JSon:

{
  "views": [
    { "type": "Label", "text": "Hello", "left": 10, "top": 20, "width": 100, "height": 30 },
    { "type": "Button", "text": "OK", "left": 10, "top": 60, "width": 80, "height": 40 }
  ]
}

create a .bas file:

' Load JSON
    Dim parser As JSONParser
    parser.Initialize(File.ReadString(File.DirAssets, "firma.json"))
    Dim m As Map = parser.NextObject
    Dim views As List = m.Get("views")

    ' Build the B4X code
    Dim sb As StringBuilder
    sb.Initialize
    sb.Append("'--- Automatically generated code ---").Append(CRLF)
    sb.Append("Sub CreateLayout").Append(CRLF)

    For Each v As Map In views
        Dim t As String = v.Get("type")
        Select t
            Case "Label"
                sb.Append("Dim lbl As Label").Append(CRLF)
                sb.Append("lbl.Initialize(""lbl"")").Append(CRLF)
                sb.Append("lbl.Text = "&Chr(34) & v.Get("text") &Chr(34) & "").Append(CRLF)
                sb.Append("Activity.AddView(lbl, " & v.Get("left") & ", " & v.Get("top") & ", " & v.Get("width") & ", " & v.Get("height") & ")").Append(CRLF)

            Case "Button"
                sb.Append("Dim btn As Button").Append(CRLF)
                sb.Append("btn.Initialize(""btn"")").Append(CRLF)
                sb.Append("btn.Text = "&Chr(34) & v.Get("text")&Chr(34) & "").Append(CRLF)
                sb.Append("Activity.AddView(btn, " & v.Get("left") & ", " & v.Get("top") & ", " & v.Get("width") & ", " & v.Get("height") & ")").Append(CRLF)
        End Select
    Next

    sb.Append("End Sub").Append(CRLF)

    ' Save the .bas module
    File.WriteString(File.DirApp, "Layout.bas", sb.ToString)

    Log("Module GeneratedLayout.bas created")

Result : Layout.bas:

'--- Automatically generated code ---
Sub CreateLayout(Activity As Activity)
Dim lbl As Label
lbl.Initialize("")
lbl.Text = "Hello"
Activity.AddView(lbl, 10, 20, 100, 30)
Dim btn As Button
btn.Initialize("")
btn.Text = "OK"
Activity.AddView(btn, 10, 60, 80, 40)
End Sub

Do you have a Figma JSON file?

Click to expand...