Lanzamiento de Adobe XD en octubre de 2020: Llega al final más rápido con transformaciones 3D, Bibliotecas de Creative Cloud, Visual Studio Code y más

Por Adrew Shorten

¡Otra vez es esa época del año – Adobe MAX y con ella viene un nuevo cumpleaños para Adobe XD! Este año cumplimos 3 años desde la primera ocasión que llevamos a Adobe XD fuera de la beta, y queremos agradecerle a nuestra comunidad de más de un millón diseñadores que visitan a XD todos los días para diseñar páginas web, aplicaciones web y móviles, campañas de marketing digital… y mucho más. Este año, estamos muy emocionados de compartir MAX como un evento virtual gratuito, todo el mundo podrá revisar conferencias magistrales, sesiones, laboratorios, talleres y mucho más desde cualquier parte del mundo.

Con el lanzamiento de Adobe XD en MAX, te estamos empoderando para qué puedas crear sin límites con una completa flexibilidad sobre tu flujo de trabajo. Desde explorar nuevas dimensiones hasta conectar diseñadores con desarrolladores, queremos compartirte emocionantes actualizaciones que te ayudarán a diseñar experiencias que se sientan reales y que te ayuden a ti y a tu equipo a llegar más rápido a la meta. ¡Continúa leyendo para aprender más!

Crea sin límites con Transformaciones 3D

El mundo de las experiencias digitales siempre está evolucionando. Nuestros dispositivos y sistemas operativos están cambiando constantemente. Las interfaces se vuelven cada vez más ricas e inmersivas. Y nuevos tipos de experiencia como la realidad aumentada se han vuelto cada vez más comunes. Y aún con todo esto, las herramientas que utilizamos para realizar estas experiencias están limitadas a diseños planos y bidimensionales.

Es por eso por lo que hoy estamos introduciendo una manera completamente nueva de diseñar en XD con Transformaciones 3D. Ahora puedes mover y rotar objetos hacia adelante, hacia atrás, y a través de paneles para darle profundidad y perspectiva a tus diseños y crear nuevos tipos de experiencias de usuario.

Existen tantas maneras de que al utilizar las Transformaciones 3D lleves tus diseños al próximo nivel. Sobrepón elementos de interfaz de usuario en espacios físicos para diseñar experiencias de realidad aumentada. Gira y rota objetos para crear interacciones divertidas y animaciones. Apila elementos a diferentes profundidades para crear efectos en capas. Inclina y gira diseños y muestra tus mockups en perspectiva. Las posibilidades sobre cómo utilizar las Transformaciones 3D son infinitas.

Puedes aplicar las Transformaciones 3D a formas, textos o grupos, así que no hay límites sobre lo que puedas crear. Pega objetos dentro de un grupo transformado y XD automáticamente aplica todas las transformaciones a los objetos añadidos. Las Transformaciones 3D también funcionan y en otras características de XD como Desplazamiento de Grupos, Cuadrícula de Repetición y Animación Automática.

Las Transformaciones 3D son poderosas pero fáciles de usar. Selecciona un objeto y activa las Transformaciones 3D en el inspector de propiedades (o presionando ⌘/Ctrl + T). Verás un nuevo control en tu lienzo para mover y rotar objetos a través de diferentes paneles. ¡Es así de simple!

Estamos realmente muy emocionados de ver todo lo que crearás con las Transformaciones 3D. Siéntete libre de compartir tus creaciones en tus redes sociales utilizando el hashtag #CreateWithAdobeXD para tener la oportunidad de que estas sean presentadas en uno de nuestros canales. Visita nuestra guía Let´s XD para explorar las diferentes formas en las que puedes utilizar las Transformaciones 3D.

Diseña a escala con las Bibliotecas de Creative Cloud

A medida que los equipos de diseño escalan, es importante que los equipos permanezcan conectados y alineados. Los sistemas de diseño ayudan a los equipos a centralizar sus recursos y generar un lenguaje compartido que diga cómo las experiencias digitales deben verse y sentirse. También les van a dar las bases con las que se generarán nuevas experiencias para crear de una manera consistente y escalable. Hoy, estamos presentando mejoras importantes con los sistemas de diseño en XD.

Ahora tú y tu equipo pueden utilizar las bibliotecas de Creative Cloud para crear y compartir sistemas de diseño. Por medio de estas bibliotecas, podrás publicar tus sistemas de diseño con un simple clic e invitar a tu equipo a que contribuya y trabaje unido.

Los recursos de tu documento son los componentes básicos de tu sistema de diseño. Una vez que hayas curado tus recursos (colores, estilos de caracteres y componentes), presiona en el ícono Publicar para crear una Biblioteca. Podrás controlar quién puede acceder a tu Biblioteca y administrar las actualizaciones a través de los sistemas.

Cuando se trata de un sistema de diseño, cada miembro de tu equipo tiene su propio rol. Con las Bibliotecas, puedes configurar permisos qué dirán quién puede contribuir en el sistema de diseño y quién puede solo consumirlo. Con Ver y Editar Permisos puedes asegurarte de que todos pueden utilizar el sistema, pero solo los miembros correctos de tu equipo podrán ser autores y contribuir en el sistema de diseño.

Trabajar juntos involucra trabajar con diferentes herramientas para diferentes flujos de trabajo. Quizá quieras editar las ilustraciones de tu marca en Illustrator o modificar imágenes hero en Photoshop. Utilizando las bibliotecas puedes acceder fácilmente a tus recursos a través de varias aplicaciones de Creative Cloud como Photoshop, Illustrator e InDesign. Las bibliotecas te permiten mover fácilmente recursos como colores, estilos de caracteres y gráficos a través de XD y el resto de Creative Cloud. Las Bibliotecas te empoderan a construir un sistema creativo que integre sin ningún problema los flujos de trabajo a través de las diferentes herramientas de Creative Cloud.

Puedes publicar y compartir tus bibliotecas sin importar a qué plan de XD este suscrito. El próximo año, publicar y compartir bibliotecas podrá hacerse de manera ilimitada en planes de paga y limitada a una biblioteca publicada con hasta un otro editor en el plan inicial de XD.

Conectando diseñadores y desarrolladores con los sistemas de diseño

Para que cualquier sistema de diseño funcione, necesita ser creado, mantenido y adoptado tanto por diseñadores como por desarrolladores. Generalmente, este flujo de trabajo se reparte a través de múltiples herramientas, lo que significa que los desarrolladores necesitan abandonar ciertas herramientas para utilizar el sistema.

Creemos que debe de haber una mejor manera, es por esto por lo que estamos introduciendo la extensión de Adobe XD para Microsoft Visual Studio Code la cual les permite a los desarrolladores trabajar con sistemas de diseño sin abandonar su editor. Visual Studio Code es uno de los editores de código más populares para los desarrolladores que están trabajando con cualquier lenguaje de programación y está disponible de manera gratuita para Windows, macOS y Linux.

La Extensión de Adobe XD para Visual Studio Code, disponible ahora en la tienda de Visual Studio, ayuda a disminuir la brecha entre diseñadores y desarrolladores. Impulsada por las Bibliotecas de Creative Cloud, los desarrolladores pueden crear design tokens en cuestión de segundos y compilarlos en múltiples plataformas como web, iOS, Android y Flutter. Pueden acceder rápidamente a cualquier documentación relevante y fragmentos de código mientras codifican.

Durante la creación de la extensión de Adobe XD para Visual Studio Code, Adobe trabajó junto con clientes y socios para definir un nuevo formato de paquete abierto llamado Paquete de Sistema de Diseño (o DSP por su nombre en inglés, Design System Package). El cual fue creado para ayudar a los equipos a compartir información de sistemas de diseño a través de herramientas. Puedes utilizar la extensión de Visual Studio Code para crear DSPs usando recursos en un sistema de diseño dentro de las bibliotecas de Creative Cloud.

Más funciones nuevas y mejoras

Adicionalmente a las nuevas funciones que describimos arriba, tenemos algunas actualizaciones nuevas:

• Colaboren en tiempo real con coedición. Coeditar ya no está en beta, ahora está completamente disponible. Invita a otras personas a editar tus documentos de diseño junto contigo. Trabajen juntos en tiempo real y realizen ediciones a su propio tiempo con conocimiento de que todos tendrán acceso a la misma fuente y a la última versión y que todos los cambios se sincronizarán automáticamente en la nube. Conoce más sobre la coedición en Adobe XD aquí.
• Nuevos plugins e integraciones. Mientras los diseños ocurren en XD, los equipos también utilizan muchas otras herramientas para trabajar juntos y llevar sus experiencias a la vida. XD ofrece cerca de 275 plugins e integraciones que conectan a XD con otras aplicaciones y herramientas dentro del flujo de trabajo del equipo y añaden nuevas funciones. Estamos introduciendo nuevos plugins e integraciones incluyendo Zoom, Wrike, Miro, UserZoom Go, Marpipe y Maze, y próximamente los plugins para Microsoft Teams y Confluence.
• Ajusta automáticamente el tamaño de capas de texto con Altura de Texto Automática. Los cuadros de texto con altura automática crecen o disminuyen su altura con base a la cantidad de texto dentro de ellos. Cuando se combinan con Apilar, puedes diseñar disposiciones que se adapten a diferentes longitudes de contenido mientras mantienen el espacio entre los objetos en el diseño. Puedes ver un video sobre Altura de Texto Automática aquí y leer más sobre cómo trabajar con texto en XD aquí.
• Crea componentes más flexibles con componentes anidados. Con XD, puedes colocar (o “anidar”) componentes dentro de otros componentes. Ahora, gracias a los comentarios de nuestra comunidad, si realizas cambios a una instancia que esté anidada dentro de otro componente, dichos cambios se van a propagar a las instancias del componente exterior.
• Soporte para Componentes de Estado en Especificaciones de Diseño. Las especificaciones de diseño ayudan a agilizar el proceso de transferencia a medida que pasas del diseño al código. Ahora, los desarrolladores verán si un componente tiene varios estados y podrán ver las especificaciones de cada estado en las Especificaciones de Diseño.