> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.es/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Administrador de diseño

> El Administrador de diseño es un entorno de desarrollo integrado basado en web que puede utilizarse opcionalmente para crear plantillas, módulos, CSS y JavaScript.

'[https://cdn2.hubspot.net/hubfs/327485/module%20editor.png](https://cdn2.hubspot.net/hubfs/327485/module%20editor.png)';

El Administrador de diseño es un entorno de desarrollo integrado basado en la web que se puede usar opcionalmente para crear [plantillas](/cms/start-building/building-blocks/templates/overview), [módulos](https://developers.hubspot.com/docs), CSS y JavaScript. El Administrador de diseño se encuentra navegando a [**Marketing+ > Archivos y plantillas > Herramientas de diseño**](https://app.hubspot.com/l/design-manager/) en la barra de navegación superior.

<Alert type="tip">
  Si prefieres desarrollar localmente utilizando tu editor de código, workflows y tecnologías preferidos, puedes utilizar en su lugar [CMS CLI](/developer-tooling/local-development/hubspot-cli/install-the-cli).
</Alert>

Independientemente de si desarrollas localmente o utilizas el Administrador de diseño para crear activos, todo el sistema de archivos de desarrollador de tu cuenta estará representado y será editable en el Administrador de diseño.

![Captura de pantalla del Administrador de diseño de HubSpot](https://f.hubspotusercontent00.net/hubfs/53/designmanager%203-20-2020.png)

Algunos desarrolladores o equipos optan por utilizar un workflow [en el que se utiliza una mezcla del Administrador de diseño y el desarrollo local](/cms/start-building/introduction/developer-environment/creating-an-efficient-development-workflow). Puedes utilizar el comando [`hs fetch`](/developer-tooling/local-development/hubspot-cli/install-the-cli) de la CLI [CMS](/developer-tooling/local-development/hubspot-cli/install-the-cli) para arrastrar las ediciones del Administrador de diseño a tu entorno local. Alternativamente, puedes evitar la edición y tener toda tu base de código [continuamente integrada con el control de código fuente](/cms/start-building/introduction/developer-environment/github-integration).

Consulta este artículo de la Base de conocimientos [](https://knowledge.hubspot.com/design-manager/a-quick-tour-of-the-design-manager) para obtener una visión general del Administrador de diseño y sus distintos componentes.

## Configuración del Administrador de diseño

El Administrador de diseño tiene la configuración básica de IDE que puedes configurar para que la experiencia se adapte a ti y a tus workflows. Aparece un botón de configuración junto al botón de ayuda en la barra inferior y se puede utilizar para definir la configuración.

<DndSection>
  <DndModule numCols={8}>
    <div>
      Puedes definir la configuración para:

      * Tema del editor
      * Fuente
      * Tamaño de la pestaña
      * Unidad de sangría
      * Pestañas tenues
      * Sangría inteligente
      * Sangría al dar formato a los datos
      * Sangría con tabulaciones
      * Ajuste de línea
      * Cerrar corchetes automáticamente
      * Igualar corchetes
      * Igualar etiquetas
      * ESLint
      * y más, consulta [este artículo de la Base de Conocimientos](https://knowledge.hubspot.com/design-manager/customize-design-manager-settings) para ver un desglose de la configuración y obtener más información.

      Si estas funciones no satisfacen tus necesidades, te recomendamos que pruebes nuestras [herramientas de desarrollo local](/developer-tooling/local-development/hubspot-cli/install-the-cli) y [workflow](/cms/start-building/introduction/developer-environment/creating-an-efficient-development-workflow).
    </div>
  </DndModule>

  <DndModule numCols={4}>
    ![Captura de pantalla de la configuración del administrador de diseño](https://cdn2.hubspot.net/hubfs/53/Design%20Manger%20Settings-1.png)
  </DndModule>
</DndSection>