--- title: "Cómo configurar el estilo de tu aplicación | Tutoriales - GoodBarber" description: "Estilo de la app «App style» define todo el diseño de tu app desde un solo lugar: colores, fuentes, botones, campos de formulario y más. En el menú «My App», haz clic en «App style». Los ajustes tien…" canonical_url: "https://es.goodbarber.com/tutorials/diseno/como-configurar-el-estilo-global-de-tu-aplicacion/" lang: es --- # Cómo configurar el estilo de tu aplicación | Tutoriales - GoodBarber [Atrás](https://es.goodbarber.com/tutorials/) # Cómo configurar el estilo de tu aplicación ## Estilo de la app «App style» define todo el diseño de tu app desde un solo lugar: colores, fuentes, botones, campos de formulario y más. En el menú «My App», haz clic en «App style». Los ajustes tienen dos partes: lo esencial y luego opciones adicionales. Todo se aplica a cada sección de tu app y reemplaza el diseño propio de cada una. ## Colores Empieza por los colores. Un tema de color es un conjunto de colores que combinan bien. Elige uno en la biblioteca… y la vista previa muestra tu app con él. «Magic palette» te propone un nuevo tema… con cada clic. Luego ajusta cada color en detalle: el encabezado, los colores principales, los fondos, el menú y los botones. Haz clic en un color, escribe un código o elige uno, y haz clic en Choose. El encabezado cambia al nuevo color. Haz clic en Apply para usar estos colores en toda tu app, o en Cancel para conservar los actuales. Aquí, los conservamos. ## Fuentes Ahora, las fuentes. Un tema de fuente reúne tres fuentes que combinan bien. Puedes elegir uno en esta lista. El control deslizante ajusta el tamaño de todos los textos a la vez, manteniendo su jerarquía. Todos los niveles de texto crecen juntos. Tu app usa ocho niveles de texto, del título principal al texto normal. Para cambiar la fuente de uno, ábrelo… y elige una fuente. Están disponibles todas las Google Fonts, y el botón «+» agrega una fuente propia, si su licencia lo permite. El título principal toma la nueva fuente. En cada nivel, también ajustas grosor, interlineado y espaciado entre letras. De nuevo, haz clic en Apply para usarlas, o en Cancel para conservar las tuyas. ## Botones y campos de formulario Siguen los botones. Tu app usa tres niveles de botones, que GoodBarber elige para cada acción: el nivel uno tiene relleno, el nivel dos tiene contorno y el nivel tres es un simple enlace de texto. Sus colores vienen de tu tema de color. Elige su forma: cuadrada, redondeada o redonda… y todos los botones de tu app la adoptan. «Form fields» funciona igual: elige la forma y el tamaño de los campos, y dónde va el título, encima o dentro. ## Miniaturas y celdas «Thumbnails and cells» define la forma de las imágenes y tarjetas de tus listas: cuadrada, redondeada o redonda. Aquí, las esquinas se vuelven cuadradas. En la web app de escritorio, también puedes agregar un efecto al pasar el ratón sobre una imagen. ## Espaciado Spacing define los márgenes alrededor de tu contenido, en píxeles. Con márgenes más amplios, el contenido tiene más espacio alrededor. ## Animaciones y vibración En las apps nativas iOS y Android, también puedes elegir cómo se abre una página desde una lista, agregar una leve vibración al tocar y revelar los elementos al desplazarse. ## Iconos En Icons, eliges los iconos predeterminados de tu app. Por ejemplo, haz clic en el icono de marcador… y elige otro en la biblioteca. El nuevo icono aparece en cada artículo. ## Fondo y separadores Por último, el fondo de tu app: un color o una imagen, y el color de los separadores. El fondo cambia en todas las páginas. ## Publicar Para que tus usuarios vean los cambios, publica la actualización de tu app desde el menú Publish. ## Vídeos similares [DiseñoCómo configurar tu encabezado](/tutorials/diseno/como-configurar-tu-encabezado/) ![Cómo configurar tu encabezado](https://portal.ww-cdn.com/portal_static/images/videos1.c14acaebb684.jpg) [DiseñoCómo personalizar la pantalla de lanzamiento de tu aplicación](/tutorials/diseno/como-personalizar-la-pantalla-de-bienvenida-de-tu-aplicacion/) ![Cómo personalizar la pantalla de lanzamiento de tu aplicación](https://portal.ww-cdn.com/portal_static/images/videos3.667f4857c54e.jpg) [DiseñoCómo configurar el menú de navegación de tu aplicación](/tutorials/diseno/como-configurar-el-modo-de-navegacion-de-tu-aplicacion/) ![Cómo configurar el menú de navegación de tu aplicación](https://portal.ww-cdn.com/portal_static/images/videos4.e9c3404b35cf.jpg) [DiseñoCómo personalizar los iconos de tu menú](/tutorials/diseno/como-personalizar-los-iconos-de-tu-menu/) ![Cómo personalizar los iconos de tu menú](https://portal.ww-cdn.com/portal_static/images/videos5.a023e3a7a47c.jpg) [DiseñoCómo diseñar sus secciones](/tutorials/diseno/como-disenar-tus-secciones/) ![Cómo diseñar sus secciones](https://portal.ww-cdn.com/portal_static/images/videos6.a0a8271792bd.jpg) [DiseñoCómo copiar el diseño de una sección](/tutorials/diseno/como-copiar-el-diseno-de-una-seccion/) ![Cómo copiar el diseño de una sección](https://portal.ww-cdn.com/portal_static/images/videos7.8952466a8027.jpg) [DiseñoCómo personalizar el diseño de las categorías de una sección](/tutorials/diseno/como-personalizar-el-diseno-de-las-categorias-de-una-seccion/) ![Cómo personalizar el diseño de las categorías de una sección](https://portal.ww-cdn.com/portal_static/images/videos8.fc945e8b95fd.jpg) [DiseñoCómo configurar tu página de inicio](/tutorials/diseno/como-configurar-tu-pagina-de-inicio/) ![Cómo configurar tu página de inicio](https://portal.ww-cdn.com/portal_static/images/videos9.49f835842cd5.jpg) [DiseñoCómo elegir el tamaño de tu encabezado](/tutorials/diseno/como-elegir-el-tamano-de-tu-encabezado/) ![Cómo elegir el tamaño de tu encabezado](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)