> ## Documentation Index > Fetch the complete documentation index at: https://docs.base44.com/llms.txt > Use this file to discover all available pages before exploring further. # Sistema de diseño > 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. Your design systems in workspace settings **Disponibilidad:** * Los sistemas de diseño están disponibles en el [**plan Builder**](https://base44.com/pricing) 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. *** ## Qué incluye 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. A design system, with your brand settings on the left and a live preview on the right 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. *** ## Crear un sistema de diseño 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:** 1. Haz clic en el nombre de tu workspace en la parte inferior izquierda, luego haz clic en **Settings**. 2. Haz clic en **Design system**. 3. Haz clic en **Create**. Si tu workspace ya tiene un sistema de diseño, haz clic en **Create new design system** en su lugar. 4. 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. 5. Haz clic en **Create**. Generar tu sistema de diseño puede tomar unos minutos, y puedes salir y volver mientras se ejecuta. 6. Revisa el sistema de diseño generado en la vista previa, luego ajusta lo que quieras. The Create a design system dialog with a logo, a brand description, an imported source, and uploaded design resources *** ## Editar tu sistema de diseño 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: Una breve descripción de tu marca. Base44 la usa para mantener todo lo que genera fiel a tu marca. 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**. Editing your brand logos 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. Choosing your heading and body fonts Haz clic en un color para editarlo, o haz clic en **Generate palette** y describe los colores que quieres. Editing a color in the palette 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. Adding tone of voice traits 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. Adding your core values Define cuán redondeados se ven tus componentes. Setting your corner radius values Ajusta cuánto espacio va entre los elementos. Fine-tuning your spacing scale Define cuán elevados se ven tus componentes. Haz clic en una sombra para ajustar su posición, desenfoque, extensión y color. Setting your shadow values 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. Editing your design guidelines 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. *** ## Gestionar tus sistemas de diseño 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. Opening a design system for editing ### Establecer un sistema de diseño predeterminado 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:** 1. Haz clic en el nombre de tu workspace en la parte inferior izquierda, luego haz clic en **Settings**. 2. Haz clic en **Design system**. 3. En el sistema de diseño que quieras, haz clic en el icono **More actions** y haz clic en **Set as default**. Setting a design system as your workspace default Para dejar de usar un sistema de diseño como predeterminado, abre el mismo menú y haz clic en **Remove default**. ### Eliminar un sistema de diseño Elimina un sistema de diseño que ya no necesitas. Eliminar un sistema de diseño desde su tarjeta tiene efecto de inmediato y no se puede deshacer. **Para eliminar un sistema de diseño:** 1. Haz clic en el nombre de tu workspace en la parte inferior izquierda, luego haz clic en **Settings**. 2. Haz clic en **Design system**. 3. En el sistema de diseño que quieras, haz clic en el icono **More actions** y haz clic en **Delete**. Deleting a design system *** ## Usar tu sistema de diseño al construir 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. The home prompt box with the Add menu open, Use a design system highlighted, and the design system list beside it 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. The AI chat Add menu open with Use a design system highlighted 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. *** ## Preguntas frecuentes Haz clic en una pregunta abajo para saber más sobre los sistemas 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. 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](/).