Table of Contents |
---|
Info |
---|
Disponible desde release 2.3.0-immortal |
Introducción
En esta Release incorporamos una nueva herramienta que permite generar UIs en Vue JS a partir de un diseño FIGMA. toc
Uso
Plugin FIGMA
Para ello Dentro de FIGMA haremos uso del plugin figma-low-code , que instalaremos en nuestra cuenta de FIGMA en primer lugar.
Info |
---|
Podéis encontrar documentación de cómo usar el plugin open source de FIGMA aquí. |
Una vez instalado el plugin, podemos usarlo en nuestro diseño.
...
Una vez definidas todas las variables y métodos/acciones en nuestros componentes, ¡estaremos listos para utilizar la nueva herramienta de la onesait Platform!
Herramienta de generación UIs en Plataforma
Encontraremos esta herramienta en el menú de herramientas:
...
En primer lugar, nos aparecerán dos opciones: habilitar log in Oauth 2 y mapear un componente de FIGMA a un Dashboard de plataforma.
...
Funcionalidad
...
login con
...
OAuth2
Marcaremos la opción del login, si nuestro diseño posee una página de log in. Si es así, deberemos indicar cuales son las variables definidas en FIGMA que hacen referencia al usuario y la contraseña, así como la página a la que dirigiremos al usuario después de logarse.
Funcionalidad componente Dashboard
La opción de utilizar un componente Dashboard hará uso de este wrapper Vue JS, y servirá para que un componente FIGMA marcado como custom, sirva de contenedor para un Dashboard de plataforma. Se nos pedirá el nombre que le dimos al componente FIGMA, el nombre del Dashboard, y si queremos permitir la edición en el mismo.
...
Mapping de funciones con APIs de plataforma
Por último tendremos la sección de mapping de métodos definidos con el plugin FIGMA. Podremos mapear cada método definido con una API y operación concretas de plataforma.
...
Al añadir estas operaciones se mostrarán en la tabla y podremos borrarlas o ver que mapeo de parámetros habíamos seleccionado:
...
Generar la UI
...
Por último quedará generar la UI. Al pinchar en “Generate” se generará un .zip que tendremos que descomprimir.
Ejecutar la aplicación web generada
Iremos al directorio y ejecutaremos un npm ipara instalar las dependencias necesarias.
A continuación, ejecutaremos npm run serve y se levantará la aplicación para poder probarla.
...
Documentación Plugin de FIGMA
Podéis encontrar documentación de cómo usar el plugin open source de FIGMA aquí.