Guía del usuario Cancelar

Trabajar con tokens de diseño

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.

tokens de diseño en xd

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.

modo-diseño

A. Panel Colores B. Haga clic para agregar un nuevo nombre 

En modo Diseño:

  1. Vaya al panel Activos. Haga clic en + para ver los colores y los estilos de carácter. 
  2. 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.

share-design-token
En Ver configuración, elija Desarrollo

En el modo Compartir:

  1. 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.
  2. 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

view-design-tokens

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

descargar tokens de diseño
Descargar los tokens de diseño

Para descargar los tokens de diseño desde un vínculo de especificaciones de diseño compartido:

  1. Abra el vínculo compartido en un navegador.
  2. Vaya a los fragmentos de código CSS o seleccione el icono { }.
  3. Haga clic en Descargar CSS para descargar estas variables como fragmentos de código CSS que también contienen los tokens de diseño.
  4. 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?

Pregunte a la comunidad

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.

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?