Cómo exportar recursos de Adobe XD para crear un sitio web en WordPress

Adobe XD es un programa bastante impresionante para el diseño de sitios web y supera con creces a su antiguo predecesor Adobe Photoshop. En Bright Vessel. Lo hemos convertido en nuestro programa para construir experiencias de usuario para los clientes.

A continuación se explica cómo exportar activos al crear un sitio web de WordPress en Adobe XD.

1. Primero debes abrir tu archivo adobe XD

2. Una vez que tenga el archivo abierto, asegúrese de que los archivos estén bien aprovisionados para que puedan exportarse correctamente.

Deben ser precisos y todos los elementos deben estar agrupados y en su propia sección.

En esta imagen, un diseñador añade elementos en varias capas diferentes, por lo que cuando todas las capas se agruparon. Los elementos no se recortaron correctamente. Esta es una solución fácil. Al hacer doble clic en uno de los elementos, Ej: el hombre. Se arrastra para que ningún elemento sangre a una fila diferente.

Esto tiene fácil arreglo. Al hacer doble clic en uno de los elementos, Ej: el hombre. Arrastras para que ningún elemento se desplace a otra fila.

3. La asignación de nombres es muy importante. Siempre es bueno nombrar tus imágenes no sólo para identificarlas fácilmente sino también para SEO. Utilizaremos HDR para las cabeceras y luego BG para los fondos.

Esto facilita saber qué tipo de elemento imagen es y luego el nombre de la sección si es un fondo o del elemento si es tipografía, botón, etc. En el área de capas, nombre el grupo y las imágenes individuales. Utilice minúsculas y un guión entre cada palabra.

4. Ahora la forma más fácil de exportar una vez que haya corregido todos los elementos es agruparlos para que pueda exportar la imagen necesaria. En la mayoría de los casos, se reunirán los activos que de otro modo no se podría hacer en HTML y nuestro constructor que puede estar utilizando.

Archivo > Exportar > Seleccionado

Ahora que hemos puesto nombre a la capa, no tenemos que escribirlo. Así que sabemos qué tipo de elementos son las imágenes para el fondo, tipografía, botón, etc. Siempre es bueno nombrar sus imágenes no sólo para una manera fácil de identificar, sino también para SEO. Usaremos HDR para los encabezados y luego BG para los fondos.

Una vez exportado, debería tener un grupo de elementos en el tipo de archivo de imagen deseado.