Samouczek: Jak przekształcić pliki Figma do formatu SVG za pomocą elementów Rect

Niedawno pojawiło się ciekawe zadanie: zmiana niestandardowego pliku SVG na projekt Webflow w celu animacji.

Pomyślałem, że to nic wielkiego, otworzyłem Figmę, wziąłem kod źródłowy SVG, wrzuciłem go i... nie działa 😔

Badając problem, okazało się, że biblioteka, która animuje SVG, działa bezpośrednio z elementami rect wewnątrz tego samego SVG. Cóż, znowu nie ma problemu, pomyślałem :), po prostu zmieńmy nazwy wszystkich warstw na Rect i będziemy szczęśliwi.

Zmieniono nazwę. Spojrzałem na kod źródłowy SVG i nie widzę rect :(

Następnie usiadłem o wiele wygodniej na swoim krześle i zacząłem efektywniej prowadzić badania.

Okazało się, że aby SVG mógł zrozumieć elementy, które chcemy animować jako recr musimy je narysować... werble - za pomocą klatek.

Rozpocząłem testy i wszystko działa.

Ale teraz pojawił się kolejny problem:

Jak zautomatyzować ten proces?

Mamy już sporo rysunków i nie chcemy ich przerabiać.

No cóż, skoro pracujemy w ramkach, znaleźliśmy rozwiązanie. Musimy stworzyć wtyczkę , która otoczy wszystkie elementy ramkami.

Kod źródłowy wtyczki:

 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();

lub pobierz projekt na GitHub :-)

Wynik:

30 minut kodu i wszystkie animacje gotowe, praca nad przyszłością skończona.

Wniosek:

jeśli nie znajdziesz interesujących zadań, oni sami cię znajdą. Automatyzuj wszystko :)