Figma to Droid Script

[Munawar Hussain]

Hello,

Hope all are fine, please help me to use Figma UI with Droid Script.

After designing with Figma how i can get it into Droid Script to build app ?

Thanks and best wishes

[Alan Hendry]

Hi,

DroidScript has 2 main kinds of apps. 

HTML (which uses HTML, CSS, and Javascript) and 

Native (which uses Javascript with built in objects and methods).

There's a little tutorial on writing code for Native layout at 

https://droidscript.org/wiki/doku.php?id=getting_started:tut1

And a little tutorial on using RapidDroidScript (a tool for generating code for Native layouts and controls).

https://droidscript.org/wiki/doku.php?id=getting_started:tut2

Native apps use javascript to react to user touches, play music/videos, interact with the web, use the camera, use bluetooth, etc.

Regards, ah

[Munawar Hussain]

Hello,

I hope all are fine, Droid Script is good tool, but may be I am not understanding it properly, I am stuck to use Figma with Droid Script, I know a little bit to use Droid Script to make UI with this app and plugins, but from other applications like Figma i am not feeling comfortable, please help me to do this.

Thanks and best wishes

[Steve Garman]

I can't imagine any circumstances in which building a UI in figma would be a good approach to creating a DroidScript app

Of course I may be missing something because I have no experience of figma but you would need to tell us a lot more about what you are trying to achieve.

[Munawar Hussain]

Actually Figma i feel easy to use with drag and drop to build UI on laptop like Adobe , then i wish to use this UI with Droid Script for coding, because I feel comfortable with Droid Script for coding, and I am looking way how to do this.

Nice help will be appreciated.

Thank you

[Alan Hendry]

HI,

I know very very little about Figma, 

but if it can output HTML/CSS/Javascript then you can put them in a DroidScript HTML app

or a DroidScript Native app with a WebView  (with a LoadUrl to load the main HTML page, and interact with DroidScript using Execute)

See 

https://symdstools.github.io/Docs/docs/app/CreateWebView.htm

https://groups.google.com/g/androidscript/c/T42glPXL7II

https://groups.google.com/g/androidscript/c/fGXa9IBQc4I

http://droidscript.org/wiki/doku.php?id=sample_code:using_app.execute

https://www.youtube.com/watch?v=82npEQ-S7sM

(This should apply to HTML/CSS/JS created by systems like BootStrap builders).

Regards, ah

[Dave]

These drag-drop tools like Figma are really only meant for designing the look and feel of a UI and not suitable for creating real Apps, unless the app is very simple (such as a machine controller interface with just buttons and images).

If you want to go down this route, then Axure Rp is your best bet as you can export your projects as html and drop them into a DroidScript WebView project.

https://www.axure.com/

We also have a Chrome browser extension (in beta) for automatically exporting your Axure projects into your current DS project, with support for executing scripts within DS from Axure.

[Munawar Hussain]

I do not have big business and belong to Pakistan, Axure is expensive and i can not afford it.

[Alan Hendry]

Hi,

DroidScript doesn't have a drag-and-drop design tool.

If you search the web, you should be able to find a free tool with drag and drop for layout 

which generates HTML/CSS/Javascript (perhaps mobirise).

Then you can bring the HTML/CSS/JavaScript into DroidScript (see above).

RapidDroidScript allows you to generate DroidScipt code for Layouts and controls 

where you choose from drop-down lists of the options available and fill in forms for details

(with a preview of what your design looks like).

I would recommend downloading it, and working thru the tutorial example

https://droidscript.org/wiki/doku.php?id=getting_started:tut2

Regards,ah

[Munawar Hussain]

Droid Script must have good help at YouTube, because not much help we can find there to use Droid Script.

My other id munawarhu...@gmail.com is with Droid Script, its just for information's, due to workplace I made new one to keep things separate.

[Munawar Hussain]

How to run this RapidDroidScript ? i have downloaded code from github to pc, now what have to do ?

[Alan Hendry]

Hi,

Download RapidDroidScript from https://github.com/pepemont/rapiddroidscript/releases 

When you open the SPK it may ask you to confirm that it should be opened with DroidScript, 

and will then import the project/app into DroidScript. 

There aren't any videos for RapidDroidScript.

There's a Youtube Channel for  DroidScript 

https://www.youtube.com/channel/UC5aYWOfuG5uKeXwdzoJEF_Q

an intro video

https://www.youtube.com/watch?v=v2HVARMz6B0

As well as other videos (just search Youtube for DroidScript).

Also the official tutorials

http://androidscript.org/droidscript/tutorials/

Regards, ah

[Munawar Hussain]

I have downloaded files to pc, then after extract all files placed in folder in Droid Script, but it is not working, just first screen i saw to start work, then error when tried to add button.

[Munawar Hussain]

It is working after reinstallation.

I hope I will be able to use Figma or any other tool like this with Droid Script.

[Alan Hendry]

Hi, 

It's easiest to download the SPK to your Android phone/tablet, open the SPK.

You should have eight .js files and two .json files in the project/app, 

app must be named   Rapid Droidscript

I just tested and add Button works for me

What error are you getting?

What are the (exact) steps you take?

What version of DS and Android?

Regards, ah

[Munawar Hussain]

First time i did not went through SPK, downloaded files in zip then after extract placed in folder as i saw instructions, app was running but not button option working, after this i went through SPK download option, and it is working fine. 

[Munawar Hussain]

Thanks for help to work with Rapid Droid script, and still looking for help to import UI from figma or any other tool like this.

[Alan Hendry]

HI,

There seems to be a Figma plug-in that can convert to HTML CSS React/Vue/Liqiud/Solid

https://www.figma.com/community/plugin/747985167520967365/Figma-to-HTML%2C-CSS%2C-React-%26-more!

You could bring these into a DroidScript HTML app, or a Native app with WebView

https://www.youtube.com/watch?v=82npEQ-S7sM shows how the HTML/etc can interact with DroidScript.

Regards, ah

[Munawar Hussain]

Hello, 

Hope all are fine and thanks for kind help.

I found a way on YouTube "Figma for UI" + "Bravo studio for app build" + "Air table for database".

Is it possible to use Droid Script for this kind of app ? any opinion?

Thanks and best wishes,

Munawar Hussain

[Alan Hendry]

Hi,

DS has database functionality

https://symdstools.github.io/Docs/docs/app/OpenDatabase.htm

There's a Premium capability for CloudStore

https://symdstools.github.io/Docs/docs/app/CreateCloudStore.htm

There are some posts in this forum about using FireBase

You can convert modules in npm and nodejs to work with DS 

(the next release of DS currently in Beta testing makes this much easier).

In my experience DS is at least 10 times easier to learn that Android Studio (with Java or Kotlin),

and at least 10 times quicker to write, test (fix, re-test, etc).

There's plenty of documentation, tutorials, video tutorials, etc 

and there are samples/examples for most functions that you can copy and modify.

Regards, ah

[Alan Hendry]

Hi,

Does anybody know if Blocks works?

In the DS app I ticked Experiments under About, touched the Wifi icon.

On my laptop, connected to the IP address, typed in the password, 

touched the tic-tac-toe icon, created a new Blocks app, touched the Run icon.

Phone has error message that /sdcard/DroidScript/blocks/blocks.js is not found

DS 2.09 Android 11

Regards, ah

[Steve Garman]

I don't think I've tried it for a couple of versions but it certainly doesn't seem to be working in the latest beta

Tested in Android 11

[Alan Hendry]

HI,

I removed 2.09, downloaded beta 182b2 and installed it.

Turned experiments on, connected the browser IDE, created new Blocks app, and

It seems to work (Oreo)

(blocks appear on PC browser, run button shows icon and button on phone, touching button displays popup, plays sound). Made minor changes to text, runs OK.

200b1 seems to fail.

Regards, ah

[Alan Hendry]

HI,

Is there some way to get the javascript equivalent to an app written in Blocks?

(and then build it)

Regards, ah

[Dave]

Not exactly sure what you mean, bit if you look in the project folder with a local file browser or better still with the wifi ide remote file browser, then you should see the javascript files generated by the blocks app after your run the app

[Alan Hendry]

Thanks,

I don't recall seeing the dsj and dsj.js files on the browser IDE.

My Blocks apps don't appear on the DS Home page on my device.

Using the Files app I can see folders for each app with files blockly.dsj and blockly.dsj.js

(If I open the latter it just opens DS, so I used Files to copy it under another DS project and I can see/edit/etc the generated code).

Regards, ah