# Pautas de diseño para extensiones de Docker


En Docker, nuestro objetivo es crear herramientas que se integren en los flujos de trabajo existentes de los usuarios en lugar de exigirles que adopten otros nuevos. Te recomendamos encarecidamente que sigas estas pautas al crear extensiones. Revisamos y aprobamos la publicación de tu extensión en el Marketplace en función de estos requisitos.

Aquí tienes una lista de verificación sencilla para repasar al crear tu extensión:

- ¿Es fácil empezar?
- ¿Es fácil de usar?
- ¿Es fácil obtener ayuda cuando se necesita?

## Crear una experiencia consistente con Docker Desktop

Utiliza el [Docker Material UI Theme](https://www.npmjs.com/package/@docker/docker-mui-theme) y la [Docker Extensions Styleguide](https://www.figma.com/file/U7pLWfEf6IQKUHLhdateBI/Docker-Design-Guidelines?node-id=1%3A28771) para asegurarte de que tu extensión se sienta como parte de Docker Desktop, creando así una experiencia fluida para los usuarios.

- Asegúrate de que la extensión tenga tanto un tema claro como uno oscuro. El uso de los componentes y estilos de acuerdo con la guía de estilo de Docker garantiza que tu extensión cumpla con el [estándar de accesibilidad de nivel AA](https://www.w3.org/WAI/WCAG2AA-Conformance).

  ![Modo claro y oscuro](/extensions/extensions-sdk/design/design-guidelines/images/light_dark_mode.webp)

- Asegúrate de que el icono de tu extensión sea visible tanto en el modo claro como en el oscuro.

  ![Colores de icono en modo claro y oscuro](/extensions/extensions-sdk/design/design-guidelines/images/icon_colors.webp)

- Asegúrate de que el comportamiento de navegación sea consistente con el resto de Docker Desktop. Añade un encabezado para establecer el contexto de la extensión.

  ![Encabezado que establece el contexto](/extensions/extensions-sdk/design/design-guidelines/images/header.webp)

- Evita incrustar ventanas de terminal. La ventaja que tenemos con Docker Desktop sobre la CLI es que tenemos la oportunidad de proporcionar información enriquecida a los usuarios. Aprovecha esta interfaz tanto como sea posible.

  ![Ventana de terminal usada incorrectamente](/extensions/extensions-sdk/design/design-guidelines/images/terminal_window_dont.webp)

  ![Ventana de terminal usada correctamente](/extensions/extensions-sdk/design/design-guidelines/images/terminal_window_do.webp)

## Construir características de forma nativa

- Con el fin de no interrumpir el flujo de los usuarios, evita escenarios en los que el usuario tenga que salir de Docker Desktop, hacia la CLI o a una página web por ejemplo, para realizar ciertas funcionalidades. En su lugar, construye características que sean nativas de Docker Desktop.

  ![Forma incorrecta de cambiar el contexto](/extensions/extensions-sdk/design/design-guidelines/images/switch_context_dont.webp)

  ![Forma correcta de cambiar el contexto](/extensions/extensions-sdk/design/design-guidelines/images/switch_context_do.webp)

## Desglosar flujos de usuario complicados

- Si un flujo es demasiado complicado o el concepto es abstracto, desglosa el flujo en múltiples pasos con una llamada a la acción (call-to-action) simple en cada paso. Esto ayuda a incorporar a los usuarios principiantes en tu extensión.

  ![Un flujo complicado](/extensions/extensions-sdk/design/design-guidelines/images/complicated_flows.webp)

- Cuando haya múltiples llamadas a la acción, asegúrate de utilizar los botones primarios (estilo de botón relleno) y secundarios (estilo de botón con contorno) para transmitir la importancia de cada acción.

  ![Llamada a la acción](/extensions/extensions-sdk/design/design-guidelines/images/cta.webp)

## Incorporación de nuevos usuarios

Al crear tu extensión, asegúrate de que los usuarios primerizos de la misma y de tu producto puedan comprender su valor añadido y adoptarla fácilmente. Asegúrate de incluir ayuda contextual dentro de la extensión.

- Asegúrate de que toda la información necesaria se añada tanto al Marketplace de extensiones como a la página de detalles de la extensión. Esto debe incluir:
  - Capturas de pantalla (screenshots) de la extensión. Ten en cuenta que el tamaño recomendado para las capturas de pantalla es de 2400x1600 píxeles.
  - Una descripción detallada que abarque cuál es el propósito de la extensión, a quién le resultará útil y cómo funciona.
  - Enlaces a los recursos necesarios, como la documentación.
- Si tu extensión tiene una funcionalidad particularmente compleja, añade una demostración o vídeo en la página de inicio. Esto ayuda a incorporar rápidamente a los usuarios primerizos.

  ![página de inicio](/extensions/extensions-sdk/design/design-guidelines/images/start_page.webp)

## ¿Qué sigue?

- Explora nuestros [principios de diseño](/extensions/extensions-sdk/design/design-guidelines/design-principles/).
- Echa un vistazo a nuestras [pautas de estilo de la UI](/extensions/extensions-sdk/design/design-guidelines/).
- Aprende cómo [publicar tu extensión](/extensions/extensions-sdk/extensions/).