Vídeo tutorial: sincronizar variantes de componentes en Figma con una hoja de cálculo
Este vídeo explica cómo sincronizar variantes de componentes en Figma usando una hoja de cálculo con el plugin CopyDoc.
Paso 1: configurar las variantes de tu capa de componente en Figma
Antes de sincronizar tu hoja de cálculo para cambiar variantes de componentes, primero tienes que configurar tu conjunto de componentes de Figma con variantes como capa de Figma siguiendo estos pasos (como se ve en el vídeo de arriba).
- Crea una nueva capa de componente de Figma y dale un nombre que coincida con el encabezado de tu hoja de cálculo (por ejemplo, #Tag)
- Haz clic derecho en la capa de componente de Figma, pasa el cursor por Main component y haz clic en Add variant para crear un nuevo conjunto de componentes de Figma.
- Añade tantas variantes nuevas como necesites haciendo clic en el botón con el icono + de la parte inferior de la capa del conjunto de componentes de Figma (cuando esté seleccionada) y cambia el estilo de cada una de las nuevas variantes (por ejemplo, cambiando los fondos o los colores, etc.).
- Cuando hayas creado las variantes de tu componente, puedes personalizar los nombres de la propiedad y de las variantes, renombrando los valores predeterminados de Figma para que sea más fácil identificarlos y usarlos en tu hoja de cálculo (por ejemplo, renombrando "Property 1" como "Genre" y "Variant 1" como "Synthwave").
- Ve al panel Assets de Figma, arrastra y suelta tu nuevo componente de Figma (por ejemplo, #Tag) en tu archivo de Figma y muévelo a los frames de Figma que quieras sincronizar desde una hoja de cálculo.
- Sigue las instrucciones del paso 2 que tienes a continuación para cambiar automáticamente la opción de variante de tu componente sincronizando filas de una hoja de cálculo con tus frames de Figma.
Paso 2: cambiar variantes sincronizando tu hoja de cálculo
Igual que al sincronizar contenido de texto normal, para cambiar variantes desde una hoja de cálculo primero tienes que añadir el nombre de tu capa de componente (por ejemplo, Tag) como nuevo valor de columna de encabezado en la primera fila de tu hoja de cálculo.
Después, copia y pega en las filas siguientes de esa misma columna el nombre de la propiedad y de la variante que ves al hacer doble clic en tu capa de variante de Figma en la barra lateral. Este valor lleva un signo igual = (por ejemplo, Genre=Synthwave) que separa el nombre de la propiedad y el nombre de la variante, como en el ejemplo de abajo (y como se ve en el vídeo de arriba).
| #Tag |
|---|
| Genre=Synthwave |
| Genre=Outrun |
| Genre=Vaporwave |
| Genre=Darksynth |
Al sincronizar la hoja de cálculo con Figma, el valor de variante de las capas de componente de Figma con el nombre correspondiente (por ejemplo, #Tag) se cambiará automáticamente según el valor de variante que hayas indicado en las filas de tu hoja de cálculo.
También puedes sincronizar a la vez, de forma normal, contenido de texto o de imagen para otras capas desde la misma hoja de cálculo creando columnas adicionales para ellas.