Antes de empezar

Quién puede utilizar esta función

Usuarios en cualquier plan

Cualquier persona con acceso de edición al archivo de Figma Design puede crear, administrar y utilizar propiedades del componente

En este artículo se explica cómo crear y configurar las propiedades del componente. Aprende cómo editar instancias con propiedades del componente.

Las propiedades de los componentes son los aspectos que se pueden cambiar de un componente. Permiten comunicar qué partes de un componente se pueden cambiar, como:

• Qué capas de un componente tienen la opción de ocultarse o mostrarse
• Si se puede intercambiar una instancia y establecer instancias preferidas para intercambiar
• Qué cadenas de texto se pueden cambiar

Las propiedades de los componentes se crean y aplican a los componentes principales y a los conjuntos de componentes para definir las partes de un sistema de diseño y facilitar el uso de los sistemas de diseño.

Cualquiera que use un componente con propiedades de componente puede ver un único conjunto de controles consolidados en el panel derecho para entender de un vistazo qué se puede cambiar y realizar ediciones en un solo lugar.

Esto reduce el tiempo necesario para consultar la documentación, mejora el uso preciso de los componentes y los sistemas de diseño, y disminuye la necesidad de seleccionar y reemplazar capas individuales.

Tipos de propiedades de los componentes

Las propiedades del componente están vinculadas a diferentes propiedades de diseño. Puedes crear propiedades del componente para cualquier componente principal o variantes de un conjunto de componentes, y aplicarlas a capas anidadas del componente o variante.

Las propiedades de los componentes se presentan en diferentes tipos:

Tipo de propiedad del componente	Utiliza esto para...
Propiedad booleana	Indicar qué capas pueden tener su visibilidad activada/desactivada, como un ícono en un botón.
Propiedad de intercambio de instancia	Indicar qué instancias se pueden intercambiar; establecer las instancias preferidas para el intercambio.
Propiedad de texto	Indicar qué contenido del texto se puede modificar.
Propiedad de la variante	Definir las diferentes variaciones de un componente, como sus diferentes estados, tamaños o colores.

Crear y aplicar propiedades del componente

Propiedad booleana

Utiliza propiedades booleanas para establecer valores de verdadero o falso, lo que te permite activar o desactivar un atributo. Por ejemplo, si un sistema de diseño contiene botones con y sin icono, en lugar de crear variantes para cada estado, aplica una propiedad booleana a la visibilidad de la capa del ícono.

Actualmente, las propiedades booleanas solo admiten la visibilidad de capas. 

Crear una propiedad booleana

Cuando se crea una propiedad booleana para la visibilidad de la capa, un valor establecido en falso significa que la capa se ocultará. Si se cambia a verdadero, la capa será visible.

1. Selecciona un componente principal o conjunto de componentes.
2. En la barra lateral derecha, haz clic en en la sección Propiedades y selecciona Booleano en el menú desplegable.
3. En el modal Crear propiedad del componente, utiliza los campos y los menús desplegables para configurar la propiedad.
   • Asigna un nombre  a la propiedad en el campo de texto.
   • Establece el valor predeterminado en verdadero o falso. También puedes hacer clic en Aplicar variable para aplicar una variable booleana existente, si está disponible.
4. Haz clic en crear propiedad.

Aplicar una propiedad booleana a un componente

1. Selecciona una capa anidada dentro de un componente principal o una variante.
2. Si estás trabajando con variantes, puedes hacer clic en para habilitar la edición múltiple y editar los objetos coincidentes, lo que agilizará tu flujo de trabajo. Aprende cómo editar múltiple variantes.
3. En la barra lateral derecha, busca la sección Apariencia y haz clic en el ícono Aplicar variable/propiedad.
4. Elige una propiedad booleana de la lista. Cuando se aplique, verás una etiqueta morada con el nombre de la propiedad en la barra lateral derecha.

Propiedad de intercambio de instancia

La propiedad de intercambio de instancias te permite indicar qué instancias anidadas en un componente principal o variante se pueden intercambiar.

Al crear una propiedad de intercambio de instancias, puedes establecer una instancia predeterminada utilizando cualquier componente creado en el archivo, o desde bibliotecas agregadas al archivo. También puedes configurar instancias preferidas para que otros sepan a cuáles instancias pueden cambiar. Aprende cómo intercambiar componentes utilizando la propiedad de intercambio de instancias.

Crear una propiedad de intercambio de instancias

1. Selecciona un componente principal o conjunto de componentes.
2. En la barra lateral derecha, haz clic en la sección Propiedades y selecciona Intercambio de instancias en el menú desplegable.
3. En el modal Crear propiedad del componente, utiliza los campos y los menús desplegables para configurar la propiedad.
   • Asigna un nombre a la propiedad utilizando el campo de texto.
   • Establece el valor predeterminado utilizando el menú desplegable para seleccionar una instancia de cualquiera de los componentes creados en el archivo o de cualquiera de las bibliotecas agregadas al archivo.
   • Si lo deseas, configura las instancias preferidas para que los demás sepan qué componentes deben elegir al intercambiar la instancia.
4. Haz clic en Crear propiedad.

Aplicar una propiedad de intercambio de instancia a un componente

1. Selecciona una instancia anidada dentro de un componente principal o una variante.
2. Si estás trabajando con variantes, puedes hacer clic en para habilitar la edición múltiple y editar los objetos coincidentes, lo que agilizará tu flujo de trabajo. Aprende cómo editar múltiple variantes.
3. En la parte superior de la barra lateral derecha, haz clic en Aplicar propiedad de intercambio de instancia.
4. Elige una propiedad de instancia de la lista. Cuando se aplique, verás una etiqueta morada con el nombre de la propiedad en la barra lateral derecha.

Elegir valores preferidos

Los valores preferidos te permiten crear un conjunto seleccionado de componentes para elegir al intercambiar instancias (a través de la propiedad de intercambio de instancias). Reducen las conjeturas porque comunican qué componentes específicos pueden reemplazar a uno existente.

Por ejemplo, puedes crear un botón de un ícono con una propiedad de intercambio de instancia para indicar que el ícono se puede intercambiar. Sin embargo, tu biblioteca de íconos contiene más de 100 íconos, pero solo 8 de ellos deben usarse para este botón.

Para que sea fácil encontrar estos 8 íconos y saber cuál se puede usar, los añades como valores preferidos. Ahora, cada vez que los diseñadores van a cambiar el ícono, tienen una lista seleccionada de activos que saben que pueden usar.

Cuando se emplea un componente con un valor preferido, aparece por defecto una lista de valores preferidos al abrir el menú de propiedades de intercambio de instancias.

Si quieres agregar valores preferidos para una instancia:

1. Empieza por editar su propiedad de intercambio de instancias existente o por crear una nueva.
2. Desde los respectivos modales, haz clic en en la sección Valores preferidos y marca las casillas de verificación junto a las instancias que deseas incluir como valores preferidos.

Para eliminar un valor preferido, haz clic en junto al valor en la sección valores Preferidos del modal.

Propiedad de texto

Utiliza las propiedades del texto para indicar qué contenido textual de un componente se puede editar. El contenido textual se puede editar desde el panel derecho o en el lienzo.

Crear una propiedad de texto

1. Selecciona un componente principal o conjunto de componentes.
2. Haz clic en la sección Propiedades  de la barra lateral derecha y selecciona Texto del menú desplegable.
3. En el modal Crear propiedad del componente , utiliza los campos para configurar la propiedad.
   • Asigna un nombre a la propiedad utilizando el campo de texto.
   • Establece la cadena de texto predeterminada mediante el campo de texto de valor. También puedes hacer clic en  Aplicar variable para aplicar una variable de cadena existente, si está disponible.
4. Haz clic en Crear propiedad.

Aplicar una propiedad de texto a un componente

1. Selecciona una capa de texto anidada en un componente principal o variante.
2. En la sección Texto, en la parte superior de la barra lateral derecha, pasa el cursor sobre el campo de texto y haz clic en Aplicar variable/propiedad.
3. Elige una propiedad de texto de la lista.

Propiedad de la variante

Una variante es un componente individual dentro de un conjunto de componentes.

Una propiedad de variante permite definir los atributos de las variantes, como el estado, el color o el tamaño.

Un conjunto de componentes contiene varias variantes, y las variantes tienen atributos que se pueden definir mediante las propiedades de las variantes. Las propiedades de variante son específicas de las variantes y los conjuntos de componentes, y no se pueden crear ni aplicar a los componentes principales.

Aprende cómo crear variantes y conjuntos de componentes.

En el siguiente ejemplo, tenemos un componente de botón configurado con cuatro variantes. Tiene dos propiedades de variantes, tamaño y color. Los valores de tamaño incluyen pequeño y grande, mientras que los valores de color incluyen verde y rojo.

Cambiar a una propiedad del componente diferente

Si una capa tiene una propiedad del componente aplicada, puedes cambiarla por otra diferente en cualquier momento.

1. En la barra lateral derecha, busca la sección correspondiente a la propiedad del componente que deseas cambiar.
   • Propiedad de intercambio de instancias: parte superior de la barra lateral derecha.
   • Propiedad de texto: parte suprior de la barra lateral derecha, en la sección Texto .
   • Propiedad booleana: sección Apariencia .
2. Haz clic en la etiqueta morada.
3. Selecciona una propiedad existente del mismo tipo.

Personalizar la propiedad de un componente

Cambiar el valor predeterminado

Cambia el valor predeterminado de una propiedad de texto, booleana o de intercambio de instancia.

1. Selecciona el conjunto de componentes o el componente principal.
2. Haz clic en junto a la propiedad variante para abrir el modal de edición de propiedades.
3. Usa el campo de texto o el menú desplegable en la sección Valor para actualizar el valor predeterminado.

La actualización del valor predeterminado se reflejará en el lienzo si la capa de instancia asociada no tiene ninguna modificación de propiedad aplicada.

Exponer instancias anidadas

Expone instancias anidadas específicas para mostrar las propiedades de sus componentes junto con las de la instancia de nivel superior. Esto ayuda a los usuarios del sistema de diseño a descubrir instancias anidadas y las propiedades de sus componentes sin tener que seleccionar capas en profundidad para encontrarlas.

Por ejemplo, crea un componente de tarjeta de redes sociales con varios componentes anidados en su interior: un avatar, un nombre, botones, etcétera. Deseas cambiar el ícono del botón predeterminado a un ícono de “enviar” y modificar su texto. También quieres cambiar el estado del botón Cancelar a un estado deshabilitado.

En lugar de realizar una selección profunda en cada capa para encontrar los controles de propiedades de sus componentes, exponer instancias anidadas te permite hacer clic solo en el componente de nivel superior (en este caso, la tarjeta de redes sociales) y editar tu instancia desde un solo lugar.

Cuando seleccionas una instancia de nivel superior con instancias anidadas expuestas, aparecerá una lista de propiedades de componentes para las instancias de nivel superior y anidadas en el panel derecho.

Al pasar el cursor sobre una fila de propiedades, aparece un resaltado de color púrpura claro alrededor del objeto correspondiente en el lienzo para que sepas lo que estás editando.

Elige instancias anidadas para exponer

Con un componente principal o conjunto de componentes seleccionado, haz clic en en la sección Propiedades del panel derecho y elige Instancias anidadas en Exponer propiedades de.

En el modal Exponer instancias anidadas, marca los cuadros de las instancias que deseas revelar en el nivel superior.

Aparecerá una lista de las instancias anidadas elegidas en el panel derecho.

Para eliminar las instancias anidadas a fin de que no queden expuestas, pasa el cursor sobre el nombre de la instancia en esta lista y haz clic en .

Simplificar instancias

Simplificar una instancia ayuda a reducir el desorden en el panel de capas y propiedades al ocultar capas sin propiedades de componentes aplicadas. Figma asume que una capa sin propiedad de componente es una capa que no se debe editar y, por lo tanto, se puede ocultar.

Para simplificar una instancia, selecciona un componente principal o un conjunto de componentes y haz clic en Configuración de componentes en el panel derecho. En la ventana emergente, marca la casilla simplificar todas las instancias.

Al emplear una instancia de un componente simplificado, las capas sobrantes se contraerán en Ver todas las capas. Haz clic en Ver todas las capas para expandir y visualizar las capas. Se puede volver a contraer haciendo clic fuera del panel de capas o seleccionando otra capa.

Gestionar la propiedad de un componente

Luego de crear las propiedades de los componentes y sus valores, puedes administrarlas en cualquier momento. Puedes cambiar el nombre, reordenar, eliminar, cambiar valores predeterminados y mucho más.

Separar una propiedad

Separa texto, intercambio de instancias o propiedades booleanas de una capa.

1. Selecciona una capa anidada con una propiedad de componente aplicada.
2. Haz clic en el panel lateral derecho junto a la propiedad que deseas desvincular.

Esto elimina la propiedad del componente de la capa, pero la propiedad del componente no se eliminará.

Cambiar el nombre, reordenar o eliminar

Propiedades

Para cambiar el nombre, reordenar o eliminar una propiedad de componente existente:

1. Selecciona el componente principal o el conjunto de componentes.
2. Desde la sección Propiedades en la barra lateral derecha:

   • Cambiar nombre: haz doble clic en el nombre de una propiedad. Escribe un nuevo nombre y, a continuación, presiona Return o Enter o haz clic fuera del campo para confirmar.

   • Reordenar: pasa el cursor sobre una propiedad para mostrar los controles. Haz clic y arrastra para reordenar, luego suelta para confirmar.

     Las propiedades de variante siempre se sitúan por encima de otros tipos de propiedades en la barra lateral derecha. Se pueden reordenar con otras propiedades de variante, pero no con otros tipos de propiedad.

   • Eliminar: Haz clic derecho en una propiedad y haz clic en Eliminar propiedad. O bien, selecciona una propiedad y presiona eliminar.

     Si tu conjunto de componentes o el componente principal solo contiene una propiedad de variante, eliminar la propiedad borrará todo el conjunto de componentes o el componente principal.

Valores

Para cambiar o reordenar los valores de una propiedad de variante:

1. Selecciona el conjunto de componentes o el componente principal.
2. Haz clic en junto a la propiedad variante para abrir el modal de edición de propiedades.
   • Cambiar: en la sección Valores, emplea los campos de texto para cambiar o actualizar los valores.
   • Reordenar: Pasa el cursor sobre un valor para mostrar los controles. Haz clic y arrastra para reordenar.

Área de pruebas de componentes en Dev Mode

Al seleccionar un componente o una instancia en Dev Mode, accederás a una vista previa del componente, un enlace al componente principal y enlaces a la documentación y a los recursos de desarrollo pertinentes.

El área de pruebas de componentes aparece en el panel Inspeccionar cuando se selecciona una instancia de componente. Usa el área de pruebas para experimentar con las diferentes propiedades del componente sin cambiar el diseño real. Para abrir el área de pruebas de componentes en Dev Mode:

1. Selecciona una instancia de componente en el lienzo.
2. Haz clic en Abrir en área de pruebas en el panel Inspeccionar.

Obtén más información sobre el uso de Dev Mode para inspeccionar diseños.