Panel de Símbolos en XD

Disculpen el desvio de tema cuando ayer les hablé de “Storyboarder“; les gustó la aplicación, verdad? Después seguimos jugando con ella! Hoy les quiero hablar un ratito de el panel de Símbolos. Mencionamos que accesamos a panel con el atajo en el teclado:

  • Shift + Command + y“;
  •  o tocando el botón Screen Shot 2018-04-06 at 10.33.22 AM

Digamos que tenemos los siguientes elementos en el “art-board” de la aplicación que deseo crear. Cuatro antenas “Wifi” que dibujé en Illustrator; texto en línea que escribí con la herramienta de texto y un rectángulo con un color gris obscuro.

Screen Shot 2018-04-06 at 1.37.53 PM

El panel de símbolos o “Assets” se encuentra vacío y tres secciones me dicen que puedo añadir colores; estilos de texto y símbolos como fotos, vectores, en fin todo lo que voy a rehusar a lo largo de la aplicación. Primero vamos a colocar en el panel de “Assets” los colores que se van a repetir en la aplicación. Si seleccionas todo lo que tenemos ahora mismo en el board del arte y presionamos el botos de + (plus) que vemos al lado de la palabra color, vamos a guardar una librería de los colores usados en la aplicación.

Screen Shot 2018-04-06 at 1.45.17 PM

Como puedes ver un total de 6 colores fueron añadidos en el panel; incluyendo el color negro de la palabra “Login“. Vamos a seleccionar la palabra “Login“; coloquémosla sobre el rectángulo gris; pintémos la palabra de blanco, usando el panel de propiedades que se encuentra a la derecha; y dejemos el tamaño a 22 puntos / Helvetica Neue / Bold; luego agrupemos la palabra y el rectángulo para crear un botón.

Screen Shot 2018-04-06 at 1.48.07 PM

Una vez esté el botón agrupado podemos seleccionarlo con el mouse y tocando el botón derecho del mouse aparece un sub-menu y seleccionamos el comando “Make Symbol“.

Screen Shot 2018-04-06 at 1.52.05 PM

Acto seguido en el panel de símbolos aparece el botón creado y si observas bien el “art-board” verás que ahora que el botón le rodea una línea verde. Esta línea verde nos indica que ese botón en ahora una instancia o “instance” del símbolo que está en el panel de símbolos. Lo mismo puedo hacer con los iconos que se van a repetir o que tengo en mente usar en mi aplicación.

Screen Shot 2018-04-06 at 1.54.18 PM

Podemos usar el panel de símbolos como una gaveta donde guardamos cosas que vamos a usar luego. Podemos seleccionarlos todos a la vez o de uno en uno y utilizar el atajo del teclado “Command + k“. Rápidamente cada ícono aparece en la sección de símbolos. Ya hemos aprendido tres formas de añadir objetos al panel de símbolos. Presionando el botón de más; seleccionando el sub-menu con el botón derecho del mouse y utilizando el atajo “Command + k“.

Screen Shot 2018-04-06 at 1.59.35 PM

Digamos que ahora escribimos la palabra símbolos; con estilo bold a 54 puntos y una fuente Helvetica Neue y de color rojo. Ese estilo de letra la deseas usar en tu aplicación en otras páginas. Con tan solo dejar el cursor intermitente al final de la palabra cuando terminas de escribir y presionas el botón de más en el panel de símbolos en la sección de “Character Styles” verás que todas esas propiedades serán guardadas y si tienes estilos distintos de palabras con la misma fuente pero distinto tamaño; ellas se agruparan de forma descendente en tamaño. Si colocamos una nueva a un tamaño de 30pt, esta será colocada debajo de la de 54pt.

Screen Shot 2018-04-06 at 2.05.02 PM

Ahora te preguntas, y si deseo cambiarle el color rojo a uno más bonito, pero ya diseñé 30 paneles de arte?, Ea diantre, qué trabajito! No problem!

Screen Shot 2018-04-06 at 2.11.56 PM

Solo seleccionas el símbolo, seleccionas el botón derecho del mouse y presionas “Edit“; seleccionas el nuevo color y como por arte de magia todos los paneles en donde se repetía el color y ese estilo de palabra cambia automáticamente. Si observas las opciones puedes cambiar muchas cosas como la fuente, el tamaño, color y estilo.

Screen Shot 2018-04-06 at 2.14.20 PM

Práctica:

  1. Añade una foto al board de arte.
  2. Guardalo como un símbolo.
  3. Repite la instancia en el “art-board” .
  4. Reemplaza la imagen con otra que tengas en tu “Desktop“.
    (Te debo este detalle; si abres el “finder” y lo colocas al lado de Adobe XD y “dragueas” desde el desktop una imagen y la colocas sobre una existente en XD, la misma se torna anulosa y al soltar la nueva, la foto anterior es substituida por la foto nueva).
    Screen Shot 2018-04-06 at 2.26.11 PM
  5. Selecciona la foto nueva y con el botón derecho del mouse selecciona en el sub-menú “Update all symbols“.
    Screen Shot 2018-04-06 at 2.32.22 PM
  6. Observa el resultado.
    Screen Shot 2018-04-06 at 2.33.45 PM

Todas las instancias de la foto fueron actualizadas por la nueva foto y en el panel de símbolos ocurrió lo mismo. Sigue divirtiéndote con Adobe XD! Nos vemos en la próxima!

¡’Dición!

 

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s