Herramientas del Artboard.

El diseño de los aplicativos con ADOBE Xd es un diseño gráfico puro al estilo de ADOBE MUSE, pero con una frescura nueva y un entorno minimalista que permite conocer esta herramienta de trabajo en pocos días. En esta clase terminaremos de ver las herramientas que disponemos para trabajar nuestro artboard.

Herramienta de Texto.

La Herramienta de Texto es una herramienta habitual en todos los programas de ADOBE y sirve para introducir texto en el programa. Pero la forma de introducir texto es diferente a como lo hace un editor convencional ya que el texto se trata un objeto nuevo del artboard, por lo que por cada texto que se introduzca en el documento se generará un nuevo objeto dentro del artboard.

herramienta de texto en ADOBE XD

La herramienta de texto se puede ejecutar sobre cualquier objeto del artboard, incluso se pueden escribir nuevos objetos y dentro de estos escribir texto. Cuando escribes un texto las propiedades del Panel de Ejecución y Reproducción cambian y se activan para que puedas configurar las opciones del texto. Entre las más destacadas podemos encontrar:

Transformación del texto.
Entre las opciones disponibles están las de girar el texto respecto al eje X y el eje Y para dejarlo todo en una posición respecto a un ángulo de ataque.

Cambiar la posición del texto y girarlo.

Pero también podemos volvearlo horizontalmente girar el texto horizontalmenteo verticalmente girar el texto horizontalmente.

También existe la opción de ajustar el texto en el artboard de forma que se puede Deslizar horizontalmente, Deslizar verticalmente o ambos a la vez.

Deslizamientos de texto

El deslizamiento hace que el texto en la aplicación aparezca recortado según el ajuste de reglas que apliques, pero que cuando se ejecuta la prueba verás una parte del texto que puede descubrir con el mouse haciendo scroll según sea horizontal o vertical o ambos a la vez.

apariencia final del deslizamiento.

Existe una herramienta nueva que es la de 3D que simula el elemento como objeto en tres dimensiones. Lo verás en el Panel como un cubo Herramienta de transformación a 3D.

Una vez tengas el texto seleccionado aparecerá dentro de una recuadro azul con un punto de anclaje para que puedas aumentar y ajustar el tamaño manualmente usando el solo el clic izquierdo del ratón.

Al escribir un texto después al seleccionar el objeto queda reflejado como un objeto modificable.

Si pulsas el icono del 3D, cambiará el contorno del texto y aparecerá el simbolo del eje de tres dimensiones para que muevas el texto según sus ejes relativos X, Y, Z.

Herramienta para mover objeto en 3D

Existen otras herramientas de texto como centrado de texto, justificado, alineado, mayúsculas, minúsculas, subrayado, tipo de fuente, tamaño de la fuente, etc., que tienen cualquiera de los muchos editores de texto.

Además también puedes espaciar el texto que hay entre los carácteres, o entre las líneas o el espaciado del párrafo entero.

Propiedades de los textos

Herramienta de Pluma.

La Herramienta de Pluma es una herramienta que nos servirá para crear formas personalizadas diferentes a la de los objetos rectángulos, eclipse, circulares o triangulares.

Con la herramienta pluma podemos crear puntos de estructuras que diseñan la forma del objeto. De esa manera al cerrar el punto de inicio con el punto final, se crea un objeto personalizado como ves en pantalla.

objeto personalizable con herramienta Pluma

Ahora a dicho objeto le podemos aplicar estilos y efectos como a cualquier otro objeto del artboard. Por ejemplo podemos establecer un color de fondo al nuevo objeto.

todos los objetos del artboard son modificables

Lo interesante de la herramienta Pluma es que al hacer objetos personalizados, estos también pueden interactuar con otros objetos y podemos agregarles acciones de capas de adición, resta, intersectar y excluir para obtener formas interesantes.

restar dos formas para crear otra personalizada

Herramienta Línea y Selección

La Herramienta Línea sirve para dibujar una línea en el artboard. Es el equivalente del HTML a la etiqueta </hr>

Lo bueno de la línea de ADOBE Xd es que se puede escribir en cualquier dirección, ángulo y se le puede dar un grosor, un color, un tamaño

La herramienta línea permite dibujar una línea en el artboard

La Herramienta selección icono de selección, nos permite seleccionar el ratón y deseleccionar cualquier otro objeto que tengas seleccionado previamente. Es simple su uso, pero cabe mencionarlo por si aún no lo había mencionado.

Mesa de Trabajo

Las Mesas de Trabajo icono de mesa de trabajo, representan cada una de las pantallas que se quieren diseñar como parte de su aplicación móvil o sitio Web.

Puede tener muchas mesas de trabajo en un único archivo de Adobe XD. Por ejemplo, puede elegir definir mesas de trabajo para experiencias web basadas en móvil, tableta y escritorio dentro de un único archivo. Alternativamente, también puede elegir diseñar varias pantallas de flujo de usuario para una única plataforma en un archivo.

Puede elegir un tamaño preestablecido para la mesa de trabajo al comienzo de su proyecto, a partir de la pantalla de Inicio. Si no desea utilizar los ajustes preestablecidos, puede crear una mesa de trabajo de tamaño personalizado. Una vez que se haya creado su nuevo archivo con el tamaño de la mesa de trabajo elegido, puede agregar tantas mesas de trabajo como sea necesario utilizando la herramienta Mesa de trabajo.

Mesa de trabajo selecciona el espacio que se mostrará la aplicación

Lo que hace la Mesa de Trabajo es que el área que seleccione es el área que se va a mostrar en la pantalla del artboard dejando oculto el resto que no ha sido seleccionado. Entonces aparecerá un scrollbar según la posición de la Mesa.

scrollbaren artboard gracias a la mesa de trabajo

Las mesas de trabajo las puedes copiar y redimensionar de un artboard a otro igual que cualquier otro objeto insertado en el artboard.

Con esta última herramienta terminamos la introducción a las herramientas de Xd para empezar con los formatos, estilos y los trabajos con capas.