Нядаўна з'явілася цікавая задача, змяніўшы карыстальніцкі SVG на праект Webflow для анімацыі. Я падумаў, што нічога страшнага, адкрыў Figma, узяў зыходны код SVG, укінуў яго і... 😔 не спрацавала Даследуючы праблему, аказалася, што бібліятэка, якая анімуе SVG, працуе непасрэдна з элементамі ўнутры таго ж SVG. Зноў жа, я падумаў, без праблем :), давайце проста перайменуем усе пласты ў Rect, і мы будзем шчаслівыя. rect Перайменаваны, я паглядзеў зыходны код SVG і не бачу :( rect Затым я значна зручней сеў у крэсла і пачаў даследаваць больш эфектыўна. Высветлілася, што для таго, каб SVG зразумеў элементы, якія мы хочам аніміраваць як нам трэба намаляваць іх... барабанная дроб - праз кадры. recr Пачаў тэставаць, і ўсё працуе. Але зараз ёсць іншая праблема: Як аўтаматызаваць гэты працэс? У нас ужо шмат намаляваных ілюстрацый, і мы не хочам іх перарабляць. Што ж, раз мы працуем у Frames, то знайшлі выйсце, трэба стварыць , які будзе абгортваць усе элементы ў фрэймы. плагін Зыходны код плагіна: 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(); або спампаваць праект на :-) GitHub вынік: 30 хвілін кода і ўсе анімацыі працуюць, праца на будучыню зроблена. Выснова: калі вы не можаце знайсці цікавыя заданні, яны знойдуць вас самі. Аўтаматызаваць усё :)
