Los/as diseñadores/as tenemos que aprender muchas cosas de los/as programadores/as, y una de ellas es su máxima Don’t repeat yourself: no te repitas.
Si hay alguna capa, o grupo de capas, que vas a repetir en tu diseño, crea un componente para poder reutilizarlo sin tener que volver a crearlo cada vez que lo quieras usar.
Los componentes en Figma nos dan mucho juego a la hora de crear interfaces de usuario y sistemas de diseño. Si creas componentes, ahorrarás un montón de tiempo y te ayudarán a mantener la coherencia en tus diseños. Vamos a ver cómo.
¿Qué es un componente?
Un componente es una capa o un grupo de capas que podemos reutilizar en nuestro diseño. Por ejemplo, el pie de página —que normalmente se repite en todas las páginas de una web— lo podemos convertir en un componente. Ahora vas a ver las ventajas.
Componente principal e instancias
El componente principal es el diseño que has creado y las instancias son las copias que has hecho de ese diseño para poder reutilizarlo.
La gran ventaja de los componentes es que una vez que los tienes creados, si modificas una propiedad del componente principal, se modifica automáticamente esa propiedad en todas las instancias que hayas creado.
Si nunca has creado un componente, te habrá pasado esto mil veces: has usado un mismo diseño en varias páginas de una web, por ejemplo el pie de página, y en algún momento has querido hacer una modificación y —¡oh, qué horror!— has tenido que hacer la misma modificación en todas las páginas, una a una.
Eso es un desastre terrorífico que te hace perder un montón de tiempo y además es aburridísimo. Nunca más.
Recuerda: siempre, siempre que sepas que vas a reutilizar un diseño en varias secciones de la web, crea un componente.
Como ves, además de diseñar mucho más deprisa, los componentes nos ayudan a mantener la coherencia y evitar errores.
Las instancias pueden tener distintos tamaños y otras modificaciones. Para estas diferencias se pueden crear variantes, que es un tema un poquito más avanzado y lo hemos tratado en este otro artículo, por si te quieres pasar a aprender más.
Cómo hacer un componente en Figma
Puedes crear un componente en Figma de varias maneras. Selecciona las capas (o grupo de capas) que quieras convertir en componente y después:
- Con el botón derecho, selecciona la opción Create component.
- Selecciona la opción Create component de la barra de herramientas.
- Usa el atajo de teclado:
- Mac: Opción + Comando + K
- Windows: Control + Alt + K
Visualmente puedes identificar los componentes en el panel de capas por el icono de los cuatro rombos. Además, las capas que lo componen estarán anidadas, así que podrás ver que se comporta como un grupo. Identificarás las instancias porque tienen un icono de rombo sencillo.
Es una buena práctica añadir una descripción del componente en la barra lateral de la derecha. Ya sabes que Figma es una herramienta colaborativa y así las demás personas que abran el archivo tendrán información adicional, que podrán consultar en el panel Inspect (la última pestaña de la barra lateral).
Crear muchos componentes a la vez
También está la opción de crear un montón de componentes a la vez: no tenemos que crear uno a uno. Para ello, selecciona varias capas o grupos de capas que quieras convertir en componente y, en la barra de herramientas, selecciona la opción Create multiple components.
Figma creará un componente para cada frame, grupo, operación booleana o trazado.
Esto viene fenomenal para cuando queremos crear componentes de un set de iconos, por ejemplo.
Me encanta que tengamos tantas opciones para ahorrar tiempo, ¡bien!
Cómo anular (override) propiedades
Si modificamos una propiedad en una instancia, cuando modifiquemos esa propiedad en el componente principal, esa propiedad ya no se verá afectada en la instancia.
Digamos que en principio prevalece lo que indiquemos en las instancias por encima de lo que configuremos en el componente.
Si modificamos una propiedad en el componente y esta propiedad no se ha modificado en la instancia, aunque esa instancia tenga alguna otra propiedad modificada, esta última modificación sí se aplicará a la instancia.
Qué jaleo, vamos a verlo mejor con un ejemplo sencillo…
Si en un componente decidimos modificar el color, todas las instancias cambiarán su color, excepto las instancias en las que previamente habíamos modificado el color.
Si en ese mismo componente decidimos modificar otra propiedad, por ejemplo el tamaño, todas las instancias modificarán su tamaño, también la que tenía un color diferente, ya que la propiedad del tamaño no se había anulado (override) en esa instancia.
Cómo aplicar anulaciones a un componente
A veces necesitas aplicar todas las modificaciones que has hecho en una determinada instancia a todas las demás instancias. Para esto, lo que debes hacer es aplicar esas anulaciones al componente principal.
Para conseguir esto, selecciona la instancia y, con el botón derecho, elige la opción Push overrides to main.
Resetear anulaciones
También puedes necesitar la opción inversa: devolver a una instancia las propiedades originales de su componente principal, eliminando todas las anulaciones. A esto se le llama Reset overrides.
Cómo desvincular una instancia
Para desvincular una instancia de su componente principal selecciona la opción Detach instance.
Cómo deshacer un componente
Si necesitas que un componente principal deje de serlo, por ejemplo si lo has creado por error, puedes deshacerlo así:
- Crea una instancia de ese componente
- Desvincula la instancia del componente principal con Detach instance
- Elimina el componente principal
Restaurar un componente
Si por error eliminas un componente principal, puedes restaurarlo seleccionando una de sus instancias y seleccionando la opción Restore component.
Encontrar el componente principal de una instancia
Cuando queremos cambiar alguna propiedad de un componente principal, podemos seleccionar una de sus instancias y seleccionar la opción Go to main component. De esta manera, Figma nos llevará al componente principal y, una vez realizados los cambios que queramos, podemos «volver a la instancia».
Cambiar una instancia por otra en un archivo
Esto lo hacemos mucho sobre todo con iconos y botones, es un caso típico.
Las instancias tienen un menú específico en el panel de opciones de la barra lateral derecha. Desde ese menú puedes buscar, previsualizar y cambiar una instancia por otra.
El menú de la instancia va a buscar instancias de componentes que estén en el mismo archivo o en la Team Library (si tienes la versión de pago de Figma).
Patrones de diseño con los que solemos crear un componente
En casi todos los proyectos que hacemos, solemos crear componentes con los típicos patrones de diseño. Estos son algunos patrones que se utilizan más de una vez en las interfaces de usuario:
- Encabezados
- Pies de página
- Carruseles
- Botones
- Iconos
- Menús
- Tooltips
- Elementos de formulario
- Cards
Si alguna vez vas a diseñar uno de estos patrones, ¡que te salten las alarmas! Porque es muy probable que te venga de perlas crear un componente.
Cosas chulas que se pueden hacer con los componentes
Crear simetrías
Crea un componente y duplícalo para crear una instancia. Ahora voltea la instancia (o sea, flípala, para que se vea en espejo).
Los cambios que hagas en el componente se harán también en la instancia, pero en espejo, ya que la has volteado. Así puedes crear simetrías muy fácilmente, ¡y es divertido!
Crear mosaicos
Crea un patrón repetitivo y crea un componente con él. Si creas varias instancias, podrás crear mosaicos de una forma muy sencilla y visual.
Cómo organizar los componentes en Figma
Los componentes se organizan todos por páginas en el panel Assets. Desde ese panel puedes acceder a todos los componentes y arrastrarlos a tu diseño para crear una instancia.
Sin embargo, como ya comentamos en el artículo Cómo preparar un Figma para desarrollo, yo te recomiendo poner todos los componentes en una página, para que las personas que accedan a tu archivo los puedan ver mejor (y a tamaño real, porque en el panel de Assets se ven en miniatura).
Organiza los componentes por colecciones en distintos frames para tenerlos mejor localizados.
Nombrar componentes
Poner un nombre descriptivo a tus componentes va a ser muy útil a la hora de compartir tu diseño con el equipo de desarrollo y también cuando quieras cambiar una instancia por otra.
Es una buena práctica usar un nombre separado por barras, por ejemplo así:
- Botón / CTA / default
- Botón / CTA / hover
Hablamos más sobre esto en el artículo sobre variants.
Compartir componentes
Un componente puede pertenecer a un archivo o a un equipo. Si creas un componente en un archivo, podrás reutilizarlo en todas las páginas de ese archivo.
Para compartir un componente con un equipo, y que esté disponible para usar en todos los archivos y proyectos de ese equipo, tienes que añadirlo a la Team Library: esta opción solo es posible con plan de pago de Figma.
Con la opción de pago, todos los archivos de un mismo equipo tienen acceso a todos los componentes que haya en la Team Library. Podrás arrastrar a tus archivos los componentes que vayas necesitando y modificarlos como te convenga.
Exportar componentes a Zeplin
Si trabajas con un equipo de desarrollo que tenga costumbre de usar Zeplin, que sepas que puedes exportar los componentes de Figma a Zeplin.
Para ello tienes que instalar el plugin de Zeplin en Figma y tener la aplicación de Zeplin instalada en tu equipo. Una vez que exportes los componentes, se crearán en Zeplin los assets de todas las instancias.
Yo personalmente no uso Zeplin, porque solo con Figma es suficiente para hacer todo el paso de Figma a código, lo que se conoce como developer handoff.
Si quieres saber más sobre componentes en Figma
¡No te quedes aquí! Apúntate a la newsletter de 3ymedia School para que te avisemos cuando esté listo el curso de Figma (ah, y tendrás un descuento por ser schooler).
