En los últimos años, Figma ha crecido rápidamente en popularidad, y no es de extrañar. El software gratuito basado en la nube es fácilmente accesible en todos los dispositivos y no requiere cuotas ni descargas. Desde el diseño de interfaces de aplicaciones móviles hasta la creación de publicaciones en redes sociales, con Figma puede experimentar con todo tipo de funciones de diseño gráfico y aumentar sus habilidades.
Para una mayor consistencia en sus diseños, puede considerar el uso de componentes en su trabajo. Los componentes son elementos de la interfaz de usuario (UI) que se pueden usar en varios archivos en Figma. A menudo, estos pueden ser una gran adición a sus diseños y mejorar su calidad general.
Si es nuevo en Figma o lo ha estado usando por un tiempo y no está seguro de cómo usar los componentes con éxito, estamos aquí para ayudarlo.
En este artículo, exploraremos cómo usar los componentes de Figma y cómo pueden ayudarlo a mejorar su trabajo.
Si quieres saber más, sigue leyendo.
Cómo usar componentes en Figma
Dominar el uso de componentes puede ayudarlo con la organización y la coherencia al trabajar con Figma. Estos elementos de la interfaz de usuario se pueden usar una y otra vez en varios proyectos de diseño en los que podría estar trabajando. Un componente puede consistir en un icono, un botón, etc., según su proyecto.
El beneficio de introducir componentes en su experiencia con Figma es que le ahorra mucho tiempo. Cualquier cambio que pueda realizar en un componente se actualiza automáticamente en los demás. Esto puede ser especialmente útil si tiene un plazo ajustado o está colaborando con otros diseñadores y desea acelerar su flujo de trabajo.
Para empezar, notará que hay dos barras laterales a cada lado del lienzo principal que está usando. Puede usar las herramientas en cualquiera de estas barras laterales para realizar cambios en su proyecto.
La barra lateral del lado derecho le da acceso a todas las configuraciones del prototipo y le permite ajustar o cambiar las propiedades de sus componentes. Sin embargo, la barra lateral izquierda le muestra las capas, los activos y las páginas utilizadas en su proyecto. Esto se llama el "Panel de capas".
Los componentes deben introducirse en su trabajo desde el principio. Le ayudan a mantener la coherencia de sus diseños y le permiten acelerar la velocidad a la que realiza cambios en sus proyectos. Hay dos elementos clave de un componente:
- El componente principal (o principal) (icono de diamante cuádruple)
- Un componente de instancia (icono de diamante único)
Compositores principaux
Antes que nada, primero debe crear el componente principal. Para hacer esto, siga estos pasos:
- Haga clic derecho en su capa, grupo o marco.
- Seleccione "Crear componente".
- En el lado izquierdo de la pantalla, verá un menú desplegable que dice "Componente". Haz click en eso.
- Desde aquí, notará un menú donde puede realizar cambios en los estilos de sus componentes y rediseñar todos los proyectos.
Otra forma de crear un componente maestro es usar atajos:
- Opciones + Comando + K para Mac
- Ctrl + Alt + K para Windows
Por supuesto, este método solo funciona si usas Figma en una PC.
Componentes instantáneos
Un componente instantáneo es una copia de su componente principal. Cuando el componente principal se modifica de alguna manera, la instancia se actualiza automáticamente para que coincida con los cambios realizados. Si está creando un sitio web, esta herramienta puede ser especialmente útil y ahorrarle mucho tiempo. Por ejemplo, no habría tiempo para acceder manualmente a todos sus componentes para repetir los mismos cambios. En cambio, Figma los cambia todos por ti.
Puede haber ocasiones en las que haya creado varias instancias y desee volver a su componente principal para poder editar rápidamente todos sus componentes. Para acceder a su componente principal, siga estos pasos:
- Haga clic derecho en cualquier instancia.
- Haga clic en "Ir al componente principal".
- El componente principal aparecerá en la barra lateral del lado izquierdo.
Mientras que hacer componentes uno a la vez es relativamente sencillo; puede acelerar las cosas haciéndolas a granel. Para hacerlo, sigue estos pasos:
- En su "Panel de capas", elija las capas en las que desea crear componentes.
- Haga clic en el icono de la flecha hacia abajo junto al icono del componente principal en el "Panel de capas".
- Seleccione "Crear múltiples componentes" de las opciones disponibles.
- A partir de ahí, Figma creará un componente para cada capa ráster.
Preguntas frecuentes adicionales
¿Cómo reemplazo o separo una instancia?
Puede haber ocasiones en las que desee realizar cambios en las propiedades de una instancia en particular sin cambiar todas las demás. Se pueden hacer variaciones de diferentes componentes. En Figma, esto se llama "sobreimpulso".
Una vez que reemplace una instancia, los cambios en el componente principal no lo afectarán. Para hacer esto, vea los pasos a continuación:
1. Haga clic en el componente de su instancia.
2. En el panel Propiedades en el lado derecho de su pantalla, seleccione "Componente".
3. En el menú desplegable que aparece, elija "Separar instancia".
Si desea borrar una anulación, seleccione el componente, luego elija "Restablecer instancia" en la barra central superior de su pantalla.
¿Qué sucede si elimino accidentalmente mi componente principal?
Cuando pasa todo el día editando contenido, a veces puede arrastrar y eliminar accidentalmente algo importante, como su componente principal. No temas, para la restauración, es tan fácil como 1-2-3. Simplemente siga estos pasos básicos para recuperar ese componente central que falta:
1. Navegue a una de las Instancias del componente.
2. En el panel Propiedades en el lado derecho de la pantalla, seleccione "Restaurar componente maestro".
3. El componente principal aparecerá inmediatamente.
¿Cómo agrego una descripción para mis componentes?
Al crear sus componentes, agregar una descripción y un enlace de documentación a cada uno puede ayudarlo a navegar mejor por su proyecto. También es útil para cualquier colaborador con el que trabaje tener acceso a notas adicionales. Para agregar una descripción, vaya al panel Propiedades en el lado derecho de la página y seleccione "Agregar descripción".
Una vez que haya hecho esto, todos los espectadores externos pueden acceder a esta información yendo al "Panel de inspección" en la barra lateral derecha.
¿Cómo importo componentes a Figma?
Puede importar todo tipo de archivos en un componente de Figma. La forma más fácil de hacerlo es desde su escritorio. Solo sigue estos pasos:
1. En Figma, abra la página donde desea cargar un archivo.
2. Desde sus archivos, seleccione el archivo específico que desea usar.
3. Arrastra y suelta el archivo seleccionado en tu página de Figma.
4. Cuando termine, haga clic en "Listo".
El camino al éxito
Figma es una gran herramienta para usar tanto si eres nuevo en el diseño como si llevas años en el juego. El software ofrece un sistema de edición para principiantes donde los diseñadores pueden crear contenido desde cero o usar la ayuda de una plantilla si es necesario.
Comprender cómo usar los componentes con éxito en Figma puede ahorrarle mucho tiempo al realizar un proyecto de diseño. Al aprender a crear un sistema de componentes de alta calidad, puede crecer como diseñador. No solo eso, sino que también puede ayudarlo a mantener un flujo de trabajo constante a lo largo de su viaje creativo y facilitar que todos los futuros colaboradores encuentren su trabajo.
¿Has probado a usar Figma para tus proyectos creativos? ¿Cómo encontraste el uso de componentes? Háganos saber más sobre su experiencia en la sección de comentarios a continuación.
