Antes de empezar

Quién puede utilizar esta función

Cualquiera persona con acceso de edición al archivo de Figma Design puede crear, gestionar y utilizar propiedades de componentes

Este artículo explica cómo crear y configurar las propiedades del componente. Aprende a editar instancias con las propiedades del componente.

Las propiedades de los componentes son los aspectos cambiantes de un componente. Te 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 una instancia se puede intercambiar y establecer instancias preferidas para el intercambio
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 partes de un sistema de diseño y facilitar el uso de los sistemas de diseño.

Cualquiera que utilice un componente con propiedades de componente puede ver una única serie de controles consolidados en el panel derecho, por lo que puede comprender de un vistazo lo que 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 anular capas individuales.

Explora el archivo de área de pruebas de propiedades del componente en la Comunidad de Figma.

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	Usa esto para...
Propiedad booleana	Indicar qué capas pueden tener su visibilidad de capa activada/desactivada, como un icono en un botón.
Propiedad de intercambio de instancias	Indicar qué instancias se pueden intercambiar; establece las instancias preferidas para intercambiar.
Propiedad de texto	Indicar qué contenido de texto se puede cambiar.
Propiedad variante	Definir las diferentes variaciones de un componente, como sus diferentes estados, tamaños o colores.

Consejo: comunica el uso previsto de un componente añadiendo descripciones y enlaces a la documentación. La documentación ayuda a quienes utilizan tu sistema de diseño a conocer el uso adecuado de las aplicaciones, las variantes y los estados, así como los requisitos de accesibilidad y contraste. Aprende a añadir documentación a los recursos de diseño.

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 icono.

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

Crea una propiedad booleana

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

Selecciona el componente principal o el conjunto de componentes.
En la barra lateral derecha, haz clic en en la sección Propiedades y selecciona Booleano del menú desplegable.
Desde el modal Crear propiedad del componente, usa los campos y los menús desplegables para configurar la propiedad.
- Dale un nombre a tu propiedad en el campo de texto.
- Establece el valor predeterminado como verdadero o falso. También puede hacer clic en Aplicar variable para aplicar una variable booleana existente, si está disponible.
Haz clic en Crear propiedad..

Aplica una propiedad booleana a un componente

Advertencia: antes de aplicar propiedades booleanas a los componentes, es importante considerar la necesidad de componentes interactivos o conexiones de creación de prototipos. Las conexiones de creación de prototipos deben conectarse entre dos objetos. Si conectas dos componentes y los consolidas usando propiedades booleanas, las conexiones de creación de prototipos se perderán.

Por ejemplo, tienes una propiedad booleana aplicada a un icono en un componente de botón para representar dos estados: un botón con un icono y otro sin él. No es posible configurar una interacción entre los dos porque estás utilizando un solo componente. Las interacciones del prototipo deben ser entre dos objetos individuales.

Selecciona una capa anidada en un componente principal o variante.
Si trabajas con variantes, puedes hacer clic en para habilitar la edición múltiple y así editar objetos coincidentes y acelerar tu flujo de trabajo. Aprende a editar múltiples variantes.
En la barra lateral derecha, busca la sección Apariencia y haz clic en el icono Aplicar variable/propiedad.
Elige una propiedad booleana de la lista. Cuando se aplique, verás una pastilla morada con el nombre de la propiedad en la barra lateral derecha.

Consejo: puedes crear y aplicar una propiedad booleana desde cualquier capa anidada en un componente principal o variante principal. Selecciona la capa anidada y busca la sección Apariencia, a continuación, haz clic en el icono Aplicar propiedad. Una vez que crees la propiedad, se aplicará a la capa seleccionada.

Propiedad de intercambio de instancias

La propiedad de intercambio de instancias te permite indicar qué instancias anidadas en un componente o variante principal 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 añadidas al archivo. También puede establecer instancias preferidas para que otros sepan a qué instancias pueden cambiar. Aprende a intercambiar componentes usando la propiedad de intercambio de instancias.

Crear una propiedad de intercambio de instancias

Selecciona el componente principal o el conjunto de componentes.
En la barra lateral derecha, haz clic en en la sección Propiedades y selecciona Intercambio de instancias del menú desplegable.
Desde el modal Crear propiedad del componente, usa los campos y los menús desplegables para configurar la propiedad.
- Dale un nombre a tu propiedad utilizando el campo de texto.
- Establezca 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 añadidas al archivo.
- Si lo deseas, configura cualquier instancia preferida para que otros sepan de qué componentes deben elegir al intercambiar la instancia.
Haz clic en Crear propiedad.

Aplicar una propiedad de intercambio de instancias a un componente

Selecciona una instancia anidada dentro de un componente principal o variante.
Si trabajas con variantes, puedes hacer clic en para habilitar la edición múltiple y así editar objetos coincidentes y acelerar tu flujo de trabajo. Aprende a editar múltiples variantes.
En la parte superior de la barra lateral derecha, haz clic en Aplicar propiedad de intercambio de instancias.
Elija una propiedad de instancia de la lista. Cuando se aplique, verás una pastilla morada con el nombre de la propiedad en la barra lateral derecha.

Consejo: puedes crear y aplicar una propiedad de intercambio de instancias desde cualquier instancia anidada dentro de un componente principal o variante principal. Selecciona la instancia anidada y haz clic en Aplicar/crear propiedad de intercambio de instancias en la parte superior de la barra lateral derecha. Una vez que crees la propiedad, se aplicará a la capa seleccionada.

Eligir 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 al comunicar qué componentes específicos pueden reemplazar a uno existente.

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

Para facilitar la búsqueda de estos 8 iconos y saber cuál se puede usar, los añades como valores preferidos. Ahora, cada vez que los diseñadores cambien el icono, tienen una lista seleccionada de recursos que saben que pueden usar.

Cuando se utiliza un componente con un valor preferido, aparece una lista de valores preferidos de forma predeterminada al abrir el menú de propiedades de intercambio de instancias.

Nota: si no deseas usar un valor preferido, haz clic en el menú desplegable o utiliza la barra de búsqueda de encima de la lista para encontrar otros componentes disponibles.

Para añadir valores preferidos a una instancia:

Empieza por editar su propiedad de intercambio de instancias existente o por crear una nueva.
Desde los modales respectivos, haz clic en en la sección Valores preferidos y marca las casillas de verificación junto a las instancias que quieres 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 propiedades de texto para indicar qué contenido de texto en un componente se puede editar. El contenido del texto puede editarse ya sea desde el panel derecho o en el lienzo.

Nota: Actualmente las propiedades del componente de texto no admiten texto enriquecido, como estilos de lista, superíndices y otras configuraciones de tipo. Aún puedes aplicar estas configuraciones a la capa de texto, pero sus formatos no se reflejarán en el panel de propiedades del componente en el panel derecho.

Si la capa de texto contiene un estilo de lista con viñetas o numerada, cambiar la cadena de texto desde el panel derecho eliminará el estilo de lista. Para conservarlo, actualiza la cadena desde el lienzo.

Crear una propiedad de texto

Selecciona el componente principal o el conjunto de componentes.
Haz clic en en la sección Propiedades en la barra lateral derecha y selecciona Texto del menú desplegable.
Desde el modal Crear propiedad del componente, usa los campos para configurar la propiedad.
- Dale un nombre a tu propiedad utilizando el campo de texto.
- Establece la cadena de texto predeterminada mediante el campo de texto valor. También puede hacer clic en Aplicar variable para aplicar una variable de cadena existente, si está disponible.
Haz clic en Crear propiedad.

Aplicar una propiedad de texto a un componente

Selecciona una capa de texto anidada en un componente principal o variante.
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.
Elige una propiedad de texto de la lista.

Consejo: puedes crear y aplicar una propiedad de texto desde cualquier capa de texto anidada dentro de un componente principal o variante principal.

Con la capa de texto anidada seleccionada, encuentra el campo de texto en la sección Texto de la barra lateral derecha.
Pasa el cursor sobre el campo de texto y haz clic en Aplicar variable/propiedad.
En el menú, haz clic en Crear variable/propiedad.
Desde el menú desplegable Crear, selecciona Propiedad. A continuación, asigna un nombre y un valor predeterminado a la propiedad.
Haz clic en Crear propiedad. Una vez que crees la propiedad, se aplicará a la capa seleccionada.

Propiedad variante

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

Una propiedad de variante te permite definir atributos de tus variantes, como estado, color o tamaño.

Un conjunto de componentes contiene múltiples variantes, y las variantes tienen atributos que pueden ser definidos por propiedades de variante. Las propiedades de variante son específicas para variantes y conjuntos de componentes, y no se pueden crear ni aplicar a componentes principales.

Aprende a crear variantes y conjuntos de componentes.

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

Nota: te recomendamos que revises el sistema de diseño existente antes de adoptar las propiedades de los componentes. De este modo, podrás decidir qué aspectos puedes reflejar como propiedades de los componentes y cuáles deben ser variantes.

Cambiar a una propiedad del componente diferente

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

En la barra lateral derecha, busca la sección correspondiente a la propiedad de componente que deseas cambiar.
- Propiedad de intercambio de instancias: parte superior de la barra lateral derecha.
- Propiedad de texto: parte superior de la barra lateral derecha en la sección Texto.
- Propiedad booleana: la sección Apariencia.
Haz clic en la píldora morada.
Selecciona una propiedad existente del mismo tipo.

Personalización de una propiedad de componente

Cambiar el valor predeterminado

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

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

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

Nota: El valor predeterminado de una propiedad variante viene determinado por la variante situada en la esquina superior izquierda de un conjunto de componentes. Aprende a cambiar la variante predeterminada de un conjunto de componentes.

Exponer instancias anidadas

Expón 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. Deberías cambiar el icono del botón predeterminado a un icono «enviar» y cambiar su texto. También deberías cambiar el estado del botón cancelar a un estado desactivado.

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.

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

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

Nota: Si tienes una instancia anidada expuesta con la visibilidad configurada como oculta en una propiedad booleana, cualquier propiedad de componente adjunta a la instancia también se ocultará.

Elegir instancias anidadas para exponer

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

Nota: La opción de exponer instancias anidadas solo está disponible si un componente principal:

ya tiene una instancia anidada expuesta, o
contiene instancias anidadas con propiedades de componentes aplicadas a ellas

Si no ves la opción Instancias anidadas, intenta aplicar primero una propiedad de componente a un componente anidado.

Desde el modal Exponer instancias anidadas, marca las casillas de las instancias que quieres revelar en el nivel superior.

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

Para eliminar las instancias anidadas para que no queden expuestas, sitúa 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 debe editarse y, por lo tanto, se puede ocultar.

Nota: las instancias simplificadas ocultarán ciertos nombres de capas, pero cualquiera con permisos puede editar en el archivo podrá seguir editando las capas.

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

Al utilizar 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 expandirlas y verlas. Puedes volver a contraerla haciendo clic fuera del panel de capas o seleccionando una capa diferente.

Gestionar una propiedad de componente

Después de crear las propiedades de los componentes y sus valores, puedes gestionarlos en cualquier momento. Cambiar nombre, reordenar, eliminar, cambiar valores predeterminados y mucho más.

Nota: Para usar componentes nuevos o actualizados en diferentes archivos, asegúrese de publicarlos en la biblioteca del equipo. Esto te permite compartirlos con otros usuarios o utilizarlos en otros archivos o proyectos. Aprende a publicar en la biblioteca del equipo.

Separar una propiedad

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

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

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

Nota: no es posible separar una propiedad variante de una capa anidada.

Cambiar el nombre, reordenar o eliminar

Propiedades

Para renombrar, reordenar o eliminar una propiedad de un componente existente:

Selecciona el componente principal o el conjunto de componentes.
Desde la sección Propiedades en la barra lateral derecha:
- Cambiar nombre: haz doble clic en el nombre de una propiedad. Escribe un nombre nuevo y, a continuación, pulsa return / enter o haz clic fuera del campo para aplicar.
- Reordenar: mantén el puntero sobre una propiedad para mostrar las asas. Haz clic y arrastra para reordenar, luego suelta para aplicar.
  
  Las propiedades variantes siempre se sitúan por encima de otros tipos de propiedades en la barra lateral derecha. Se pueden reordenar con otras propiedades variantes, pero no con otros tipos de propiedad.
- Eliminar: haz clic con el botón derecho en una propiedad y haz clic en Eliminar propiedad. O, selecciona una propiedad y pulsa suprimir.
  
  Si el conjunto de componentes o el componente principal solo contiene una propiedad variante, al eliminar la propiedad se eliminará todo el conjunto de componentes o el componente principal.

Valores

Para cambiar o reordenar los valores de una propiedad variante:

Selecciona conjunto de componentes o componente principal.
Haz clic en junto a la propiedad variante para abrir el modal de edición de propiedades.
- Cambiar: en la sección Valores, utiliza los campos de texto para cambiar o actualizar los valores.
- Reordenar: mantén el puntero sobre un valor para mostrar las asas. Haz clic y arrastra para reordenar.

Área de pruebas para componentes en Dev Mode

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

El área de pruebas para componentes aparece en el panel de inspección al seleccionar una instancia de componente. Aprovéchala para experimentar con las diferentes propiedades del componente sin necesidad de cambiar el diseño. Para abrir el área de pruebas para componentes en Dev Mode:

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

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