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

# Gerenciador de design

> O Gerenciador de design é um ambiente de desenvolvimento integrado baseado na web que pode ser usado opcionalmente para construir modelos, módulos, CSS e JavaScript.

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

O Gerenciador de design é um ambiente de desenvolvimento integrado baseado na web que pode ser usado opcionalmente para construir [modelos](/cms/start-building/building-blocks/templates/overview), [módulos](https://developers.hubspot.com/docs), CSS e JavaScript. O Gerenciador de design pode ser encontrado navegando até [**Marketing > Arquivos e modelos > Ferramentas de design**](https://app.hubspot.com/l/design-manager/) na barra de navegação superior.

<Alert type="tip">
  Se preferir desenvolver localmente usando seu editor de código, fluxos de trabalho e tecnologias preferidos, você pode usar a [CLI do CMS](/developer-tooling/local-development/hubspot-cli/install-the-cli).
</Alert>

Independentemente de você desenvolver localmente ou utilizar o Gerenciador de design para construir ativos, todo o sistema de arquivos do desenvolvedor da sua conta será representado e poderá ser editado no Gerenciador de design.

![Captura de tela do Gerenciador de design da HubSpot](https://f.hubspotusercontent00.net/hubfs/53/designmanager%203-20-2020.png)

Alguns desenvolvedores ou equipes optam por usar um [fluxo de trabalho que combina o Gerenciador de design e o desenvolvimento local](/cms/start-building/introduction/developer-environment/creating-an-efficient-development-workflow). Você pode utilizar o comando [`hs fetch`](/developer-tooling/local-development/hubspot-cli/install-the-cli) da [CLI do CMS](/developer-tooling/local-development/hubspot-cli/install-the-cli) para transferir as edições do Gerenciador de design para o seu ambiente local. Alternativamente, você pode impedir a edição e ter toda sua [base de código continuamente integrada ao controle de origem](/cms/start-building/introduction/developer-environment/github-integration).

Confira este [Artigo da central de conhecimento](https://knowledge.hubspot.com/design-manager/a-quick-tour-of-the-design-manager) para ter uma visão abrangente do Gerenciador de design e seus diferentes componentes.

## Configurações do Gerenciador de design

O Gerenciador de design possui configurações básicas de IDE que você pode configurar para que a experiência se adapte a você e aos seus fluxos de trabalho. Um botão de configurações aparece ao lado do botão de ajuda na barra inferior e pode ser usado para definir as configurações.

<DndSection>
  <DndModule numCols={8}>
    <div>
      Você pode definir configurações para:

      * Tema do editor
      * Fonte
      * Tamanho da tabulação
      * Recuar unidade
      * Soft tabs
      * Recuo inteligente
      * Recuar na entrada de formatação
      * Recuar com tabulações
      * Quebra de linha
      * Fechar automaticamente colchetes
      * Corresponder colchetes
      * Corresponder tags
      * ESLint
      * e muito mais, veja [este artigo da central de conhecimento](https://knowledge.hubspot.com/design-manager/customize-design-manager-settings) para ver uma descrição das configurações e obter mais informações.

      Se esses recursos não atenderem às suas necessidades, é altamente recomendável experimentar nossas [ferramentas de desenvolvimento local](/developer-tooling/local-development/hubspot-cli/install-the-cli) e [fluxo de trabalho](/cms/start-building/introduction/developer-environment/creating-an-efficient-development-workflow).
    </div>
  </DndModule>

  <DndModule numCols={4}>
    ![Captura de tela da tela de configurações do Gerenciador de design](https://cdn2.hubspot.net/hubfs/53/Design%20Manger%20Settings-1.png)
  </DndModule>
</DndSection>