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

Adobe XD es un programa increíble para diseñar sitios web y supera con creces a su predecesor, Adobe Photoshop. En Bright Vessel, lo hemos convertido en nuestro programa predilecto para crear experiencias de usuario para nuestros 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, deberá asegurarse de aprovisionar los archivos para que puedan exportarse correctamente.

La necesidad de ser preciso y que todos los elementos estén agrupados y en su propia sección.

En esta imagen, un diseñador agrega elementos en varias capas diferentes, por lo que, al agruparlas, los elementos no se recortaron correctamente. La solución es sencilla: al hacer doble clic en uno de los elementos (por ejemplo, el hombre), se arrastra para que ningún elemento se traspase a otra fila.

Esto tiene una solución fácil. Al hacer doble clic en un elemento (por ejemplo, el hombre), se arrastra para que ningún elemento se traspase a otra fila.

3. La nomenclatura es muy importante. Siempre es recomendable nombrar las imágenes, no solo para facilitar su identificación, sino también para el SEO. Usaremos HDR para los encabezados y BG para los fondos.

Esto facilita identificar el tipo de imagen de los elementos y el nombre de la sección si se trata de un fondo, o del elemento si se trata de tipografía, botón, etc. En el área de capas, nombre el grupo y las imágenes individuales. Use minúsculas y un guion entre cada palabra.

4. Una vez corregidos todos los elementos, la forma más sencilla de exportar es agruparlos para poder exportar la imagen necesaria. En la mayoría de los casos, recopilará recursos que de otro modo no podrían obtenerse en HTML y usará un constructor.

Archivo > Exportar > Seleccionado

Ahora que le hemos puesto nombre a la capa, no tenemos que escribirla. Así, ya sabemos qué tipo de elementos son las imágenes para el fondo, la tipografía, el botón, etc. Siempre es recomendable nombrar las imágenes, no solo para facilitar su identificación, sino también para el SEO. Usaremos HDR para los encabezados y BG para los fondos.

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