Crear e insertar instancias de componentes

Quién puede utilizar esta función

Disponible en todos los planes

Cualquiera que tenga acceso de edición a un archivo en un equipo de pago tiene acceso al área de pruebas de componentes

Cualquiera con acceso para ver el archivo puede usar componentes de esa biblioteca

¿Eres principiante en componentes? Guía de estilo y bibliotecas de componentes →

Los componentes son elementos de la IU que puedes reutilizar en tus diseños.

• El componente principal define las propiedades del elemento.
• La instancia es una copia del componente que puedes reutilizar en tus diseños.

Hay varias maneras de crear e insertar instancias de componentes en tus diseños:

• Desde el panel de recursos en la barra lateral izquierda
• Desde el modal de detalles del componente, accesible desde el panel de recursos
• Usando la pestaña de recursos del menú de acciones
• Al copiar o duplicar una instancia

Panel de recursos

El panel de recursos en la barra lateral izquierda te permite buscar componentes para añadir a tu archivo. Puedes elegir qué bibliotecas están disponibles en el panel de recursos.

Para abrir el panel de recursos:

1. Selecciona la pestaña Recursos en la barra lateral izquierda, o usa el atajo:
   • Mac: ⌥ Opción 2
   • Windows: Alt 2
2. Selecciona una biblioteca con el componente que te gustaría usar
3. Encuentra el componente que quieres usar
4. Haz clic y arrastra el componente al lienzo para crear una instancia de ese componente.

• Gestionar bibliotecas para tus borradores
• Gestionar bibliotecas en archivos de diseño
• Gestionar bibliotecas en equipo
• Gestionar bibliotecas de organización predeterminadas

Modal de detalles del componente

El modal de detalles del componente te muestra:

• La documentación del componente
• La biblioteca donde reside
• Una vista previa del estado predeterminado del componente

Si tienes acceso de edición a una biblioteca en un equipo de pago, tendrás acceso adicional a un área de pruebas de componentes. 

Desde el área de pruebas del componente, puedes:

• Obtener una vista previa de las variantes del componente
• Ver y configurar propiedades del componente
• Ver y establecer propiedades del componente anidado, si las instancias anidadas están expuestas
• Ver y cambiar los modos variables para cualquier variable aplicada al componente
• Insertar el componente en el lienzo

1. Selecciona la pestaña Recursos en la barra lateral izquierda, o utiliza el atajo:
   • Mac: ⌥ Opción2
   • Windows: Alt2
2. Encuentra el componente y selecciónalo para abrir el modal de detalles del componente.
3. Utiliza los controles para configurar tu componente.
4. Para insertar la instancia, haz clic en Insertar instancia o arrastra la vista previa al lienzo.

Inserción rápida desde el menú de acciones

Inserta instancias de componentes desde tu teclado usando la inserción rápida. La inserción rápida abre el menú de acciones donde puedes encontrar y ver componentes de bibliotecas que se han añadido al archivo.

1. Usa el atajo Mayús I para abrir la inserción rápida.
2. Usa la barra de búsqueda para encontrar un componente determinado.

Copiar o duplicar una instancia en el lienzo

Duplicar usando el atajo de teclado

Si estás trabajando en el mismo archivo, puedes duplicar un componente para crear una instancia. Duplica usando el atajo de teclado:

• Mac: ⌘ Comando D
• Windows: Ctrl D

Arrastrar para copiar

También puedes arrastrar para copiar un componente dentro del mismo archivo:

1. Mantén presionada la tecla ⌥ Opción para Mac o Alt para Windows y arrastra para crear una instancia.
2. Suelta el clic antes de soltar la tecla modificadora. De lo contrario, Figma moverá el componente original en lugar de duplicarlo.

Copiar y pegar

Puedes copiar y pegar cualquier componente dentro del mismo archivo para crear una instancia.

Las instancias de componentes y los componentes principales publicados se pueden copiar y pegar entre archivos.

• Mac: ⌘ ComandoC y ⌘ ComandoV
• Windows: CtrlC y CtrlV