Tutorial: Cómo convertir archivos Figma a SVG con elementos Rect

Recientemente llegó una tarea interesante, cambiar SVG personalizado a un proyecto Webflow para la animación.

Pensé que no era gran cosa, abrí una Figma, tomé el código fuente del SVG, lo tiré y... no funcionó 😔

Al investigar el problema, resultó que la biblioteca que anima SVG trabaja directamente con elementos rect dentro del mismo SVG. Bueno, nuevamente no hay problema, pensé :), cambiemos el nombre de todas las capas a Rect y estaremos felices.

Renombrado, miré el código fuente SVG y no veo rect :(

Luego me senté mucho más cómodamente en mi silla y comencé a investigar de manera más eficiente.

Resultó que para que SVG entienda los elementos que queremos animar como recr necesitamos dibujarlos... redoble de tambores - a través de fotogramas.

Comencé a probar y todo funciona.

Pero ahora hay otro problema:

¿Cómo automatizar este proceso?

Ya tenemos muchas ilustraciones dibujadas y no queremos rehacerlas.

Bueno, como estamos trabajando con marcos, hemos encontrado una salida: necesitamos crear el complemento que envolverá todos los elementos en marcos.

El código fuente del complemento:

 const selectedNodes = figma.currentPage.selection; if (selectedNodes.length === 0) { figma.notify("Please select at least one layer."); } else { selectedNodes.forEach(node => { const frame = figma.createFrame(); frame.resize(node.width, node.height); frame.x = node.x; frame.y = node.y; frame.appendChild(node); node.x = 0; node.y = 0; }); figma.notify("All selected layers are wrapped in frames!"); } figma.closePlugin();

o descarga el proyecto en GitHub :-)

Resultado:

30 minutos de código y todas las animaciones funcionan, el trabajo para el futuro está hecho.

Conclusión:

Si no encuentras tareas interesantes, ellas te encontrarán por sí mismas. Automatiza todo :)