¿Tiene alguna pregunta o idea para compartir? Entre y participe en la Comunidad de Adobe XD. ¡Nos gustaría tener noticias suyas y ver sus creaciones!
Aprenda a trabajar con componentes en sistemas de diseño en Adobe XD.
Los componentes son elementos de diseño con una flexibilidad incomparable que ayudan a crear y mantener elementos repetidos mientras varían las instancias para diferentes contextos y diseños, como el uso de botones en diferentes contextos.
Siga leyendo para aprender a utilizar componentes para mantener fácilmente varias versiones del mismo elemento fundacional.
Familiarícese con estos conceptos de XD:
Para crear un componente, seleccione Objeto > Crear componente. También puede seleccionar un objeto o grupo de objetos y utilizar cualquiera de estas opciones:
Haga clic en el icono + en la sección Componente del Inspector de propiedades.
Haga clic en el botón +, en la sección Componentes del panel Activos.
Haga clic con el botón derecho en un objeto y seleccione Crear componente (CMD/CTRL+K).
La primera vez que se crea un Componente en XD, se convierte en un Componente Principal, indicado mediante un rombo verde con relleno en la esquina superior izquierda. Puede editar un componente como lo haría con cualquier otro elemento.
A continuación se indican algunas prácticas recomendadas para trabajar con componentes:
Cada copia del componente principal se denomina instancia. Las instancias del componente se distinguen por una marca verde en forma de rombo sin relleno en la esquina superior izquierda. Al realizar cambios en el componente principal, los mismos cambios se aplican a todas las instancias.
Las modificaciones son cambios específicos que solo se aplican a esa instancia y no al componente principal. Si cambia una propiedad en una instancia, XD marca esa propiedad como una modificación. Las propiedades de una instancia pueden modificarse sin romper su conexión con el componente principal.
A continuación se indican algunas prácticas recomendadas para trabajar con instancias del componente:
Al editar un componente principal, todas las instancias cambian a menos que incluyan modificaciones de esa propiedad específica.
Para editar un componente principal, seleccione una instancia o un componente en el lienzo y use cualquiera de estas opciones:
Haga clic en una instancia en el lienzo y seleccione Editar componente principal.
Haga clic en un componente del panel Activos y seleccione Editar componente principal.
Seleccione el icono del lápiz de edición situado al lado de Estado predeterminado en la sección Componente.
Se recomienda editar los componentes principales:
Los componentes principales ofrecen la coherencia necesaria para mantener un sistema de diseño. Cualquier cambio realizado en el componente principal se propaga automáticamente a las instancias. Sin embargo, un sistema de diseño es práctico en la medida del grado de flexibilidad que proporciona. Puede comenzar con el mismo elemento original, pero debe personalizarlo según el contexto en el que se use. Ahí es donde entran en juego las instancias.
Las modificaciones son cambios específicos que solo se aplican a esa instancia y no al componente principal. Si cambia una propiedad en una instancia, XD marca esa propiedad como una modificación. Las propiedades anuladas siempre se conservan, incluso si se edita esa misma propiedad desde el componente principal.
Para borrar las modificaciones y restablecer el componente maestro, haga clic con el botón derecho en una instancia y seleccione Restablecer el estado principal.
A continuación se incluyen algunos tipos de modificación y sus situaciones de uso:
Los componentes también son redimensionables y vienen con las potentes funcionalidades de redimensionamiento interactivo integradas. Si se cambia el tamaño del componente principal, las instancias cuyo tamaño no se haya cambiado manualmente como una modificación se redimensionan automáticamente. En consecuencia, las instancias cuyo tamaño se haya cambiado conservan su posición redimensionada como una modificación.
Al igual que con el redimensionamiento interactivo, XD recrea la ubicación de los elementos en un lienzo más grande o más pequeño, a medida que los cambie de tamaño.
En el Inspector de propiedades, puede cambiar Redimensionado interactivo de Automático a Manual , lo que le permitirá editar las restricciones para obtener un mayor control.
El cambio de los elementos originales según el contexto es importante al crear elementos reutilizables. Como resultado, puede modificar todas las propiedades de estilo y apariencia de una instancia. Las modificaciones permiten un margen de variaciones sin dejar de mantener sus vínculos con el componente principal.
No solo es posible modificar el tamaño de un componente o la disposición de los elementos internos, sino que también se pueden modificar estructuralmente los componentes. Esto significa que puede agregar o quitar elementos en el componente principal y sus instancias.
Si añade un objeto al componente principal, también se añadirá a sus instancias respectivas. Al agregar un objeto, XD aplica el algoritmo de redimensionamiento inteligente y coloca automáticamente las restricciones en el objeto. Esto depende de la posición del nuevo objeto en relación con su contenedor. Al eliminarse un objeto del componente principal, también se elimina en todas sus instancias.
Los elementos también se pueden agregar o eliminar en una instancia, y las restricciones se colocan automáticamente en los objetos cuando se agregan. Cuando se elimina un elemento en una instancia, solo se elimina el elemento de esa instancia. El mismo elemento sigue existiendo en el componente principal.
A continuación se indican algunas prácticas recomendadas para modificaciones en instancias del componente:
Los estados del componente permiten guardar diferentes variaciones del componente para cada reutilización. Una vez que haya modificado el componente principal, puede crear un estado a partir de esas modificaciones para que se pueda reutilizar fácilmente.
Por ejemplo, puede crear un componente de botón con diferentes variaciones como la primaria y la secundaria. Con los estados, puede crear variaciones utilizando modificaciones en el componente principal.
Cuando trabaje con estados y componentes, recuerde estos puntos:
Una vez que haya creado un componente, el Inspector de propiedades muestra el componente con un Estado predeterminado. Ahora puede añadir dos tipos de estados para sus componentes: Nuevo, Cursor por encima y Alternancia.
Utilice Nuevo estado para situaciones en las que desee mostrar variaciones de un componente, como una versión deshabilitada o en la que se haya hecho clic de un componente.
En el modo Diseño, haga clic en el botón + junto a Estado predeterminado del componente principal en el Inspector de propiedades, y seleccione Nuevo estado.
De forma predeterminada, el nuevo estado no tiene ninguna interactividad definida en él. Para obtener más información sobre cómo conectar una interacción a componentes, consulte Agregar interactividad a los componentes.
Utilice Estado con cursor encima si desea que el componente cambie y muestre un estado diferente al pasar el ratón sobre el componente al interactuar con el prototipo.
En el modo Diseño, haga clic en el botón + junto a Estado predeterminado del componente principal en el Inspector de propiedades y seleccione Estado del ratón sobre el vínculo.
De forma predeterminada, el estado tiene interactividad definida en él.
Use el estado Alternancia cuando desee crear componentes con acciones interactivas de botones deslizantes, botones de opción, casillas de verificación, etc.
En el modo Diseño, haga clic en el botón + junto a Estado predeterminado del componente principal en el Inspector de propiedades y seleccione Estado de alternancia.
Una vez creado el estado de alternancia, XD generará automáticamente y de forma predeterminada dos interacciones de toque bidireccionales entre el Estado predeterminado y el Estado de alternancia, garantizando una interactividad total.
Después de crear los estados para su componente, puede editar las propiedades de su componente y visualizar cómo el componente aparece al interactuar con él. Estos son algunos flujos de trabajo asociados con los estados:
Cambiar estados
Seleccione el componente y en el Inspector de propiedades, alterne o cambie entre varios estados.
Cambiar el nombre de estados
Haga clic en el nombre de estado del componente en el Inspector de propiedades y añada un nuevo nombre. Solo puede cambiar el nombre de los estados y eliminarlos en el componente principal. No puede cambiar el nombre del estado predeterminado.
Eliminar estados
Haga clic con el botón derecho en el estado del componente y seleccione Eliminar. Cuando elimina un estado del componente del componente principal, las instancias del componente que tengan ese estado activo vuelven al estado predeterminado.
Todas las ediciones que realice en el estado predeterminado del componente principal, se propagarán al estado predeterminado en todas las instancias. De manera similar, editar un estado específico en el componente principal resulta en todas las instancias que reciben dichas ediciones para ese estado específico. Asegúrese siempre de que edita el estado en el componente principal para que se actualice en todas las instancias.
Con los estados, puede modificar propiedades como texto, mapa de bits, tamaño, diseño y apariencia. Una vez que se modifica una propiedad de estado en una instancia, ya no recibirá actualizaciones para esas propiedades desde el componente principal.
Si no está satisfecho con los resultados de las anulaciones, restablezca al componente principal original haciendo clic con el botón derecho en una instancia y seleccionando Restablecer a estado principal. Esto borra todas las anulaciones de una instancia y la vuelve a restablecer al componente principal.
Puede utilizar los desencadenadores Tocar, Pasar por encima, Teclas y mando de juego y Voz para conectar las interacciones entre los estados del componente en el modo Prototipo. Conectar las interacciones entre los estados del componente es parecido a conectar las interacciones entre mesas de trabajo. La principal diferencia es que, al conectar interacciones entre estados del componente, se elige un estado como destino en lugar de una mesa de trabajo.
Puede definir varias interacciones para el mismo estado del componente. Por ejemplo, si tiene un botón deslizante con los estados Tocar y Pasar por encima, puede definir esas interacciones repitiendo los pasos 4-7 dos veces para definir los estados Tocar y Pasar por encima. Después de crear varias interacciones, puede ver la sección Interacción que muestra las interacciones definidas. Alterne entre esas interacciones y modifique las propiedades de interacción para que se ajusten a sus requisitos.
Si desea crear interacciones de cursor por encima anidadas, como menús desplegables o elementos emergentes con botones de varios estados, también puede anidar componentes con estados de cursor por encima.
A continuación se indican algunas prácticas recomendadas al agregar estados a componentes:
Ver
Puede ver o arrastrar nuevas instancias al lienzo desde el panel Activos.
Para localizar todas las instancias, haga clic con el botón derecho en un componente en el panel Activos y seleccione Resaltar en el lienzo.
Para localizar componentes en el panel Activos, haga clic con el botón derecho en una instancia del componente en el lienzo y seleccione Revelar componente en el panel Activos.
Editar, cambiar de nombre o eliminar
Haga clic con el botón derecho en un componente en el panel Activos o seleccione una instancia en el lienzo y utilice las opciones del menú contextual para editar o eliminar. Para cambiar el nombre del componente, haga clic con el botón derecho y seleccione Cambiar nombre.
Restablecer a un estado principal
Haga clic con el botón derecho en una instancia y seleccione Restablecer a estado principal para borrar todas las modificaciones y vincularlo de nuevo al componente principal.
Para disociar una instancia del principal, haga clic con el botón derecho en una instancia y seleccione Desagrupar un componente.
Puede agregar interactividad a componentes y entre estados. Cuando se crea una interacción en el componente principal, todas las instancias de dicho componente reciben esa interacción. Cualquier cambio en las interacciones en el componente principal actualiza automáticamente las interacciones en las instancias.
Asimismo, puede modificar las interacciones en instancias, tras lo cual ya no recibirá actualizaciones del componente principal. Al igual que las modificaciones de diseño, puede modificar las propiedades de interacción de un componente.
Al agregar interactividad a un componente se recomienda lo siguiente:
Para obtener más información sobre el uso de componentes, vea este vídeo.
Duración: 9 minutos
Hemos comenzado a trabajar con componentes en XD. Dé un paso más y aprenda a utilizar componentes anidados en XD.
¿Tiene alguna pregunta o idea para compartir? Entre y participe en la Comunidad de Adobe XD. ¡Nos gustaría tener noticias suyas y ver sus creaciones!
Inicia sesión en tu cuenta