Падручнік: як ператварыць файлы Figma у SVG з элементамі Rect

Нядаўна з'явілася цікавая задача, змяніўшы карыстальніцкі SVG на праект Webflow для анімацыі.

Я падумаў, што нічога страшнага, адкрыў Figma, узяў зыходны код SVG, укінуў яго і... не спрацавала 😔

Даследуючы праблему, аказалася, што бібліятэка, якая анімуе SVG, працуе непасрэдна з элементамі rect ўнутры таго ж SVG. Зноў жа, я падумаў, без праблем :), давайце проста перайменуем усе пласты ў 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 хвілін кода і ўсе анімацыі працуюць, праца на будучыню зроблена.

Выснова:

калі вы не можаце знайсці цікавыя заданні, яны знойдуць вас самі. Аўтаматызаваць усё :)