Adobe XD mejora y simplifica el flujo de trabajo para crear interfaces gracias a la función de importación de kits de interfaz de usuario. Aprenda a importar elementos que pertenezcan al sistema de diseño de Google para comenzar a crear rápidamente su interfaz de usuario.

Italo Sannino está en contacto con la creatividad digital desde hace más de 20 años, desde que se graduó en la Academia de Bellas Artes de Nápoles, donde ahora enseña diseño de interfaces de usuario. Fundó “Geko”, una pequeña agencia de Nuevos Medios en 1997, que se ha convertido en su campo personal de experimentación. Gracias al proyecto Adobe Guru y a ser actualmente un profesional de la comunidad de Adobe, ha estado muy involucrado en la metodología, el diseño y la planificación de interfaces utilizables y herramientas de Adobe relevantes, habiéndose convertido en uno de los miembros de Wacom Ambassador. 

Puede echar un vistazo a su desatada creatividad aquí.

Requisito previo: Activar las fuentes adecuadas

Google Material es un sistema de diseño desarrollado por Google, principalmente para el sistema operativo Android. La tipografía juega un papel fundamental en el uso de sistemas de diseño. Para asegurarse de que los diseños funcionen en consonancia, active las fuentes de referencia en las bibliotecas de Adobe Fonts.

Nota:

Google Material es más que un simple conjunto de iconos y estilos de botón. Es un sistema de diseño y, como tal, no solo incluye las mejores prácticas generales de interfaces/experiencias de usuario, sino también el uso de elementos de interfaz importados. Para obtener más información, visite Diseño de materiales.

Siga estos pasos para activar la fuente correcta:

  1. Utilice el regulador Activar todas las fuentes de la esquina superior derecha para activar la familia de fuentes.

    Página Roboto de fonts.adobe.com
    Página Roboto de fonts.adobe.com

Preparación para importar kits de interfaz de usuario

  1. Inicie Adobe XD. Le recibirá la página de bienvenida, que ofrece diferentes posibilidades. Puede optar por comenzar partiendo de un ajuste preestablecido, como iPhone 6/7/8.

  2. Después de seleccionar el ajuste preestablecido y crear un documento, seleccione el elemento del menú: Archivo> Obtener kits de IU> Google Material.

    Menú Obtener kits de interfaz de usuario
    Menú Obtener kits de interfaz de usuario
  3. Se le redirigirá a la página de descarga de Google Material. Haga clic en el vínculo de descarga del kit de interfaz de usuario en formato Adobe XD.

    Página de descarga del formato de archivo de Adobe XD
    Página de descarga del formato de archivo de Adobe XD
  4. Abra el archivo de Adobe XD recién descargado. 

    Archivo que contiene el kit de interfaz de usuario de Google Material
    Archivo que contiene el kit de interfaz de usuario de Google Material

Una vez que disponga del archivo con los elementos de interfaz de usuario de Google Material, podrá importarlo de manera eficiente a su diseño o a un nuevo archivo, de dos maneras, según sus necesidades específicas. Puede importar un solo elemento a la vez o todas las mesas de trabajo que, a su vez, contengan todos los elementos (incluidos los componentes).

Importación de elementos individuales al diseño

Este método tiene las ventajas innegables de mantener el archivo con un tamaño razonable y de disponer de control total de sus activos.

  1. Identifique el elemento de interfaz de usuario (o los elementos de interfaz que sean de interés).

  2. Con la herramienta Seleccionar (presionar v), elija el elemento de interfaz de usuario.

  3. Copie el elemento elegido pulsando comando + c (en Mac) o Ctrl + C (en Windows) y pegue presionando comando + v (en Mac) o ctrl + v (en Win).

    Pegue presionando comando + v (en Mac) o ctrl + v (en Win).

    En este caso, se optó por tomar el icono de correo para integrarlo en el diseño:

    Operación de copiar y pegar entre el archivo de material de Google y nuestro diseño
    Operación de copiar y pegar entre el archivo de material de Google y nuestro diseño
    screenshot_2018-12-20at142732

    Nota:

    Todos los elementos del kit de interfaz de usuario de Google están en gráficos vectoriales, por lo que pueden editarse según se desee.

    Si hay muchos elementos individuales, tomarlos de uno en uno desde el archivo con la interfaz de usuario de Google puede suponer enfrentarse a un proceso que podría llevar mucho tiempo y ser tedioso. La posibilidad de copiar y pegar una o más mesas de trabajo es una interesante función de Adobe XD que puede utilizarse para sacar partido de ella.

Importación de varias mesas de trabajo al diseño

  1. Vuelva a abrir el archivo Adobe XD que contiene la interfaz de usuario de Google, o regrese al mismo.

  2. Para seleccionar todas las mesas de trabajo, presione Cmd + a (en Mac) o Ctrl + a (en Windows).

  3. Copie presionando comando + c (en Mac) o ctrl + c (en Windows) y pegue presionando comando + v (en Mac) o ctrl + v (en Win).  

    Seleccionar todas las mesas de trabajo
    Seleccionar todas las mesas de trabajo
    Todas las mesas de trabajo pegadas en nuestro diseño
    Todas las mesas de trabajo pegadas en nuestro diseño

Uso de componentes para importar varias mesas de trabajo

El proceso de pegar varias mesas de trabajo es conveniente y potente pero, desde la última versión, Adobe XD usa el modelo de componentes vinculados. No es posible editar las partes de la interfaz de usuario que se hayan convertido en un componente en el archivo de Google, a menos que se desvincule un componente de la fuente o se editen los componentes del archivo de origen. En este caso, intente desconectar un componente de su origen.

Hoy en día no es raro que cada vez trabajen más personas en el mismo proyecto y compartan sus archivos. Esto, por supuesto, también se aplica a su archivo de XD del kit de interfaz de usuario de Google. En circunstancias como estas, los componentes vinculados muestran su auténtico valor.

Los componentes vinculados le permiten tener solo un archivo de origen (una guía de estilo o un sistema de diseño, como en este caso) con todos los elementos de la interfaz de usuario de su proyecto y usarlos en otros archivos de Adobe XD.

Al utilizar un componente vinculado en su archivo de XD, que proviene del archivo de origen, siempre se le notificará cuando se cambie uno de estos componentes, previsualizará los cambios y, en ese momento, podrá decidir si aceptarlos o rechazarlos.

Esta potente función no solo simplifica el flujo de trabajo, sino que también garantiza la consistencia de su interfaz/experiencia de usuario, que es probablemente el aspecto más crítico de este tipo de trabajo.

Nota:

Los componentes son como un universo lleno de posibilidades. Para obtener más información, visite Trabajar con componentes vinculados.

Uso del comando de convertir componente en local

  • Active el panel Activos presionando comando + mayús + y (en Mac) o ctrl + mayús + y (en Windows).
  • Seleccione el componente (o componentes) que desea convertir y con control + clic (en Mac) o botón derecho del ratón (en Windows), seleccione Convertir componente en local desde la ventana emergente.
Menú “Convertir componente en local”
Menú de convertir componente en local
Sección de Google Material dedicada al diseño
Sección de Google Material dedicada al diseño

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea