Quién puede utilizar esta función
Disponible en todos los planes
Cualquier persona con acceso de edición a un archivo en un equipo de pago puede acceder al área de pruebas del componente
Cualquier persona con acceso puede ver al archivo puede usar los componentes de esa biblioteca
¿Recién empiezas con los componentes? Guía de estilo y bibliotecas de componentes →
Los componentes son elementos de UI 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.
Para crear e insertar instancias de componentes en tus diseños, prueba las siguientes maneras:
- Con el panel de recursos en la barra lateral izquierda.
- Con el modal de detalles del componente, accesible desde el panel de recursos.
- Usa la pestaña de recursos del menú de acciones.
- Al copiar o duplicar una instancia.
Consejo: Puedes entregar instancias de componente para desarrollo sin reorganizar tu archivo marcando las instancias como ready for dev en Dev Mode →
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, haz lo siguiente:
- Selecciona la pestaña Recursos en la barra lateral izquierda, o usa el siguiente atajo:
- Mac: ⌥ Opción 2
- Windows: Alt 2
- Selecciona una biblioteca con el componente que deseas utilizar.
- Elige el componente.
- Haz clic y arrástralo al lienzo para crear una instancia de ese componente.
Consejo: Puedes personalizar la apariencia de la pestaña de recursos para que se adapte a tus preferencias. Haz clic en para alternar entre una vista de cuadrícula o de lista, y mostrar u ocultar las subcarpetas.
Nota: ¿No encuentras la biblioteca que necesitas en el panel de recursos? Haz clic en para explorar las bibliotecas disponibles en tu equipo u organización y agregarlas al archivo.
- Gestiona las bibliotecas para tus borradores
- Gestiona las bibliotecas en archivos de diseño
- Administra las bibliotecas en equipos
- Gestiona las bibliotecas predeterminadas de la organización
Modal de detalles del componente
El modal de detalles del componente te muestra lo siguiente:
- la documentación del componente,
- la biblioteca en la que se encuentra,
- una vista previa del estado predeterminado del componente.
Si tienes acceso de edición a una biblioteca en un equipo de pago, también tendrás acceso a un área de pruebas de componentes.
Desde el área de pruebas del componente, puedes hacer lo siguiente:
- Tener una vista previa de las variantes del componente.
- Ver y establecer propiedades del componente.
- Ver y establecer propiedades del componente anidadas, si se exponen instancias anidadas.
- Ver y cambiar los modos de variables para cualquier variable aplicada al componente.
- Insertar el componente en el lienzo.
- Selecciona la pestaña recursos en la barra lateral izquierda, o utiliza el atajo correspondiente:
- Mac: ⌥ Opción2
- Windows: Alt2
- Encuentra el componente y selecciónalo para abrir el modal de detalles del componente.
- Usa los controles para configurar tu componente.
- 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 utilizando 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 agregado al archivo.
- Usa el atajo Mayús I para abrir la inserción rápida.
- Usa la barra búsqueda para encontrar un componente específico.
Consejo: ¿Necesitas localizar un componente principal desde una de sus instancias? Haz clic derecho en cualquier instancia y selecciona Ir al componente principal o usa el atajo de teclado correspondiente.
- Mac: ^ Control⌥ Opción⌘ Comandok
- Windows: ControlAltMayúsk
Aprende más sobre cómo encontrar los componentes principales.
Copiar o duplicar una instancia en el lienzo
Duplica usando el atajo de teclado
Si estás trabajando en el mismo archivo, puedes duplicar un componente para crear una instancia. Duplicar usando el atajo de teclado:
- Mac: ⌘ Comando D
- Windows: Ctrl D
Arrastrado para copiar
También puedes arrastrar para copiar un componente dentro del mismo archivo:
- Mantén presionada la tecla ⌥ Opción para Mac o Alt para Windows y arrastra para crear una instancia.
- Suelta el clic antes de dejar la tecla modificadora. De lo contrario, Figma moverá el componente original en lugar de duplicarlo.
Copiado y pegado
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