Cómo importar iconos y pantallas de materiales de Google en Adobe XD

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

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.

Siga estos pasos para activar la fuente correcta:

Preparación para importar kits de interfaz de usuario

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.

Importación de varias mesas de trabajo al 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.

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.