Advertisement
  1. Web Design
  2. UX/UI
  3. Design Systems

Mejores sistemas de diseño con Adobe XD para Visual Studio Code

Scroll to top

() 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.

Design System Packages or DSPs Design System Packages or DSPs Design System Packages or DSPs

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.

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):

adobe xd documentadobe xd documentadobe xd document

En la pestaña Bibliotecas puedo elegir Activos de documento que en este caso me da algo como esto:

document assetsdocument assetsdocument assets

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:

browsebrowsebrowse

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.

get library link adobe xdget library link adobe xdget library link adobe xd

Cambiar a VS Code

Una vez en Visual Studio Code, abra el panel Extensiones y busque Adobe XD:

extensions panelextensions panelextensions panel

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:

xd panelxd panelxd panel

Desde aquí puedes cargar un paquete o crear uno. Vamos a crear uno, así que haz clic en Crear paquete . Entonces:

  1. dar un nombre al paquete
  2. Selecciona una ubicación de archivo
  3. 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.

successsuccesssuccess

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.

xd panel dspxd panel dspxd panel dsp

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á:

edit butonedit butonedit buton

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!

install style dictionaryinstall style dictionaryinstall style dictionary

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 :

auto suggest triggerauto suggest triggerauto suggest trigger

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+ .

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.