|
|
|
|
|
|
|
|
- Presentación
- ¿Qué es Figma?
- ¿Cómo importar un diseño Figma?
- Requisitos previos
- Configurar el proceso de importación de Figma
- Importar un diseño Figma
- Proceso de importación en detalle
Figma es una herramienta de diseño en línea que permite crear diseños y prototipos en diversos campos, en particular para sitios web y aplicaciones.
A partir de WINDEV, WEBDEV y WINDEV Mobile 2024, puede transformar diseños Figma en ventanas y páginas, y generar los controles correspondientes conservando su apariencia. ¿Qué es Figma? Figma es un editor de gráficos vectoriales.
El diseñador crea formas, líneas, texto, etc., y los personaliza con gran precisión.
Los elementos solo pueden modificarse mediante programación, y pueden superponerse entre sí.
Todo está contenido en "frames".
Se puede acceder a los diseños a través de una URL, que requiere autenticación. ¿Cómo importar un diseño Figma? Requisitos previos Para importar diseños Figma en WINDEV, WEBDEV o WINDEV Mobile, primero debe completar algunos pasos en Figma. - Abra Figma (en modo de aplicación de escritorio o web).
- Inicie sesión o cree una nueva cuenta.
- Genere un token de Figma. Para obtener más información, consulte ¿Dónde encontrar la clave de Figma?.
Configurar el proceso de importación de Figma Introduzca el token de Figma en las opciones generales de WINDEV, WEBDEV o WINDEV Mobile: - En la pestaña "Inicio", en el grupo "Entorno", despliegue "Opciones" y seleccione "Opciones generales de ...".
- Vaya a la pestaña "API de terceros".
- En el campo "Clave de Figma", introduzca la clave de Figma generada previamente.
Observación: Haga clic en "Probar" para comprobar la validez de la clave Figma.
Importar un diseño Figma El diseñador debe proporcionar una URL del diseño que se va a importar.  Un diseño Figma es un conjunto de frames y elementos que permiten definir una interfaz. El proceso de importación consta de varias etapas: - Iniciar la importación.
- Seleccionar el elemento Figma que corresponde a la ventana que se va a crear.
- Seleccionar los elementos a importar y asociarlos a los controles WINDEV, WEBDEV o WINDEV Mobile.
Proceso de importación en detalle Etapa 2: Seleccionar el elemento Figma que corresponde a la ventana que se va a importar - En la ventana de importación de Figma, seleccione el frame que corresponde a la ventana que desea importar.
- Valide (botón "OK").
Etapa 3: Seleccionar los elementos a importar: La ventana que aparece permite asociar los elementos Figma a los controles WINDEV, WEBDEV o WINDEV Mobile que se van a crear. A la izquierda, se muestra una lista con los elementos Figma que pueden importarse, y a la derecha, se muestra una vista previa de la ventana o página que se va a reproducir. Para seguir la importación paso a paso, le recomendamos que vea al mismo tiempo la ventana que se está creando y la ventana de selección de los controles. Para importar un elemento: - Despliegue la raíz de los elementos Figma. Todos los elementos se muestran en una estructura jerárquica.
- Despliegue los diferentes elementos hasta llegar al elemento que corresponde al control que desea importar. El control que corresponde al elemento seleccionado se resalta en la vista previa.
- Una vez identificados los elementos del control, abra el menú contextual de la rama y seleccione el tipo de control deseado.
- El tipo de control aparece en la estructura jerárquica.
- Asocie cada elemento del control al tipo correspondiente. Por ejemplo, para un control Campo de entrada, es necesario definir el título y el área de entrada. Para ello, utilice el menú contextual.
- A medida que avanza, la ventana se construye según las opciones seleccionadas.
Puede cambiar ciertas opciones para obtener el resultado deseado.
- Una vez creados los elementos deseados en la ventana o página, haga clic en "Finalizar" para confirmar las opciones seleccionadas.
Importante: Estilo de los controles creados: Los controles creados mediante la importación de elementos desde Figma se asocian a una sobrescritura de un estilo presente en la plantilla o tema del proyecto. Este estilo específico puede agregarse a los estilos del proyecto y reutilizarse en otros controles. Observaciones: - Las opciones elegidas durante el proceso de importación se guardan en el directorio del proyecto como un archivo "*.wdfigma". Cuando abra la ventana de importación, si ya ha utilizado la dirección y el frame Figma, WINDEV, WEBDEV o WINDEV Mobile le pedirán que reanude el proceso de importación inicial.
- La ventana de importación incluye varias opciones:
 : Vuelve a cargar el diseño Figma, conservando las opciones elegidas. Esta opción es especialmente útil si el diseñador modifica el diseño Figma (por ejemplo, para agrupar los elementos de un control en la misma estructura jerárquica).  : Abre el diseño Figma en la aplicación web.  : Ajusta el zoom al 100%, o adapta la vista previa al área disponible, si la ventana o página que se va a importar es demasiado grande.
Esta página también está disponible para…
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|