Crea un sistema de diseño de workspace en Base44 para definir los colores, fuentes, logo y componentes de tu marca una vez, y aplica un aspecto consistente en todas tus apps.
Un sistema de diseño guarda el aspecto y la identidad de tu marca a nivel de workspace: sus colores, fuentes, logo y un conjunto de componentes a juego. Créalo una vez, configúralo como predeterminado, y cada nueva app que construyas empieza alineada con tu marca, para que no tengas que redefinir tu estilo cada vez.No necesitas ser diseñador. Con solo unos pocos detalles, como tu logo, una breve descripción de tu marca, la sensación que quieres y cualquier archivo de diseño que tengas, Base44 crea un sistema de diseño completo por ti, para que todas tus apps se vean profesionales y fieles a tu marca.
Tus sistemas de diseño en la configuración del workspace
Disponibilidad:
Los sistemas de diseño están disponibles en el plan Builder y superiores.
Los workspaces en el plan Builder y superiores incluyen 1 sistema de diseño. Los workspaces Enterprise no tienen límite.
Los sistemas de diseño se aplican a apps web, no a apps móviles. Una app importada desde Figma, iniciada desde una URL o migrada desde otra plataforma puede recibir un sistema de diseño una vez que ha terminado de construirse.
Crear y usar un sistema de diseño no cuesta créditos.
Cuando creas un sistema de diseño, Base44 completa todo lo que mantiene tus apps con un aspecto consistente y fiel a tu marca, y lo muestra todo en una vista previa en vivo. Cambia un color o una fuente, y cada ejemplo se actualiza de inmediato, para que siempre veas cómo queda.
Un sistema de diseño, con la configuración de tu marca a la izquierda y una vista previa en vivo a la derecha
Un sistema de diseño cubre 3 cosas:
Los fundamentos de tu marca: Tu logo, nombre de marca, eslogan y una breve descripción, además de los valores centrales de tu marca, el tono de voz y las pautas de diseño sobre cómo debe verse.
Tu aspecto y sensación: Tus colores, tus fuentes, cuán redondeadas son tus esquinas, cuánta sombra hay debajo de los elementos y cuánto espacio va entre ellos.
Piezas listas para usar: Un conjunto completo de componentes que ya coinciden con tu marca y están listos para colocar en cualquier app, incluidos botones, iconos, tarjetas, navegación, formularios y secciones de página, cada uno con estilos para sus estados interactivos.
Creas un sistema de diseño desde la configuración de tu workspace. En un solo formulario puedes combinar una breve descripción, tu logo, una importación desde Figma, un sitio web o un paquete de npm, y tus propios archivos de diseño, y Base44 genera un sistema de diseño completo a partir de lo que proporciones.Para crear un sistema de diseño:
Haz clic en el nombre de tu workspace en la parte inferior izquierda, luego haz clic en Settings.
Haz clic en Design system.
Haz clic en Create. Si tu workspace ya tiene un sistema de diseño, haz clic en Create new design system en su lugar.
En Create your design system, añade cualquiera de lo siguiente:
Describe tu marca: Escribe una breve descripción de tu marca y añade tu logo en el cuadro de al lado.
Importa una fuente existente: Puedes usar una fuente por sistema de diseño. Cambia entre las pestañas:
Figma file: Arrastra o busca un archivo .fig, de hasta 1.9 GB, y adjunta todas sus páginas y frames o elige algunos específicos. Base44 reduce las imágenes demasiado grandes y prepara los archivos grandes en segundo plano, y no almacena el archivo original.
Website URL: Pega la dirección de un sitio web. Usa solo URLs donde tengas los derechos sobre el contenido.
NPM package: Introduce un paquete publicado por nombre, nombre@versión o un enlace de npmjs.com. Se resuelve desde el registro público de npm por defecto, o haz clic en Private registry para añadir una URL de registro, un token de acceso y los scopes que deben resolverse allí. Tu token de acceso se usa una vez para obtener el paquete y no se almacena.
Sube tus recursos de diseño: Añade imágenes, fuentes, un archivo design.md u otros archivos de diseño, hasta 10 archivos.
Haz clic en Create. Generar tu sistema de diseño puede tomar unos minutos, y puedes salir y volver mientras se ejecuta.
Revisa el sistema de diseño generado en la vista previa, luego ajusta lo que quieras.
Crear un sistema de diseño a partir de los materiales de tu marca
Cuando abres un sistema de diseño, lo editas en un editor de dos paneles. A la izquierda están todos los ajustes de tu marca y diseño. A la derecha, una Preview en vivo muestra esos estilos aplicados a botones, iconos y tarjetas reales, tal como se ven en tu app o sitio web. A medida que cambias un ajuste a la izquierda, la vista previa se actualiza al instante.El nombre y el eslogan de tu sistema de diseño están en la parte superior de la página. Haz clic en cualquiera de los dos para editarlo en el lugar.A la izquierda, puedes editar cada parte de tu sistema de diseño:
Overview
Una breve descripción de tu marca. Base44 la usa para mantener todo lo que genera fiel a tu marca.
Logos
Añade los logos de tu marca, o genera uno con IA. Haz clic en Add logo para subir un logo, o en Generate logo para describir uno y dejar que Base44 lo cree. Un logo se marca como Primary, y puedes establecer otro como principal desde su menú More actions.
Editar los logos de tu marca
Typography
Elige tus fuentes de títulos y de cuerpo, o sube las tuyas. También puedes ajustar el grosor de cada estilo de fuente. Cualquier persona en tu workspace que pueda editar, es decir, propietarios, administradores y editores, puede subir una fuente. Los visualizadores e invitados no pueden.
Elegir tus fuentes de títulos y de cuerpo
Color palette
Haz clic en un color para editarlo, o haz clic en Generate palette y describe los colores que quieres.
Editar un color de la paleta
Tone of voice
Define cómo se comunica tu marca. Haz clic en Add tone para añadir un rasgo, o haz clic en el icono de generar para dejar que Base44 sugiera un nuevo conjunto.
Añadir rasgos de tono de voz
Core values
Los principios que representa tu marca. Haz clic en Add value para añadir uno, o haz clic en el icono de generar para dejar que Base44 sugiera un nuevo conjunto.
Añadir tus valores centrales
Corner radius
Define cuán redondeados se ven tus componentes.
Definir los valores de radio de esquinas
Spacing scale
Ajusta cuánto espacio va entre los elementos.
Ajustar tu escala de espaciado
Shadow
Define cuán elevados se ven tus componentes. Haz clic en una sombra para ajustar su posición, desenfoque, extensión y color.
Definir los valores de sombra
Design guidelines
Reglas que mantienen consistente el lenguaje visual de tu app. Haz clic en Add guideline para añadir una, o abre el menú More actions en una pauta para editarla o eliminarla.
Editar tus pautas de diseño
Tus ediciones no se aplican hasta que las guardes. Haz clic en Save changes para conservarlas, o en Reset changes para deshacer las ediciones que aún no has guardado. Un sistema de diseño necesita un nombre y una descripción general antes de poder guardarlo.
Gestiona un sistema de diseño desde su tarjeta en la sección Design system. Abre el icono More actions en un sistema de diseño para editarlo, establecerlo como predeterminado o eliminarlo.
Quién puede gestionar sistemas de diseño:
Propietarios y administradores: Pueden crear, editar, establecer el predeterminado y eliminar cualquier sistema de diseño.
Editores: Pueden crear y editar sistemas de diseño. Solo los propietarios y administradores pueden establecer el predeterminado o eliminar un sistema de diseño.
Establece un sistema de diseño como predeterminado de tu workspace para que las nuevas apps empiecen con él automáticamente.Para establecer tu sistema de diseño predeterminado:
Haz clic en el nombre de tu workspace en la parte inferior izquierda, luego haz clic en Settings.
Haz clic en Design system.
En el sistema de diseño que quieras, haz clic en el icono More actions y haz clic en Set as default.
Establecer un sistema de diseño como predeterminado de tu workspace
Para dejar de usar un sistema de diseño como predeterminado, abre el mismo menú y haz clic en Remove default.
Cuando empiezas una nueva app, tu sistema de diseño predeterminado está preseleccionado, así que la app se construye acorde a tu marca desde el primer prompt. Para elegir un sistema de diseño diferente, haz clic en el icono Add en el chat de IA, selecciona Use a design system y elige el que quieras.
Elegir un sistema de diseño al empezar una nueva app
También puedes aplicar un sistema de diseño a una app en la que ya estás trabajando, desde el mismo icono Add en el chat de IA. Cuando tu workspace tiene un sistema de diseño, la opción muestra su nombre, y hacer clic en ella adjunta el sistema de diseño a tu siguiente prompt.
Aplicar tu sistema de diseño desde el chat de IA
Aplicar un sistema de diseño tiene efecto en un turno de construcción en el chat de IA. Si tu chat está en un modo que no construye, como Discuss, cambia primero a Build.
Aplicar un sistema de diseño a una app ya construida reconstruye la app para que coincida, en lugar de cambiar su estilo en el lugar. Aplícalo pronto, o espera que la app se regenere.
Haz clic en una pregunta abajo para saber más sobre los sistemas de diseño.
¿Necesito habilidades de diseño para crear un sistema de diseño?
No. Describe tu marca en pocas palabras, o importa desde un sitio web, un archivo de Figma, un paquete de npm o tu logo, y Base44 genera un sistema de diseño completo por ti. Luego puedes ajustar cualquier parte.
¿Puede cada cliente o proyecto tener su propio sistema de diseño?
En el plan Builder y superiores tienes 1 sistema de diseño por workspace, así que usa un workspace separado para cada cliente o proyecto que necesite su propia marca. Los workspaces Enterprise no tienen límite.
Esta página fue traducida con IA. Para obtener la información más precisa y actualizada, consulta la versión en inglés.
Was this page helpful?
Assistant
Responses are generated using AI and may contain mistakes.
