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 dentro del mismo SVG. Bueno, nuevamente no hay problema, pensé :), cambiemos el nombre de todas las capas a Rect y estaremos felices. rect 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 necesitamos dibujarlos... redoble de tambores - a través de fotogramas. recr 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 que envolverá todos los elementos en marcos. complemento 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 :)
