Using Figma design in B4X ! Possible ?

AnandGupta

AnandGupta

Expert
Licensed User
Longtime User
Well Indian Govt has developed a new app for Aadhaar (Unique Citizen ID) card. This new app boost for very beautiful and smooth UI compare to earlier one.

Old app : https://play.google.com/store/apps/details?id=in.gov.uidai.mAadhaarPlus
New app : https://play.google.com/store/apps/details?id=in.gov.uidai.pehchaan

(I do not know if it is allowed to put the images from the play store so I gave the links for members to check the images of these apps)

The new app is developed as per new UI : https://www.ux4g.gov.in/

The website mention of using Figma

I have no idea of Figma but I saw it is some UI design component or so for Android.

My query is, Is it possible for us to use this Figma design in B4X ?
 
AnandGupta

AnandGupta

Expert
Licensed User
Longtime User
mcqueccu

mcqueccu

Well-Known Member
Licensed User
Longtime User
You can let Figma design the interface for you (Now even have AI prompt) so you dont need a design background to use. Just prompt it to give you the interface, then build it yourself, B4X Designer is cool in building interfaces.
 
hatzisn

hatzisn

Expert
Licensed User
Longtime User
I 've searched also for a solution in this long time ago. A solution in this would be to design several UI designs in figma and design also the same UI designs by hand in .bXl format. Then by using export to json both in B4X and Figma you may could train a local LLM to take as input the figma json and export the .bXl json. Personally all my resources are not enough to do this and I do not mean only hardware but also time.
 
AnandGupta

AnandGupta

Expert
Licensed User
Longtime User
Hmm. Understood.

We (members) have already tried what I was thinking now after seeing that app. Thanks for all advise and information.
We can close this thread now till some one finds any bridge between the two.
 
zed

zed

Well-Known Member
Licensed User
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?
 
hatzisn

hatzisn

Expert
Licensed User
Longtime User
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...

@Erel has created an app that transforms .bal .bil and .bjl to json and the other way around. It is possible to create .bXl layout from json (but not figma json).
 
zed

zed

Well-Known Member
Licensed User
If we have a complete Figma JSON model, it might be possible to create a parser.
The question remains open.
 
AnandGupta

AnandGupta

Expert
Licensed User
Longtime User
No I don't have any Figma file yet.
I saw the review of new govt. app (first post) and found its UI/UX based on Figma. So got curious as the images look very good.

Since Figma is totally different, as I understand, I will try my hand on some smaller one first and see what I can deduce from it.
 
You must log in or register to reply here.
Top