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.