Introducción
La funcionalidad Temas en App Designer y en el menú Apariencia del editor del App Designer le ayuda a crear apps visualmente atractivas con mínimo esfuerzo. Elija entre un conjunto de Temas diseñados profesionalmente para su app: Light (Claro), Dark (Oscuro), Classic (Clásico), Modern (Moderno), Minimalist (Minimalista) y Forest (Bosque), cada uno creado para ofrecer una apariencia limpia y coherente que mejora la usabilidad y se alinea con los estándares modernos de diseño.
Además de estas opciones listas para usar, la funcionalidad de Temas ofrece herramientas de personalización prácticas:
•Creación de Temas personalizados: Usted puede guardar su configuración actual de Apariencia como un Tema reutilizable usando el botón +Convertir a tema en el menú Apariencia en el editor del App Designer.
•Gestión de Temas personalizados: Usted puede exportar, importar, editar, duplicar y eliminar Temas personalizados para optimizar su flujo de trabajo de diseño. Estas capacidades facilitan mantener una identidad visual coherente entre apps, migrar Temas entre proyectos y compartir o reutilizar configuraciones de Temas entre equipos.
•Aplicación instantánea de Temas: Usted puede previsualizar cómo cada Tema modifica la apariencia de su app antes de confirmar los cambios y aplicar los Temas con un solo clic.
Acceder a la configuración de Temas
Hay dos maneras de acceder a la configuración de Temas en App Designer, desde la página de inicio del App Designer o desde el editor del App Designer:
Acceder a la configuración de Temas desde la página de inicio del App Designer
1.En la página de inicio del App Designer, haga clic en el menú de tres puntos.
2.Seleccione Temas en el menú desplegable.
Nota: Esta vista le permite explorar los Temas predeterminados y subidos disponibles. También puede administrar sus temas personalizados o subidos: importarlos, duplicarlos, editarlos, descargarlos o eliminarlos según sea necesario. Los temas predeterminados son de solo lectura y no se pueden eliminar ni descargar.
Acceder a la configuración de Temas desde el editor del App Designer
1.Abra o cree una app y haga clic en ella para abrir el editor del App Designer.
2.Vaya a Configuración en el menú superior y seleccione Apariencia.
3.Haga clic en el botón Administrar temas.
Nota: Usted puede aplicar un Tema directamente a la app actual desde esta vista; los cambios se aplicarán inmediatamente.
Escenarios de uso
Selección y aplicación de Temas
Una vez usted esté en la app deseada y la ventana emergente Administrar temas esté abierta, podrá ver y aplicar cualquiera de los Temas disponibles, tanto predeterminados como personalizados. Puede importar Temas en formato .BTF (Archivo de Temas de Bizagi).
Para aplicar un Tema, simplemente haga clic en el. Aparecerá una ventana emergente que le pedirá elegir entre Sobrescribir todo o Conservar estilos personalizados. Después hacer la selección, haga clic en Aplicar. Los cambios se aplicarán inmediatamente a su app.
Los Temas predeterminados disponibles son:
•Light (Claro): Tema claro con colores suaves y fondo blanco.
•Dark (Oscuro): Tema oscuro con fondo negro y detalles verdes.
•Classic (Clásico): Tema tradicional con combinaciones de colores estándar.
•Modern (Moderno): Tema contemporáneo con colores vibrantes (morado/violeta).
•Minimalist (Minimalista): Tema minimalista con colores sutiles (verde agua/turquesa).
•Forest (Bosque): Tema inspirado en la naturaleza que evoca frescura y contraste con un equilibrio de brillo y profundidad.
Personalización de la Paleta de colores del Tema
Cada Tema, incluso los predeterminados, le permite personalizar su Paleta de colores para que se adapte mejor al estilo y la imagen de marca de su app. Usted puede editar:
•Colores primarios: Ajusta los colores base que definen la apariencia general del Tema.
•Colores de acento: Ajusta los colores secundarios y de resaltado para realzar y contrastar.
Para personalizar la Paleta de colores de su Tema:
1.En el editor del App Designer, haga clic en Configuración en la cinta superior y seleccione Apariencia.
2.Junto a la sección Paleta de colores, haga clic en Editar.
3.Elija entre las Paletas de colores predeterminadas, seleccione una personalizada o cree una nueva haciendo clic en Añadir nueva.
Los cambios se reflejan al instante, lo que le permite previsualizar las actualizaciones en tiempo real mientras personaliza su Tema.
Crear un Tema personalizado desde la configuración de Apariencia actual
Usted puede crear un Tema personalizado reutilizable basado en la configuración visual actual de su app con el botón +Convertir a tema. Esto le permite estandarizar el diseño en varias apps, guardar la configuración de Apariencia para usarla en el futuro y compartir estilos consistentes en su proyecto. Usted puede hacerlo siguiendo los pasos:
1.Personalice la apariencia de su app mediante el menú Apariencia en el editor del App Designer. Esto incluye configurar la Paleta de colores, Tipografía, Banner, Estilo de controles y Visualización de Formas. Una vez finalizado el diseño, haga clic en el botón +Convertir a Tema.
Consejo: Al editar la configuración de Apariencia de los elementos de la app, un icono de punto azul junto al nombre de la configuración indica que el valor se hereda del Tema seleccionado. Al pasar el cursor sobre el icono, se mostrará una descripción emergente con el mensaje "Heredado del Tema", lo que le ayudará a identificar qué configuración controla el Tema seleccionado.
2. Aparecerá una ventana emergente con una previsualización del Tema con su configuración personalizada. Asigne un nombre a su Tema personalizado.
Nota: Asigne un nombre único a su Tema. El sistema validará el nombre para evitar duplicados (sin distinguir entre mayúsculas y minúsculas). Si el nombre ya existe, aparecerá una advertencia solicitándole que lo cambie.
3. Después de ingresar un nombre válido, haga clic en Guardar tema para confirmar.
El Tema se generará con la configuración de Apariencia actual y se guardará como Tema personalizado. El Tema recién creado aparecerá en la parte superior de la lista de Temas, ordenado por fecha de creación, y estará inmediatamente disponible para su uso en otras apps.
Usted puede importar Temas en formato .BTF (Archivo de Temas de Bizagi) desde la página de inicio del App Designer o desde el editor del App Designer. Para importar un Tema:
1.Haga clic en el botón Importar Tema en el menú Temas.
2.En la ventana emergente, arrastre el archivo .BTF al área designada o haga clic en el cuadro para abrir el explorador de archivos y seleccionar el archivo.
3. Una vez cargado, aparecerá una vista previa del Tema. Asígnele un nombre único.
4. Haga clic en Guardar tema para completar la importación.
Los Temas recién importados aparecen en la parte superior de la lista de Temas Personalizados, ordenados por fecha de importación.
|
Consideraciones sobre importación de Temas •Solo se pueden importar archivos en formato .BTF (Archivo de Tema de Bizagi), y el tamaño máximo recomendado es de 50 MB. •Los nombres de los Temas deben ser únicos. •La validación no distingue entre mayúsculas y minúsculas; por ejemplo, "Light", "light" y "LIGHT" se consideran el mismo nombre. •Si se detecta un nombre duplicado, un mensaje de advertencia le solicitará que cambie el nombre del tema antes de continuar. •Si el Tema importado incluye elementos personalizados (como paletas de colores o fuentes), estos se crearán automáticamente. •Se genera un nuevo ID único para evitar conflictos. |
Los Temas solo se pueden exportar desde la página de inicio del App Designer, no desde apps individuales (editor del App Designer). Para exportar un Tema:
1.Haga clic en el menú Temas de la página de inicio del App Designer.
2.En la ventana emergente, busque el Tema que desea exportar.
3.Haga clic en el menú de tres puntos junto al Tema y seleccione la opción Descargar.
Se generará un archivo en formato .BTF (Archivo de Tema de Bizagi) y se descargará automáticamente en su dispositivo.
Nota: Los archivos de exportación tienen un límite de tamaño (máximo recomendado: 50 MB).
Usted puede eliminar los Temas personalizados que ya no necesite desde la página de inicio del App Designer.
1.Abra el menu Temas desde la página de inicio del App Designer.
2.Busque el Tema que quiere eliminar.
3.Haga clic en el menú de tres puntos junto al Tema.
4.Seleccione Eliminar en la lista desplegable.
5. Si el Tema no está en uso, aparecerá una ventana emergente de confirmación preguntando: "¿Seguro que desea eliminar este tema?"
6. Haga clic en Eliminar para confirmar. El tema se eliminará de forma definitiva.
Nota: La eliminación es permanente y no se puede deshacer.
|
Consideraciones para la eliminación de Temas •Solo se puede eliminar un Tema a la vez (no se permite la eliminación masiva). •Solo se pueden eliminar Temas personalizados.
Si el Tema está en uso: •Aparecerá un mensaje indicando que no se puede eliminar. •Se mostrará una lista de las aplicaciones que usan el Tema actualmente.
•Usted debe retirar el tema de todas las apps en las que esté siendo usado antes de eliminarlo. |
Usted puede duplicar Temas personalizados y predeterminados para crear una nueva versión que se pueda personalizar sin afectar al original. Esta acción solo está disponible desde la página de inicio del App Designer. Para duplicar un Tema:
1.Abra la configuración de Temas desde la página de inicio del App Designer.
2.Busque el Tema que quiere duplicar.
3.Haga clic en el menú de tres puntos junto al Tema que quiere duplicar y seleccione Duplicar.
4. En la ventana emergente, asigne un nombre único al nuevo Tema y haga clic en Guardar tema.
El Tema duplicado aparecerá en la parte superior de la sección Temas personalizados. Desde allí usted puede editarlo, si desea.
Edición de Temas personalizados
Usted puede editar Temas personalizados desde la página de inicio App Designer. Para editar Temas:
1.Haga clic en el menú de tres puntos de un Tema personalizado y seleccione Editar.
2.Esto le llevará a la página de inicio de Edición de Temas, donde puede elegir entre la Paleta de colores, Tipografía, Banner, Estilo de controles y Visualización de Formas para aplicar los cambios. Haga clic en la flecha junto a cada configuración de Apariencia para acceder a ella.
Consejo: para regresar a la página de inicio de Edición de Temas, haga clic en su nombre en la cinta superior, ubicada dentro de la ruta de navegación.
3. Una vez que haya aplicado los cambios deseados, haga clic en Guardar tema.
•Si el Tema que usted está editando aún no se ha aplicado a una app, los cambios se guardarán y se aplicarán inmediatamente. Este tema aparecerá en la parte superior de la lista de Temas personalizados.
•Sin embargo, si una o más apps ya lo usan, aparecerá una ventana emergente de confirmación. Esta ventana muestra todas las apps que lo usan y le pide que escriba su nombre para confirmar los cambios. Este paso asegura que usted entienda que cualquier modificación afectará a todas las apps donde se aplique el Tema editado.
|
Consideraciones importantes •Solo los usuarios con permisos de edición pueden administrar Temas. Los usuarios con permisos limitados solo pueden aplicar Temas. •Solo se pueden eliminar los Temas personalizados, no los predeterminados. •No se puede eliminar un Tema actualmente seleccionado ni un Tema que esté en uso en otras apps. •Una app solo puede tener un Tema a la vez. •Solo se pueden editar los Temas personalizados. Para modificar un Tema predeterminado, primero duplíquelo; esto crea una copia que puede personalizar sin afectar el original. •Si el Tema importado incluye elementos personalizados (como estilos o configuraciones que no están presentes en la app), App Designer los creará automáticamente para garantizar que el Tema se aplique correctamente. |
Last Updated 11/20/2025 9:31:57 AM