Introduction

For this release, we have added a new tool that allows you to generate Vue.js UIs from a FIGMA design.

Use

FIGMA Plugin

Within FIGMA, you will make use of the figma-low-code plugin, which you will install in your FIGMA account first.

Once the plugin is installed, you can use it in your design.

Open

This plugin will allow you to define data bindings and method bindings in your FIGMA elements, and then generate functionality following the Low Code paradigm.

Open

Once you have defined all the variables and methods/actions in your components, you are ready to use the newest tool in onesait Platform!

Platform’s UI generation tool

You will find this tool in the tools menu:

For starters, you will be asked for the FIGMA project ID, and a FIGMA API token.

You can generate the token here.

The project's ID is taken from the FIGMA URL, for example:

https://www.figma.com/file/HOj2i7P5nczItTfOL16vHM/Low-Code-ToDo---With-login?node-id=52%3A1

It will be: HOj2i7P5nczItTfOL16vHM

Once entered, click on Fetch and the rest of the sections of the tool will load.

First of all, two options will appear: enable log in Oauth 2 and map a FIGMA component to a platform Dashboard.

Login functionality with OAuth2

Check the login option if your design has a log-in page. If so, you must indicate which are the variables defined in FIGMA that refer to the user and password, as well as the page to which you will direct the user after logging in.

Dashboard component functionality

The option of using a Dashboard component will make use of this Vue JS wrapper, and will allow a FIGMA component marked as custom to serve as a container for a platform Dashboard. You will be asked for the name you gave to the FIGMA component, the name of the Dashboard, and whether you want to allow editing on it or not.

Mapping functions with platform APIs

Finally, you will have the section for mapping methods defined with the FIGMA plugin. You will be able to map each defined method with a specific platform API and operation.

You will be asked for the name of the method you want to map, the API and its operation. Additionally you will be asked for the input variable for PUT or POST operations, the output variable in case you want to save the result of the JSON operation in the model, and the page to redirect the user to once the operation ends, if applicable.

For operations that have parameters in the path, you will also be asked to map those parameters:

Adding these operations will display them in the table, and you will be able to delete them or see what parameter mapping you had selected:

Generate the UI

The last step is to generate the UI. When you click on "Generate", a .zip file will be generated and you will have to unzip it.

Execute the generated web application

Go to the directory and run npm i to install the needed dependencies.

Then, run npm run serve and the application will be launched to test it.

Video explanation (in Spanish)