Si tiene alguna pregunta que hacer o una idea que compartir, venga y participe en la Comunidad de Adobe XD. Nos gustaría que nos dejara sus comentarios y ver sus creaciones.
Última actualización el
14 abr 2022
- Guía del usuario de Adobe XD
- Introducción
- Novedades de Adobe XD
- Preguntas habituales
- Diseñar, crear prototipos y compartir con Adobe XD
- Gestión de color
- Requisitos del sistema
- Conceptos básicos del espacio de trabajo
- Cambiar el idioma de la aplicación en Adobe XD
- Acceder a kits de diseño de interfaz de usuario
- Accesibilidad en Adobe XD
- Métodos abreviados de teclado
- Consejos y trucos
- Diseño
- Mesas de trabajo, guías y capas
- Formas, objetos y trazados
- Seleccionar, redimensionar y rotar objetos
- Mover, alinear, distribuir y organizar objetos
- Agrupar, bloquear, duplicar, copiar y voltear objetos
- Establecer el trazo, el relleno y las sombras paralelas de objetos
- Crear elementos repetidos
- Crear diseños en perspectiva con transformaciones 3D
- Editar objetos utilizando operaciones booleanas
- Texto y fuentes
- Componentes y estados
- Máscaras y efectos
- Maquetación
- Vídeos y animaciones de Lottie
- Prototipo
- Crear prototipos interactivos
- Animar prototipos
- Propiedades de objetos compatibles con la animación automática
- Crear prototipos con teclado y mando de juego
- Crear prototipos utilizando comandos de voz y reproducción
- Crear transiciones temporizadas
- Añadir superposiciones
- Diseñar prototipos de voz
- Crear vínculos de anclaje
- Crear hipervínculos
- Previsualizar diseños y prototipos
- Compartir, exportar y revisar
- Compartir mesas de trabajo seleccionadas
- Compartir diseños y prototipos
- Establecer permisos de acceso de vínculos
- Usar prototipos
- Revisar prototipos
- Trabajar con especificaciones de diseño
- Compartir especificaciones de diseño
- Inspeccionar especificaciones de diseño
- Controles de las especificaciones de diseño
- Revisar y comentar especificaciones de diseño
- Exportar activos de diseño
- Exportar y descargar activos de especificaciones de diseño
- Grupos compartidos para empresas
- Hacer copias de seguridad de recursos de XD o transferirlos
- Sistemas de diseño
- Documentos en la nube
- Integraciones y complementos
- Trabajar con activos externos
- Trabajar con activos de diseño de Photoshop
- Copiar y pegar activos desde Photoshop
- Importar o abrir diseños de Photoshop
- Usar activos de Illustrator en Adobe XD
- Abrir o importar diseños de Illustrator
- Copiar vectores de Illustrator en XD
- Complementos para Adobe XD
- Crear y administrar complementos
- Integración de Jira para XD
- Complemento Slack para XD
- Complemento Zoom para XD
- Publicar diseño de XD en Behance
- XD para iOS y Android
- Solución de problemas
- Problemas conocidos y resueltos
- Instalación y actualizaciones
- Inicio y cierre inesperado
- XD se cierra al iniciar la aplicación en Windows 10
- XD se cierra al cerrar sesión en Creative Cloud
- Problema con el estado de suscripción en Windows
- Aviso de aplicación bloqueada al iniciar XD en Windows
- Generación de volcados de fallos en Windows
- Recopilación y uso compartido de registros de errores
- Documentos en la nube y bibliotecas Creative Cloud
- Crear prototipos, publicar y revisar
- No se pueden grabar interacciones de prototipos en macOS Catalina
- Problemas con flujos de trabajo de publicación
- Los vínculos publicados no aparecen en los navegadores
- Los prototipos no se renderizan correctamente en los navegadores.
- El panel de comentarios aparece repentinamente en los vínculos compartidos
- No es posible publicar bibliotecas
- Importar, exportar y usar otras aplicaciones
Conozca cómo utilizar tokens de diseño para asignar nombres personalizados a colores y estilos de caracteres.
Puede añadir tokens de diseño en Adobe XD para asignar nombres comunes personalizados a los colores y estilos de caracteres presentes en el panel Activos.
Con los tokens de diseño, no es necesario recordar códigos hexadecimales largos y complejos ni fragmentos de CSS para los activos. Puede agregar nombres más sencillos que sean fáciles de reconocer.
Después de publicar la especificación de diseño y compartirla con otros responsables de departamento, los nombres personalizados son visibles para ellos.
Si no asigna variables de nombres personalizadas, Adobe XD creará automáticamente un nombre y una clase únicos utilizando las propiedades de color y estilo de carácter y los prefijos sin nombre.
Antes de continuar
Asegúrese de que:
- Está familiarizado con las especificaciones de diseño y los sistemas de diseño.
- Comparte las convenciones de nombres comunes para colores y estilos de caracteres con sus desarrolladores.
Crear tokens de diseño
Puede crear tokens de diseño para una nueva mesa de trabajo o para una mesa de trabajo existente en la que ya haya añadido colores y estilos de carácter.
Actualmente, Adobe XD no permite cambiar el nombre de fuente, el tamaño u otras propiedades de este tipo.
A. Panel Colores B. Haga clic para agregar un nuevo nombre
En modo Diseño:
- Vaya al panel Activos. Haga clic en + para ver los colores y los estilos de carácter.
- Haga clic en el nombre predeterminado del recurso y escriba un nuevo nombre. Los nombres se utilizan para crear las variables y clases correspondientes para colores y estilos de caracteres.
XD crea automáticamente nombres para los colores y estilos de caracteres a los que no se les haya cambiado el nombre y que normalmente comiencen por –unnamed.
Compartir tokens de diseño
Después de crear los tokens de diseño, puede compartirlos con los desarrolladores mediante las especificaciones de diseño.
?$pjpeg$&jpegSize=200&wid=934 "Share-(Updated)")
En el modo Compartir:
- En la lista desplegable Ver Configuración, elija Desarrollo.
Compruebe que la opción Exportar para Web esté seleccionada, ya que la función de compartir vínculos solo se admite en los vínculos de especificaciones de diseño que se hayan exportado para web. - Haga clic en Crear vínculo. Copie el vínculo generado y compártalo con los desarrolladores. Para obtener más información, consulte Compartir prototipos de diseño.
Para validar el vínculo creado en el modo Compartir, consulte Ver tokens de diseño.
Ver tokens de diseño
?$pjpeg$&jpegSize=200&wid=751 "View-in-Link(Updated)")
A. Ver especificaciones B. Ver variables
Para ver los tokens de diseño en un vínculo de especificaciones de diseño compartidas, abra el vínculo compartido en un navegador y haga lo siguiente:
- Para ver el token de diseño y su código hexadecimal, haga clic en </>. El panel muestra los tokens de diseño correspondientes. Pase el ratón sobre los tokens de diseño para ver su código hexadecimal.
- Para ver las variables, haga clic en { }.
Descargar tokens de diseño
Para descargar los tokens de diseño desde un vínculo de especificaciones de diseño compartido:
- Abra el vínculo compartido en un navegador.
- Vaya a los fragmentos de código CSS o seleccione el icono { }.
- Haga clic en Descargar CSS para descargar estas variables como fragmentos de código CSS que también contienen los tokens de diseño.
- Después de descargar los fragmentos, cópielos y péguelos en el código de implementación.
Más información
Para obtener más información sobre los tokens de diseño, vea este vídeo.
Duración: 4 minutos
¿Qué viene después?
Ya conoce los conceptos básicos para crear y compartir tokens de diseño con sus responsables de departamento. Dé un paso más y aprenda a inspeccionar las especificaciones de diseño.
¿Tiene alguna pregunta o idea?
