Aprenda a utilizar las mesas de trabajo para crear sus proyectos de diseño en XD.
Conozca a Jeanee, diseñadora gráfica, elegida para liderar un proyecto de diseño de UX. Va a presentar Adobe XD a su equipo, cuyos miembros tienen diferentes niveles de experiencia con el diseño y las herramientas de UX.
Jeanee se está formando en terminologías básicas de diseño y trabajando con mesas de trabajo para crear su primer prototipo en XD. Siga leyendo para saber cómo podemos ayudarla a empezar.
¿Es la primera vez que usa Adobe XD?
Conozca los conceptos básicos de la aplicación
Consulte los conceptos básicos de XD:
¿Qué es una mesa de trabajo? La mesa de trabajo representa las pantallas de la aplicación o las páginas del sitio web. Simplifica los procesos de diseño y crea diseños interactivos para varios tamaños de pantalla en un único documento. Utilice las mesas de trabajo para crear su proyecto de XD.
Siga leyendo para saber cómo configurar las mesas de trabajo.
Adobe XD le proporciona mesas de trabajo para tamaños de pantalla populares como los de las distintas versiones de iPhone, iPad y Web. Puede crear una mesa de trabajo personalizada si las opciones no cumplen sus requisitos.
Pantalla Inicio
Utilice los tamaños de mesa de trabajo preestablecidos o cree una mesa de trabajo personalizada.
Aplicación XD
Utilice la herramienta Mesa de trabajo para crear mesas de trabajo adicionales. Seleccione y aplique los ajustes preestablecidos de mesa de trabajo en el Inspector de propiedades.
Puede importar a XD mesas de trabajo existentes desde Photoshop o Illustrator sin necesidad de volver a crearlas.
Utilice Archivo > Importar desde XD para abrir las mesas de trabajo de Photoshop o Illustrator en XD con cada mesa de trabajo y capa intacta y editable.
Consulte este artículo en el que se describen las 5 principales formas de utilizar los activos de Photoshop en XD.
¿Ha cambiado de opinión sobre el tamaño de la mesa de trabajo? Cambie su tamaño. También puede cambiarle el nombre en función de sus necesidades de diseño. ¿Desea crear más mesas de trabajo y administrar su colocación? Duplíquelas y reorganícelas.
Cambiar nombre
Haga doble clic en el título de la mesa de trabajo.
Redimensionar
Arrastre el control circular que aparece en los bordes de una mesa de trabajo.
Duplicar
Seleccione la mesa de trabajo y pulse Ctrl /Cmd + D.
Alinear y distribuir
Seleccione varias mesas de trabajo y haga clic en Alinear y Distribuir en el Inspector de propiedades. Arrastre la mesa de trabajo para reorganizarla.
¿Desea definir la estructura subyacente del contenido de diseño añadido en las mesas de trabajo? Aplique cuadrículas de diseño. ¿Desea hacerse una idea de cómo medir rápidamente y alinear el contenido del diseño mientras dispone objetos o texto en las mesas de trabajo? Use cuadrículas cuadradas.
Cuadrículas de diseño
Seleccione una o varias mesas de trabajo y, en la sección Cuadrícula del Inspector de propiedades, elija Diseño.
Cuadrículas cuadradas
Seleccione una o varias mesas de trabajo y, en la sección Cuadrícula del Inspector de propiedades, elija Cuadrado.
Una vez creada su primera mesa de trabajo, aprenda a añadir elementos visuales y de texto, cambiar el fondo y crear efectos de desplazamiento.
Ahora que la mesa de trabajo básica está en su lugar, puede crear o modificar el color de fondo, añadir gráficos y crear o dar formato a estilos de texto en recursos reutilizables. ¿Desea crear una cuadrícula editable de elementos repetidos? Use cuadrículas de repetición.
Añadir elementos visuales y de texto
Utilice las herramientas de Dibujo para crear elementos personalizados o seleccione Archivo > Importar para importar elementos existentes como imágenes e iconos de la carpeta del dispositivo. Utilice las herramientas de Texto para crear, dar formato y capturar estilos de texto en recursos reutilizables.
Para cambiar el color de fondo de la mesa de trabajo, en el Inspector de propiedades, seleccione Rellenar y aplique color desde el selector de color.
Crear elementos repetibles
Utilice cuadrículas de repetición para crear objetos con elementos repetitivos, como listas y diseños basados en tarjetas.
¿Desea añadir efectos de desplazamiento vertical y horizontal en el diseño? Utilice grupos de desplazamiento para crear prototipos de una ventana de contenido.
¿Desea lograr una simulación realista de desplazamiento en equipos de escritorio y móviles? Establezca la posición fija de un elemento en la mesa de trabajo para permitir que otros elementos se desplacen debajo.
Desplazamiento vertical
Para extender la mesa de trabajo más allá de la altura de la ventana gráfica, utilice el marcador. El marcador indica la posición hasta la cual debe desplazarse para acceder al contenido.
Fijar posición al desplazarse
Para mantener los elementos de diseño en una posición fija, seleccione Fijar posición al desplazarse en el Inspector de propiedades.
Ahora que ya conoce lo suficiente sobre las mesas de trabajo, puede jugar con lo que ha aprendido hasta ahora y crear mesas de trabajo más sorprendentes para sus proyectos de diseño.
Siga adelante y descargue el diseño final para ver el aspecto final del proyecto de diseño.
Para empezar, vea este vídeo de ejemplo de 4 minutos. También puede descargar los archivos de muestra como prueba al tiempo que ve los vídeos.
Ahora que ya conoce lo básico sobre las mesas de trabajo en XD, a continuación le ofrecemos algunos consejos y trucos prácticos:
Para obtener más sugerencias sobre cómo trabajar con mesas de trabajo, siga en Twitter a @Elainecchao, Directora de productos XD.
Le ayudamos a comenzar a crear, administrar y compartir mesas de trabajo. Dé un paso adelante y descubra cómo crear guías de mesa de trabajo personalizadas y colocar la mesa de trabajo con cuadrículas.
Si tiene alguna pregunta que hacer o una idea que compartir, venga y participe en la Comunidad de Adobe XD. Nos gustaría que nos dejara sus comentarios y ver sus creaciones.
Inicia sesión en tu cuenta