Edición múltiple en Figma: qué es y cómo utilizarla
La edición múltiple (multi-edit en inglés) de Figma es la típica funcionalidad que no sabes que necesitas hasta que no la pruebas.
Como ellos mismos dicen: la forma en que debería haber sido pero no fue, pero ahora es (the way it should have been but wasn’t but now is).
Lo he estado probando junto con compañeros del trabajo y la sensación era unánime: ahora nos sentimos más superhéroes 🦸🏽♀️
- Qué es el multi-edit (edición múltiple) en Figma
- Conceptos básicos de la edición múltiple: identificar objetos y seleccionarlos
- Edición múltiple de formas
- Edición múltiple de textos
- Edición múltiple y Auto Layout
- Edición múltiple en componentes y variants
¡Vamos allá!
Qué es el multi-edit (edición múltiple) en Figma
El multi-edit de Figma esla capacidad de seleccionar y editar múltiples objetos en diferentes frames y componentes a la vez.
Por ejemplo, podrás:
- Actualizar el contenido de una capa de texto, que se actualizará automáticamente en otras instancias
- Escalar varios objetos a la vez y modificar sus características
- Copiar y pegar elementos en varios Frames
- Añadir Auto Layout a múltiples objetos a la vez
- Alinear varios objetos a la vez en relación al contenedor (y no a un objeto clave, como sucedía hasta ahora)
- Modificar componentes y Variants para añadir rápidamente assets
En resumen, te permitirá simplificar las tareas repetitivas, diseñar más rápido y asegurar de forma más sencilla la consistencia de diseño en los proyectos.
Conceptos básicos de la edición múltiple: identificar objetos y seleccionarlos
Puedes utilizar multi-edit en Figma de tres maneras:
- Utilizando el nuevo icono que aparecerá en la barra de herramientas cuando selecciones un objeto
- Con el atajo de teclado:
- Mac: CMD ⌘ + OPT ⌥ + A
- Windows: ALT + CTRL ⌃ + A
- Mientras pulsas SHIFT ⇧, haz clic con el cursor y arrástralo para seleccionar varios elementos. Los que quedarán seleccionados son los que coincidan.
Es importante que recuerdes que el multi-edit funcione adecuadamente, es necesario que:
- Aquello que quieras seleccionar esté dentro de un Frame o un grupo. No funcionará si la capa de texto o el objeto están directamente en el Canvas.
- Si utilizas Sections, asegúrate de que estás diseñando dentro de Frames.
- Las capas deben tener el mismo nombre. Aunque los objetos sean visualmente iguales, si el nombre no coincide, no se seleccionarán
En el vídeo de abajo verás cómo funciona lo que te he contado en los dos puntos anteriores.
Pero no te preocupes demasiado, porque hay un truco muy bueno: si quieres ver qué elementos se seleccionarán, haz clic en uno y pulsa SHIFT ⇧ en el teclado: se añadirá un pequeño borde azul en aquellos elementos que pueda seleccionar.
Edición múltiple de formas
Empezaremos con los objetos, que es lo más sencillo. Una vez tengas seleccionados varios, podrás cambiar fácilmente varias características.
Alineación
Ahora hay dos formas diferentes de alinear. Una es la que ya existía: se alinea el objeto seleccionado en relación a otro objeto clave (key object).
Con la edición múltiple podrás alinear los objetos seleccionados en relación al Frame, evitando así que los elementos se superpongan. Para hacerlo, pulsa SHIFT ⇧ cuando tengas los objetos seleccionados y estés encima del panel de Align.
Escala y rotación
Para cambiar una de estas dos características (o ambas), selecciona todos los objetos que necesites y modifícalos en el panel correspondiente.
Truco: si los elementos tienen diferentes ángulos y te aparece el texto de Mixed, puedes modificar la rotación igualmente manteniendo los ángulos diferentes. Simplemente añade una cifra al Mixed. Por ejemplo, Mixed + 45.
Copiar y pegar de forma múltiple
Me da la impresión de que esta es una de las funcionalidades que más utilizaremos: con la edición múltiple ahora podrás copiar varios objetos y pegarlos en varios Frames a la vez.
- Selecciona con SHIFT ⇧ (o con la selección múltiple, si es que comparten nombre)
- Copia (CMD ⌘ + C o CTRL ⌃ + C en Windows)
- Selecciona los Frames de destino con SHIFT ⇧
- Pega los objetos (CMD ⌘ + V o CTRL ⌃ + V en Windows)
Edición múltiple de textos
Hay ocasiones en las que querrás cambiar un texto concreto de un conjunto de componentes o de Frames. Hasta ahora esto había que hacerlo a mano, una tarea que podía ser muy tediosa.
Con la edición múltiple es más sencillo:
- Selecciona la capa de texto que quieras modificar
- Haz clic en el icono de selección múltiple de la barra de herramientas o utiliza el atajo de teclado para seleccionar las otras capas de texto
- Pulsa ENTER o haz clic en el icono que aparecerá en la barra de herramientas
- Escribe el texto que quieras 🙂
Edición múltiple y Auto Layout
Como era de esperar, la edición múltiple también funciona en elementos que tengan Auto Layout. El funcionamiento es el que ya has ido viendo: selecciona uno de los elementos, haz una selección múltiple y cambia fácilmente la posición de varios objetos a la vez con las flechas del teclado.
Edición múltiple en componentes y Variants
Si no has trabajado con Variants, te recomiendo que leas primero el artículo en el que te cuento todos los detalles.
Este es otro caso de uso bastante habitual:
¿Qué pasa si tienes uno componente con muchas variantes y quieres añadir un icono?
Hasta ahora teníamos que hacerlo manualmente, pero esto ya no será necesario con la edición múltiple de Figma:
- Haz clic en una de las Variants y pulsa Q para seleccionarlas todas
- Busca el Asset que quieras añadir en tu biblioteca de componentes y arrástralo encima de cualquier Variant
- Si tiene Auto Layout, podrás cambiar fácilmente la posición de los elementos.
Apuntes finales
Te animo a que abras Figma y empieces a experimentar con la funcionalidad de multi-edit. Puede que al principio cueste un poco cogerle el truco y familarizarte con los atajos de teclado, pero verás que a poco que tengas el archivo bien organizado te ahorrará mucho tiempo y clics.