Presentando Sistemas de Diseño en Adobe XD: Crea, comparte y administra colores, estilos y componentes reutilizables con tu equipo fácilmente

Después de haber añadido documentos en nube a XD el año pasado, mencionamos algunas áreas principales en las que estaríamos trabajando a lo largo de 2019 – una de ellas era la creación y administración de los sistemas de diseño.

Con el lanzamiento este mes, estamos emocionados de presentar las nuevas capacidades que te permitirán crear documentos en la nube con colores reutilizables, estilos de caracteres y componentes, compartirlos con facilidad con miembros de tu equipo para que lo utilicen en sus propios documentos, y luego administrar desde una central las actualizaciones para los elementos de sistema de diseño para que todos estén aprovechando los activos más recientes.

Nuestro objetivo principal al hacer esto es lograr una progresión natural del diseño de elementos individuales a un juego integral de activos reutilizables que nos aseguren la consistencia en el diseño que tú y tu equipo necesitan para hacer crecer a escala su trabajo.

Componentes

Desde que se introdujo Adobe XD, hemos tenido los símbolos como elementos reutilizables, pero han tenido un número de limitaciones en términos de flexibilidad y adaptabilidad. Con este lanzamiento, hemos reemplazado completamente los símbolos con componentes, que son mucho más capaces. Puedes crear un componente principal para definir un elemento reutilizable, como un botón, y posteriormente instancias de ese elemento pueden ser configuradas haciendo cambios en sus propiedades.

Los cambios que se le hagan a la cada instancia son específicos de ese elemento, pero cambios que se hagan en el componente principal se propagarán a todas las instancias que la propiedad no ha sido configurada. Es un modelo increíblemente poderoso y a la vez tan fácil de usar, y es el corazón de nuestra solución para el diseño de sistemas.

Diseñamos nuevos componentes para trabajar una redimensión responsiva, para que puedas tomar cualquier instancia y ajustar el tamaño del componente, y XD manejará automáticamente el posicionamiento y la escala de los elementos por ti.

Los componentes tienen el potencial de cambiar tu forma de diseñar en XD, y eso es solo el comienzo en los siguientes meses puedes esperar que agreguemos apoyo para definir estados de componentes múltiples y animación entre estados, crear componentes robustos reutilizables con interacciones, así como explorar maneras de conectar los componentes de diseño con sus equivalentes de producción.

Vinculando Activos

El panel de activos te brinda una manera de administrar los colores, estilo de caracteres y componentes que utilices dentro de tu documento. Como parte de un sistema de diseño, ahora puedes utilizar el panel de activos para curar la colección de elementos reutilizabas que quieres ofrecer a los demás diseñadores en tu equipo.

Para permitir que los demás aprovechen los colores, estilo de caracteres y componentes que has definido, solamente invítalos al documento utilizando Compartir > Invitar a Editar. Una vez que tengan acceso, pueden vincular su documento en la nube con el tuyo – esto agregará los colores, estilos de carácter y componentes a su documento para que puedan aprovechar todos los elementos que has creado y compartido. Mientras y cuando hagas cambios en el documento de origen, se les notificará que hay actualizaciones disponibles y pueden optar por aceptar las actualizaciones en su documento, asegurando que todos estén utilizando los activos más recientes.

Guías de Estilos

Además de permitir que otros diseñadores se vinculen con tu documento para reutilizar colores, estilos de caracteres y componentes, también podrías necesitar compartirlos con desarrolladores. Al separar en capas los elementos de los activos desde el panel como una “planilla de calcomanías” dentro de tu documento de XD, puedes utilizar Compartir > Compartir para Desarrollo para publicar tus sistemas de diseño en la web, desde la cual otros pueden referenciar los valores de color, atributos de estilo y activos descargados.

Diagrama Sistema de Diseño Hi-Res Asset
Con la habilidad de crear componentes robustos, combínalos con colores y estilos de carácter y luego compártelos con diseñadores y desarrolladores, pues creemos que ya tienes la base para crear y administrar sistemas de diseño en XD. Seguimos trabajando en diversas afinaciones que van a añadir un control más específico sobre permisos para compartir y distribución de actualizaciones para elementos de sistemas de diseño.

Más características y mejoras nuevas

También en el lanzamiento de este mes estamos emocionados de presentar un número de características y mejoras nuevas, muchas de las cuales han sido añadidas como respuesta directa al feedback que nos han compartido.

Guías de mesa de trabajo

Las guías pueden ser ahora añadidas a cualquier mesa de trabajo arrastrándolas tanto desde arriba como del lado izquierdo de la mesa – esto facilita la alineación de elementos y tiene un posicionamiento de los elementos consistente entre mesas de trabajo.

Disparadores de teclado y gamepad

Siempre estamos buscando formas de expandir los medios y plataformas para los que puedes crear prototipos en XD, así que estamos emocionados de añadir soporte para disparadores de gamepad y teclado. Con este lanzamiento puedes asignar disparadores de teclado para simular experiencias de escritorio, así como utilizar un control de Xbox One o Playstation Dualshock como entradas para experiencia de consola de videos.

Herramienta de polígono

La nueva herramienta de polígono hace que sea más fácil crear una multitud de formas, incluyendo triángulos, rombos, pentágonos y otros polígonos con hasta 100 lados. Cuando los combinas con auto-animar, la herramienta de polígono hace que sea más fácil la transformación entre figuras.

Mayúscula, minúscula, título y tachado

Las mejoras en las opciones de formato de texto incluyen la adición de hacer el texto mayúscula, minúscula o título, así como poder definir tachados. En una actualización futura, también activaremos soporte para sobre-escrito y subíndice.

Permisos y compartir

Finalmente, para aquellos que comparten prototipos y diseños específicamente seguros para ciertas personas, ahora es posible que aquellos con el enlace, pero sin permiso para visualizar, el enviarte una solicitud de acceso. Puedes revisar cada una de las solicitudes y decidir si garantizas el acceso a tu trabajo.

Más plugins para ampliar el poder de XD

El impulso del ecosistema de plugins de XD crece cada mes, con más de 150 ya disponibles. Con un número de plugins que crece con el día, hemos hecho algunas mejoras en el administrador de plugins, para que puedas ver el resumen y descripciones detalladas, así como búsqueda de plugins basado en palabras clave. Adicionalmente, el mes pasado anunciamos el Acelerador de Plugins de Adobe XD, un programa intensivo de noventa días que otorga recursos y financiamiento para individuos con una visión única para el futuro de la creatividad…

Algunos plugins nuevos y dignos de mencionar incluye a UnDraw, que ofrece ilustraciones bellísimas para tus proyectos; Rotato, que presenta tus diseños en pantallas de dispositivos en 3D fotorrealístico, y Maps Generator, que hace que sea más fácil y rápido insertar mapas en tus diseños. Aprende más en Plugins disponibles.

Comunidad UX

¡Nos encantaría seguir con el diálogo! Ayúdanos a moldear el futuro de Adobe XD enviándonos una solicitud de aparición o bugs en los archivos. Puedes seguirnos en @AdobeXD para actualizaciones o ponerte en contacto con nuestro equipo en Twitter utilizando #AdobeDX. También nos puedes hablar por Facebook, donde compartimos videos y actualizaciones, así como respondemos a las preguntas en sesiones de live.

#MadeWithAdobeXD

Al compartir tus prototipos en Behance, no olvides el tag #MadeWithAdobeXD y selecciona Adobe XD en “Herramientas Utilizadas” para la oportunidad de figurar en la newsletter de Adobe XD.