() translation by (you can also view the original English article)
En este consejo rápido voy a mostrarte cómo crear paquetes de sistema de diseño (o DSP) con Adobe XD y una nueva extensión para Visual Studio Code.
Nuevas funciones de Adobe XD
Para celebrar su tercer cumpleaños en Adobe MAX 2020, Adobe XD recibió un montón de nuevas características, incluyendo una nueva forma de integración para Visual Studio Code (o VS Code). Esta integración permite a diseñadores y desarrolladores crear y mantener sistemas de diseño.
- Aprenda todo sobre sistemas de diseño en nuestra guía completa.
Aquí hay una versión de vídeo completa de este tutorial de Adobe XD. ¡No te olvides de suscribirte a nuestro canal de YouTube Envato Tuts para tutoriales, cursos gratuitos y mucho más!
Cómo trabajar con VS Code
Veamos cómo funciona esto. Comenzamos con un documento de Adobe XD (este es un ejemplo que utilicé en un tutorial sobre transformaciones 3D en Adobe XD):
En la pestaña Bibliotecas puedo elegir Activos de documento que en este caso me da algo como esto:
Aquí verás que he definido cuatro colores (que tienen un nombre), algunos estilos de carácter y dos componentes (la tarjeta y el botón).
Publicar como biblioteca
Voy a hacer clic en el botón arriba arriba, a la izquierda, que dice Publicar como una biblioteca cuando se coloca el puntero sobre. En la ventana emergente, puedo pulsar el botón Publicar junto al archivo actual (esto puede tardar un momento).
Una vez hecho la publicación puedo pulsar Examinar:
Luego, en la siguiente pantalla puedo seleccionar la biblioteca que acabo de publicar, luego hacer clic en Obtener enlace que puedo copiar en preparación para el siguiente paso.
Cambiar a VS Code
Una vez en Visual Studio Code, abra el panel Extensiones y busque Adobe XD:
La primera extensión es la que estamos buscando, así que instálalala.
una vez instalada, notarás un pequeño botón de Adobe XD en la parte inferior derecha de la ventana de la aplicación. Haces clic en él para abrir el siguiente panel:
Desde aquí puedes cargar un paquete o crear uno. Vamos a crear uno, así que haz clic en Crear paquete . Entonces:
- dar un nombre al paquete
- Selecciona una ubicación de archivo
- Escoger los lenguajes de código en los que deseas desarrollar este paquete (CSS, tal vez SCSS y JavaScript en nuestro caso)
En este punto, se tu preguntara que conecte el código VS a Creative Cloud, por lo que necesitaras que autenticarse con un ID de Adobe. También puedes omitir este paso e introducir el enlace de la Biblioteca CC que acabamos de copiar.
La pantalla de éxito nos dice que hemos importado nuestra biblioteca a un nuevo paquete de sistema de diseño (o DSP).
Lo sentimos, ¿qué es un paquete de sistema de diseño?
Me alegra que preguntaste. DSP es una nueva estructura de carpetas de formato abierto creada específicamente por Adobe y amigos para que los equipos puedan compartir información del sistema de diseño en varias herramientas. Puedes leer más de los creadores en GitHub, pero no hace falta decir que es la forma ideal de trabajar entre una herramienta de diseño como Adobe XD y un entorno de desarrollo como Visual Studio Code.
Cómo trabajar con tu DSP
Para trabajar con tu nuevo paquete de sistema de diseño, comience creando un nuevo archivo HTML. A continuación, pulse el botón Adobe XD de nuevo para abrir el panel Adobe XD. Desde allí, puedes cargar el paquete y seleccionar el paquete que acabamos de crear con éxito.
Así que ahora tenemos nuestro archivo HTML en blanco a la izquierda, y nuestro DSP a la derecha. Verás que tenemos acceso a tokens de diseño, como nuestros colores y estilos de caracteres, y componentes como nuestro botón y tarjeta.
Por ejemplo, con nuestro botón, podemos hacer clic en Editar y crear un fragmento de código para él. Agregamos un disparador como 3d-Button, seleccionamos un lenguaje de código (HTML para esto), y luego incluimos un fragmento de código que se usará:
Termine la edición, entonces se te dirá que necesitas instalar una cosa más (Diccionario de estilo) para que VS Code realice la compilación. ¡Será mejor que hagamos lo que nos dicen, creo!
Con esto hecho, nuestro proyecto compilará y notarás nuevos archivos en la carpeta que originalmente seleccionaste para el DSP; un archivo CSS, un archivo JavaScript, y un archivo SCSS (los tres idiomas que seleccionamos si puedes recordar ). Cada uno de ellos en esta etapa contendrá un montón de variables para los colores y estilos que necesitamos.
Uso de nuestro componente de botón
Ahora podemos empezar a escribir marcado en nuestro archivo HTML. Si empiezo a escribir el desencadenante que hemos designado (xd_3d-button) verás la sugerencia automática aparecer :
Al pulsar enter, se inserta el fragmento de código que escribimos.
Conclusión
Y es una introducción rápida al trabajo con Adobe XD y Visual Studio Code en sistemas de diseño. Para obtener más inspiración, puedes encontrar recursos DSP disponibles públicamente aquí, y no olvide que puedes aprender mucho más sobre Adobe XD aquí mismo en Tuts+ .
