Última actualización el
|
También se aplica a Adobe XD
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.
- Está buscando recursos que le ayuden a comenzar rápidamente con el proyecto.
- Necesita tutoriales para empezar y archivos de muestra para aprender sobre la marcha.
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?
Conocer los conceptos básicos de la aplicación
Antes de continuar
Consulte los conceptos básicos de XD:
Configurar las mesas de trabajo en 4 sencillos pasos
¿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.
Crear una mesa de trabajo nueva
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.
Usar una mesa de trabajo existente de Photoshop e Illustrator
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.
Administrar mesas de trabajo
¿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.
Alineación y distribución
Seleccione varias mesas de trabajo y haga clic en Alinear y Distribuir en el Inspector de propiedades. Arrastre la mesa de trabajo para reorganizarla.
Aplicar cuadrículas de diseño o cuadradas
¿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.
Diseñar mesas de trabajo
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.
Añadir elementos visuales y de texto
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.
Crear mesas de trabajo con desplazamiento
¿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 fijar los elementos de diseño a una posición fija, seleccione Fijar posición al desplazarse en el Inspector de propiedades.
El diseño final
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.
Más información
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.
Sugerencias y trucos
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 medir la distancia de un objeto desde los bordes de una mesa de trabajo, haga clic en el objeto y pulse las teclas Opción (en macOS) o Alt (en Windows).
- Para desactivar la opción de desplazamiento en una mesa de trabajo, seleccione la mesa de trabajo y, en el Inspector de propiedades, cambie Desplazamiento a Ninguno.
Para obtener más sugerencias sobre cómo trabajar con mesas de trabajo, siga en Twitter a @Elainecchao, Directora de productos XD.
¿Qué viene después?
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.
¿Tiene alguna pregunta o idea?
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